add site content

swaptr · Sep 30, 2023 · 31da689 · 31da689
1 parent 6dbc74e
commit 31da689
Show file tree

Hide file tree

Showing 54 changed files with 1,179 additions and 97 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
@@ -28,5 +28,9 @@
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"iconify-icon": "^1.0.8",
+		"shiki": "^0.14.4"
+	}
 }
diff --git a/posts/first-post.md b/posts/first-post.md
diff --git a/posts/second-post.md b/posts/second-post.md
diff --git a/posts/third-post.md b/posts/third-post.md
diff --git a/src/app.css b/src/app.css
@@ -1,6 +1,6 @@
 html {
     font-family: 'Inter';
-    font-size: 15px;
+    font-size: 14px;
     color: white;
     background-color: black;
 }
@@ -9,22 +9,48 @@ html,
 body {
     height: 100%;
     width: 100%;
+    padding: 0;
+    margin: 0;
 }
 
-img {
-    border-radius: 10px;
-}
-
-ul,
-ol {
-    list-style: none;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
     padding: 0;
+    margin: 0;
 }
 
 li {
     padding-inline-start: 0;
 }
 
+a {
+    text-decoration: underline;
+    color: lightgray;
+}
+
 a:hover {
     opacity: 0.8;
-}
+}
+
+.prose :is(a) {
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.prose :is(a):hover {
+    text-decoration: underline;
+}
+
+.prose pre {
+    white-space: pre-wrap; 
+    word-break: break-word;
+    padding: 10px 20px;
+    border-radius: 5px;
+    tab-size: 2;
+    font-size: smaller;
+}
diff --git a/src/app.html b/src/app.html
@@ -3,8 +3,11 @@
 
 <head>
 	<meta charset="utf-8" />
-	<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+	<!-- <link rel="icon" href="%sveltekit.assets%/favicon.ico" /> -->
+	<!-- <link rel="icon" href="/favicon.ico" /> -->
+	<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 	<meta name="viewport" content="width=device-width" />
+	<link rel="alternate" type="application/atom+xml" href="/rss.xml" />
 	%sveltekit.head%
 </head>
 

diff --git a/src/components/BlogHeader.svelte b/src/components/BlogHeader.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import TextButton from './TextButton.svelte';
+	import Modal from './modal.svelte';
+	let showModal = false;
+</script>
+
+<div class="blog-header">
+	<ul class="filters">
+		<li>
+			<TextButton
+				label="tags"
+				onChange={() => {
+					showModal = true;
+				}}
+			/>
+		</li>
+	</ul>
+</div>
+
+<Modal bind:showModal>
+	<h3 slot="modal-header">Tags</h3>
+	<p>
+		<b>Hello</b>
+	</p>
+</Modal>
+
+<style>
+	ul {
+		list-style: none;
+		padding: 0;
+	}
+
+	.filters {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		gap: 15px;
+		margin-block: 0;
+	}
+</style>
diff --git a/src/components/CopyCodeInjector.svelte b/src/components/CopyCodeInjector.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+
+	let copiedText = false;
+	let copyTimeout = 200;
+
+	onMount(() => {
+		let pres: HTMLCollection = document.getElementsByTagName('pre');
+		for (let _ of pres) {
+			const pre = _ as HTMLPreElement;
+			const text = pre.innerText;
+			let copyButton = document.createElement('button');
+			copyButton.addEventListener(
+				'click',
+				() => (
+					navigator.clipboard.writeText(text),
+					(copiedText = true),
+					copyTimeout && clearTimeout(copyTimeout),
+					(copyTimeout = setTimeout(() => (copiedText = false), 1500))
+				)
+			);
+			pre.style.position = 'relative';
+			copyButton.style.backgroundColor = '#1f1f1f';
+			copyButton.style.color = '#f1f1f1';
+			copyButton.style.fontSize = '12px';
+			copyButton.style.margin = '0px 5px 5px 0px';
+			copyButton.style.borderStyle = 'none';
+			copyButton.style.borderRadius = '3px';
+			copyButton.style.padding = '3px 8px';
+			copyButton.style.position = 'absolute';
+			copyButton.style.bottom = '0px';
+			copyButton.style.right = '0px';
+			copyButton.style.cursor = 'pointer';
+			copyButton.className = 'copy';
+			copyButton.innerText = 'copy';
+			pre.appendChild(copyButton);
+		}
+	});
+</script>
+
+{#if copiedText}
+	<div in:fly={{ y: -100 }} out:fly={{ y: -100 }} class="copy-tooltip">copied to clipboard</div>
+{/if}
+
+<slot />
+
+<style>
+	.copy-tooltip {
+		background-color: rgba(0, 0, 0, 0.8);
+		color: var(--body);
+		position: fixed;
+		padding: 0.4em 0.7em;
+		border-radius: 0.4em;
+		left: 50%;
+		transform: translate(-50%, 0);
+		top: 10px;
+		z-index: 1;
+		box-shadow: 0px 2px 10px -2px var(--code-copy);
+	}
+</style>