Wave Land Astro Starter Template

What Is It?

It's no secret that I love Astro. All of Wave Land's websites are built on top of this framework, so I thought I would put together a starter template to share with you all.

Over the years, I have rebuilt basic website features more times than I would like to admit. This starter template is a logical starting point for us to build websites internally, reducing unnecessary redundancy and complexity.

To increase transparency and share as many free resources as possible, I'm excited to make this public so fellow Astro enthusiasts and freelancers can also benefit.

Quick Start

1. Clone this repository:

git clone https://github.com/wave-land-web/waveland-starter.git my-project

cd my-project

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and visit http://localhost:4321

What's In It?

There are plenty of good starter templates out there for building with different web frameworks, and folks looking for quality website "scaffolding" should look around for the best starter for their use cases.

This template is pretty opinionated, so you'll either love it or hate it. With that being said, what I've put together is simply a handful of things that inevitably end up in all of the websites that Wave Land builds.

Animations

View Transitions are enabled by default. If you are unfamiliar, the View Transition API allows us to implement smooth page transitions on multi-page sites with just a couple of lines of CSS.

@view-transition {
  navigation: auto;
}

As of this writing, View Transitions are available in all major browsers except for Firefox and fall back to default page transitions if it is not supported — Win/win.

I've also included a lsa.ts file that handles scrolling animations. By importing the lsa() function into our default Layout, we can animate any element on scroll with the CSS class, lsa.

Styling

All CSS is written with the newest version of Tailwind (v4.0), which means there is no Tailwind config or unnecessary bloat, and we have an intuitive setup to build out a design system.

You will find a /styles/global.css file, which includes important fonts, theme variables, global typography styles, and required CSS for scrolling animations.

SEO and Integrations

The default layout component includes basic SEO as well as preloaded fonts for performance and required scripts on page load.

Our Astro config is pretty straightforward. We're utilizing a couple of important integrations from Astro, such as @astrojs/sitemap (dynamically generate a sitemap) and @astrojs/netlify (easy deploys, SSR adapter, cache control, and more).

What this Isn't

The Wave Land Starter is intended to be a logical starting point for almost any website you can think of.

This is not a full theme or a component library. It is intentionally light and meant to be ripped apart and customized to your liking.

The template structure is a simple representation of what I believe are the most important elements to include in a starter after working with Astro for over 2 years.

Anything Else?

Check back soon for a couple of big updates to the Wave Land Starter, including a custom blog with pagination and a contact form connected to Netlify.

Who knows, maybe I'll turn this into a full-on theme or a collection of Astro components ✨