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