Move to node, update all dependencies, fix unocss, add a dockerfile and

a CI builder for gitea.

.gitea/workflows/build.yaml

@@ -0,0 +1,30 @@
+name: Svelte Website guild.
+run-name: ${{ github.actor }} is building the website.
+on:
+  push:
+    branches:
+      - 'svelte-stable'
+jobs:
+  build:
+    name: 'Building the website'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: 'Build:checkout'
+        uses: actions/checkout@v3
+      - name: Log in to the Container registry
+        uses: docker/login-action@v2
+        with:
+          registry: git.projectsegfau.lt
+          username: midou
+          password: ${{ secrets.ACCESS_TOKEN }}
+      - name: 'Build:dockerimage'
+        uses: docker/build-push-action@v3
+        with:
+          tags: git.projectsegfau.lt/midou/midou36o.github.io:latest
+          context: '.'
+          push: true
+          no-cache: true

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:18-alpine
+
+WORKDIR /usr/src/app
+
+COPY package.json ./
+COPY pnpm-lock.yaml ./
+
+RUN npm install -g pnpm
+
+RUN pnpm i
+
+COPY . .
+
+RUN pnpm build
+
+EXPOSE 3000
+
+CMD ["node", "build/index.js"]

package.json

@@ -12,36 +12,38 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@iconify/json": "^2.2.94",
+		"@iconify/json": "^2.2.163",
-		"@sveltejs/adapter-auto": "^1.0.3",
+		"@sveltejs/adapter-auto": "^3.0.1",
-		"@sveltejs/adapter-static": "^2.0.2",
+		"@sveltejs/adapter-node": "^2.0.2",
-		"@sveltejs/kit": "^1.22.3",
+		"@sveltejs/adapter-static": "^3.0.1",
-		"@typescript-eslint/eslint-plugin": "^5.62.0",
+		"@sveltejs/kit": "^2.0.6",
-		"@typescript-eslint/parser": "^5.62.0",
+		"@typescript-eslint/eslint-plugin": "^6.16.0",
-		"@unocss/preset-icons": "^0.48.5",
+		"@typescript-eslint/parser": "^6.16.0",
-		"@unocss/preset-web-fonts": "^0.48.5",
+		"@unocss/extractor-svelte": "^0.58.2",
-		"eslint": "^8.45.0",
+		"@unocss/preset-icons": "^0.58.2",
-		"eslint-config-prettier": "^8.8.0",
+		"@unocss/preset-web-fonts": "^0.58.2",
-		"eslint-plugin-svelte3": "^4.0.0",
+		"eslint": "^8.56.0",
-		"prettier": "^2.8.8",
+		"eslint-config-prettier": "^9.1.0",
-		"prettier-plugin-svelte": "^2.10.1",
+		"prettier": "^3.1.1",
-		"svelte": "^3.59.2",
+		"prettier-plugin-svelte": "^3.1.2",
-		"svelte-check": "^3.4.6",
+		"svelte": "^4.2.8",
-		"svelte-dark-mode": "^2.1.0",
+		"svelte-check": "^3.6.2",
-		"svelte-time": "^0.7.2",
+		"svelte-time": "^0.8.2",
-		"tslib": "^2.6.0",
+		"tslib": "^2.6.2",
-		"typescript": "^4.9.5",
+		"typescript": "^5.3.3",
-		"unocss": "^0.48.5",
+		"unocss": "^0.58.2",
-		"vite": "^4.4.7"
+		"vite": "^5.0.10"
 	},
 	"type": "module",
 	"dependencies": {
-		"@unocss/reset": "^0.48.5",
+		"@unocss/reset": "^0.58.2",
-		"dayjs": "^1.11.9",
+		"dayjs": "^1.11.10",
+		"eslint-plugin-svelte": "^2.35.1",
 		"github-markdown-css": "^5.5.0",
 		"katex": "^0.16.9",
 		"mathjax": "^3.2.2",
 		"mdsvex": "^0.11.0",
+		"ofetch": "^1.3.3",
 		"rehype-katex": "^7.0.0",
 		"rehype-mathjax": "^6.0.0",
 		"remark-math": "^6.0.0",

src/routes/blog/+page.svelte

@@ -19,8 +19,8 @@
 				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 }}
+					in:fly={{ delay: 350, duration: 350, y: 50, easing: quintOut }}
-					out:fly={{ duration: 300, y: -50, easing: quintOut }}
+					out:fly={{ duration: 350, y: -50, easing: quintOut }}
 					class="flex flex-col md:pr-3"
 				>
 					<div class="flex flex-col md:flex-row">
@@ -45,14 +45,18 @@
 					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 class="md:pl-4 md:gap-1 flex md:h-50% flex-col place-items-start">
+				<div
+					in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut }}
+					out:fly={{ duration: 300, y: 50, easing: quintOut }}
+					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 }}
+									in:fly={{ delay: 300, 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"
 								>

src/routes/projects/+page.svelte

@@ -38,8 +38,12 @@
 					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 class="md:pl-4 md:gap-1 flex md:h-50% flex-col place-items-start">
+				<div
+					in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut }}
+					out:fly={{ duration: 300, y: 50, easing: quintOut }}
+					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}>

src/routes/rss.xml/+server.ts

@@ -12,7 +12,7 @@ export async function GET({ fetch }) {
 				<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"/>
+				<atom:link href="https://midou.dev/rss.xml" rel="self" type="application/rss+xml"/>
 				${posts
 					.map(
 						(post) => `
@@ -21,7 +21,6 @@ export async function GET({ fetch }) {
 							<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>
 					`

svelte.config.js

@@ -1,6 +1,7 @@
 // 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 adapter from '@sveltejs/adapter-node';
+//import { vitePreprocess } from '@sveltejs/kit/vite';
 import { mdsvex, escapeSvelte } from 'mdsvex';
 import shiki from 'shiki';
 import math from 'remark-math';
@@ -13,7 +14,6 @@ const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: [
-		vitePreprocess(),
 		mdsvex({
 			extensions: ['.md', 'svx'],
 			layout: 'src/lib/blog/+post.svelte',
@@ -36,13 +36,14 @@ const config = {
 	extensions: ['.svelte', '.md', '.svx'],
 
 	kit: {
-		adapter: adapter({
+		// adapter: adapter({
-			pages: 'build',
+		// 	pages: 'build',
-			assets: 'build',
+		// 	assets: 'build',
-			fallback: null,
+		// 	fallback: null,
-			precompress: false,
+		// 	precompress: false,
-			strict: false
+		// 	strict: false
-		})
+		// })
+		adapter: adapter()
 	}
 };
 

unocss.config.ts

@@ -8,10 +8,10 @@ import {
 	presetWebFonts
 } from 'unocss';
 
-import { extractorSvelte } from 'unocss';
+import extractorSvelte from '@unocss/extractor-svelte';
 
 export default defineConfig({
-	extractors: [extractorSvelte],
+	extractors: [extractorSvelte()],
 
 	presets: [
 		presetIcons(),

vite.config.ts

@@ -13,6 +13,12 @@ const config: UserConfig = {
 	],
 	optimizeDeps: {
 		include: ['dayjs/plugin/relativeTime.js']
+	},
+	server: {
+		port: 3000
+	},
+	preview: {
+		port: 3020
 	}
 };