SpaceDomains is a website built with Astro and Tailwind CSS.
Table of Contents
- ✅ Dark & Light Mode: Clean implementation.
- ✅ Optimized SEO: Automatic meta tags, Structured Data (JSON-LD), RSS Feed, Open Graph, Twitter Cards, and native Sitemap.
- ✅ Native Scroll Animations: High-performance, JS-light scroll reveal animations using
Intersection Observer. - ✅ Clean Architecture: Organized and scalable code.
- ✅ Reusable Components: Navbar, Footer, and modern Layouts with Tailwind v4.
This template is built with modern, high-performance technologies:
- Astro 5: The web framework for building content-driven websites.
- Tailwind CSS 4: A utility-first CSS framework for rapid UI development.
- TypeScript: Strongly typed programming language that builds on JavaScript.
- MDX: Markdown for the component era, allowing you to use JSX in your markdown content.
A quick overview of the folder structure to help you understand where everything is located:
/
├── public/ # Static assets (fonts, favicon, images outside of processing)
├── src/
│ ├── assets/ # Images and assets to be processed by Astro
│ ├── components/ # Reusable UI components (Navbar, Footer, SEO, etc.)
│ ├── config/ # Centralized site configuration (site.ts)
│ ├── content/ # Blog posts and content collections (Markdown/MDX)
│ ├── layouts/ # Base page layouts
│ ├── pages/ # File-based routing (pages and endpoints)
│ ├── styles/ # Global CSS and Tailwind directives
│ ├── types/ # TypeScript type definitions
│ └── content.config.ts # Astro Content Collections configuration
├── astro.config.mjs # Astro configuration file
└── tailwind.config.mjs # Tailwind CSS configuration
To start with this project locally, clone the repository and install dependencies:
pnpm install
pnpm run devAll global site information is managed in src/config/site.ts. Update this file with your data:
// src/config/site.ts
import ogImage from "../assets/og-image.png";
export const siteConfig = {
name: "SpaceDomains",
description: "A fast, SEO-friendly site built with Astro and Tailwind.",
url: "https://spacedomains.com",
lang: "en",
locale: "en_US",
author: "Gregor",
twitter: "",
ogImage: ogImage,
socialLinks: {
twitter: "",
github: "",
discord: "",
},
navLinks: [
{ text: "Home", href: "/" },
{ text: "About", href: "/about" },
{ text: "Services", href: "/services" },
{ text: "Blog", href: "/blog" },
{ text: "Contact", href: "/contact" },
{ text: "Widgets", href: "/widgets" },
],
};