diff --git a/README.md b/README.md index 935c1a4..587a7e2 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,241 @@ # my-quartz-changes -Quartz changes for my https://garden.pionaiki.com website. \ No newline at end of file +Quartz changes for my https://garden.pionaiki.com website. + +## Changes: + +File: `/quartz/components/Body.tsx`: + +```TS +// @ts-ignore +import clipboardScript from "./scripts/clipboard.inline" +import clipboardStyle from "./styles/clipboard.scss" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" + +let webringdata = [] +let webringmyindex = 0 +let webringnext = {name: "ERROR", url: "about:blank"} +let webringprev = {name: "ERROR", url: "about:blank"} + +fetch('https://raw.githubusercontent.com/CORTEXIMPLANT/webring/main/websites.json') +.then(function(response) { + return response.json(); +}) +.then(function(myJson) { + webringdata=myJson + + if (webringmyindex + 1 > webringdata.length - 1) { + webringnext = webringdata[0] + } else { + webringnext = webringdata[webringmyindex + 1] + } + if (webringmyindex - 1 < 0) { + webringprev = webringdata[webringdata.length - 1] + } else { + webringprev = webringdata[webringmyindex - 1] + } + + // OVERWRITE + webringnext = {"name": "NEXT", "url": "https://webring.obeythesystem.com/page?=next"} + webringprev = {"name": "PREV", "url": "https://webring.obeythesystem.com/page?=previous"} +}); + +const Body: QuartzComponent = ({ children }: QuartzComponentProps) => { + return ( +
+ +
+ {webringprev.name} + OBEY THE SYSTEM webring + OTS webring + {webringnext.name} +
+
+ + {children} +
+ ) +} + +Body.afterDOMLoaded = clipboardScript +Body.css = clipboardStyle + +export default (() => Body) satisfies QuartzComponentConstructor +``` + +File: `/quartz/components/Footer.tsx`: + +```TS +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" +import style from "./styles/footer.scss" +import { version } from "../../package.json" +import { i18n } from "../i18n" + +interface Options { + links: Record +} + +export default ((opts?: Options) => { + const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { + const year = new Date().getFullYear() + const links = opts?.links ?? [] + return ( + + ) + } + + Footer.css = style + return Footer +}) satisfies QuartzComponentConstructor +``` + +File: `/quartz/styles/custom.scss`: + +```SCSS +@use "./base.scss"; +@use "./variables.scss" as *; + +// put your custom CSS here! + +.page-title { + & a { + hyphens: none; + } +} +.webring-container { + position: fixed; + top: 0; + width: 100%; + @media all and (max-width: $fullPageWidth) { + position: inherit; + max-width: 750px; + } + + background-color: var(--light); + + & .webring { + display: flex; + justify-content: space-between; + margin: 0.5em; + + & .webring-previous { + &::before { + content: "⇠ "; + } + } + + & .webring-next { + &::after { + content: " ⇢"; + } + } + + & .webring-short { + display: none; + } + + @media screen and (max-width: 600px) { + & .webring-long { + display: none; /* Hide long text on small screens */ + } + & .webring-short { + display: inline; /* Display shortcut text on small screens */ + } + } + } +} +``` \ No newline at end of file