sr229/kuru-kuru
1
0
Fork 0
mirror of https://github.com/sr229/kuru-kuru.git synced 2024-09-20 04:10:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Seperate Markdown content in its own island

Browse source 
Signed-off-by: Ayane Satomi <chinodesuuu@gmail.com>
This commit is contained in:
Ayane Satomi 2023-10-21 12:00:46 +00:00
parent 5b9a559b51
commit 45409382db
3 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
fresh.gen.ts
View file

@ -6,7 +6,7 @@ import * as $0 from "./routes/_404.tsx";
import * as $1 from "./routes/_app.tsx"; import * as $1 from "./routes/_app.tsx";
import * as $2 from "./routes/index.tsx"; import * as $2 from "./routes/index.tsx";
import * as $$0 from "./islands/CounterCard.tsx"; import * as $$0 from "./islands/CounterCard.tsx";
import * as $$1 from "./components/Footer.tsx"; import * as $$1 from "./islands/MarkdownContent.tsx";
const manifest = { const manifest = {
routes: { routes: {
@ -16,7 +16,7 @@ const manifest = {
}, },
islands: { islands: {
"./islands/CounterCard.tsx": $$0, "./islands/CounterCard.tsx": $$0,
"./islands/Footer.tsx": $$1, "./islands/MarkdownContent.tsx": $$1,
}, },
baseUrl: import.meta.url, baseUrl: import.meta.url,
}; };

14
islands/MarkdownContent.tsx Normal file
View file

@ -0,0 +1,14 @@
import { CSS, render } from "$gfm";
export default function MarkdownContent({ mdData }: { mdData: string }) {
return (
<div class="px-4 py-8 aspect-square mx-8 my-8 bg-white items-center justify-center">
<style dangerouslySetInnerHTML={{ __html: CSS }} />
<div
class="markdown-body"
dangerouslySetInnerHTML={{ __html: render(mdData) }}
>
</div>
</div>
);
}

10
routes/index.tsx
View file

@ -2,6 +2,7 @@ import { Handlers } from "$fresh/server.ts";
import Counter from "../islands/CounterCard.tsx"; import Counter from "../islands/CounterCard.tsx";
import { CSS, render } from "$gfm"; import { CSS, render } from "$gfm";
import { getGlobalStatistics, setGlobalStatistics } from "../shared/db.ts"; import { getGlobalStatistics, setGlobalStatistics } from "../shared/db.ts";
import MarkdownContent from "../islands/MarkdownContent.tsx";
// TODO: This is hardcoded for now, but /assets/audio contains an N amount of files per language // TODO: This is hardcoded for now, but /assets/audio contains an N amount of files per language
// and we want to randomly play one of them when the mascot is squished // and we want to randomly play one of them when the mascot is squished
@ -97,14 +98,7 @@ export default function Home(
audioFiles={kuruAudio} audioFiles={kuruAudio}
/> />
</div> </div>
</div> <MarkdownContent mdData={mdData} />
<div class="px-4 py-8 aspect-square mx-8 my-8 bg-white items-center justify-center">
<style dangerouslySetInnerHTML={{ __html: CSS }} />
<div
class="markdown-body"
dangerouslySetInnerHTML={{ __html: render(mdData) }}
>
</div>
</div> </div>
</div> </div>
); );