How to use LandscapeJS

What I’ve accomplished

1. Installing Astro: First, I created a new Astro project and set up my online accounts.

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l);
  return true;
};

2. Making Pages: I then learned how to make pages by creating new .astro files and placing them in the src/pages/ folder. Code sample:

import '@tailwindplus/elements';

export function setTheme(theme) {
    if (theme === "dark") {
        localStorage.theme = "dark";
        document.documentElement.setAttribute("data-theme", "dark")
        document.documentElement.classList.remove("light");
        document.documentElement.classList.add("dark");
    } else {
        localStorage.theme = "light";
        document.documentElement.setAttribute("data-theme", "light")
        document.documentElement.classList.remove("dark");
        document.documentElement.classList.add("light");
    }
}

document.addEventListener("DOMContentLoaded", () => {
    console.log("DOMContentLoaded");
    // footer_year.textContent = new Date().getFullYear();

    document.documentElement.classList.toggle(
        "dark",
        localStorage.theme === "dark" ||
        (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
    );
    if (localStorage.theme === "dark") {
        theme_toggle.checked = true;
        theme_toggle_m.checked = true;
        setTheme("dark");
    } else {
        theme_toggle.checked = false;
        theme_toggle_m.checked = false;
        setTheme("light");
    }
    console.log(localStorage.theme);

    theme_toggle.addEventListener("change", () => {
        if (theme_toggle.checked) {
            setTheme("dark");
            theme_toggle_m.checked = true;
        } else {
            setTheme("light");
            theme_toggle_m.checked = false;
        }
        console.log(localStorage.theme);
    });

    theme_toggle_m.addEventListener("change", () => {
        if (theme_toggle_m.checked) {
            setTheme("dark");
            theme_toggle.checked = true;
        } else {
            setTheme("light");
            theme_toggle.checked = false;
        }
        console.log(localStorage.theme);
    });
});

3. Making Blog Posts: This is my first blog post! I now have Astro pages and Markdown posts!

What’s next

I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

LandscapeJS