astro attempt

1. You have to install a bunch of shit - https://docs.astro.build/en/tutorial/1-setup/1/ I'm following this tutorial
2. I already forgor how I installed it
3. Opened up VS Codium
4. Opened up terminal
5. ran npm create astro@latest as per tutorial
6. gave it a folder to build in ``Z:\sites\big-mountain-fudgecake``
7. said yes to everything like installing dependencies and initializing git
8. choose minimal theme
9. ok the folder is created. open that in vscode

1. run npm run dev in the terminal to preview your gay site
2. your site preview should be on http://localhost:4321/` by default
3. find src/pages/index.astro to edit your front page
4. edit it
5. save
6. use the git panel to upload to your github acct lol
7. log into vercel to make a new page
8. deploy that gay shit
9. link domain via porkbun…
10. wait for it to generate SSL certificate
11. ok it's live: https://fudgecak.scumsuck.com/
12. make a new page in pages called about.astro
13. type some shit in there, copy/paste what was in index.astro
14. Did the markdown tutorial i already know that
15. on the "dynamic content" part so I can add their band roles…
16. doing components so i can make the nav and footer
17. blah blah i dont want a blog tags i just want the RSS using the blog as a RSS feed lol
18. ok it works
19. Skipping the shit about islands, going to the part abt light/dark themes
20. uhh but i want to do the simple one click toggle with dark/light color-scheme meta…
21. whatever I'll learn that later
22. upload dat shit to git (i should get off github some time)
23. it's up i guess https://fudgecak.scumsuck.com/about/

Stylize it tomorrow

I'm copying this guide: Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript by Henry Bley-Vroman

I am specifically using this guide because it uses the default light/dark css themes that don't require any CSS, and allows the user to override it if they want to choose another theme.

I specifically want the ability to change background images, not just background color. I want the default mode to be “dark mode” so there's no “FART”¹⁾. And I want the ease-in-ease-out color transitions to be optional. So this is in my global.CSS:

:root {
  /* dark style, dark = default */
  color-scheme: var(--color-scheme, dark);
  --bg: url('/img/bg.jpg');
  transition-duration: 200ms;
  transition-property: background, background-color, color;

  /* page preference is "dark" */
  &:has(#color-scheme option[value="light"]:checked) {
    --color-scheme: light;
    /* any additional dark styles */
    --bg: url('/img/bg-light.jpg');
  }
    
  /* page preference is "system", and system preference is "dark" */
  @media (prefers-color-scheme: light) {
    &:has(#color-scheme option[value="system"]:checked) {
      --color-scheme: light;
      /* any additional dark styles, again */
    }
  }

 @media screen and (prefers-reduced-motion: reduce), (update: slow) {
    transition-duration: 0s;
  }
}

And this is in my Toggle.astro, which is contained in my SidebarLeft.astro component and makes up my navigation.

/*
 * If a color scheme preference was previously stored,
 * select the corresponding option in the color scheme preference UI
 * unless it is already selected.
 */
function restoreColorSchemePreference() {
  const colorScheme = localStorage.getItem(colorSchemeStorageItemName);

  if (!colorScheme) {
    return;
  }

  const option = colorSchemeSelectorEl.querySelector(`[value=${colorScheme}]`);

  if (!option) {
    localStorage.removeItem(colorSchemeStorageItemName);
    return;
  }

  if (option.selected) {
    return;
  }

  option.selected = true;
}

/*
 * Store an event target's value in localStorage under colorSchemeStorageItemName
 */
function storeColorSchemePreference({ target }) {
  const colorScheme = target.querySelector(":checked").value;
  localStorage.setItem(colorSchemeStorageItemName, colorScheme);
}

const colorSchemeStorageItemName = "preferredColorScheme";

const colorSchemeSelectorEl = document.querySelector("#color-scheme");

if (colorSchemeSelectorEl) {
  restoreColorSchemePreference();

  colorSchemeSelectorEl.addEventListener("input", storeColorSchemePreference);
}

Don't ask me what any of this means LOL I just copy/pasted someone else's code in the places that make it work on my site…