(wiki) add cloc chart

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "files.associations": {
-    "*.mdx": "markdown"
+    // "*.mdx": "markdown"
   },
   "ltex.language": "en-US"
 }

package.json

@@ -14,6 +14,7 @@
     "@astrojs/solid-js": "^2.2.0",
     "astro": "^2.6.1",
     "astro-pagefind": "^1.2.0",
+    "chart.js": "^4.3.0",
     "dayjs": "^1.11.8",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   astro-pagefind:
     specifier: ^1.2.0
     version: 1.2.0(astro@2.6.1)
+  chart.js:
+    specifier: ^4.3.0
+    version: 4.3.0
   dayjs:
     specifier: ^1.11.8
     version: 1.11.8
@@ -718,6 +721,10 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: false
 
+  /@kurkle/color@0.3.2:
+    resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
+    dev: false
+
   /@ljharb/has-package-exports-patterns@0.0.2:
     resolution: {integrity: sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==}
     dev: false
@@ -1268,6 +1275,13 @@ packages:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
     dev: false
 
+  /chart.js@4.3.0:
+    resolution: {integrity: sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==}
+    engines: {pnpm: '>=7'}
+    dependencies:
+      '@kurkle/color': 0.3.2
+    dev: false
+
   /chokidar@3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}

src/assets/wiki/ProjectSizeChart.tsx

@@ -0,0 +1,51 @@
+import { Maybe } from "purify-ts";
+import { onMount } from "solid-js";
+import Chart from "chart.js/auto";
+
+
+const data = {
+  labels: ["June"],
+  datasets: [
+    {
+      label: "Markdown",
+      data: [2455],
+    },
+    {
+      label: "SCSS",
+      data: [1138],
+    },
+    {
+      label: "TypeScript",
+      data: [1011],
+    },
+    {
+      label: "Astro",
+      data: [946]
+    }
+  ]
+};
+
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: {
+      beginAtZero: true,
+    }
+  }
+};
+
+export default function ProjectSizeChart() {
+
+  onMount(() => Maybe
+    .fromNullable(document.getElementById("project-size-chart") as HTMLCanvasElement)
+    .chainNullable(e => e.getContext("2d"))
+    .ifJust(ctx => new Chart(ctx, { type: "line", data, options }))
+  )
+
+  return (
+    <div style="width: 100%; height: 16em">
+      <canvas id="project-size-chart"></canvas>
+    </div>
+  )
+}

src/components/tree/Tree.astro

@@ -14,7 +14,7 @@ interface Props {
 const { heading, tree, slug, prefix } = Astro.props;
 ---
 
-<aside class="link-tree">
+<section class="link-tree">
   <h2 class="link-tree__heading">
     {prefix.map(pathify).mapOrDefault(href =>
       <a class="link-tree__heading-text" href={href}>{heading}</a>,
@@ -24,4 +24,4 @@ const { heading, tree, slug, prefix } = Astro.props;
   <nav class="link-tree__nav">
     <List tree={tree} slug={slug} prefix={prefix} />
   </nav>
-</aside>
+</section>

src/content/_templates/_post.md

@@ -1,4 +0,0 @@
----
-title: Title
-date: {{date:YYYY-MM-DDTHH:mm:ssZ}}
----

src/content/_templates/_song.md

@@ -1,12 +0,0 @@
----
-title: Title
-composer: Composer
-lyrics: Lirycist
-origin:
-  - Original title
-album:
-  ARCD0051:
-    track: 7
-    vocal:
-      - Vocalist
----

src/pages/wiki/index.md

@@ -1,6 +0,0 @@
----
-layout: ../../layouts/Wiki.astro
-title: Wiki home page
----
-
-Hello

src/pages/wiki/index.mdx

@@ -0,0 +1,14 @@
+---
+layout: ../../layouts/Wiki.astro
+title: Wiki home page
+---
+import ProjectSizeChart from '@assets/wiki/ProjectSizeChart';
+
+
+
+## Project size
+
+Below is a chart for lines of code by extension inside the repository for this website. 
+<ProjectSizeChart client:load />
+
+

src/styles/layouts/_wiki.scss

@@ -5,6 +5,13 @@
   @media (min-width: 80rem) {
     grid-template-columns: 16em auto 16em;
   }
+
+  .link-tree {
+    position: sticky;
+    top: 0;
+    height: fit-content;
+    max-height: 100vh;
+  }
 }
 
 .wiki-article {

tsconfig.json

@@ -6,6 +6,7 @@
     "jsxImportSource": "solid-js",
     "baseUrl": "src",
     "paths": {
+      "@assets/*": ["assets/*"],
       "@layouts/*": ["layouts/*"],
       "@components/*": ["components/*"],
       "@utils/*": ["utils/*"],