241 lines
No EOL
9.2 KiB
Markdown
241 lines
No EOL
9.2 KiB
Markdown
# my-quartz-changes
|
|
|
|
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 (
|
|
<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`:
|
|
|
|
```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<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`:
|
|
|
|
```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 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
``` |