Astro

Opsamling fra i går

Astro

Hvor er vi?

  • Hvad er en component i Astro?
  • Hvad er props?
  • Hvad er scoped styles?
  • Hvordan starter man en dev-server (live server)?
    • Hvordan stopper man dev-serveren?
  • Er Astro smart (eller har det i det mindste potentiale)?

Start nyt projekt

npm create astro@latest .

Start nyt projekt

npm create astro@latest .

Start nyt projekt

Terminal-kommandoer

npm run dev

"Live server"

Terminal-kommandoer

ctrl + c

Stop server

Luk den, når du er færdig for dagen, eller inden du evt. opstarter et nyt projekt

/Projektnavn
├── .vscode/
├── node_modules/
├── public/
├── src/
├── .gitignore
├── astro.config.mjs
├── package.json
├── package-lock.json
├── tsconfig.json
└── README.md

Mapper

/
├── public/
└── src/
    ├── components/
    │   ├── Header.astro
    │   └── Card.astro
    └── pages/
        ├── index.astro
        └── about.astro

Mapper

/
├── public/
└── src/
    ├── components/
    │   ├── Header.astro
    │   └── Card.astro
    ├── pages/
    │   ├── index.astro
    │   └── about.astro
    └── styles/
        └── global.css

Mapper

Målet for i dag

Færdigheder

  1. lave varianter i komponenter

  1. lave og anvende en layout-komponent

  1. lave en ny underside

  1. vise/skjule indhold med simple betingelser

Recap and beyond

Målet for i dag

Færdigheder

  1. lave varianter i komponenter

  1. lave og anvende en layout-komponent

  1. lave en ny underside

  1. vise/skjule indhold med simple betingelser

Pages

speciel mappe

Pages

  • I /pages-mappen findes diverse (under)sider
  • Filer, der ender på .astro (eller endda .html)
  • Sider i /pages begynder altid med små bogstaver, selvom de har endelsen .astro (til forskel fra components)
  • Der kan linkes imellem siderne med et normalt a-tag:
<nav>
  <a href="/">Home</a> <!-- index.astro -->
  <a href="/search">Search</a> <!-- search.astro -->
</nav>

Genbrugelige sideskabeloner

Layout-components

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Search</title>
  </head>
  <body>
    <h1>Search</h1>
  </body>
</html>

point of interest

---
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout title="Search">
  <h1>Search</h1>
</MainLayout>

point of interest

skabelon med prop

Genbrugelige sideskabeloner

Layout-components

---
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

prop

---
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout title="Search">
  <h1>Search</h1>
</MainLayout>

Genbrugelige sideskabeloner

Layout-components

---
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>
---
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout title="Search">
  <h1>Search</h1>
</MainLayout>

sideindhold her

Genbrugelige sideskabeloner

Layout-components

Layout-components

---
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <Header />
    <Sidebar />
    <main>
   	  <slot />
    </main>
    <Footer />
  </body>
</html>

Layout-components

Wrapper med slots

Wrapper med slots

---
const { title } = Astro.props;
---
<section>
  <h3>{title}</h3>
  <div>
    <slot /> <!-- indhold -->
  </div>
</section>


<style>
  div {
    display: flex;
    /*....*/
  }
</style>

Hvor er lighederne?

billede

billede

title

title

subtitle

subtitle

Hvor er lighederne?

billede

billede

title

title

subtitle

subtitle

Hvor er forskellene?

E-badge

form på billedet

Hvor er forskellene?

form på billedet

E-badge

variant

conditional rendering

Hvad adskiller dem?

Variants

Samme knap, forskelligt udseende

"primary"

"accent"

"secondary"

"ghost"

Variants

Samme knap, forskelligt udseende

<Button variant="primary">Get Started</Button>
<Button variant="accent">Get Started</Button>
<Button variant="secondary">Get Started</Button>
<Button variant="ghost">Get Started</Button>
<Button variant="primary" label="Get Started" />

Variants

---
const { variant } = Astro.props;
---

<button class={variant}>
  <slot />
</button>

<style>
  .primary {}
  .secondary {}
  .accent {}
  .ghost {}
</style>
<button>
  <slot />
</button>
<Button variant="secondary">Get started</Button>
<button>
  <slot />
</button>
Get started
<Button variant="secondary">Get started</Button>
<button>
  <slot />
</button>
Get started

Components

PlaylistCard

Shelf

Button

Sidebar

Navigation

Footer

Components

PlaylistCard

Shelf

Button

Sidebar

Navigation

Footer

Button

Primær

Sekundær

Tertiær

variant props

Button

<Button
  variant="primary">
  Log in
</Button>

MEDIUM

SMALL

size props

Button

<Button
  variant="primary"
  size="medium">
  Log in
</Button>

MEDIUM

SMALL

Button

---
const { variant } = Astro.props;
---

<button class={variant}>
  <slot />
</button>

<style>
  .primary { ... }
</style>

MEDIUM

SMALL

Button

---
const { variant, size } = Astro.props;
---

<button class={`${variant} ${size}`}>
  <slot />
</button>

<style>
  .primary { ... }
  .medium { ... }
</style>

Conditional rendering

Vis eller skjul indhold baseret på bestemte betingelser

Conditional rendering

<article>
  <h2>...</h2>
  
  
  
  <img />
</article>

Astro Docs: Dynamic HTML

<p class="badge">New</p>
---
const visible = true;
---
<article>
  <h2>...</h2>
  
  
  
  <img />
</article>
{
}
&&
visible
<p class="badge">New</p>

Conditional rendering

---
const visible = true;
---
<article>
  <h2>...</h2>
  
  
  
  <img />
</article>
<p class="badge">New</p>
{
}
&&
visible

Conditional rendering

---
const visible = true;
---
<article>
  <h2>...</h2>
  
  
  
  <img />
</article>
<p class="badge">New</p>
{
}
&&
visible

hvis visible er sand

Conditional rendering

---
const visible = true;
---
<article>
  <h2>...</h2>
  
  
  
  <img />
</article>

vis HTML

<p class="badge">New</p>
{
}
&&
visible

Conditional rendering

---
const { newBadge } = Astro.props;
---
<article>
  <h2>...</h2>
  
  {newBadge && <p class="badge">New</p>}
  
  <img />
</article>
<CategoryCard
  newBadge={true}
  ...
/>

Conditional rendering

---
const { newBadge } = Astro.props;
---
<article>
  <h2>...</h2>
  
  {newBadge && <p class="badge">New</p>}
  
  <img />
</article>
<CategoryCard
  newBadge={true}
  ...
/>

<CategoryCard
  ...
/>

Conditional rendering

---
const { title } = Astro.props;
---
<article>  
  {title && <h2>{title}</h2>}
  
  <img />
</article>
<Card
  title="Card Heading"
  description="Lorem..."
/>

<Card
  description="Lorem..."
/>

Conditional rendering

---
const { soldout } = Astro.props;
---
<article>  
  {soldout && <p>Udsolgt</p>}
  
  <img />
</article>
<Card
  soldout={true}
/>

<Card
  ...
/>

Conditional rendering

Hvis jeg vil vise noget andet som fallback

---
const { soldout } = Astro.props;
---
<article>  
  {soldout ? <p>Udsolgt</p> : <Button />}
  
  <img />
</article>
<Card
  soldout={true}
/>

<Card
  ...
/>

Conditional rendering

Hvis jeg vil vise noget andet som fallback

Dynamiske klasser

<Component
  isActive={true}
  ...
/>
---
const { isActive } = Astro.props;
---
<div class={isActive && "active"}>
  ...
</div>

hvis isActive er sand -> "active"

active

Dynamiske klasser

Vi kigger videre på det i morgen...

  • Billeder
  • Git / GitHub
  • Deployment (Netlify)