Astro

Projektstruktur

Mac

node

Øvelse

  1. Sæt jer sammen med sidekammeraten
  2. Brug 10 min. på at vise hinanden, hvordan I har løst opgaven
  3. Én af jer (eller begge to) skal navigere til GitHub-repo (Fronter)
  4. Klon det ned lokalt
  5. Kør npm install og npm run dev i terminalen
  6. Sammenlign og diskutér evt., hvad I ser i /src

Hvordan løste I den?

20-25 min.

Vi samler op sammen bagefter...

Hvordan løste vi den?

Components

PlaylistCard

Shelf

Button

Nav

Topbar

Footer

Icon

Components

PlaylistCard

Shelf

Button

Nav

Topbar

Footer

Icon

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, size } = Astro.props;
---

<button class={variant + " " + size}>
  <slot />
</button>

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

MEDIUM

SMALL

Button

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

<button class:list={[ variant, size ]} />
  <slot />
</button>

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

medium hvad?

MEDIUM

SMALL

Button

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

<button data-variant={variant} data-size={size}>
  <slot />
</button>

<style>
  [data-variant="primary"] { ... }
  [data-size="medium"] { ... }
</style>

I dag

  • Pages & layouts

  • Conditionals

  • Deployment

Mål

  • Omorganisering af kode

  • Bruge betinget HTML / styling

  • Læg sitet på Netlify

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

Genbrugelige sideskabeloner

Layout-components

---
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

We conventionally use the term “layout” for Astro components that provide common UI elements shared across pages such as headers, navigation bars, and footers.

https://docs.astro.build/en/core-concepts/layouts/

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>
    <Nav />
    <Topbar />
    <slot />
    <Footer />
  </body>
</html>

Layout-components

Øvelse

Lav undersiden Search med layout og pages.

  • Opret en layouts-mappe med MainLayout.astro
  • Flyt de relevante ting fra index.astro
  • Importer og brug MainLayout på index.astro og search.astro

Byg Spotify Search

Conditionals

betinget HTML

Conditionals

betinget HTML

Conditionals

Conditionals

<article>
  <h2>...</h2>
  
  <p class="badge">New</p>
  
  <img />
</article>

Conditionals

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

Astro can conditionally display HTML

Astro Docs: Dynamic HTML

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

Conditionals

Astro can conditionally display HTML

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

Conditionals

Astro can conditionally display HTML

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

Conditionals

Astro can conditionally display HTML

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

hvis visible er sand

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

Conditionals

Astro can conditionally display HTML

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

vis HTML

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

Conditionals

Astro can conditionally display HTML

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

<CategoryCard
  newBadge={false}
  ...
/>

boolean prop

Conditionals

Astro can conditionally display HTML

Conditionals

Dynamiske klasser

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

Conditionals

Dynamiske klasser

hvis isActive er sand -> "active"

active

Conditionals

Dynamiske klasser

Developer Tools

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

Conditionals

Dynamiske klasser

Developer Tools

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

Astro Docs: Dynamiske klasser

Kode, der ikke virker?

Astro

npm run build

Laver koden om til almindelig HTML, CSS og JavaScript

Netlify gør det hele for os

  1. Hvis du ikke allerede har en konto på Netlify (netlify.app), så opret en konto vha. din GitHub-konto
  2. Giv de nødvendige tilladelser til GitHub
  3. Under Sites i hovedmenuen på Netlify, vælger du Add new site > Import an existing project
  4. Via GitHub peger du på dit repository
  5. Klik derefter på Deploy site
  6. Find linket og verificér, at det virker

Push dit site til Netlify

Øvelse

Astro - Pages & Layouts

By Dannie Vinther

Astro - Pages & Layouts

Astro pages og layouts

  • 106

More from Dannie Vinther