Update README.md
This commit is contained in:
parent
b03d3c80db
commit
51a8a7b3f6
1 changed files with 239 additions and 1 deletions
238
README.md
238
README.md
|
|
@ -1,3 +1,241 @@
|
|||
# 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 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Loading…
Reference in a new issue