astro-naut.paulapplegate.com Open in urlscan Pro
76.76.21.98  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Skip to main content



ASTRONAUT

This is a very opinionated starter template for the static site generator Astro
. I'm a big fan of Astro, as it combines two things I really like: A
component-based approach and zero client-side JavaScript!

Use template

(Or check it out on GitHub first)

This is how I like to set up my projects, but sharing is caring, so: Please use
it for your own projects and customise it. Here are all the features:


TABLE OF CONTENTS

 * Absolute Imports 📥
 * CSS Reset 💥
 * Custom Fonts 🔤
 * Fluid Responsive Design 🌊
 * Preference Detection 👀
 * Pre-Commit Hooks 🐶
 * Prettier Config 💅
 * SEO 🔍
 * Security Headers 🔒
 * Usability 🌐


ABSOLUTE IMPORTS 📥

Tired of your imports looking like this?

        
          import Layout from "../../../../../layouts/Layout.astro";
        
      

Me too, which is why I'm using absolute imports to make it look nice and clean:

        
          import Layout from "@layouts/Layout.astro";
        
      


CSS RESET 💥

I never start a project without Andy Bell's (more) modern CSS reset ! It lays
the foundation for what I'm about to do with Utopia's fluid responsive design.


CUSTOM FONTS 🔤

Using system fonts is a safe and performant way to add some identity to your
typography, but let's be honest: They're overused and quite boring. Which is why
I like to use custom fonts, usually one for headlines and one for body text. You
can of course always change them to Lobster or Papyrus, I won't judge.


FLUID RESPONSIVE DESIGN 🌊

I need you to sit down for this one. You don't really need breakpoints to define
your layout for mobile, tablet and desktop devices. How could you even
anticipate what device will be used to gaze upon your beautiful website?

Wouldn't make it more sense if you had a fluid, yet robust design which works
for all viewports? Which requires less code and no breakpoints.css nearing 1000
lines of code? Let me introduce you to Utopia , which is used to generate
adaptive font sizes and spacing.

You should also check out viewports.fyi for a deep-dive into this topic. And
while you're at it, have a look at buildexcellentwebsit.es as well.


PREFERENCE DETECTION 👀

This template automatically changes the theme based on your operating settings
by utilising prefers-color-scheme and prefers-contrast . It also checks if you
prefer reduced motions via prefers-reduced-motion . Look and behold, the power
of CSS!


PRE-COMMIT HOOKS 🐶

Commiting to something can sometimes take a lot of effort. Commiting code is no
exception, but at least here we can pull out the safety net to soften our fall
in case we made a mistake. In this case it's running astro check (powered by
Husky ), which will look for the following things in your project BEFORE your
code is being commited:

 * Errors 🚨
 * Warnings ⚠️
 * Hints 💡


PRETTIER CONFIG 💅

I don't know about you, but if my code is not nicely formatted after hitting
save, I'm starting to feel very weird. Which is why this comes with a Prettier
configuration, in case you're using it. Or a you one of those people who do this
manually?!


SEO 🔍

Predefined values for improved search engine optimisation can be found in
Layout.astro. These settings have been my reliable companion for a couple of
years now and I put a lot of research, work and testing into it.


SECURITY HEADERS 🔒

Better safe than sorry, am I right? There are multiple ways to add security
headers to your website and I decided to store them in a vercel.json file, cause
this website was deployed to (you guessed it) Vercel . It contains the following
headers, feel free to adjust them to your needs:

 * Content-Security-Policy
 * X-Frame-Options
 * X-Content-Type-Options
 * Referrer-Policy
 * Permissions-Policy


USABILITY 🌐

I've added a bunch of handy utilities which will not only improve usability, but
accessibility as well:

 * "Back to top" button
 * External link (showing icon)
 * Improved focus behaviour *
 * Skip link

* Thanks to Stephanie Eckles & Adam Argyle

© 2023 Steve Frenzel (MIT License)