Customizing Sidey

· 1 min read

Sidey is intentionally minimal, which makes it easy to customize. Most things you would want to change are either in sidey.config.ts or in the layout files.

The navigation links are defined in sidey.config.ts at the root of your project. Add, remove, or reorder links to match your site structure.

sidey.config.ts
navigation: [
  { label: "Home", href: "/" },
  { label: "Writings", href: "/writings" },
  { label: "About", href: "/about" },
]

Any valid URL works as an href, including external links.

Layouts

Sidey has two main layouts used across the site.

SinglePage.astro is used for standalone pages like home and about. WritingPage.astro is used for individual writing entries.

Both live in src/layouts/pages/. Open either file to adjust the structure, spacing, or any element on the page. Since Sidey uses Tailwind CSS, most visual changes are a matter of updating utility classes.

Styles

Global styles live in src/styles/global.css. This is where the Flexoki color tokens and shadcn semantic variables are defined. Adjusting colors, typography scale, or spacing can be done here.

Sidey assumes that anyone customizing layouts or styles is comfortable with Astro and Tailwind CSS. If you are just getting started, the Astro documentation and Tailwind CSS documentation are good places to begin.

#sidey #astro
Back to Writings