Css variables fixed (#7)

package.json

@@ -16,41 +16,42 @@
   },
   "devDependencies": {
     "@neoconfetti/svelte": "^2.2.1",
-    "@playwright/test": "^1.45.2",
+    "@playwright/test": "^1.45.3",
     "@sveltejs/adapter-static": "^3.0.2",
     "@sveltejs/adapter-vercel": "^5.4.1",
     "@sveltejs/enhanced-img": "^0.3.0",
     "@sveltejs/kit": "^2.5.18",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "@types/eslint": "8.56.10",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
+    "@types/eslint": "9.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
     "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.43.0",
     "mdsvex": "^0.11.2",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
+    "shiki-transformer-copy-button": "^0.0.3",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.4",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "vite": "^5.3.4",
-    "vite-plugin-pagefind": "^0.2.9",
-    "vitest": "^2.0.3"
+    "vite-plugin-pagefind": "^0.2.10",
+    "vitest": "^2.0.4"
   },
   "dependencies": {
     "@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.412.0",
+    "lucide-svelte": "^0.414.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": "^1.10.3",
+    "shiki": "^1.11.1",
     "svelte-zoo": "^0.4.10"
   }
 }

src/app.css

@@ -111,6 +111,7 @@ ol {
 
 li {
 	padding-inline-start: 0;
+	/* max-width: 100%; */
 }
 
 .surface-1 {
@@ -169,4 +170,49 @@ li {
 	font-size: 12pt;
 	line-height: initial;
 	transition: background-color 0.2s;
-  } */
+  } */
+
+/*************** CODE COPY BUTTON ***************/
+
+pre:has(code) {
+	position: relative;
+	overflow-x: auto;
+}
+
+pre button.copy {
+	position: absolute;
+	right: 16px;
+	top: 16px;
+	height: 28px;
+	width: 28px;
+	padding: 0;
+	display: flex;
+
+	& span {
+		width: 100%;
+		aspect-ratio: 1 / 1;
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: cover;
+	}
+
+	& .ready {
+		background-image: url(/icons/copy.svg);
+	}
+
+	& .success {
+		display: none;
+		background-image: url(/icons/copy-success.svg);
+	}
+
+	&.copied {
+		& .success {
+			display: block;
+		}
+
+		& .ready {
+			display: none;
+		}
+	}
+}
+/*************** CODE COPY BUTTON ***************/

src/content/Code.Test.md

@@ -0,0 +1,54 @@
+---
+title: Code Test
+description: Code Test
+date: '2024-7-25'
+categories:
+  - programming
+published: true
+---
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+
+```ts
+import * as config from '$lib/config'
+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>${config.title}</title>
+				<description>${config.description}</description>
+				<link>${config.url}</link>
+				<atom:link href="${config.url}/rss.xml" rel="self" type="application/rss+xml"/>
+				${posts
+					.map(
+						(post) => `
+						<item>
+							<title>${post.title}</title>
+							<description>${post.description}</description>
+							<link>${config.url}/${post.slug}</link>
+							<guid isPermaLink="true">${config.url}/${post.slug}</guid>
+							<pubDate>${new Date(post.date).toUTCString()}</pubDate>
+						</item>
+					`
+					)
+					.join('')}
+			</channel>
+		</rss>
+	`.trim()
+
+	return new Response(xml, { headers })
+}
+```
+
+```python
+# Long variable scroll test
+longvariablename  = "longvariablename_longvariablename_longvariablename_longvariablename_longvariablename_longvariablename_longvariablename_longvariablename_longvariablename_longvariablename"
+```

src/content/How.This.Blog.Developed.md

@@ -0,0 +1,33 @@
+---
+title: How.This.Blog.Developed
+description: How.This.Blog.Developed
+date: '2024-7-22'
+categories:
+  - sveltekit
+  - optimization
+published: true
+---
+
+## Contents
+
+## General
+
+- 
+- Built using SvelteKit
+
+## Optimizations
+
+- Enable pre-render
+- Unlike other SSGs, prerendered SvelteKit still allows for client-side hydration, so I can still use smooth client-side routing and transitions.
+- Use static adapter
+- For images, use AVIF / WebP instead of PNG / JPEG
+	- Use Sveltekit [enhanced:img](https://kit.svelte.dev/docs/images#sveltejs-enhanced-img-srcset-and-sizes)
+- Optimize fonts by reducing their size
+	- Only import the necessary weights and subsets for each font
+	- use woff2 files
+	- For hosting fonts, Fontsource can be used
+- Use inline CSS
+	- It eliminates the need for an extra request to fetch an external CSS file
+	- However, it prevents the browser from caching the CSS file
+	- So while the initial load time can be faster, subsequent navigations may be slower.
+	- This is a worthy trade-off for blog pages where initial load time is much more important

src/content/MD.Compatibility.md

@@ -13,21 +13,7 @@ published: true
 </script>
 
 
-# Markdown.Syntax
-
-- [Markdown.Syntax](#markdownsyntax)
-  - [Overview](#overview)
-    - [Philosophy](#philosophy)
-  - [Block Elements](#block-elements)
-    - [Paragraphs and Line Breaks](#paragraphs-and-line-breaks)
-    - [Headers](#headers)
-    - [Blockquotes](#blockquotes)
-    - [Lists](#lists)
-    - [Code Blocks](#code-blocks)
-  - [Span Elements](#span-elements)
-    - [Links](#links)
-    - [Emphasis](#emphasis)
-    - [Code](#code)
+## Contents
 
 ## Overview
 
@@ -237,16 +223,6 @@ in both `<pre>` and `<code>` tags.
 To produce a code block in Markdown, simply indent every line of the
 block by at least 4 spaces or 1 tab.
 
-This is a normal paragraph:
-
-    This is a code block.
-
-Here is an example of AppleScript:
-
-    tell application "Foo"
-        beep
-    end tell
-
 A code block continues until it reaches a line that is not indented
 (or the end of the article).
 
@@ -264,10 +240,10 @@ Regular Markdown syntax is not processed within code blocks. E.g.,
 asterisks are just literal asterisks within a code block. This means
 it's also easy to use Markdown to write about Markdown's own syntax.
 
-```
-tell application "Foo"
-    beep
-end tell
+```python
+def foo():
+    if not bar:
+        return True
 ```
 
 ## Span Elements

src/content/My.Thesis.md

@@ -1,14 +1,14 @@
 ---
 title: My Thesis
-description: My Master Thesis Work
+description: ON THE USE OF LARGE LANGUAGE MODEL FOR VIRTUAL SCREENING
 date: '2024-7-16'
 categories:
   - programming
   - thesis
 published: true
 ---
 
-# ON THE USE OF LARGE LANGUAGE MODEL FOR VIRTUAL SCREENING
+## Contents
 
 ## Introduction
 

src/content/Python.Template.md

@@ -8,6 +8,8 @@ categories:
 published: true
 ---
 
+## Contents
+
 ## Project Structure
 
 - [Github Repository](https://github.com/ilkersigirci/python-template)

src/routes/+layout.svelte

@@ -9,23 +9,6 @@
 	import '../app.css'
 
 	export let data
-
-	// NOTE: For enabling Copy Button on code blocks
-	// import { CopyButton } from 'svelte-zoo'
-	// import { afterNavigate } from '$app/navigation'
-
-	// afterNavigate(() => {
-	// 	for (const node of document.querySelectorAll('pre > code')) {
-	// 		new CopyButton({
-	// 			// use whatever Svelte component you like here
-	// 			target: node,
-	// 			props: {
-	// 				content: node.textContent ?? '',
-	// 				style: 'position: absolute; top: 1ex; right: 1ex;' // requires <pre> to have position: relative;
-	// 			}
-	// 		})
-	// 	}
-	// })
 </script>
 
 <div class="layout">

src/routes/post/+page.svelte

@@ -27,7 +27,7 @@
 <style>
 	.posts {
 		display: grid;
-		gap: var(--size-7);
+		gap: var(--size-3);
 	}
 
 	.post {
@@ -40,7 +40,7 @@
 	}
 
 	.title {
-		font-size: var(--font-size-fluid-3);
+		font-size: var(--font-size-fluid-2);
 		text-transform: capitalize;
 	}
 

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

@@ -29,7 +29,9 @@
 
 <style>
 	article {
+		/* max-width: var(--size-content-3); */
 		max-inline-size: var(--size-content-3);
+		/* max-inline-size: var(--size-content-4); */
 		margin-inline: auto;
 	}