feat: Metadata file, customization doc

README.md

@@ -1,14 +1,6 @@
 # Chrysoblog
 
-Personal Website
+A blog framework
-
-## Developing
-
-Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then start the dev server with
-
-```bash
-npm run dev [-- --open]
-```
 
 ## Building
 
@@ -19,3 +11,18 @@ npm run build
 ```
 
 You can preview the production build with `npm run preview`.
+
+### Content
+
+To insert custom content, replace
+- `src/content/metadata.json`: This file controls the display format for titles, front cover, etc.
+- `src/content/**/*.md`: These contain the blog posts and bio
+
+## Developing
+
+Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then start the dev server with
+
+```bash
+npm run dev [-- --open]
+```
+

package-lock.json

@@ -34,6 +34,7 @@
 				"tailwindcss": "^3.4.9",
 				"typescript": "^5.0.0",
 				"typescript-eslint": "^8.0.0",
+				"unist-util-visit": "^5.0.0",
 				"vite": "^5.0.3",
 				"vitest": "^2.0.0"
 			}
@@ -4450,6 +4451,27 @@
 				}
 			}
 		},
+		"node_modules/unist-util-is": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+			"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-is/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/unist-util-stringify-position": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
@@ -4464,6 +4486,51 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/unist-util-visit": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+			"integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0",
+				"unist-util-visit-parents": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+			"integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/unist-util-visit/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",

package.json

@@ -36,6 +36,7 @@
 		"tailwindcss": "^3.4.9",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0",
+		"unist-util-visit": "^5.0.0",
 		"vite": "^5.0.3",
 		"vitest": "^2.0.0"
 	},

src/app.css

@@ -1,3 +1,4 @@
+@import url(./style/content.css);
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -79,3 +80,4 @@
 html {
   scroll-behavior: smooth;
 }
+

src/content/home.md

@@ -5,3 +5,18 @@ name: Cirno
 
 Strongest of Gensokyo
 
+- Associate Professor in Pure Mathematics (1970 - )
+
+## Publications
+
+Perfect Math Class
+
+# Projects
+
+> This is a quote
+
+```python
+print("this is python")
+```
+
+

src/content/metadata.json

@@ -0,0 +1,6 @@
+{
+	"name": "Cirno",
+	"blogName": "Cirno's Blog",
+	"frontDescription": "This is a very long description.",
+	"frontCover": "/favicon.svg"
+}

src/content/post/placeholder1.md

@@ -5,3 +5,8 @@ date: '2024-09-01'
 # Placeholder Post 1
 
 Here is some placeholder text
+
+## 2nd level heading
+
+### 3rd level heading
+#### 4th level heading

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import '../app.css';
 	import { page } from '$app/stores';
 	import { Separator } from "$lib/components/ui/separator/index.js";
+	import Footer from "./Footer.svelte";
 	import { routes } from "./sitemap.ts"
 </script>
 
@@ -19,6 +20,7 @@
 	</div>
 {/if}
 <slot />
+<Footer />
 
 <style>
 	:global(a) {

src/routes/+page.svelte

@@ -14,17 +14,23 @@
 	import type { PageData } from './$types';
 	export let data: PageData;
 	const { name, Content } = data;
+
+	import metadata from '$content/metadata.json';
 </script>
 
+<svelte:head>
+	<title>{metadata.name}</title>
+</svelte:head>
+
 <div
 	id="background"
-	style="opacity: {1 - progress}"
+	style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')"
 >
 </div>
 
 <div id="front">
 	<div id="floater">
-		<p class="floater-elem" style="color: #888">This is a very long description</p>
+		<p class="floater-elem" style="color: #888">{metadata.frontDescription}</p>
 		<div
 			class="floater-elem"
 				 style="padding-bottom: {(1 - progress) * 50}vh"
@@ -42,7 +48,9 @@
 	</div>
 </div>
 <div id="bio" class="bg-white dark:bg-gray-900" style="">
-	<h2>{name}</h2>
+	<div>
+		<h1 id="bio-name">{name}</h1>
+	</div>
 	<Content />
 </div>
 
@@ -54,7 +62,6 @@
 
 <style>
 	#background {
-		background-image: url('/favicon.svg');
 		background-attachment: fixed;
 		background-size: 100%;
 		background-position: center;
@@ -63,10 +70,6 @@
 		min-width: 100vw;
 		min-height: 100vh;
 	}
-	#bio {
-		width: 100vw;
-		min-height: 100vh;
-	}
 	#front {
 		height: 100vh;
 		display: flex;
@@ -84,4 +87,16 @@
 		margin-left: auto;
 		margin-right: auto;
 	}
+
+	#bio {
+		width: 80%;
+		margin-left: auto;
+		margin-right: auto;
+		padding-top: 20px;
+		min-height: 100vh;
+	}
+ 	#bio-name {
+		font-family: sans-serif;
+		font-size: 60px;
+	}
 </style>

src/routes/Footer.svelte

@@ -0,0 +1,14 @@
+<div id="footer">
+	<p>Created and Designed by Leni Aniva</p>
+</div>
+
+<style>
+	#footer {
+		text-align: center;
+		bottom: 10px;
+	}
+	#footer p {
+		font-size: 12px;
+		color: #888;
+	}
+</style>

src/routes/about/+page.svelte

@@ -1,2 +0,0 @@
-<h1>About Page</h1>
-<p>This is the about page</p>

src/routes/post/+page.svelte

@@ -2,8 +2,13 @@
 	import type { PageData } from './$types';
 	export let data: PageData;
 	const { allPosts } = data;
+	import metadata from '$content/metadata.json';
 </script>
 
+<svelte:head>
+	<title>{metadata.blogName}</title>
+</svelte:head>
+
 <ul>
 	{#each allPosts as post}
 		<li>

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

@@ -2,8 +2,13 @@
 	import type { PageData } from './$types';
 	export let data: PageData;
 	const { title, date, Content } = data;
+	import metadata from '$content/metadata.json';
 </script>
 
+<svelte:head>
+	<title>{title} | {metadata.blogName}</title>
+</svelte:head>
+
 <article>
 	<h1>{title}</h1>
 	<p>Published: {date}</p>

src/routes/sitemap.ts

@@ -1,5 +1,6 @@
 export const routes: { route: string, name: string }[] = [
 	{ route: "/", name: "Home" },
 	{ route: "/post", name: "Blog" },
-	{ route: "/about", name: "About" },
+	{ route: "/art", name: "Art" },
+	{ route: "/archives", name: "Archives" },
 ];

src/style/content.css

@@ -0,0 +1,90 @@
+.heading {
+	@apply leading-tight font-medium;
+	font-family: serif;
+	color: theme('colors.eucalyptus.700');
+}
+h1 {
+   @apply heading text-5xl;
+	@apply lg:text-4xl;
+}
+h2 {
+   @apply heading text-2xl;
+	@apply lg:text-3xl;
+}
+h3 {
+   @apply heading text-xl;
+	@apply lg:text-2xl;
+}
+h4 {
+   @apply heading text-lg;
+	@apply lg:text-xl;
+}
+h5 {
+   @apply heading text-lg;
+}
+h6 {
+   @apply heading text-lg;
+}
+p {
+    font-family: serif;
+}
+
+/* block quotes */
+.note-blockquote {
+    border-left: 4px solid #0078d4; /* Blue left border */
+    padding: 1em;
+    position: relative;
+}
+
+.tip-blockquote {
+    border-left: 4px solid #107c10; /* Green left border */
+    padding: 1em;
+    position: relative;
+}
+
+.important-blockquote {
+    border-left: 4px solid #8250df; /* Red left border */
+    padding: 1em;
+    position: relative;
+}
+
+.warning-blockquote {
+    border-left: 4px solid #ffc83d; /* Yellow left border */
+    padding: 1em;
+    position: relative;
+    border-radius: 0px 12px 12px 0px;
+}
+
+.caution-blockquote {
+    border-left: 4px solid #d13438; /* Dark red left border */
+    padding: 1em;
+    position: relative;
+    border-radius: 0px 12px 12px 0px;
+}
+
+/* Common styles for icons */
+
+.note-blockquote::before {
+    content: '\24D8 \0020 \0020 \0020 Note';
+    color: #0078d4; /* Blue icon */
+}
+
+.tip-blockquote::before {
+    content: '\1F4A1 \0020 \0020 \0020 Tip';
+    color: #107c10; /* Green icon */
+}
+
+.important-blockquote::before {
+    content: '\272E \0020 \0020 \0020 Important';
+    color: #8250df; /* Red icon */
+}
+
+.warning-blockquote::before {
+    content: '\26A0 \0020 \0020 \0020 Warning';
+    color: #ffc83d; /* Yellow icon */
+}
+
+.caution-blockquote::before {
+    content: '\1F6D1 \0020 \0020 \0020 Caution';
+    color: #d13438; /* Dark red icon */
+}

svelte.config.js

@@ -8,7 +8,10 @@ const config = {
 	// for more information about preprocessors
 	preprocess: [
       vitePreprocess(),
-      mdsvex({ extensions: ['.md'] })
+      mdsvex({
+         extensions: ['.md'],
+         remarkPlugins: [],
+      })
    ],
    extensions: [".svelte", ".md"],