feat: Sticky navbar #30

Open
aniva wants to merge 3 commits from component/navbar into main
6 changed files with 45 additions and 12 deletions
Showing only changes of commit 46ca660a13 - Show all commits

View File

@ -11,7 +11,7 @@ repos:
hooks:
- id: conventional-pre-commit
stages: [commit-msg]
args: [feat, fix, chore, test, build, merge, refactor]
args: [feat, fix, chore, test, build, merge, refactor, doc]
- repo: local
hooks:
- id: eslint

View File

@ -19,6 +19,18 @@ To insert custom content, create a directory with a similar structure to
directory. The website will be built statically in `build/`. Note that changing
`favicon.svg` will require modifying the `static/` folder.
Set `metadata.json` based on the example to have a custom avatar and background
image.
- `name`: Displayed name on the home page
- `blogName`: Displayed name of the blog
- `url`: The site url
- `frontDescription`: The text above the main navbar
- `frontCover`: Path to the cover image
- `picture`: Avatar
- `links`: A map of brands to links
- `extra`: Extra pages showing on the navbar
- `markdown`: `{ "highlighterLangs": [ ... ], "katex": [ ... ] }`
## Developing
Install [pre-commit](https://pre-commit.com/).

View File

@ -12,5 +12,12 @@
},
"extra": [
{ "route": "/archives", "name": "Archives" }
],
"markdown": {
"highlighterLangs": [
"python",
"lean",
"tex"
]
}
}

View File

@ -26,3 +26,7 @@ $$
$$
\vec z^{(l+1)} = \mat M\vec z^{(l)} + \vec b
$$
```tex
\\newcommand{\\cirno}{9}
```

View File

@ -19,15 +19,22 @@
import metadata from '$content/metadata.json';
const iconMap: Map<string, string> = {
"bitbucket": "fa-brands fa-bitbucket",
"orcid": "fa-brands fa-orcid",
"google-scholar": "fa-brands fa-google-scholar",
"discord": "fa-brands fa-discord",
"email": "fa-solid fa-envelope",
"bitbucket": "fa-brands fa-bitbucket",
"github": "fa-brands fa-github",
"gitlab": "fa-brands fa-gitlab",
"google-scholar": "fa-brands fa-google-scholar",
"instagram": "fa-brands fa-instagram",
"open-source": "fa-brands fa-osi",
"orcid": "fa-brands fa-orcid",
"bluesky": "fa-brands fa-bluesky",
"youtube": "fa-brands fa-youtube",
"instagram": "fa-brands fa-instagram",
"bandcamp": "fa-brands fa-bandcamp",
"pixiv": "fa-brands fa-pixiv",
};
const iconLinks: [string, string][] = Object.entries(metadata.links).map(
([key, link]) => [iconMap[key], link]);

View File

@ -1,5 +1,6 @@
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import adapter from '@sveltejs/adapter-static';
import fs from 'fs';
import { mdsvex, escapeSvelte } from 'mdsvex';
import remarkAlert from './src/lib/markdown.js'
@ -12,7 +13,9 @@ import remarkMath from 'remark-math'
const contentDir = process.env?.CHRYSOBLOG_CONTENT ?? "src/content";
const langs = [
const metadata = await fs.promises.readFile(contentDir + "/metadata.json")
.then((file) => JSON.parse(file.toString()));
const langs = metadata?.markdown.highlighterLangs ?? [
"javascript",
"lean",
"lisp",
@ -26,11 +29,7 @@ const langs = [
"c++",
"sh",
];
const highlightingThemes = {
light: 'vitesse-light',
dark: 'vitesse-dark',
};
const katexOptions = {
const katexOptions = metadata?.markdown.katex ?? {
macros: {
"\\Nat": "\\mathbb N",
"\\Complex": "\\mathbb C",
@ -39,6 +38,10 @@ const katexOptions = {
"\\rv": "\\mathrm",
},
};
const highlightingThemes = {
light: 'vitesse-light',
dark: 'vitesse-dark',
};
const themes = Object.keys(highlightingThemes).map(function(k){ return highlightingThemes[k] });
const highlighter = await getHighlighter({