added homebar

This commit is contained in:
Heli-o 2024-04-07 14:12:40 +02:00
parent 8b5e4c56a3
commit 3195781247
3 changed files with 43 additions and 1 deletions

View file

@ -4,7 +4,9 @@ import * as Component from "./quartz/components"
// components shared across all pages
export const sharedPageComponents: SharedLayout = {
head: Component.Head(),
header: [],
header: [
Component.Homebar(),
],
footer: Component.Footer({
links: {
"Main social profile": "https://derg.social/@ulysia",

View file

@ -0,0 +1,38 @@
import { pathToRoot } from "../util/path"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { classNames } from "../util/lang"
import { i18n } from "../i18n"
const Homebar: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
const baseDir = pathToRoot(fileData.slug!)
return (
<div class={classNames(displayClass, "homebar")}>
<a href="/index">Home</a>
<a href="Characters">Characters</a>
<a href="Links">Where you can find me</a>
<a href="Projects">Projects</a>
<a href="Articles">Articles</a>
</div>
)
}
Homebar.css = `
.homebar {
margin: 0;
display: flex;
flex-direction: row;
}
.homebar > * {
border-radius: 25%;
background-color: rgba(100,100,100, 0.3);
padding: 0.2rem 0.4rem;
margin: 0.2rem 0.4rem;
text-decoration: none;
}
.homebar > *:hover {
background-color: rgba(100,100,100, 0.5);
}
`
export default (() => Homebar) satisfies QuartzComponentConstructor

View file

@ -20,6 +20,7 @@ import MobileOnly from "./MobileOnly"
import RecentNotes from "./RecentNotes"
import Breadcrumbs from "./Breadcrumbs"
import PageImage from "./PageImage"
import Homebar from "./Homebar"
export {
ArticleTitle,
@ -44,4 +45,5 @@ export {
NotFound,
Breadcrumbs,
PageImage,
Homebar,
}