···11<script>
22- import { onMount } from 'svelte';
32 import { fade } from 'svelte/transition';
43 let { data } = $props();
55- const date = new Date(data.posts[0].meta.date);
66- let dateString = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
77- let messages = [
88- 'This is a blog. Sometimes I write stuff.',
99- 'This is a blog. I write stuff here.',
1010- 'This is a blog. Occasionally, I write stuff.',
1111- 'This is a blog. I write stuff here when I feel like it.',
1212- `This is a blog. It currently has ${data.posts.length} posts.`,
1313- 'This is a blog. Thank you for reading!',
1414- 'This is a blog... or is it?',
1515- 'This is a blog. It is written in Svelte and SvelteKit.',
1616- `This is a blog. It was last updated on ${dateString}.`,
1717- 'This is, unsurprisingly, a blog.'
1818- ];
1919-2020- let message = "This is a blog. This message hasn't loaded yet.";
2121-2222- onMount(() => {
2323- message = messages[Math.floor(Math.random() * messages.length)];
2424- });
254</script>
265276<svelte:head>
287 <title>Mae Moon</title>
298</svelte:head>
3093131-<main>
3232- <h1>Mae Moon</h1>
3333- <br />
3434- <p>Hi! I'm Mae! I'm a highschool student living in Canada. I'm transfem and use she/her pronouns! I enjoy coding, playing video games, and music.</p>
3535- <h2 class="section">Projects</h2>
3636- <p>Coming soon-ish</p>
3737- <h2 class="section">Experiments</h2>
3838- <ul>
3939- <li>
4040- <a href="https://cute-catgirl.github.io/the-universe-at-the-end-of-time/">the universe at the end of time</a>
1010+<h1>Mae Moon</h1>
1111+<br />
1212+<p>Hi! I'm Mae! I'm a highschool student living in Canada. I'm transfem and use she/her pronouns! I enjoy coding, playing video games, and music.</p>
1313+<h2 class="section">Projects</h2>
1414+<p>Coming soon-ish</p>
1515+<h2 class="section">Experiments</h2>
1616+<ul>
1717+ <li>
1818+ <a href="https://cute-catgirl.github.io/the-universe-at-the-end-of-time/">the universe at the end of time</a>
1919+ </li>
2020+</ul>
2121+<h2 class="section">Contact</h2>
2222+<p>Discord ~ cute_catgirl</p>
2323+<p>Email ~ maemoon@proton.me</p>
2424+<h2 class="section">Blog</h2>
2525+<ul>
2626+ {#each data.posts.slice(0, 8) as post}
2727+ <li transition:fade>
2828+ <a href={'/blog/post/' + post.path}>
2929+ {post.meta.title}
3030+ </a>
4131 </li>
4242- </ul>
4343- <h2 class="section">Contact</h2>
4444- <p>Discord ~ cute_catgirl</p>
4545- <p>Email ~ maemoon@proton.me</p>
4646- <h2 class="section">Blog</h2>
4747- <ul>
4848- {#each data.posts as post}
4949- <li transition:fade>
5050- <a href={'/post/' + post.path}>
5151- {post.meta.title}
5252- </a>
5353- </li>
5454- {/each}
5555- </ul>
5656-</main>
5757-5858-<style>
5959- main {
6060- margin: 0 auto;
6161- max-width: 750px;
6262- }
6363-6464- li {
6565- list-style: none;
6666- padding-bottom: 0.2em;
6767- }
6868-</style>
3232+ {/each}
3333+ <a href="/blog"><strong>see more -></strong></a>
3434+</ul>