Astro 5 Starter Kit: TempoRun

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md 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 public/ directory.

For more info about Astro checkout https://docs.astro.build/en/getting-started/

Developing Requirements

node at least v18.15.0 (npm v9.5.0)

🧞 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:4321`
`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

TempoRun Basics:

The fastest performing starter template with extraordinary high Google Pagespeed score!

Demo:

https://tempo-run-astro5.netlify.app/

Grid (Flexbox)

The grid class contains the shortname of the viewport (defined in config.scss) and the amount of grids: {viewport}{gridamount} -> "w12". If you want to push or pull grid-elements, use "w-left-4" {viewport}-{direction}-{gridamount}. Grid-Elements are directly wrapped by the class "grid-wrap".

<div class="grid-wrap">
    <div class="w12">
        <h2>Grid example</h2>
    </div>
    <div class="w12 mw12">w12 mw12</div>
    <div class="w12 mw6">w12 mw6</div>
    <div class="w12 mw6 mw-left-6">w12 mw6 mw-left-6</div>
    <div class="w6 mw4">w6 mw4</div>
    <div class="w6 mw4">w6 mw4</div>
    <div class="w6 mw4">w6 mw4</div>
</div>

Form and validation

Please note:
Inputs need the empty value-attribute. Inputs type checkbox and radiobox and textareas need the emtpy data-value-attribute.
Otherwise the form validation won't work properly.
Set data-validation-required on form fields if they are required.
If you just need optional validation, just leave it away.

---
import Selectbox from "@components/partials/Selectbox.astro";

if (Astro.request.method === "POST") {
    try {
        console.error("form sent");
    } catch (error) {
        if (error instanceof Error) {
            console.error("form not sent");
        }
    }
}
---

<form method="POST" id="form-example" class="form" data-js="form-validation">

    <Selectbox maxSelectable="2" dataValidationRequired redirectToValue="false" classes="w12">
        <option value="">Select a person...</option>
        <option value="4">Thomas Edison</option>
        <option value="1">Nikola</option>
        <option value="3">Nikola Tesla</option>
        <option value="5">Arnold Schwarzenegger</option>
    </Selectbox>

    <div class="input w6">
        <label>
            First Name:
            <input type="text" value="" data-validation-required minlength="4">
            <small>Required</small>
        </label>
    </div>
    <div class="input w6">
        <label>
            Last Name:
            <input type="text" value="" minlength="4">
            <small>Required</small>
        </label>
    </div>
    <div class="input w12">
        <label>
            E-mail:
            <input type="email" value="" data-validation-required>
            <small>Required</small>
        </label>
    </div>
    <div class="input w12">
        <label>
            Phone:
            <input type="tel" value="" data-validation-required>
            <small>Required</small>
        </label>
    </div>
    <div class="input w12">
        <label>
            Password:
            <input type="password" value="" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,8}$" data-validation-required>
            <small>Must contain at least one number and one letter, and at least 8 or more characters</small>
        </label>
    </div>
    <div class="input w12">
        <label>
            Confirm password:
            <input type="password" value="" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,8}$" data-validation-required>
        </label>
    </div>
    <div class="textarea w12">
        <label>
            Message:
            <textarea data-value="" minlength="4" maxlength="10"></textarea>
            <small>Please type in at least 4 and maximum 10 letters</small>
        </label>
    </div>
    <div class="checkbox w12">
        <label>
            <input type="checkbox" name="tos" value="checkbox2" data-validation-required>
            <span>I accept</span>
            <small>Required</small>
        </label>
    </div>
    <button type="submit">Submit</button>
    
</form>

<script>
    import { formValidation } from "@utils/formValidation";

    formValidation.init();
    
    /**
     The following code is only required, if you want to submit the form via js without page reload. 
     In this case remove Astro.request.method part inside 
     --- 
     
     ---
    */
    
    const $form = document.querySelector('#form-example');

    const submitHandler = () => {

        alert('Your form submit function via js!');

    }

    formValidation.manualSubmit($form, submitHandler);
</script>

Modalboxes

Just import the Modalbox component. Modalbox ids have to be unique.
You can use as many closing buttons as you like inside a Modalbox.
All Modalboxes are moved to HTML-Body to prevent any styling issues.

---
import Modalbox from "@components/partials/Modalbox.astro";
---

<button data-open-modal="test1">Modalbox 1</button>
<Modalbox id="test1" classes="my-modal">
    <h1>I am Modalbox 1</h1>
    <button data-close-modal>close it</button>
</Modalbox>

<button data-open-modal="test2">Modalbox 2</button>
<Modalbox id="test2">
    <h1>Modalbox 2</h1>
    <button data-close-modal>close it</button>
</Modalbox>

Offcanvases

Just import the Offcanvas component. Offcanvas ids have to be unique.
All Offcanvases are moved to HTML-Body to prevent any styling issues.

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

<button data-offcanvas-trigger-open-id="offcanvas1">Open Offcanvas 1</button>
<button data-offcanvas-trigger-open-id="offcanvas2">Open Offcanvas 2</button>

<Offcanvas id="offcanvas1" orientation="right">
    <div class="h2">I'm an offcanvas 1</div>
</Offcanvas>
<Offcanvas id="offcanvas2" orientation="left">
    <div class="h2">I'm an offcanvas 2</div>
</Offcanvas>

Audio players

Just import the AudioPlayer component.

---
import AudioPlayer from '@components/partials/AudioPlayer.astro';
---

<AudioPlayer audioFile="https://ia600409.us.archive.org/12/items/01AbsoluteSamplerDEMOnTEST/01%20-%20Absolute%20Sampler%20DEMO%27n%27TEST.mp3"/>
<AudioPlayer audioFile="https://ia600409.us.archive.org/12/items/01AbsoluteSamplerDEMOnTEST/01%20-%20Absolute%20Sampler%20DEMO%27n%27TEST.mp3"/>

Google Map

Just import the GoogleMap component.

---
import GoogleMap from "@components/partials/GoogleMap.astro";

export const gmapData = {
    geoLocation: {
        lat: 50.942091,
        lng: 6.956872
    },

    zoom: 16
}
---

<GoogleMap geoLocation={gmapData.geoLocation} zoom={gmapData.zoom} markerHTML=`
    <a target="_blank" href="https://www.google.com/maps?q=${gmapData.geoLocation.lat},${gmapData.geoLocation.lng}"> 
        In Google Maps ansehen
    </a>
`/>

Expandable content

Just import the ExpandableContent component. Define max visible part via CSS

---
import ExpandableContent from '@components/partials/ExpandableContent.astro';
---

<ExpandableContent>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
</ExpandableContent>
<ExpandableContent>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
</ExpandableContent>

Accordions

Just import the accordions components.

---
import Accordion from '@components/partials/Accordion.astro';
import AccordionGroup from '@components/partials/AccordionGroup.astro';

const accordionSettings = {
    duration:                               400,
    showMultiple:                           false,
    openOnInit:                             [0],
    disableAdditionalGeneralOptions:        false
}

const accordionSettingsJSON = encodeURIComponent(JSON.stringify(accordionSettings));
---

<AccordionGroup accordionSettings={accordionSettingsJSON}>
    <Accordion title="1. Title">
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <figure>
            <picture>
                <source srcset="https://placehold.co/978x489">
                <img src="https://placehold.co/978x489" alt="alt" loading="lazy">
            </picture>
        </figure>
    </Accordion>
    <Accordion title="2. Title">
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
    </Accordion>
</AccordionGroup>

Optimized Images

Just use the Image Component "theImage" for improved images.
If you don't need lazy loading, omit the attribute. In "sizes" define all viewports (min-width) and its image sizes. Important: Start with the tallest!
Retina (2x,3x) sizes will be automatically created.

---
import TheImage from "@components/partials/TheImage.astro";
---

<TheImage
    src="https://placehold.co/978x489"
    width="978"
    height="489"
    sizes={`
    viewport:768, size:976 | 
    viewport:450, size:738 | 
    viewport:320, size:424
    `}
    loading="lazy"
    alt="A description of my image."
/>

Slider/Swiper

Just import the Slider component.
In order to adjust specific slider/swiper settings, just change the sliderSettings object.

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

const sliderSettings = {
    loop: true,
    speed: 500,
    slidesPerView: 1,
    autoplay: {
        delay: 6000
    },
    breakpoints: {
        // when window width is >= 768px
        768: {
            slidesPerView: 2
        }
    }
}

const sliderSettingsJSON = JSON.stringify(sliderSettings);
---

<Slider sliderSettings={sliderSettingsJSON}>
    <div class="swiper-slide">
        <figure>
            <picture>
                <source srcset="https://placehold.co/978x489">
                <img src="https://placehold.co/978x489" alt="alt" loading="lazy">
            </picture>
        </figure>
    </div>
    <div class="swiper-slide">
        <figure>
            <picture>
                <source srcset="https://placehold.co/978x489">
                <img src="https://placehold.co/978x489" alt="alt" loading="lazy">
            </picture>
        </figure>
    </div>
    <div class="swiper-slide">
        <figure>
            <picture>
                <source srcset="https://placehold.co/978x489">
                <img src="https://placehold.co/978x489" alt="alt" loading="lazy">
            </picture>
        </figure>
    </div>
</Slider>

Used libraries:

Swiper

The Most Modern Mobile Touch Slider.
https://swiperjs.com/swiper-api

Accordion

With the module you can create accordion on your website, useful especially for creating FAQ lists.
https://github.com/michu2k/Accordion

Select

Tom Select is a dynamic, framework agnostic, and lightweight (~16kb gzipped) select UI control.
https://tom-select.js.org/

Google Maps

https://developers.google.com/maps/documentation/javascript/overview

Astro Image/Picture

https://docs.astro.build/en/guides/images/#picture-

AlpineJs

Alpine is a rugged, minimal tool for composing behavior directly in your markup.
https://alpinejs.dev/

Partytown

If you’re using third-party scripts for things like analytics or ads, Partytown is a great way to make sure that they don’t slow down your site.
https://docs.astro.build/de/guides/integrations-guide/partytown/

Sitemap

https://docs.astro.build/en/guides/integrations-guide/sitemap/

Robots

https://github.com/alextim/astro-lib/tree/main/packages/astro-robots-txt#readme

Browser Support

Browser	Version
IE	Not supported
Edge	85 and higher
Firefox	80 and higher
Safari	13.1 and higher
Chrome	85 and higher
Opera	80 and higher

Mobile OS Support

OS	Version
iOS	13 and higher
Android	10 and higher

Name		Name	Last commit message	Last commit date
Latest commit History 328 Commits
.idea		.idea
public		public
src		src
.gitignore		.gitignore
README.md		README.md
astro.config.mjs		astro.config.mjs
package-lock.json		package-lock.json
package.json		package.json
robots-txt.config.ts		robots-txt.config.ts
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Astro 5 Starter Kit: TempoRun

🚀 Project Structure

For more info about Astro checkout https://docs.astro.build/en/getting-started/

Developing Requirements

node at least v18.15.0 (npm v9.5.0)

🧞 Commands

TempoRun Basics:

Demo:

Grid (Flexbox)

Form and validation

Modalboxes

Offcanvases

Audio players

Google Map

Expandable content

Accordions

Optimized Images

Slider/Swiper

Used libraries:

Swiper

Accordion

Select

Google Maps

Astro Image/Picture

AlpineJs

Partytown

Sitemap

Robots

Browser Support

Mobile OS Support

About

Releases 24

Packages

Languages

slaetthult/TempoRun

Folders and files

Latest commit

History

Repository files navigation

Astro 5 Starter Kit: TempoRun

🚀 Project Structure

For more info about Astro checkout https://docs.astro.build/en/getting-started/

Developing Requirements

node at least v18.15.0 (npm v9.5.0)

🧞 Commands

TempoRun Basics:

Demo:

Grid (Flexbox)

Form and validation

Modalboxes

Offcanvases

Audio players

Google Map

Expandable content

Accordions

Optimized Images

Slider/Swiper

Used libraries:

Swiper

Accordion

Select

Google Maps

Astro Image/Picture

AlpineJs

Partytown

Sitemap

Robots

Browser Support

Mobile OS Support

About

Resources

Stars

Watchers

Forks

Releases 24

Packages 0

Languages

Packages