Restore the blog. Now fully working.

This commit is contained in:
Midou36O 2023-12-29 16:14:25 +01:00
parent 8654f2d00a
commit 7a3eaca067
Signed by: midou
GPG Key ID: 1D134A95FE521A7A
21 changed files with 886 additions and 235 deletions

3
.gitmodules vendored Normal file
View File

@ -0,0 +1,3 @@
[submodule "blog/themes/ananke"]
path = blog/themes/ananke
url = https://github.com/theNewDynamic/gohugo-theme-ananke.git

View File

@ -37,6 +37,15 @@
"type": "module",
"dependencies": {
"@unocss/reset": "^0.48.5",
"dayjs": "^1.11.9"
"dayjs": "^1.11.9",
"github-markdown-css": "^5.5.0",
"katex": "^0.16.9",
"mathjax": "^3.2.2",
"mdsvex": "^0.11.0",
"rehype-katex": "^7.0.0",
"rehype-mathjax": "^6.0.0",
"remark-math": "^6.0.0",
"remark-rehype": "^11.0.0",
"shiki": "^0.14.7"
}
}

106
src/lib/blog/+post.svelte Normal file
View File

@ -0,0 +1,106 @@
<script lang="ts">
import * as Components from '$lib/blog/components.svelte';
export { Components };
</script>
<div class="blog mt-8 leading-loose text-lg text-gray-700 dark:text-gray-300">
<slot />
</div>
<style uno-safelist>
/* I HATE OVERWRITING STYLES I HATE OVERWRITING STYLES */
.blog :global(h1) {
@apply text-5xl font-bold;
}
.blog :global(h2) {
@apply text-4xl font-bold;
}
.blog :global(h3) {
@apply text-3xl font-bold;
}
.blog :global(h4) {
@apply text-2xl font-bold;
}
.blog :global(h5) {
@apply text-xl font-bold;
}
.blog :global(h6) {
@apply text-lg font-bold;
}
.blog :global(p) {
@apply text-lg py-2;
}
.blog :global(a) {
@apply text-blue-500;
}
.blog :global(a:hover) {
@apply text-blue-700;
}
.blog :global(ul) {
@apply list-disc list-inside;
}
.blog :global(ol) {
@apply list-decimal list-inside display-inline-block;
}
.blog :global(ul > li) {
@apply ml-4;
}
.blog :global(ol > li > p) {
@apply inline;
}
.blog :global(ol > li) {
@apply ml-4;
}
.blog :global(blockquote) {
@apply border-gray-600 pl-4;
@apply border-l-4 'dark:border-gray-300';
}
.blog :global(pre) {
@apply overflow-x-auto;
}
.blog :global(table) {
@apply w-full border-collapse;
}
.blog :global(th) {
@apply text-left p-2 border border-gray-600;
}
.blog :global(td) {
@apply p-2 border border-gray-600 'dark:border-gray-700';
}
.blog :global(hr) {
@apply my-4 border-gray-600 'dark:border-gray-700';
}
.blog :global(img) {
@apply w-full;
}
.blog :global(code) {
@apply text-gray-200;
background-color: #282a36;
}
.blog :global(code) {
@apply rounded-1 p-2;
}
.blog :global(kbd) {
@apply rounded-1 p-2;
}
.blog :global(samp) {
@apply rounded-1 p-2;
}
.blog :global(pre) {
@apply rounded-1 p-2;
}
.blog :global(.prose) {
@apply prose;
}
.blog::-webkit-scrollbar {
display: none;
}
.blog {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Force dark mode as it is ignored. */
:global(.dark, blockquote.dark) {
@apply dark;
}
</style>

122
src/lib/blog/codeblock.css Normal file
View File

@ -0,0 +1,122 @@
/**
* Dracula Theme originally by Zeno Rocha [@zenorocha]
* https://draculatheme.com/
*
* Ported for PrismJS by Albert Vallverdu [@byverdu]
*/
code[class*='language-'],
pre[class*='language-'] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*='language-'] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #282a36;
}
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #6272a4;
}
.token.punctuation {
color: #f8f8f2;
}
.namespace {
opacity: 0.7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #ff79c6;
}
.token.boolean,
.token.number {
color: #bd93f9;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #50fa7b;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #f1fa8c;
}
.token.keyword {
color: #8be9fd;
}
.token.regex,
.token.important {
color: #ffb86c;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}

View File

@ -0,0 +1,3 @@
<h1 class="text-5xl">
<slot />
</h1>

View File

@ -1,5 +1,4 @@
<script lang="ts">
import ThemeToggle from '$lib/ThemeToggle.svelte';
import { fade, fly, slide } from 'svelte/transition';
@ -34,7 +33,6 @@
</div>
</div>
<div class="flex-1 justify-center content-center float-right mr-6 my-4 h-7 w-7 md:my-5">
<ThemeToggle/>
</div>
</div>
</div>

10
src/lib/types.ts Normal file
View File

@ -0,0 +1,10 @@
export type Categories = 'sveltekit' | 'svelte';
export type Post = {
title: string;
slug: string;
description: string;
date: string;
categories: Categories[];
published: boolean;
};

19
src/lib/utils.js Normal file
View File

@ -0,0 +1,19 @@
export const convertDate = (published) => {
const months = {
1: 'Jan',
2: 'Feb',
3: 'Mar',
4: 'Apr',
5: 'May',
6: 'Jun',
7: 'Jul',
8: 'Aug',
9: 'Sep',
10: 'Oct',
11: 'Nov',
12: 'Dec'
};
const date = published.substring(0, 10);
const [year, month, day] = date.split('-');
return `${day}-${months[parseInt(month)]}-${year}`;
};

View File

@ -0,0 +1 @@
export const prerender = true;

View File

@ -5,34 +5,67 @@
</script>
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content">
<div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen">
<div
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen"
>
<!-- Primary content (left) -->
<div in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}} out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}} class="text-center">
<div class="md:text-right justify-center flex flex-col items-center md:items-end m-auto shrink overflow-hidden md:pb-0 md:pt-0 pb-10% pt-110% h-1/2 md:h-screen">
<div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}} >
<div
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut }}
class="text-center"
>
<div
class="md:text-right justify-center flex flex-col items-center md:items-end m-auto shrink overflow-hidden md:pb-0 md:pt-0 pb-10% pt-110% h-1/2 md:h-screen"
>
<div
in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut }}
out:fly={{ duration: 300, x: -50, easing: quintOut }}
>
<h1 class="text-black dark:text-white text-4xl">{data.name}</h1>
<p class="text-black dark:text-white pb-5" style="">{@html data.description}</p>
</div>
<hr in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}} class="border-black dark:border-white w-100%"/>
<div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}} class="flex right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0 place-items-end" >
<hr
in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut }}
out:fly={{ duration: 300, x: -50, easing: quintOut }}
class="border-black dark:border-white w-100%"
/>
<div
in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut }}
out:fly={{ duration: 300, x: -50, easing: quintOut }}
class="flex right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0 place-items-end"
>
<a href="{data.github}{data.gh}">
<div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<p class="text-2xl md:block hidden md:pr-2">GitHub</p><div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl"/>
<div
class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
>
<p class="text-2xl md:block hidden md:pr-2">GitHub</p>
<div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl" />
</div>
</a>
<a href="{data.matrix}{data.mtx}">
<div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<p class="text-2xl md:block hidden md:pr-2">Matrix</p><div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl"/>
<div
class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
>
<p class="text-2xl md:block hidden md:pr-2">Matrix</p>
<div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl" />
</div>
</a>
<a href="mailto:{data.mail}">
<div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<p class="text-2xl md:block hidden md:pr-2">Mail</p><div class="i-mdi-at md:pl-3 px-2 md:px-0 my-auto text-3xl"/>
<div
class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
>
<p class="text-2xl md:block hidden md:pr-2">Mail</p>
<div class="i-mdi-at md:pl-3 px-2 md:px-0 my-auto text-3xl" />
</div>
</a>
<a href="/donate">
<div class="flex flex-row py-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<p class="text-2xl md:block hidden md:pr-2">Donate</p><div class="i-ph-currency-circle-dollar-bold md:pl-1 mr-1 px-2 md:px-0 my-auto text-3xl"/>
<div
class="flex flex-row py-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
>
<p class="text-2xl md:block hidden md:pr-2">Donate</p>
<div
class="i-ph-currency-circle-dollar-bold md:pl-1 mr-1 px-2 md:px-0 my-auto text-3xl"
/>
</div>
</a>
</div>
@ -43,23 +76,45 @@
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
out:fly={{ duration: 100, y: 0, easing: quintOut }}
class="md:mx-4 md:h-1/4 md:w-1 w-3/4 border-1 bg-black border-black dark:border-white dark:bg-white rounded-md hidden md:block"
></div>
/>
<!-- Secondary content (right) -->
<div class="flex md:flex-col flex-row gap-2 md:gap-0 mx-5 md:mx-0">
<div in:fly={{ delay: 300, duration: 300, x: -20, easing: quintOut}}
<div
in:fly={{ delay: 300, duration: 300, x: -20, easing: quintOut }}
out:fly={{ delay: 50, duration: 250, y: 0, easing: quintOut }}
class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
<a href="/about" data-sveltekit-preload-code><div class="flex flex-row"><div class="i-gridicons-info text-5xl md:text-4xl align-middle my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">About</h2></div></a>
class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"
>
<a href="/about" data-sveltekit-preload-code
><div class="flex flex-row">
<div class="i-gridicons-info text-5xl md:text-4xl align-middle my-auto" />
<h2 class="md:pl-2 text-4xl hidden md:block">About</h2>
</div></a
>
</div>
<div in:fly={{ delay: 350, duration: 300, x: -20, easing: quintOut}}
<div
in:fly={{ delay: 350, duration: 300, x: -20, easing: quintOut }}
out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut }}
class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
<a href="/projects" data-sveltekit-preload-code><div class="flex flex-row"><div class="i-octicon-project-16 text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2></div></a>
class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"
>
<a href="/projects" data-sveltekit-preload-code
><div class="flex flex-row">
<div class="i-octicon-project-16 text-5xl md:text-4xl my-auto" />
<h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2>
</div></a
>
</div>
<!-- <div in:fly={{ delay: 400, duration: 300, x: -20, easing: quintOut}} -->
<!-- out:fly={{ delay: 150, duration: 150, y: 0, easing: quintOut}} -->
<!-- class="flex flex-row rounded md:p-1"> -->
<!-- <a href="/blog"><div class="flex flex-row"><div class="i-ph-book-bold bg-gray-400 dark:bg-gray-600 text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl text-gray-400 dark:text-gray-600 hidden md:block">Blog</h2></div></a> -->
<!-- </div> -->
<div
in:fly={{ delay: 400, duration: 300, x: -20, easing: quintOut }}
out:fly={{ delay: 150, duration: 150, y: 0, easing: quintOut }}
class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"
>
<a href="/blog" data-sveltekit-preload-code
><div class="flex flex-row">
<div class="i-ph-book-bold text-5xl md:text-4xl my-auto" />
<h2 class="md:pl-2 text-4xl hidden md:block">Blog</h2>
</div></a
>
</div>
</body>
</div>
</div></body
>

View File

@ -1,6 +1,6 @@
<script>
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
// DayJS
dayjs.extend(relativeTime);
let yr = dayjs('2004-07-15').fromNow(true);
@ -13,23 +13,24 @@
<!-- Primary content (Left) -->
<div class="text-center">
<div
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen"
>
<div
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
out:fly={{ duration: 300, y: -50, easing: quintOut }}
class="flex flex-col">
class="flex flex-col"
>
<div class="flex flex-col md:flex-row">
<div
class="i-gridicons-info dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
></div>
<h1
class="text-black dark:text-white text-4xl md:pr-2"
>About me</h1>
/>
<h1 class="text-black dark:text-white text-4xl md:pr-2">About me</h1>
</div>
<p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p>
<a href="/">
<div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1"></div>
<div
class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%"
>
<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
<p class="md:block hidden">Go back?</p>
</div>
</a>
@ -39,22 +40,32 @@
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
out:fly={{ duration: 300, y: 0, easing: quintOut }}
class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
></div>
/>
<!-- Secondary Content (Right) -->
<div
in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut }}
out:fly={{ duration: 300, y: 50, easing: quintOut }}
class="justify-center w-85% md:w-50% h-100% flex flex-col items-center md:m-5 shrink overflow-hidden h-screen ">
class="justify-center w-85% md:w-50% h-100% flex flex-col items-center md:m-5 shrink overflow-hidden h-screen"
>
<div class="text-xl text-center overflow-scroll md:text-left text-black dark:text-white">
<p>I'm a passionate programmer who quite literally is interested in the inner workings of anything related to computers.<br/>
Such as what? Well it's pretty much anything that revolves around computers, from the hardware to the software.<br/>
Some examples are: decompiling, reverse engineering, programming, experimenting, and so on.<br/>
It's mostly something I love to do in my spare time, and I'm always looking for new things to learn.<br/>
<p>
I'm a passionate programmer who quite literally is interested in the inner workings of
anything related to computers.<br />
Such as what? Well it's pretty much anything that revolves around computers, from the hardware
to the software.<br />
Some examples are: decompiling, reverse engineering, programming, experimenting, and so
on.<br />
It's mostly something I love to do in my spare time, and I'm always looking for new things
to learn.<br />
I do hate JS though, but svelte is making it bearable.<br />
This is just a brief summary of who I am, And I hope you enjoy your (rather short) stay on my website.<br/>
Oh, just in case, I'm a guy, and I'm {yr} old. You don't need to know more than that.<br/>
Finally, feel free to contact me! I love receiving mails and messages from people, and I'll try to respond as soon as possible.<br/>
If it's a question or a request, I'll see if can also publicly document it so that others can benefit from it as well.<br/>
This is just a brief summary of who I am, And I hope you enjoy your (rather short) stay
on my website.<br />
Oh, just in case, I'm a guy, and I'm {yr} old. You don't need to know more than that.<br
/>
Finally, feel free to contact me! I love receiving mails and messages from people, and
I'll try to respond as soon as possible.<br />
If it's a question or a request, I'll see if can also publicly document it so that others
can benefit from it as well.<br />
Until then, have a nice day!
</p>
</div>
@ -63,4 +74,3 @@
</div>
</div>
</body>

View File

@ -0,0 +1,30 @@
import { json } from '@sveltejs/kit';
import type { Post } from '$lib/types';
async function getPosts() {
let posts: Post[] = [];
const paths = import.meta.glob('/src/routes/blog/posts/mds/*.md', { eager: true });
for (const path in paths) {
const file = paths[path];
const slug = path.split('/').at(-1)?.replace('.md', '');
if (file && typeof file === 'object' && 'metadata' in file && slug) {
const metadata = file.metadata as Omit<Post, 'slug'>;
const post = { ...metadata, slug } satisfies Post;
post.published && posts.push(post);
}
}
posts = posts.sort(
(first, second) => new Date(second.date).getTime() - new Date(first.date).getTime()
);
return posts;
}
export async function GET() {
const posts = await getPosts();
return json(posts);
}

View File

@ -1,27 +1,95 @@
<script>
//
// export let content;
// const posts = { content };
// console.log(content);
//
<script lang="ts">
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import { convertDate } from '$lib/utils';
export let data;
// So the data is: title, date, descriptionription,slug.
//{#each data.posts as post}
// {:else}
// <p>Ayo wait a second</p>
// {/each}
</script>
<!-- <div class="mt-70px md:mt-80px mb-50px md:mb-0 min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 mt-4 gap-3 mx-4 grid-cols-1 ">-->
<!-- {#each content as data (data.id) }-->
<!-- <div class="dark:bg-slate-400 bg-slate-600 dark:text-white text-black rounded-lg w-[100-40] md:max-w-xl">-->
<!-- <div class="md:flex"> -->
<!-- <div class="md:shrink-0">-->
<!-- <img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-full md:w-45 w-screen object-cover h-48" src="{data.img}" alt="e"> -->
<!-- </div> -->
<!-- <div class="pb-20 pt-5 px-8 md:py-2 md:px-8 md:rounded-lg rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-full"> -->
<!-- <div><h3 class="text-3xl dark:text-white text-black text-center">{data.name}</h3></div> -->
<!-- <div class="text-sm dark:text-white text-black text-center">{data.date}</div> -->
<!-- <div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="eee">Check it out</a></div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- {:else} -->
<!-- <p>Ayo wait a second</p> -->
<!-- {/each} -->
<!-- </div> -->
<!-- Do you know what i hate the most? Fucking -- s. -->
<p>Under construction!</p>
<link rel="alternate" type="application/atom+xml" href="/rss.xml" />
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
<div class="min-h-screen">
<!-- Primary content (Left) -->
<div class="text-center">
<div
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen"
>
<div
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
out:fly={{ duration: 300, y: -50, easing: quintOut }}
class="flex flex-col md:pr-3"
>
<div class="flex flex-col md:flex-row">
<div
class="i-ph-book-bold dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
/>
<h1 class="text-black dark:text-white text-4xl md:pl-3 md:pr-2">Blog</h1>
</div>
<a href="/">
<div
class="flex place-content-center place-self-center justify-center content-center md:mt-2 flex-row md:pl-25%"
>
<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
<p class="md:block hidden">Go back?</p>
</div>
</a>
</div>
<!-- Vertical line -->
<div
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
out:fly={{ duration: 300, y: 0, easing: quintOut }}
class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
/>
<div class="md:pl-4 md:gap-1 flex md:h-50% flex-col place-items-start">
<div class="overflow-y-auto">
{#each data.posts as { title, date, description, slug }, i}
<a href="blog/{slug}">
<!-- Gotta fix this, it's gonna look ugly when there are too many projects in the list... -->
<div
in:fly={{ delay: 350, duration: 300 * i, y: -50, easing: quintOut }}
out:fly={{ duration: 300, y: 50, easing: quintOut }}
class="flex flex-col p-2 rounded dark:hover:bg-#082f49 hover:bg-blue-100"
>
<div class="my-auto">
<div class="flex flex-row place-content-between">
<div
class="flex flex-col pl-4 md:pl-0 gap-3 my-auto py-2 text-left z-0 place-items-start"
>
<h3 class="text-3xl dark:text-white text-black text-center">{title}</h3>
<p class="text-sm dark:text-white text-black text-center">
{convertDate(date)}
</p>
<p class="dark:text-white text-black text-sm">{description}</p>
</div>
<div
class="md:h-10% h-100% md:w-50 w-50 object-cover rounded backdrop-opacity-10 md:object-contain float-right z-10 overflow-hidden md:block hidden"
style="mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%, transparent 100%);"
>
<img
class="transition duration-600 top-0 opacity-50 scale-110 hover:opacity-75 object-cover md:object-contain hover:scale-120"
/>
</div>
</div>
</div>
</div>
</a>
<hr
in:fly={{ delay: 300, duration: 500 * i, y: 0, easing: quintOut }}
out:fly={{ duration: 300, y: 50, easing: quintOut }}
class="border-black dark:border-white justify-center mx-auto w-85% md:w-100% my-2"
/>
{:else}
<p>Ayo wait a second</p>
{/each}
</div>
</div>
</div>
</div>
</div></body
>

7
src/routes/blog/+page.ts Normal file
View File

@ -0,0 +1,7 @@
import type { Post } from '$lib/types'
export async function load({ fetch }) {
const response = await fetch('api/posts')
const posts: Post[] = await response.json()
return { posts }
}

View File

@ -0,0 +1,88 @@
<script lang="ts">
import { convertDate } from '$lib/utils';
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import 'github-markdown-css/github-markdown.css';
export let data;
</script>
<!-- SEO -->
<svelte:head>
<title>{data.meta.title}</title>
<meta property="og:type" content="article" />
<meta property="og:title" content={data.meta.title} />
</svelte:head>
<article>
<div class="min-h-screen">
<!-- Primary content (Left) -->
<div class="text-center">
<div
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen"
>
<div
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
out:fly={{ duration: 300, y: -50, easing: quintOut }}
class="flex flex-col pr-3"
>
<div class="flex flex-col md:flex-row">
<div
class="i-gridicons-info dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
/>
<h1 class="text-black dark:text-white font-bold text-4xl md:px-2">{data.meta.title}</h1>
</div>
<!-- dirty hack to give the illusion the text is properly visible on both light and dark mode -->
<p class="block text-gray-800 md:text-gray-500 p-3 py-1">
Tags:
{#each data.meta.categories as category}
<span class="surface-4"> &num;{category} </span>
{/each}
</p>
<!-- dirty hack to give the illusion the text is properly visible on both light and dark mode -->
<p class="block text-gray-800 md:text-gray-500 p-3 py-1">
{convertDate(data.meta.date)}
</p>
<a href="/blog" data-sveltekit-preload-code>
<div
class="flex place-content-center place-self-center justify-center content-center flex-row md:px-25%"
>
<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
<p class="md:block hidden">Go back?</p>
</div>
</a>
</div>
<!-- Vertical line -->
<div
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
out:fly={{ duration: 300, y: 0, easing: quintOut }}
class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
/>
<!-- Secondary Content (Right) -->
<div
in:fly={{ delay: 400, duration: 300, y: -50, easing: quintOut }}
out:fly={{ duration: 300, y: 50, easing: quintOut }}
class="justify-center w-85% md:min-w-20% md:max-w-50% h-100% flex flex-col items-center md:m-5 shrink overflow-hidden h-screen"
>
<div
class="text-xl text-center overflow-scroll md:text-left text-black dark:text-white my-10%"
>
<div class="prose" />
<svelte:component this={data.content} />
</div>
</div>
</div>
</div>
</div>
</article>
<style>
article {
max-inline-size: var(--size-content-3);
margin-inline: auto;
}
h1 {
text-transform: capitalize;
}
</style>

View File

@ -0,0 +1,15 @@
import { error } from '@sveltejs/kit'
export async function load({ params }) {
try {
const post = await import(`../posts/mds/${params.slug}.md`)
return {
content: post.default,
meta: post.metadata
}
} catch (e) {
throw error(404, `Could not find ${params.slug}`)
}
}

View File

@ -0,0 +1,35 @@
---
title: First blog
description: First blog to test things out!
author: midou
date: '2023-12-28'
categories:
- testing
published: true
---
# Hello!
Welcome to my blog! It took me a while to ~~copy~~ I mean write code to adapt it to my website!
So you might say "Oh that's cool but What will be in this blog?".
Well, to start things out I'm probably going to put a lot of different topics. These include but are not limited to:
- Rants
- Devlog
- Guides (If i can't seem to find a similar one.)
This does not include political opinions. But I'm still going to needlessly rant about big tech annoying the crap out of me :D
_Hopefully_ my website doesn't crash and burn in flames. One of the things I like about this blogpost (and Svelte in general) is that it **does not** require JS.
So any JS freak can stop crying about "Libre" or "Anti" JS stuff. This should _also_ avoid that situation where archive websites get to scrape the frontend but never the backend
and we end up with a forever lost and broken archive.
Finally, [the source code for the website is in my github repo, if you're interested.](https://github.com/midou36o/midou36o.github.io) (go to the svelte-stable branch!)
Generally _everything_ is working, minus the dark mode for some parts that you might not notice actually, but I'll figure that out once I feel like hating myself even further, speaking of which, why is JS such a pain to use?
There will be no comments section on my blog. But my email and other accounts are open to discuss with me!
**PS:** If someone knows how to write a proper RSS feed that takes the blogpost into a compatible feed, please send a PR or teach me how!!

View File

@ -9,56 +9,64 @@
<!-- Primary content (Left) -->
<div class="text-center">
<div
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen"
>
<div
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
out:fly={{ duration: 300, y: -50, easing: quintOut }}
class="flex flex-col">
class="flex flex-col"
>
<div class="flex flex-col md:flex-row">
<div
class="i-octicon-project-16 dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
></div>
<h1
class="text-black dark:text-white text-4xl md:pl-2 md:pr-2"
>Projects</h1>
/>
<h1 class="text-black dark:text-white text-4xl md:pl-2 md:pr-2">Projects</h1>
</div>
<p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p>
<a href="/">
<div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1"></div>
<div
class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%"
>
<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
<p class="md:block hidden">Go back?</p>
</div>
</a>
</div>
<!-- Vertical line -->
<div
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
out:fly={{ duration: 300, y: 0, easing: quintOut }}
class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
></div>
/>
<div class="md:pl-4 md:gap-1 flex md:h-50% flex-col place-items-start">
<div class="overflow-y-auto">
{#each proj as { name, date, desc, url, image, imdes }, i}
<a href="{url}">
<a href={url}>
<!-- Gotta fix this, it's gonna look ugly when there are too many projects in the list... -->
<div
in:fly={{ delay: 350, duration: 300 * i, y: -50, easing: quintOut }}
out:fly={{ duration: 300, y: 50, easing: quintOut }}
class="flex flex-col p-2 rounded dark:hover:bg-#082f49 hover:bg-blue-100">
class="flex flex-col p-2 rounded dark:hover:bg-#082f49 hover:bg-blue-100"
>
<div class="my-auto">
<div class="flex flex-row place-content-between">
<div class="flex flex-col pl-4 md:pl-0 gap-3 my-auto py-2 text-left z-0 place-items-start">
<div
class="flex flex-col pl-4 md:pl-0 gap-3 my-auto py-2 text-left z-0 place-items-start"
>
<h3 class="text-3xl dark:text-white text-black text-center">{name}</h3>
<p class="text-sm dark:text-white text-black text-center">{date}</p>
<p class="dark:text-white text-black text-sm">{desc}</p>
</div>
<div class="md:h-10% h-100% md:w-50 w-50 object-cover rounded backdrop-opacity-10 md:object-contain float-right z-10 overflow-hidden md:block hidden" style="mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%, transparent 100%);">
<img class="transition duration-600 top-0 opacity-50 scale-110 hover:opacity-75 object-cover md:object-contain hover:scale-120" src="{image}" alt="{imdes}">
<div
class="md:h-10% h-100% md:w-50 w-50 object-cover rounded backdrop-opacity-10 md:object-contain float-right z-10 overflow-hidden md:block hidden"
style="mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%, transparent 100%);"
>
<img
class="transition duration-600 top-0 opacity-50 scale-110 hover:opacity-75 object-cover md:object-contain hover:scale-120"
src={image}
alt={imdes}
/>
</div>
</div>
</div>
@ -67,10 +75,12 @@
<hr
in:fly={{ delay: 300, duration: 500 * i, y: 0, easing: quintOut }}
out:fly={{ duration: 300, y: 50, easing: quintOut }}
class="border-black dark:border-white justify-center mx-auto w-85% md:w-100% my-2"/>
class="border-black dark:border-white justify-center mx-auto w-85% md:w-100% my-2"
/>
{/each}
</div>
</div>
</div>
</div>
</body>
</div></body
>

View File

@ -0,0 +1,35 @@
import type { Post } from '$lib/types';
export async function GET({ fetch }) {
const response = await fetch('api/posts');
const posts: Post[] = await response.json();
const headers = { 'Content-Type': 'application/xml' };
const xml = `
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
<channel>
<title>Midou's blog</title>
<description>A blog covering about anything that comes into my mind!</description>
<link>https://midou.dev/</link>
<atom:link href="https://midou.dev/blog/rss.xml" rel="self" type="application/rss+xml"/>
${posts
.map(
(post) => `
<item>
<title>${post.title}</title>
<description>${post.description}</description>
<link>https://midou.dev/blog/${post.slug}</link>
<guid isPermaLink="true">https://midou.dev/blog/${post.slug}</guid>
<p> Since I am a dumbass, I don't know how to put the paragraph here! </p>
<pubDate>${new Date(post.date).toUTCString()}</pubDate>
</item>
`
)
.join('')}
</channel>
</rss>
`.trim();
return new Response(xml, { headers });
}

View File

@ -1,12 +1,39 @@
// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
import { mdsvex, escapeSvelte } from 'mdsvex';
import shiki from 'shiki';
import math from 'remark-math';
import rehype from 'remark-rehype';
//import rehypeMathjax from 'rehype-mathjax';
import rehypeKatex from 'rehype-katex';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
preprocess: [
vitePreprocess(),
mdsvex({
extensions: ['.md', 'svx'],
layout: 'src/lib/blog/+post.svelte',
highlight: {
highlighter: async (code, lang = 'text') => {
const highlighter = await shiki.getHighlighter({ theme: 'dracula' });
const html = escapeSvelte(highlighter.codeToHtml(code, { lang }));
return `{@html \`${html}\` }`;
},
alias: {
js: 'javascript',
sh: 'bash',
glsl: 'glsl'
}
},
remarkPlugins: [[math, rehype]],
rehypePlugins: [[rehypeKatex]]
})
],
extensions: ['.svelte', '.md', '.svx'],
kit: {
adapter: adapter({

View File

@ -1,19 +1,19 @@
import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';
import { defineConfig } from "vite";
//import { defineConfig } from 'vite';
import UnoCSS from 'unocss/vite';
import presetIcons from '@unocss/preset-icons';
import presetWebFonts from '@unocss/preset-web-fonts'
//import presetIcons from '@unocss/preset-icons';
//import presetWebFonts from '@unocss/preset-web-fonts';
const config: UserConfig = {
plugins: [sveltekit(), UnoCSS(),
plugins: [
sveltekit(),
UnoCSS()
/* Self note: Don't add a config between the (), it just overrides the external config. */
],
optimizeDeps: {
include: ["dayjs/plugin/relativeTime.js"],
},
include: ['dayjs/plugin/relativeTime.js']
}
};
export default config;