diff --git a/astro.config.ts b/astro.config.ts index 04d2681..9cae606 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -5,6 +5,7 @@ import remarkEmoji from 'remark-emoji'; import mdx from '@astrojs/mdx'; import remarkRuby from './src/assets/ruby'; import solid from '@astrojs/solid-js'; +import markdoc from '@astrojs/markdoc'; // https://astro.build/config @@ -26,6 +27,7 @@ export default defineConfig({ }, integrations: [ mdx(), - solid() + solid(), + markdoc(undefined), ], }); diff --git a/markdoc.config.mjs b/markdoc.config.mjs new file mode 100644 index 0000000..2391f8d --- /dev/null +++ b/markdoc.config.mjs @@ -0,0 +1,14 @@ +import { defineMarkdocConfig } from '@astrojs/markdoc/config'; +import Lyrics from './src/components/markdown/lyrics/Lyrics.astro'; + + +export default defineMarkdocConfig({ + tags: { + lyrics: { + render: Lyrics, + attributes: { + type: { type: String }, + } + } + } +}) diff --git a/package.json b/package.json index f9bf997..ae67a2e 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "astro": "astro" }, "dependencies": { + "@astrojs/markdoc": "^0.1.1", "@astrojs/mdx": "^0.19.0", "@astrojs/solid-js": "^2.1.0", "astro": "^2.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9270a1d..bf25803 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,9 @@ lockfileVersion: '6.0' dependencies: + '@astrojs/markdoc': + specifier: ^0.1.1 + version: 0.1.1(astro@2.3.1) '@astrojs/mdx': specifier: ^0.19.0 version: 0.19.0(astro@2.3.1)(rollup@3.21.0) @@ -118,6 +121,23 @@ packages: vscode-uri: 3.0.7 dev: false + /@astrojs/markdoc@0.1.1(astro@2.3.1): + resolution: {integrity: sha512-NJgMTZWTCcL+4qmDim/wi53Mc6X7hk12hyI3JHWW7oiWVchdrvbdvG5i3c2bmT73+bMtG8XOEt2vvapQRixAKw==} + engines: {node: '>=16.12.0'} + peerDependencies: + astro: ^2.2.0 + dependencies: + '@markdoc/markdoc': 0.2.2 + astro: 2.3.1(sass@1.62.1) + esbuild: 0.17.18 + gray-matter: 4.0.3 + kleur: 4.1.5 + zod: 3.21.4 + transitivePeerDependencies: + - '@types/react' + - react + dev: false + /@astrojs/markdown-remark@2.1.4(astro@2.3.1): resolution: {integrity: sha512-z5diCcFo2xkBAJ11KySAIKpZZkULZmzUvWsZ2VWIOrR6QrEgEfVl5jTpgPSedx4m+xUPuemlUviOotGB7ItNsQ==} peerDependencies: @@ -702,6 +722,21 @@ packages: resolution: {integrity: sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==} dev: false + /@markdoc/markdoc@0.2.2: + resolution: {integrity: sha512-0TiD9jmA5h5znN4lxo7HECAu3WieU5g5vUsfByeucrdR/x88hEilpt16EydFyJwJddQ/3w5HQgW7Ovy62r4cyw==} + engines: {node: '>=14.7.0'} + peerDependencies: + '@types/react': '*' + react: '*' + peerDependenciesMeta: + '@types/react': + optional: true + react: + optional: true + optionalDependencies: + '@types/markdown-it': 12.2.3 + dev: false + /@mdx-js/mdx@2.3.0: resolution: {integrity: sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==} dependencies: @@ -873,16 +908,35 @@ packages: '@types/geojson': 7946.0.10 dev: true + /@types/linkify-it@3.0.2: + resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==} + dev: false + optional: true + /@types/lunr@2.3.4: resolution: {integrity: sha512-j4x4XJwZvorEUbA519VdQ5b9AOU9TSvfi8tvxMAfP8XzNLtFex7A8vFQwqOx3WACbV0KMXbACV3cZl4/gynQ7g==} dev: true + /@types/markdown-it@12.2.3: + resolution: {integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==} + requiresBuild: true + dependencies: + '@types/linkify-it': 3.0.2 + '@types/mdurl': 1.0.2 + dev: false + optional: true + /@types/mdast@3.0.11: resolution: {integrity: sha512-Y/uImid8aAwrEA24/1tcRZwpxX3pIFTSilcNDKSPn+Y2iDywSEachzRuvgAYYLR3wpGXAsMbv5lvKLDZLeYPAw==} dependencies: '@types/unist': 2.0.6 dev: false + /@types/mdurl@1.0.2: + resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==} + dev: false + optional: true + /@types/mdx@2.0.4: resolution: {integrity: sha512-qCYrNdpKwN6YO6FVnx+ulfqifKlE3lQGsNhvDaW9Oxzyob/cRLBJWow8GHBBD4NxQ7BVvtsATgLsX0vZAWmtrg==} dev: false diff --git a/src/components/lyrics/Lyrics.astro b/src/components/markdown/lyrics/Lyrics.astro similarity index 100% rename from src/components/lyrics/Lyrics.astro rename to src/components/markdown/lyrics/Lyrics.astro diff --git a/src/components/lyrics/transform.ts b/src/components/markdown/lyrics/transform.ts similarity index 70% rename from src/components/lyrics/transform.ts rename to src/components/markdown/lyrics/transform.ts index 7e1b388..a530ea9 100644 --- a/src/components/lyrics/transform.ts +++ b/src/components/markdown/lyrics/transform.ts @@ -30,11 +30,10 @@ function toStack(html: string): Stack { nodes.reduce((lang, node) => { switch (node.rawTagName) { case 'h1': { - const lang: string = node.id.replace(/-.+/, ''); - createVerse(stack, lang); - return lang; + return node.text; } case 'ul': { + createVerse(stack, lang); const lines = extractLines(node.childNodes); stack[lang].at(-1)!.push(...lines); return lang; @@ -62,26 +61,6 @@ function reduceStack(stack: Stack): Verse[] { return verses.reverse(); } -// function toHtml(verses: Verse[]): string { -// const keys = Object.keys(verses[0]); -// const head = keys.map(lang => `