9.2 KiB
9.2 KiB
my-quartz-changes
Quartz changes for my https://garden.pionaiki.com website.
Changes:
File: /quartz/components/Body.tsx:
// @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 (
<div id="quartz-body" style="display: inline-block;">
<span class="webring-container">
<div class="webring">
<a href={webringprev.url} rel="nofollow" class="webring-previous">{webringprev.name}</a>
<a href="https://webring.obeythesystem.com" rel="nofollow" class="webring-long">OBEY THE SYSTEM webring</a>
<a href="https://webring.obeythesystem.com" rel="nofollow" class="webring-short">OTS webring</a>
<a href={webringnext.url} rel="nofollow" class="webring-next">{webringnext.name}</a>
</div>
<hr style="border: none; width: 100wh; height: 1px; margin: 0.5em 0 auto auto;" />
</span>
{children}
</div>
)
}
Body.afterDOMLoaded = clipboardScript
Body.css = clipboardStyle
export default (() => Body) satisfies QuartzComponentConstructor
File: /quartz/components/Footer.tsx:
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<string, string>
}
export default ((opts?: Options) => {
const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
const year = new Date().getFullYear()
const links = opts?.links ?? []
return (
<footer class={`${displayClass ?? ""}`}>
<hr />
<p style="display: flex; flex-wrap: wrap; justify-content: space-between;">
<span>Copyright © {year} pionaiki</span>
<span>
{i18n(cfg.locale).components.footer.createdWith}{" "}
<a href="https://quartz.jzhao.xyz/" rel="nofollow noreferrer noopener" target="_blank">Quartz</a> v{version}+marta
</span>
</p>
<ul style="margin-bottom: 8px;">
{Object.entries(links).map(([text, link]) => (
<li>
<a href={link} rel="me">{text}</a>
</li>
))}
</ul>
<span class="footer-w1">
<a href="https://obeythesystem.com/" rel="nofollow" target="_blank">
<img src="/static/88x31_obeythesystem1.gif" class="w1-button"></img>
</a>
<a href="https://corteximplant.com/@marta" rel="me nofollow" target="_blank">
<img src="/static/88x31_addmeon.jpg" class="w1-button"></img>
</a>
<img src="/static/88x31_rainbow.gif" class="w1-button"></img>
<img src="/static/88x31_she_her.gif" class="w1-button"></img>
<img src="/static/88x31_satan.gif" class="w1-button"></img>
<a href="https://github.com/tihyltew/cyberdon" rel="nofollow" target="_blank">
<img src="/static/88x31_corteximplantclickhere.gif" class="w1-button"></img>
</a>
<a href="https://corteximplant.com/@marta/111075641065403107" rel="me nofollow" target="_blank">
<img src="/static/88x31_martasgarlicbread.gif" class="w1-button"></img>
</a>
<img src="/static/88x31_polyamorous.jpg" class="w1-button"></img>
<img src="/static/88x31_www.gif" class="w1-button"></img>
<img src="/static/88x31_girlsnow.png" class="w1-button"></img>
<a href="https://corteximplant.com/@marta" rel="me nofollow" target="_blank">
<img src="/static/88x31_mastodon_gray.gif" class="w1-button"></img>
</a>
<a href="https://obeythesystem.com/" rel="nofollow" target="_blank">
<img src="/static/88x31_iwillobey.gif" class="w1-button"></img>
</a>
<img src="/static/88x31_tested_on_firefox.gif" class="w1-button"></img>
<a href="https://corteximplant.com/@bartmoss" rel="me nofollow" target="_blank">
<img src="/static/88x31_bartmoss.png" class="w1-button"></img>
</a>
<img src="/static/88x31_retrowave_magic.gif" class="w1-button"></img>
<img src="/static/88x31_lesbian_debian.png" class="w1-button"></img>
<img src="/static/88x31_internetprivacy.gif" class="w1-button"></img>
<a href="https://corteximplant.com/about" rel="nofollow" target="_blank">
<img src="/static/88x31_entercorteximplant.gif" class="w1-button"></img>
</a>
<img src="/static/88x31_polysexual.png" class="w1-button"></img>
<a href="https://corteximplant.com/@revengeday/112224242789986442" rel="nofollow" target="_blank">
<img src="/static/88x31_durstloescherultras.gif" class="w1-button"></img>
</a>
<img src="/static/88x31_hail_yourself.gif" class="w1-button"></img>
<img src="/static/88x31_zoomies.gif" class="w1-button"></img>
<a href="https://obeythesystem.com/" rel="nofollow" target="_blank">
<img src="/static/88x31_netrunningproblems.gif" class="w1-button"></img>
</a>
<img src="/static/88x31_NeverByAi_04.png" class="w1-button"></img>
<img src="/static/88x31_fuck_nft.gif" class="w1-button"></img>
<img src="/static/88x31_kiss_gossip.gif" class="w1-button"></img>
<img src="/static/88x31_talkaboutsex.gif" class="w1-button"></img>
<img src="/static/88x31_cortexok.gif" class="w1-button"></img>
<img src="/static/88x31_kitten_corner.gif" class="w1-button"></img>
<img src="/static/88x31_linux.gif" class="w1-button"></img>
<img src="/static/88x31_ukraine.png" class="w1-button"></img>
<img src="/static/88x31_fckafd.gif" class="w1-button"></img>
<a href="https://webring.obeythesystem.com/" rel="nofollow" target="_blank">
<img src="/static/88x31_webring.gif" class="w1-button"></img>
</a>
<img src="/static/88x31_hackerpowered.gif" class="w1-button"></img>
<a href="https://corteximplant.com/about" rel="nofollow" target="_blank">
<img src="/static/88x31_corteximplant.gif" class="w1-button"></img>
</a>
<img src="/static/88x31_godot.gif" class="w1-button"></img>
<img src="/static/88x31_apple.gif" class="w1-button"></img>
<img src="/static/88x31_aperture_labs.jpg" class="w1-button"></img>
<a href="https://corteximplant.com/about" rel="nofollow" target="_blank">
<img src="/static/88x31_ci_moshed.gif" class="w1-button"></img>
</a>
<img src="/static/88x31_chemical_cyborg.gif" class="w1-button"></img>
<a href="https://revenge.day/" rel="nofollow" target="_blank">
<img src="/static/88x31_listentorevengeday.gif" class="w1-button"></img>
</a>
<a href="https://corteximplant.com/about" rel="nofollow" target="_blank">
<img src="/static/88x31_corteximplant_cyberheart.gif" class="w1-button"></img>
</a>
<img src="/static/88x31_cyber_dryad.png" class="w1-button"></img>
<a href="https://artfight.net/~tihyltew" rel="nofollow" target="_blank">
<img src="/static/88x31_artfight_2024_stardust.png" class="w1-button"></img>
</a>
</span>
</footer>
)
}
Footer.css = style
return Footer
}) satisfies QuartzComponentConstructor
File: /quartz/styles/custom.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 */
}
}
}
}