I'm Mary Poppins, y'all!

Spaceship

Premium, high-performance blog and portfolio template built with Astro 5, Svelte 5, and Tailwind CSS 4.

AstroSvelte 5Tailwind 4

Spaceship is built with Astro 5, Svelte 5 Runes, and Tailwind CSS 4, designed for developers and designers who want a modern, ultra-fast, and SEO-optimized web experience.

#Features

  • High Performance - Built with Astro for lightning-fast speeds and minimal JavaScript
  • Optimizations:
    • Partytown - Google Analytics is offloaded to web workers
    • Loading Indicator - Smooth progress bar for better navigation UX
  • Modern Design - Clean aesthetics with dark mode support and fluid typography
  • Svelte 5 Runes - Leveraging the latest Svelte reactivity system ($state, $derived, $props)
  • Tailwind CSS 4 - Next-gen CSS framework for high performance and zero-runtime
  • Interactive Blog:
    • MDX Support - Embed Svelte components directly in your posts
    • Series Support - Group related posts into a series with automatic navigation
    • Draft Mode - Hide draft posts in production, visible in development
    • Publication Date Filtering - Schedule posts with future dates
    • Customizable CTA - Add call-to-action blocks at the end of posts
    • Per-Post Controls - Toggle CTA and comments individually per post
  • Comments System:
    • GitHub Discussions - Powered by Giscus for privacy-friendly comments
    • Fully Customizable - Configure theme, language, and behavior
    • Per-Post Toggle - Enable/disable comments on individual posts
  • Advanced Search - Fast, client-side search across all post titles and descriptions
  • Robust SEO:
    • JSON-LD Support - Automatic structured data for WebSite, BlogPosting, Person, and Breadcrumbs
    • Canonical URLs - Built-in support for canonical links and robots meta tags
    • Dynamic OG Images - Automatically generated social preview images for every post
    • RSS Feed & Sitemap - Ready-to-use RSS and sitemap generation
  • Enhanced Markdown:
    • Shiki Syntax Highlighting - Includes line highlights, diffs, and word highlighting
    • Auto-generated TOC - Interactive table of contents with scroll spying
    • Heading Anchor Links - Clickable links for sharing specific sections
    • Mermaid Diagrams - Support for flowcharts and diagrams directly in markdown
    • Emoji Support - Native emoji shortcodes (:rocket:, etc.)
  • Modular Architecture - Well-organized components and content collections

#Tech Stack

  • Framework - Astro 5
  • UI Components - Svelte 5
  • Styling - Tailwind CSS 4
  • Content - Markdown & MDX
  • Optimization - Sharp, Shiki, Partytown
  • Icons - Lucide & custom SVGs

Share this post