mirror of
https://github.com/midou36o/midou36o.github.io
synced 2024-11-08 14:52:24 +05:30
Restore the blog. Now fully working.
This commit is contained in:
parent
8654f2d00a
commit
7a3eaca067
GPG Key ID:
1D134A95FE521A7A
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
[submodule "blog/themes/ananke"]
|
||||||
|
path = blog/themes/ananke
|
||||||
|
url = https://github.com/theNewDynamic/gohugo-theme-ananke.git
|
||||||
11
package.json
11
package.json
@ -37,6 +37,15 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@unocss/reset": "^0.48.5",
|
"@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
106
src/lib/blog/+post.svelte
Normal 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
122
src/lib/blog/codeblock.css
Normal 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;
|
||||||
|
}
|
||||||
3
src/lib/blog/components.svelte
Normal file
3
src/lib/blog/components.svelte
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<h1 class="text-5xl">
|
||||||
|
<slot />
|
||||||
|
</h1>
|
||||||
@ -1,5 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import ThemeToggle from '$lib/ThemeToggle.svelte';
|
|
||||||
import { fade, fly, slide } from 'svelte/transition';
|
import { fade, fly, slide } from 'svelte/transition';
|
||||||
|
|
||||||
|
|
||||||
@ -34,7 +33,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 justify-center content-center float-right mr-6 my-4 h-7 w-7 md:my-5">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
10
src/lib/types.ts
Normal file
10
src/lib/types.ts
Normal 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
19
src/lib/utils.js
Normal 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}`;
|
||||||
|
};
|
||||||
1
src/routes/+layout.server.ts
Normal file
1
src/routes/+layout.server.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export const prerender = true;
|
||||||
@ -1,65 +1,120 @@
|
|||||||
<script>
|
<script>
|
||||||
import data from '$lib/data.json';
|
import data from '$lib/data.json';
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
import { quintOut } from 'svelte/easing';
|
import { quintOut } from 'svelte/easing';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content">
|
<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
|
||||||
<!-- Primary content (left) -->
|
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen"
|
||||||
<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">
|
<!-- Primary content (left) -->
|
||||||
<div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}} >
|
<div
|
||||||
<h1 class="text-black dark:text-white text-4xl">{data.name}</h1>
|
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
|
||||||
<p class="text-black dark:text-white pb-5" style="">{@html data.description}</p>
|
out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut }}
|
||||||
</div>
|
class="text-center"
|
||||||
<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" >
|
<div
|
||||||
<a href="{data.github}{data.gh}">
|
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 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
|
||||||
</div>
|
in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut }}
|
||||||
</a>
|
out:fly={{ duration: 300, x: -50, easing: quintOut }}
|
||||||
<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">
|
<h1 class="text-black dark:text-white text-4xl">{data.name}</h1>
|
||||||
<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"/>
|
<p class="text-black dark:text-white pb-5" style="">{@html data.description}</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
<hr
|
||||||
<a href="mailto:{data.mail}">
|
in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut }}
|
||||||
<div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
|
out:fly={{ duration: 300, x: -50, easing: quintOut }}
|
||||||
<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"/>
|
class="border-black dark:border-white w-100%"
|
||||||
</div>
|
/>
|
||||||
</a>
|
<div
|
||||||
<a href="/donate">
|
in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut }}
|
||||||
<div class="flex flex-row py-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
|
out:fly={{ duration: 300, x: -50, easing: quintOut }}
|
||||||
<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"/>
|
class="flex right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0 place-items-end"
|
||||||
</div>
|
>
|
||||||
</a>
|
<a href="{data.github}{data.gh}">
|
||||||
</div>
|
<div
|
||||||
</div>
|
class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
|
||||||
</div>
|
>
|
||||||
<!-- vertical line -->
|
<p class="text-2xl md:block hidden md:pr-2">GitHub</p>
|
||||||
<div
|
<div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl" />
|
||||||
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
|
</div>
|
||||||
out:fly={{ duration: 100, y: 0, easing: quintOut}}
|
</a>
|
||||||
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"
|
<a href="{data.matrix}{data.mtx}">
|
||||||
></div>
|
<div
|
||||||
<!-- Secondary content (right) -->
|
class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
|
||||||
<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}}
|
<p class="text-2xl md:block hidden md:pr-2">Matrix</p>
|
||||||
out:fly={{ delay: 50, duration: 250, y: 0, easing: quintOut}}
|
<div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl" />
|
||||||
class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
|
</div>
|
||||||
<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>
|
</a>
|
||||||
</div>
|
<a href="mailto:{data.mail}">
|
||||||
<div in:fly={{ delay: 350, duration: 300, x: -20, easing: quintOut}}
|
<div
|
||||||
out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}}
|
class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
|
||||||
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>
|
<p class="text-2xl md:block hidden md:pr-2">Mail</p>
|
||||||
</div>
|
<div class="i-mdi-at md:pl-3 px-2 md:px-0 my-auto text-3xl" />
|
||||||
<!-- <div in:fly={{ delay: 400, duration: 300, x: -20, easing: quintOut}} -->
|
</div>
|
||||||
<!-- out:fly={{ delay: 150, duration: 150, y: 0, easing: quintOut}} -->
|
</a>
|
||||||
<!-- class="flex flex-row rounded md:p-1"> -->
|
<a href="/donate">
|
||||||
<!-- <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> -->
|
class="flex flex-row py-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
|
||||||
</div>
|
>
|
||||||
</body>
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- vertical line -->
|
||||||
|
<div
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
<!-- 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 }}
|
||||||
|
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
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<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
|
||||||
|
>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div></body
|
||||||
|
>
|
||||||
|
|||||||
@ -1,66 +1,76 @@
|
|||||||
<script>
|
<script>
|
||||||
import dayjs from "dayjs";
|
import dayjs from 'dayjs';
|
||||||
import relativeTime from "dayjs/plugin/relativeTime";
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||||
// DayJS
|
// DayJS
|
||||||
dayjs.extend(relativeTime);
|
dayjs.extend(relativeTime);
|
||||||
let yr = dayjs('2004-07-15').fromNow(true);
|
let yr = dayjs('2004-07-15').fromNow(true);
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
import { quintOut } from 'svelte/easing';
|
import { quintOut } from 'svelte/easing';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
|
<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">
|
<div class="min-h-screen">
|
||||||
<!-- Primary content (Left) -->
|
<!-- Primary content (Left) -->
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<div
|
<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}}
|
<div
|
||||||
out:fly={{ duration: 300, y: -50, easing: quintOut}}
|
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
|
||||||
class="flex flex-col">
|
out:fly={{ duration: 300, y: -50, easing: quintOut }}
|
||||||
<div class="flex flex-col md:flex-row">
|
class="flex flex-col"
|
||||||
<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 class="flex flex-col md:flex-row">
|
||||||
></div>
|
<div
|
||||||
<h1
|
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"
|
||||||
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>
|
</div>
|
||||||
<p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p>
|
<a href="/">
|
||||||
<a href="/">
|
<div
|
||||||
<div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
|
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>
|
>
|
||||||
<p class="md:block hidden"> Go back? </p>
|
<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
|
||||||
</div>
|
<p class="md:block hidden">Go back?</p>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
<!-- Vertical line -->
|
</div>
|
||||||
<div
|
<!-- Vertical line -->
|
||||||
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
|
<div
|
||||||
out:fly={{ duration: 300, y: 0, easing: quintOut}}
|
in:fly={{ delay: 300, 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"
|
out:fly={{ duration: 300, y: 0, easing: quintOut }}
|
||||||
></div>
|
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
|
<!-- Secondary Content (Right) -->
|
||||||
in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut}}
|
<div
|
||||||
out:fly={{ duration: 300, y: 50, easing: quintOut}}
|
in:fly={{ delay: 300, 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 ">
|
out:fly={{ duration: 300, y: 50, easing: quintOut }}
|
||||||
<div class="text-xl text-center overflow-scroll md:text-left text-black dark:text-white ">
|
class="justify-center w-85% md:w-50% h-100% flex flex-col items-center md:m-5 shrink overflow-hidden h-screen"
|
||||||
<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/>
|
<div class="text-xl text-center overflow-scroll md:text-left text-black dark:text-white">
|
||||||
Some examples are: decompiling, reverse engineering, programming, experimenting, and so on.<br/>
|
<p>
|
||||||
It's mostly something I love to do in my spare time, and I'm always looking for new things to learn.<br/>
|
I'm a passionate programmer who quite literally is interested in the inner workings of
|
||||||
I do hate JS though, but svelte is making it bearable.<br/>
|
anything related to computers.<br />
|
||||||
This is just a brief summary of who I am, And I hope you enjoy your (rather short) stay on my website.<br/>
|
Such as what? Well it's pretty much anything that revolves around computers, from the hardware
|
||||||
Oh, just in case, I'm a guy, and I'm {yr} old. You don't need to know more than that.<br/>
|
to the software.<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/>
|
Some examples are: decompiling, reverse engineering, programming, experimenting, and so
|
||||||
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/>
|
on.<br />
|
||||||
Until then, have a nice day!
|
It's mostly something I love to do in my spare time, and I'm always looking for new things
|
||||||
</p>
|
to learn.<br />
|
||||||
</div>
|
I do hate JS though, but svelte is making it bearable.<br />
|
||||||
</div>
|
This is just a brief summary of who I am, And I hope you enjoy your (rather short) stay
|
||||||
</div>
|
on my website.<br />
|
||||||
</div>
|
Oh, just in case, I'm a guy, and I'm {yr} old. You don't need to know more than that.<br
|
||||||
</div>
|
/>
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
30
src/routes/api/posts/+server.ts
Normal file
30
src/routes/api/posts/+server.ts
Normal 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);
|
||||||
|
}
|
||||||
@ -1,27 +1,95 @@
|
|||||||
<script>
|
<script lang="ts">
|
||||||
//
|
import { fly } from 'svelte/transition';
|
||||||
// export let content;
|
import { quintOut } from 'svelte/easing';
|
||||||
// const posts = { content };
|
import { convertDate } from '$lib/utils';
|
||||||
// console.log(content);
|
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>
|
</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) }-->
|
<link rel="alternate" type="application/atom+xml" href="/rss.xml" />
|
||||||
<!-- <div class="dark:bg-slate-400 bg-slate-600 dark:text-white text-black rounded-lg w-[100-40] md:max-w-xl">-->
|
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
|
||||||
<!-- <div class="md:flex"> -->
|
<div class="min-h-screen">
|
||||||
<!-- <div class="md:shrink-0">-->
|
<!-- Primary content (Left) -->
|
||||||
<!-- <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 class="text-center">
|
||||||
<!-- </div> -->
|
<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"> -->
|
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen"
|
||||||
<!-- <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
|
||||||
<!-- <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> -->
|
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
|
||||||
<!-- </div> -->
|
out:fly={{ duration: 300, y: -50, easing: quintOut }}
|
||||||
<!-- </div> -->
|
class="flex flex-col md:pr-3"
|
||||||
<!-- </div> -->
|
>
|
||||||
<!-- {:else} -->
|
<div class="flex flex-col md:flex-row">
|
||||||
<!-- <p>Ayo wait a second</p> -->
|
<div
|
||||||
<!-- {/each} -->
|
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"
|
||||||
<!-- </div> -->
|
/>
|
||||||
<!-- Do you know what i hate the most? Fucking -- s. -->
|
<h1 class="text-black dark:text-white text-4xl md:pl-3 md:pr-2">Blog</h1>
|
||||||
<p>Under construction!</p>
|
</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
7
src/routes/blog/+page.ts
Normal 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 }
|
||||||
|
}
|
||||||
88
src/routes/blog/[slug]/+page.svelte
Normal file
88
src/routes/blog/[slug]/+page.svelte
Normal 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"> #{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>
|
||||||
15
src/routes/blog/[slug]/+page.ts
Normal file
15
src/routes/blog/[slug]/+page.ts
Normal 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}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
35
src/routes/blog/posts/mds/firstblog.md
Normal file
35
src/routes/blog/posts/mds/firstblog.md
Normal 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!!
|
||||||
@ -1,76 +1,86 @@
|
|||||||
<script>
|
<script>
|
||||||
import proj from '$lib/project.json';
|
import proj from '$lib/project.json';
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
import { quintOut } from 'svelte/easing';
|
import { quintOut } from 'svelte/easing';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
|
<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">
|
<div class="min-h-screen">
|
||||||
<!-- Primary content (Left) -->
|
<!-- Primary content (Left) -->
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<div
|
<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}}
|
<div
|
||||||
out:fly={{ duration: 300, y: -50, easing: quintOut}}
|
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
|
||||||
class="flex flex-col">
|
out:fly={{ duration: 300, y: -50, easing: quintOut }}
|
||||||
<div class="flex flex-col md:flex-row">
|
class="flex flex-col"
|
||||||
<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 class="flex flex-col md:flex-row">
|
||||||
></div>
|
<div
|
||||||
<h1
|
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"
|
||||||
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>
|
</div>
|
||||||
<p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p>
|
<a href="/">
|
||||||
<a href="/">
|
<div
|
||||||
<div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
|
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>
|
>
|
||||||
<p class="md:block hidden"> Go back? </p>
|
<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
|
||||||
</div>
|
<p class="md:block hidden">Go back?</p>
|
||||||
</a>
|
</div>
|
||||||
</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">
|
||||||
<!-- Vertical line -->
|
<div class="overflow-y-auto">
|
||||||
<div
|
{#each proj as { name, date, desc, url, image, imdes }, i}
|
||||||
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
|
<a href={url}>
|
||||||
out:fly={{ duration: 300, y: 0, easing: quintOut}}
|
<!-- Gotta fix this, it's gonna look ugly when there are too many projects in the list... -->
|
||||||
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>
|
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="md:pl-4 md:gap-1 flex md:h-50% flex-col place-items-start">
|
>
|
||||||
<div class="overflow-y-auto">
|
<div class="my-auto">
|
||||||
{#each proj as { name, date, desc, url, image, imdes }, i}
|
<div class="flex flex-row place-content-between">
|
||||||
<a href="{url}">
|
<div
|
||||||
<!-- Gotta fix this, it's gonna look ugly when there are too many projects in the list... -->
|
class="flex flex-col pl-4 md:pl-0 gap-3 my-auto py-2 text-left z-0 place-items-start"
|
||||||
<div
|
>
|
||||||
in:fly={{ delay: 350, duration: 300 * i, y: -50, easing: quintOut}}
|
<h3 class="text-3xl dark:text-white text-black text-center">{name}</h3>
|
||||||
out:fly={{ duration: 300 , y: 50, easing: quintOut}}
|
<p class="text-sm dark:text-white text-black text-center">{date}</p>
|
||||||
class="flex flex-col p-2 rounded dark:hover:bg-#082f49 hover:bg-blue-100">
|
<p class="dark:text-white text-black text-sm">{desc}</p>
|
||||||
<div class="my-auto">
|
</div>
|
||||||
<div class="flex flex-row place-content-between">
|
<div
|
||||||
<div class="flex flex-col pl-4 md:pl-0 gap-3 my-auto py-2 text-left z-0 place-items-start">
|
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"
|
||||||
<h3 class="text-3xl dark:text-white text-black text-center">{name}</h3>
|
style="mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%, transparent 100%);"
|
||||||
<p class="text-sm dark:text-white text-black text-center">{date}</p>
|
>
|
||||||
<p class="dark:text-white text-black text-sm">{desc}</p>
|
<img
|
||||||
</div>
|
class="transition duration-600 top-0 opacity-50 scale-110 hover:opacity-75 object-cover md:object-contain hover:scale-120"
|
||||||
<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%);">
|
src={image}
|
||||||
<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}">
|
alt={imdes}
|
||||||
</div>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<hr
|
</a>
|
||||||
in:fly={{ delay: 300, duration: 500 * i, y: 0, easing: quintOut}}
|
<hr
|
||||||
out:fly={{ duration: 300 , y: 50, easing: quintOut}}
|
in:fly={{ delay: 300, duration: 500 * i, y: 0, easing: quintOut }}
|
||||||
class="border-black dark:border-white justify-center mx-auto w-85% md:w-100% my-2"/>
|
out:fly={{ duration: 300, y: 50, easing: quintOut }}
|
||||||
{/each}
|
class="border-black dark:border-white justify-center mx-auto w-85% md:w-100% my-2"
|
||||||
</div>
|
/>
|
||||||
</div>
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></body
|
||||||
|
>
|
||||||
|
|||||||
35
src/routes/rss.xml/+server.ts
Normal file
35
src/routes/rss.xml/+server.ts
Normal 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 });
|
||||||
|
}
|
||||||
@ -1,12 +1,39 @@
|
|||||||
// import adapter from '@sveltejs/adapter-auto';
|
// import adapter from '@sveltejs/adapter-auto';
|
||||||
import adapter from '@sveltejs/adapter-static';
|
import adapter from '@sveltejs/adapter-static';
|
||||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
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} */
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||||
// for more information about 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: {
|
kit: {
|
||||||
adapter: adapter({
|
adapter: adapter({
|
||||||
|
|||||||
@ -1,19 +1,19 @@
|
|||||||
import { sveltekit } from '@sveltejs/kit/vite';
|
import { sveltekit } from '@sveltejs/kit/vite';
|
||||||
import type { UserConfig } from 'vite';
|
import type { UserConfig } from 'vite';
|
||||||
import { defineConfig } from "vite";
|
//import { defineConfig } from 'vite';
|
||||||
import UnoCSS from 'unocss/vite';
|
import UnoCSS from 'unocss/vite';
|
||||||
import presetIcons from '@unocss/preset-icons';
|
//import presetIcons from '@unocss/preset-icons';
|
||||||
import presetWebFonts from '@unocss/preset-web-fonts'
|
//import presetWebFonts from '@unocss/preset-web-fonts';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const config: UserConfig = {
|
const config: UserConfig = {
|
||||||
plugins: [sveltekit(), UnoCSS(),
|
plugins: [
|
||||||
|
sveltekit(),
|
||||||
|
UnoCSS()
|
||||||
/* Self note: Don't add a config between the (), it just overrides the external config. */
|
/* Self note: Don't add a config between the (), it just overrides the external config. */
|
||||||
],
|
],
|
||||||
optimizeDeps: {
|
optimizeDeps: {
|
||||||
include: ["dayjs/plugin/relativeTime.js"],
|
include: ['dayjs/plugin/relativeTime.js']
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default config;
|
export default config;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user