itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Wall of Text component to website

Browse Source
This commit is contained in:
itsfinniii
2026-03-20 21:14:01 +01:00
parent a5efc7415b
commit 94aa8c356e
5 changed files with 136 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
astro/package-lock.json generated
View File

@@ -13,6 +13,9 @@
"@rollup/plugin-graphql": "^2.0.5",
"@tailwindcss/vite": "^4.2.1",
"astro": "^5.17.1",
"highlight.js": "^11.11.1",
"markdown-it": "^14.1.1",
"markdown-it-highlightjs": "^4.3.0",
"md5": "^2.3.0",
"mdast-util-to-string": "^4.0.0",
"minify-xml": "^4.5.2",
@@ -22,6 +25,7 @@
"tslib": "^2.8.1"
},
"devDependencies": {
"@types/markdown-it": "^14.1.2",
"@types/md5": "^2.3.6"
}
},
@@ -2732,6 +2736,24 @@
"@types/unist": "*"
}
},
"node_modules/@types/linkify-it": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
"integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/markdown-it": {
"version": "14.1.2",
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
"integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/linkify-it": "^5",
"@types/mdurl": "^2"
}
},
"node_modules/@types/md5": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/@types/md5/-/md5-2.3.6.tgz",
@@ -2748,6 +2770,13 @@
"@types/unist": "*"
}
},
"node_modules/@types/mdurl": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
"integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/ms": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -4608,6 +4637,15 @@
"he": "bin/he"
}
},
"node_modules/highlight.js": {
"version": "11.11.1",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
"integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
"license": "BSD-3-Clause",
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/html-escaper": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
@@ -5051,6 +5089,15 @@
"url": "https://opencollective.com/parcel"
}
},
"node_modules/linkify-it": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
"integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
"license": "MIT",
"dependencies": {
"uc.micro": "^2.0.0"
}
},
"node_modules/longest-streak": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -5090,6 +5137,44 @@
"source-map-js": "^1.2.1"
}
},
"node_modules/markdown-it": {
"version": "14.1.1",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
"integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
"license": "MIT",
"dependencies": {
"argparse": "^2.0.1",
"entities": "^4.4.0",
"linkify-it": "^5.0.0",
"mdurl": "^2.0.0",
"punycode.js": "^2.3.1",
"uc.micro": "^2.1.0"
},
"bin": {
"markdown-it": "bin/markdown-it.mjs"
}
},
"node_modules/markdown-it-highlightjs": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.3.0.tgz",
"integrity": "sha512-dTEXpTV2J9WJiO8TA/FJ4DxidrYtTNcfBAdl+CLjQ3UFWj8s4dJyCPTcvoXNLmN5U5ZTCGu7TSkSvBvi4fUqkQ==",
"license": "Unlicense",
"dependencies": {
"highlight.js": "^11.9.0"
}
},
"node_modules/markdown-it/node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/markdown-table": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -5342,6 +5427,12 @@
"integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
"license": "CC0-1.0"
},
"node_modules/mdurl": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
"license": "MIT"
},
"node_modules/meow": {
"version": "13.2.0",
"resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
@@ -6299,6 +6390,15 @@
"pump": "^3.0.0"
}
},
"node_modules/punycode.js": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/radix3": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -7043,6 +7143,12 @@
"node": ">=14.17"
}
},
"node_modules/uc.micro": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
"license": "MIT"
},
"node_modules/ufo": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz",

4
astro/package.json
View File

@@ -14,6 +14,9 @@
"@rollup/plugin-graphql": "^2.0.5",
"@tailwindcss/vite": "^4.2.1",
"astro": "^5.17.1",
"highlight.js": "^11.11.1",
"markdown-it": "^14.1.1",
"markdown-it-highlightjs": "^4.3.0",
"md5": "^2.3.0",
"mdast-util-to-string": "^4.0.0",
"minify-xml": "^4.5.2",
@@ -23,6 +26,7 @@
"tslib": "^2.8.1"
},
"devDependencies": {
"@types/markdown-it": "^14.1.2",
"@types/md5": "^2.3.6"
}
}

15
astro/src/components/web/WallOfText.astro Normal file
View File

@@ -0,0 +1,15 @@
---
import { markdownToHtml } from "@/lib/markdown";
interface Props {
wallOfText: WallOfTextComponent;
}
const wallOfText = Astro.props.wallOfText;
console.log(markdownToHtml(wallOfText.text));
---
<div id={`walloftext-${wallOfText.id}`} class="flex flex-col py-12 px-12 container mx-auto gap-4">
<h2 class="text-5xl font-bold">{wallOfText.title}</h2>
<div set:html={markdownToHtml(wallOfText.text)}></div>
</div>

2
astro/src/components/webpage/Webpage.astro
View File

@@ -1,6 +1,7 @@
---
import Hero from '../web/Hero.astro';
import TextWithImage from '../web/TextWithImage.astro';
import WallOfText from '../web/WallOfText.astro';
interface Props {
webpage: WebpageComponent[];
@@ -16,6 +17,7 @@ console.log(Astro.props.webpage);
<Fragment>
{ component.component === "Hero" && <Hero hero={component} /> }
{ component.component === "TextWithImage" && <TextWithImage textWithImage={component} /> }
{ component.component === "WallOfText" && <WallOfText wallOfText={component} /> }
</Fragment>
)) }
</div>

9
astro/src/lib/markdown.ts Normal file
View File

@@ -0,0 +1,9 @@
import markdownit from "markdown-it";
import markdownitHighlightjs from "markdown-it-highlightjs";
export function markdownToHtml(markdown: string) {
const md = markdownit()
.use(markdownitHighlightjs);
return md.render(markdown);
}