(wiki) add cloc chart
This commit is contained in:
parent
c29abce51a
commit
941ad25ca8
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"files.associations": {
|
||||
"*.mdx": "markdown"
|
||||
// "*.mdx": "markdown"
|
||||
},
|
||||
"ltex.language": "en-US"
|
||||
}
|
|
@ -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",
|
||||
|
|
|
@ -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'}
|
||||
|
|
51
src/assets/wiki/ProjectSizeChart.tsx
Normal file
51
src/assets/wiki/ProjectSizeChart.tsx
Normal file
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Title
|
||||
date: {{date:YYYY-MM-DDTHH:mm:ssZ}}
|
||||
---
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
title: Title
|
||||
composer: Composer
|
||||
lyrics: Lirycist
|
||||
origin:
|
||||
- Original title
|
||||
album:
|
||||
ARCD0051:
|
||||
track: 7
|
||||
vocal:
|
||||
- Vocalist
|
||||
---
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
layout: ../../layouts/Wiki.astro
|
||||
title: Wiki home page
|
||||
---
|
||||
|
||||
Hello
|
14
src/pages/wiki/index.mdx
Normal file
14
src/pages/wiki/index.mdx
Normal file
|
@ -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 />
|
||||
|
||||
|
|
@ -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 {
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
"jsxImportSource": "solid-js",
|
||||
"baseUrl": "src",
|
||||
"paths": {
|
||||
"@assets/*": ["assets/*"],
|
||||
"@layouts/*": ["layouts/*"],
|
||||
"@components/*": ["components/*"],
|
||||
"@utils/*": ["utils/*"],
|
||||
|
|
Loading…
Reference in a new issue