🚀 Astro.js - workflow for static pages

It's my workflow for creating static pages for customers of stronkadlaciebie.pl

👉 Predefined default styles for headings, paragraphs, buttons, etc...
👉 Automatic font downloads (locally hosted for faster loading)
👉 Simple responsive images with lazy loading and blurred image placeholders
👉 Inline SVG icons using one-line component
👉 Predefined JavaScript components (such as collapse, etc.)
👉 Division of HTML into components (e.g., header and footer in separate files)

Astro basics

Astro looks for .astro files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the src/assets/ directory.

Docs: https://docs.astro.build/en/getting-started/

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro --help	Get help using the Astro CLI

Before you start

1. Set the Tailwind configuration

The tailwind.config.cjs file contains the configuration for Tailwind. Customize colors and fonts for your project.

2. Import the necessary fonts

We use fontsource. It's allows us to host fonts locally and it happens automatically.

All you need to do is:

1. Install appropriate font (e.g. manrope)

   npm install @fontsource/manrope

2. Import it in src/layouts/Layout.astro

   import "@fontsource/manrope/400.css";
   import "@fontsource/manrope/700.css";

3. Set default styles in src/assets/styles/base.css

The src/assets/styles/base.css file has default styles for headings, paragraphs, buttons, and other frequently used elements. Adapt it to the project.

4. Check out src/pages/demo.astro to see how things work.

Responsive images

Używamy Astro ImageTools, which gives us automatic image optimization and placeholder images.

<Picture/> component

Use it like a regular img tag:

---
import { Picture } from "astro-imagetools/components";
---

<Picture src="/src/assets/images/demo-img.jpg" alt="" />

It gives us responsive picture tag with lazy loading, placeholder etc...:

<picture
  class="astro-imagetools-picture astro-imagetools-picture-45CE807D"
  style="position: relative; display: inline-block; max-width: 100%; height: auto; --z-index:1; --opacity:0;">
  <source
    srcset="
      /_astro/[email protected]   320w,
      /_astro/[email protected]   777w,
      /_astro/[email protected] 1158w,
      /_astro/[email protected] 1463w,
      /_astro/[email protected] 1691w,
      /_astro/[email protected] 1844w,
      /_astro/[email protected] 1920w
    "
    sizes="(min-width: 1920px) 1920px, 100vw"
    width="1920"
    height="1280"
    type="image/avif" />
  <source
    srcset="
      /_astro/[email protected]   320w,
      /_astro/[email protected]   777w,
      /_astro/[email protected] 1158w,
      /_astro/[email protected] 1463w,
      /_astro/[email protected] 1691w,
      /_astro/[email protected] 1844w,
      /_astro/[email protected] 1920w
    "
    sizes="(min-width: 1920px) 1920px, 100vw"
    width="1920"
    height="1280"
    type="image/webp" />
  <img
    src="/_astro/[email protected]"
    alt=""
    srcset="
      /_astro/[email protected]   320w,
      /_astro/[email protected]   777w,
      /_astro/[email protected] 1158w,
      /_astro/[email protected] 1463w,
      /_astro/[email protected] 1691w,
      /_astro/[email protected] 1844w,
      /_astro/[email protected] 1920w
    "
    sizes="(min-width: 1920px) 1920px, 100vw"
    width="1920"
    height="1280"
    loading="lazy"
    decoding="async"
    class="astro-imagetools-img"
    style="display: inline-block; overflow: hidden; vertical-align: middle; ; max-width: 100%; height: auto;"
    onload="parentElement.style.setProperty('--z-index', 1); parentElement.style.setProperty('--opacity', 0);" />
</picture>

<BackgroundPicture/> component

Use it like a div:

---
import { BackgroundPicture } from "astro-imagetools/components";
---

<BackgroundPicture src="/src/assets/images/bg-img.jpg">
    <div class="container py-10">
      CONTENT HERE
    </div>
</BackgroundPicture>

Icons

We use Astro Icon and we can use all icons from Iconify.

---
import { Icon } from 'astro-icon'
---

<!-- To load from remote library (Iconify) -->
<Icon name="mdi:facebook" /> 

<!-- To load from local files (src/icons/ICON_NAME.svg) -->
<Icon name="ICON_NAME" /> 

My own components library

Note
You can easily edit every component in src/components/{COMPONENT NAME HERE}.astro.

Note
You can check out src/pages/demo.astro to see how components work.

Collapse

Single collapse

---
import Collapse from '@components/Collapse.astro'
---

<Collapse title="Lorem ipsum dolor sit amet">
  content here
</Collapse>

Grouped collapse (accordion)

Just add group="{GROUP NAME HERE}" attribute. For example:

---
import Collapse from '@components/Collapse.astro'
---

<Collapse title="Accordion item 1" group="accordion-1">
  content here
</Collapse>

<Collapse title="Accordion item 2" group="accordion-1">
  content here
</Collapse>

Modal

... Not ready yet ...

Slider

We use Splide.js and the Slider component.

You can customize it, by a options attribute. Available options: https://splidejs.com/guides/options/

---
import Slider from "@components/Slider.astro";
import Slide from "@partials/Slide.astro";
---

<Slider options={{perPage: 3, pagination: true }}>
  <!-- Usecase 1: Prepare a slide template (edit Slide.astro or create a new component) and use it -->
  <Slide header="Slide 01" text="Lorem ipsum text" btn="See more" />
  <Slide header="Slide 02" text="Lorem ipsum text" btn="See more" />
  <Slide header="Slide 02" text="Lorem ipsum text" btn="See more" />

  <!-- Usecase 2: Write html inside Slide component -->
  <Slide class="p-5 bg-primary">First slide HTML here</Slide>
  <Slide class="p-5 bg-primary">Second slide HTML here</Slide>
  <Slide class="p-5 bg-primary">Third slide HTML here</Slide>
</Slider>

Changing the appearance of navigation (arrows)

for the whole page: adjust the classes option by editing the Splide.defaults object in the Slider.astro file.

for a single component: Follow docs and add a slot attribute (values: "before-slides" or "after-slides"). For example:

<Slider options={{ perPage: 2, pagination: false }}>
  <!-- Slides -->
  <!-- ... -->

  <!-- Custom arrows -->
  <div class="inline-block p-1 mt-3 divide-x splide__arrows bg-secondary" slot="after-slides">
    <button class="px-2 py-1 splide__arrow splide__arrow--prev">
      <Icon name="ic:outline-arrow-back-ios" class="text-white w-7 h-7" />
    </button>
    <button class="px-2 py-1 splide__arrow splide__arrow--next">
      <Icon name="ic:outline-arrow-forward-ios" class="text-white w-7 h-7" />
    </button>
  </div>
</Slider>

Offcanvas

On devices up to the size of the breakpoint attribute will appear toggler, which after clicking will display offcanvas with sidebar content.

On devices larger than breakpoint, the toggler will disappear and "sidebar content" will appear as a normal element.

---
import Offcanvas from '@components/Offcanvas.astro'
---

<Offcanvas title="Menu" breakpoint="lg">
  <!-- Toggler -->
  <div slot="toggler">Toggle</div>

  <!-- Sidebar content -->
  <ul class="flex gap-7 max-lg:flex-col">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
  </ul>
</Offcanvas>