Github pages deployment added (#3)

.github/workflows/deploy.yml

@@ -2,17 +2,23 @@ name: Deploy to GitHub Pages
 
 on:
   push:
-    branches: 'main'
+    branches: [main]
+  pull_request:
+    branches: [main]
 
 jobs:
-  build_site:
+  deploy:
+    permissions:
+      pages: write
+      contents: write
+
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup bun
-        uses: oven-sh/setup-bun@v1
+        uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
 
@@ -25,24 +31,9 @@ jobs:
         run: |
           bun run build
 
-      - name: Upload Artifacts
-        uses: actions/upload-pages-artifact@v2
-        with:
-          path: 'build/'
-
-  deploy:
-    needs: build_site
-    runs-on: ubuntu-latest
-
-    permissions:
-      pages: write
-      id-token: write
-
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-
-    steps:
       - name: Deploy
-        id: deployment
-        uses: actions/deploy-pages@v2
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build
+          publish_branch: gh-pages

package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build && pagefind --site build",
+    "build": "vite build && pagefind",
     "preview": "vite preview",
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -16,40 +16,40 @@
   },
   "devDependencies": {
     "@neoconfetti/svelte": "^2.2.1",
-    "@playwright/test": "^1.28.1",
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/adapter-vercel": "^4.0.3",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "@types/eslint": "8.56.0",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "eslint": "^8.56.0",
+    "@playwright/test": "^1.45.1",
+    "@sveltejs/adapter-static": "^3.0.2",
+    "@sveltejs/adapter-vercel": "^5.4.0",
+    "@sveltejs/kit": "^2.5.18",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@types/eslint": "8.56.10",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "eslint": "^9.6.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.35.1",
-    "mdsvex": "^0.11.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.3",
-    "vite-plugin-pagefind": "^0.0.30",
-    "vitest": "^1.0.0"
+    "eslint-plugin-svelte": "^2.41.0",
+    "mdsvex": "^0.11.2",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.5",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.4",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vite-plugin-pagefind": "^0.2.8",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
-    "@fontsource/fira-mono": "^5.0.8",
-    "@fontsource/jetbrains-mono": "^5.0.18",
-    "@fontsource/manrope": "^5.0.18",
-    "@pagefind/default-ui": "^1.0.4",
-    "lucide-svelte": "^0.303.0",
-    "open-props": "^1.6.16",
-    "pagefind": "^1.0.4",
+    "@fontsource/fira-mono": "^5.0.13",
+    "@fontsource/jetbrains-mono": "^5.0.20",
+    "@fontsource/manrope": "^5.0.20",
+    "@pagefind/default-ui": "^1.1.0",
+    "lucide-svelte": "^0.399.0",
+    "open-props": "^1.7.5",
+    "pagefind": "^1.1.0",
     "rehype-slug": "^6.0.0",
     "remark-toc": "^9.0.0",
     "remark-unwrap-images": "^4.0.0",
-    "shiki": "^0.14.1",
-    "svelte-zoo": "^0.4.9"
+    "shiki": "^1.10.1",
+    "svelte-zoo": "^0.4.10"
   }
 }

pagefind.json

@@ -0,0 +1,8 @@
+{
+    "site": "build",
+    "vite_plugin_pagefind": {
+        "assets_dir": "static",
+        "build_command": "bun run build",
+        "dev_strategy": "lazy"
+    }
+}

src/app.css

@@ -143,7 +143,7 @@ li {
 }
 
 .prose :is(ul, ol) {
-	list-style-type: '🔥';
+	list-style-type: '🔘';
 	padding-left: var(--size-5);
 }
 

src/app.html

@@ -4,8 +4,8 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="icon" href="https://fav.farm/🔥" />
-		<link rel="alternate" type="application/atom+xml" href="/rss.xml" />
+		<link rel="icon" href="https://fav.farm/🖥" />
+		<!-- <link rel="alternate" type="application/atom+xml" href="/rss.xml" /> -->
 		<script type="module">
 			const theme = localStorage.getItem('color-scheme')
 

src/lib/config.ts

@@ -1,5 +1,6 @@
 import { dev } from '$app/environment'
+import { base } from '$app/paths'
 
 export const title = 'Ilkerflix Blog'
 export const description = 'Ilkerflix Blog'
-export const url = dev ? 'http://localhost:5173' : 'https://blog.ilkerflix.com'
+export const url = (dev ? 'http://localhost:5173' : 'https://blog.ilkerflix.com') + base

src/routes/+page.ts

@@ -1,5 +1,6 @@
 import { redirect } from '@sveltejs/kit'
+import { base } from '$app/paths'
 
 export function load() {
-	throw redirect(302, '/1')
+	throw redirect(302, base + '/1')
 }

src/routes/[dynamic_page]/+page.svelte

@@ -2,6 +2,7 @@
 	import { formatDate } from '$lib/utils'
 	import * as config from '$lib/config'
 	import { page } from '$app/stores'
+	import { base } from '$app/paths'
 
 	export let data
 
@@ -20,7 +21,7 @@
 	<ul class="posts">
 		{#each data.posts as post}
 			<li class="post">
-				<a href="/post/{post.slug}" class="title">{post.title}</a>
+				<a href="{base}/post/{post.slug}" class="title">{post.title}</a>
 				<p class="date">{formatDate(post.date)}</p>
 				<p class="description">{post.description}</p>
 			</li>
@@ -30,7 +31,7 @@
 
 <div class="pagination">
 	{#each Array(totalPages) as _, idx}
-		<a href="/{idx + 1}" class={currentPage === idx ? 'text-emerald-300' : ''}>
+		<a href="{base}/{idx + 1}" class={currentPage === idx ? 'text-emerald-300' : ''}>
 			{idx + 1}
 		</a>
 	{/each}

src/routes/header.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
+	import { base } from '$app/paths'
+
 	import Toggle from './toggle.svelte'
 	import * as config from '$lib/config'
 </script>
 
 <nav>
-	<a href="/" class="title">
+	<a href="{base}/" class="title">
 		<b>{config.title}</b>
 	</a>
 
 	<ul class="links">
 		<li>
-			<a href="/about">About</a>
+			<a href="{base}/about">About</a>
 		</li>
 		<li>
-			<a href="/contact">Contact</a>
+			<a href="{base}/contact">Contact</a>
 		</li>
 		<li>
-			<a href="/post">All.Posts</a>
+			<a href="{base}/post">All.Posts</a>
 		</li>
 		<li>
-			<a href="/rss.xml" target="_blank">RSS</a>
+			<a href="{base}/rss.xml" target="_blank">RSS</a>
 		</li>
 	</ul>
 

src/routes/post/+page.svelte

@@ -2,6 +2,7 @@
 	import { formatDate } from '$lib/utils'
 	import * as config from '$lib/config'
 	import { PageFindSearch } from '$lib/components/search'
+	import { base } from '$app/paths'
 
 	export let data
 </script>
@@ -15,7 +16,7 @@
 	<ul class="posts">
 		{#each data.posts as post}
 			<li class="post">
-				<a href="post/{post.slug}" class="title">{post.title}</a>
+				<a href="{base}/post/{post.slug}" class="title">{post.title}</a>
 				<p class="date">{formatDate(post.date)}</p>
 				<p class="description">{post.description}</p>
 			</li>

src/routes/post/[slug]/+page.ts

@@ -9,6 +9,6 @@ export async function load({ params }) {
 			meta: post.metadata
 		}
 	} catch (e) {
-		throw error(404, `Could not find ${params.slug}`)
+		error(404, `Could not find ${params.slug}`)
 	}
 }

svelte.config.js

@@ -3,7 +3,7 @@ import adapter from '@sveltejs/adapter-static'
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 import { mdsvex, escapeSvelte } from 'mdsvex'
-import shiki from 'shiki'
+import { createHighlighter } from 'shiki'
 import remarkUnwrapImages from 'remark-unwrap-images'
 import remarkToc from 'remark-toc'
 import rehypeSlug from 'rehype-slug'
@@ -16,8 +16,12 @@ const mdsvexOptions = {
 	},
 	highlight: {
 		highlighter: async (code, lang = 'text') => {
-			const highlighter = await shiki.getHighlighter({ theme: 'one-dark-pro' })
-			const html = escapeSvelte(highlighter.codeToHtml(code, { lang }))
+			const highlighter = await createHighlighter({
+				themes: ['one-dark-pro'],
+				langs: ['javascript', 'typescript', 'python']
+			})
+			await highlighter.loadLanguage('javascript', 'typescript', 'python')
+			const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'one-dark-pro' }))
 			return `{@html \`${html}\` }`
 		}
 	},
@@ -32,7 +36,7 @@ const config = {
 	kit: {
 		adapter: adapter({ fallback: '404.html', pages: 'build', assets: 'build' }),
 		paths: {
-			base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
+			base: process.argv.includes('dev') ? "" : process.env.BASE_PATH
 			// base: process.env.NODE_ENV === "dev" ? "" : "/my-blog",
 		}
 	}

vite.config.ts

@@ -1,9 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import { defineConfig } from 'vitest/config'
-import { pagefind } from 'vite-plugin-pagefind'
+import pagefind from 'vite-plugin-pagefind'
 
 export default defineConfig({
-	plugins: [sveltekit(), pagefind({ publicDir: 'static', buildDir: 'build' })],
+	plugins: [sveltekit(), pagefind()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	}