switched to component ring
This commit is contained in:
parent
d2bb4222ee
commit
89a499d231
|
@ -8,11 +8,14 @@ export const sharedPageComponents: SharedLayout = {
|
||||||
Component.DesktopOnly(Component.PageImage()),
|
Component.DesktopOnly(Component.PageImage()),
|
||||||
Component.Homebar(),
|
Component.Homebar(),
|
||||||
],
|
],
|
||||||
footer: Component.Footer({
|
footer: [
|
||||||
links: {
|
Component.Footer({
|
||||||
"Main social profile": "https://derg.social/@ulysia",
|
links: {
|
||||||
},
|
"Main social profile": "https://derg.social/@ulysia",
|
||||||
}),
|
},
|
||||||
|
}),
|
||||||
|
Component.Rings()
|
||||||
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
// components for pages that display a single page (e.g. a single note)
|
// components for pages that display a single page (e.g. a single note)
|
||||||
|
|
49
quartz/components/Rings.tsx
Normal file
49
quartz/components/Rings.tsx
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
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="homebar">
|
||||||
|
<div class="ring">
|
||||||
|
<a href ="https://fediring.net"><h2>Fediring:</h2></a>
|
||||||
|
<a class="ringbtn" href="https://fediring.net/previous?host=nexie.net">◄</a>
|
||||||
|
<a class="ringbtn" href="https://fediring.net/random">Random</a>
|
||||||
|
<a class="ringbtn" href="https://fediring.net/next?host=nexie.net">►</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Homebar.css = `
|
||||||
|
.ring {
|
||||||
|
display:flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ringbtn {
|
||||||
|
font-size: 0.9rem !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
border:none !important;
|
||||||
|
background-color: rgba(100,100,100, 0.3) !important;
|
||||||
|
padding: 0.4rem 0.8rem !important;
|
||||||
|
margin: 0.2rem 0.4rem !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
width: fit-content !important;
|
||||||
|
height: fit-content !important;
|
||||||
|
cursor:pointer !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ringbtn:hover{
|
||||||
|
background-color: rgba(100,100,100, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring svg {
|
||||||
|
display:none !important;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export default (() => Homebar) satisfies QuartzComponentConstructor
|
|
@ -21,6 +21,7 @@ import RecentNotes from "./RecentNotes"
|
||||||
import Breadcrumbs from "./Breadcrumbs"
|
import Breadcrumbs from "./Breadcrumbs"
|
||||||
import PageImage from "./PageImage"
|
import PageImage from "./PageImage"
|
||||||
import Homebar from "./Homebar"
|
import Homebar from "./Homebar"
|
||||||
|
import Rings from "./Rings"
|
||||||
|
|
||||||
export {
|
export {
|
||||||
ArticleTitle,
|
ArticleTitle,
|
||||||
|
@ -46,4 +47,5 @@ export {
|
||||||
Breadcrumbs,
|
Breadcrumbs,
|
||||||
PageImage,
|
PageImage,
|
||||||
Homebar,
|
Homebar,
|
||||||
|
Rings,
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,28 +1,3 @@
|
||||||
@use "./base.scss";
|
@use "./base.scss";
|
||||||
|
|
||||||
// put your custom CSS here!
|
// put your custom CSS here!
|
||||||
.ring {
|
|
||||||
display:flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ringbtn {
|
|
||||||
font-size: 0.9rem !important;
|
|
||||||
border-radius: 16px !important;
|
|
||||||
border:none !important;
|
|
||||||
background-color: rgba(100,100,100, 0.3) !important;
|
|
||||||
padding: 0.4rem 0.8rem !important;
|
|
||||||
margin: 0.2rem 0.4rem !important;
|
|
||||||
text-decoration: none !important;
|
|
||||||
width: fit-content !important;
|
|
||||||
height: fit-content !important;
|
|
||||||
cursor:pointer !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ringbtn:hover{
|
|
||||||
background-color: rgba(100,100,100, 0.5) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ring svg {
|
|
||||||
display:none !important;
|
|
||||||
}
|
|
Loading…
Reference in a new issue