Hello World

🌷My first note. Showcasing this garden's basic features and css stylings

H1 header

H2 header

H3 header

H4 header

This is a normal paragraph. The next few words and sentences should not be important. It could be gibberish. The entries here are mostly incomplete thoughts; they probably won't useful for anyone else but me. Sorry you've stumbled upon this, but there is really nothing really to see here.

This is a block quote.

  • Check list
  • look
  • great too

Features

  • Mobile first, minimalist layout by yours truly
  • Light 🌼 and dark mode 🌙
  • 🔍 Tag search
  • mdx support. Write your posts in markdown, and use React components in your markdown.
  • Code Syntax highlighting with @mapbox/rehype-prism
  • React Icons and Google Fonts
  • Static website generation with NextJS
  • Fuzzy search bar with fuse or some other library
  • Pagination for list of notes (or load more button)
  • Displayed estimated reading time
  • A few more simple enhancements

Embedded React Components

Interact with them and they could actually do stuff and change the state of the garden.

Embedded Code Blocks

With syntax highlighting! How cool is that!

You can use prism themes or generate your own with Kate Hudson's Syntax Highlighting Theme Generator for Prism.

import { useState, useContext } from "react"
import { ThemeContext } from "../../../components/Theme/index"
import styles from "./Note.module.css"

const Demonstration = () => {
    const { theme, toggleTheme } = useContext(ThemeContext)

    const isLight = theme === "light"

    return (
        <button
            type="button"
            className={isLight ? styles.isLight : styles.isDark}
            onClick={toggleTheme}
        >
            {isLight ? "🌙 Tap for 🌙 mode 🌙" : "🌼 Tap for 🌼 mode 🌼"}
        </button>
    )
}

export default Demonstration