my-quartz-changes/README.md

# 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 */
      }
    }
  }
}
```