Astro – Cookbook

by Ralph Astro

Inhaltsverzeichnis

Installation

❯ npm create astro@latest
❯ npm create astro@latest --template with-tailwindcss
❯ npm add -D vite-plugin-static-copy
❯ npm add @shoelace-style/shoelace

Command Line / CLI

npm create astro@latest — –template basics
npm installInstalls dependencies
npm run devStarts local dev server at localhost:4321
npm run build Build your production site to ./dist/
npm run previewPreview your build locally, before deploying
npm run astro …Run CLI commands like astro add, astro check
npm run astro — –helpGet help using the Astro CLI

Add packages

❯ npx astro add tailwind

Frameworks – WebComponents

Shoelace

Lit

https://lit.dev/docs

Animation

Animate Image by MouseOver / Hover

CSS

.book {
    width: 300px;
    height: 480px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-30deg);
    transition: 1s ease;
    animation: 1s ease 0s 1 initAnimation;
}

.book:hover {
    transform: rotateY(0deg);
}

page.astro

<div class="book">
    <Image
        src={"/cover-2.jpeg"}
        width={300}
        height={600}
        alt={book.title}
        format={"avif"}
    />
</div>