aniva/Chrysoblog
aniva
/
Chrysoblog
1
1
Fork 0
Code Issues 9 Pull Requests 2 Packages Projects Releases Wiki Activity

feat: Metadata file, customization doc

This commit is contained in:
Leni Aniva 2024-09-14 00:59:54 -07:00
parent c75c8ca514
commit b8d7b2dcff
Signed by: aniva
GPG Key ID: 4D9B1C8D10EA4C50
16 changed files with 257 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -1,14 +1,6 @@
# Chrysoblog
Personal Website
## Developing
Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then start the dev server with
```bash
npm run dev [-- --open]
```
A blog framework
## 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]
```

67
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"
},

2
src/app.css
View File

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

15
src/content/home.md
View File

@ -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")
```

6
src/content/metadata.json Normal file
View File

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

5
src/content/post/placeholder1.md
View File

@ -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

2
src/routes/+layout.svelte
View File

@ -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) {

31
src/routes/+page.svelte
View File

@ -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>

14
src/routes/Footer.svelte Normal file
View File

@ -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>

2
src/routes/about/+page.svelte
View File

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

5
src/routes/post/+page.svelte
View File

@ -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>

5
src/routes/post/[slug]/+page.svelte
View File

@ -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>

3
src/routes/sitemap.ts
View File

@ -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" },
];

90
src/style/content.css Normal file
View File

@ -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 */
}

5
svelte.config.js
View File

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