Astro

Components

Terminal-kommandoer

npm create astro@latest .

Start et nyt projekt

OBS! Kun én gang pr. projekt

I gruppeprojekter, er der kun én, der skal køre denne

Terminal-kommandoer

npm install

Installer et eksisterende projekt (package.json)

Mangler node_modules, så kør denne

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

Hvornår er noget en component?

  • En genbrugelig skabelon, der kan modtage data
  • Hvis noget html skal copy/pastes, så er det nok en component
  • Hvis du kan give det et navn (a la footer) så er det nok en component

Fra HTML til Astro

<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>
<header>
  <h1>Velkommen til Min Side</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>
<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>
<div class="service">
  <h3>Service 1</h3>
  <p>Beskrivelse af service 1.</p>
</div>
<section id="services">
  <h2>Vores Services</h2>
  <Service />
  <Service />
  <Service />
</section>

Fra HTML til Astro

Fra HTML til Astro

<header>
  <h1>Velkommen til Min Side</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>
<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>
<div class="service">
  <h3>Service 1</h3>
  <p>Beskrivelse af service 1.</p>
</div>
<section id="services">
  <h2>Vores Services</h2>
  <Service />
  <Service />
  <Service />
</section>
<header>
  <h1>Velkommen til Min Side</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>
<div class="service">
  <h3>Service 1</h3>
  <p>Beskrivelse af service 1.</p>
</div>
<section id="services">
  <h2>Vores Services</h2>
  <Service />
  <Service />
  <Service />
</section>
<Layout>
  <Hero />
  <Services />
</Layout>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>

Fra HTML til Astro

<Layout>
  <Hero />
  <Services />
</Layout>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>

Fra HTML til Astro

Opbygning

Astro-components

---

---

<article>
  <h2></h2>
  <p></p>
</article>

<style>
  article {...}
</style>

"Single file component", som betyder, at vi samler al relevant HTML, CSS (og JavaScript) i den enkelte component

Opbygning

Astro-components

---

---

<article>
  <h2></h2>
  <p></p>
</article>

<style>
  article {...}
</style>

<script>
  ...
</script>

"Single file component", som betyder, at vi samler al relevant HTML, CSS (og JavaScript) i den enkelte component

Fences

Astro-components og pages

---

---

"Frontmatter"

import "../styles/global.css"
---

---
import "../styles/global.css"
import Component from "../components/Component.astro"

Importer stylesheet

Fences

Astro-components og pages

---

---
import "../styles/global.css"
import Component from "../components/Component.astro"
const { prop } = Astro.props;

Importer component

Fences

Astro-components og pages

---

---
import "../styles/global.css"
import Component from "../components/Component.astro"
const { prop } = Astro.props;

Saml props op

const now = new Date();
const localTime = now.toLocaleTimeString("da-DK");

Fences

Astro-components og pages

---


---
import "../styles/global.css"
const { prop } = Astro.props;

JavaScript på serveren ("build time")

const now = new Date();
const localTime = now.toLocaleTimeString("da-DK");

Fences

Astro-components og pages

---


---

<p>Hej, klokken er {localTime}</p>

JavaScript på serveren ("build time")

const now = new Date();
const localTime = now.toLocaleTimeString("da-DK");

Hvad var klokken, der jeg byggede siden (statisk)

Fences

Astro-components og pages

Components

Header.astro

Button.astro

Footer.astro

Card.astro

CardSection.astro

Hero.astro

Components

Opbygning

Astro-components

├── src/
    └── components/
    	└── Header.astro
    	└── CardSection.astro
    	└── 
    	└── Button.astro
    	└── Footer.astro
Card.astro

Opbygning

Astro-components

<li>
  <h3>Animation</h3>
  <p>
    Learn the latest animation techniques to create stunning motion
    design and captivate your audience.
  </p>
  <a href="/animation" class="btn" data-variant="ghost">Get started</a>
</li>
Card.astro

Opbygning

Astro-components

---
import Card from "../components/          ";
---

<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
Card.astro

Konvention: Samme navn

😕

Props

Astro-components

<li>
  <h3>Animation</h3>
  <p>
    Learn the latest animation techniques to create stunning motion
    design and captivate your audience.
  </p>
  <a href="/animation" class="btn" data-variant="ghost">Get started</a>
</li>
Card.astro

Props

Astro-components

<li>
  <h3>{title}</h3>
  <p>
    {body}
  </p>
  <a href={link} class="btn" data-variant="ghost">Get started</a>
</li>
Card.astro

Props

Astro-components

---
const { title, body, link } = Astro.props;
---

<li>
  <h3>{title}</h3>
  <p>
    {body}
  </p>
  <a href={link} class="btn" data-variant="ghost">Get started</a>
</li>
Card.astro

Props

Astro-components

---
import Card from "../components/          ";
---

<Card
      title="Animation"
      body="This is the body of Animation."
      link="/animation" />
<Card
      title="Design"
      body="This is the body of Design."
      link="/design" />
Card.astro

Hvert card har nu forskelligt indhold

---
import Card from "../components/          ";
---

<Card
      title="Animation"
      body="This is the body of Animation."
      link="/animation" />

Card.astro
---
const { title, body, link } = Astro.props;
---

<li>
  <h3>{title}</h3>
  <p>
    {body}
  </p>
  <a href={link}>Get started</a>
</li>

øvelse

Fra HTML til Astro

Lav Astro-components på baggrund af eksisterende HTML (se øvelsen på Fronter)

https://github.com/daviatkea/componentize-2nd-semester​

øvelse

Fra HTML til Astro

Lav Astro-components på baggrund af eksisterende HTML (se øvelsen på Fronter)

https://github.com/daviatkea/componentize-2nd-semester​

Tilgange til components

Tilgange til components

Hvor starter man?

<article>
  <h2>Jeg er en overskrift</h2>
  <p>Jeg er en beskrivelse.</p>
</article>

Hvordan skal strukturen være?

<Card title="Jeg er en overskrift"
      description="Jeg er en beskrivelse"
/>

Hvordan vil jeg gerne bruge den?

Udefra og ind

Først API, og så markup

<Card title="Jeg er en overskrift"
      description="Jeg er en beskrivelse"
/>

<Card title="Jeg er anderledes"
      description="Også mig..."
/>

God DX... måske?

Indefra og ud

Først markup, og så props

<article>
  <h2>Jeg er en overskrift</h2>
  <p>Jeg er en beskrivelse.</p>
</article>

God til prototype..?

Ikon

Titel

Knap

Beskrivelse

Ikon

Titel

Knap

Beskrivelse

Ikon

Titel

Knap

Beskrivelse

<Card iconName="running-man"
      title="Animation"
      description="Learn the latest..."
      link="/animation" />

Skal vi bygge Instagram-light?

Start nyt projekt

npm create astro@latest .

Start nyt projekt

npm create astro@latest .

Start nyt projekt

Astro Components

By Dannie Vinther

Astro Components

  • 14

More from Dannie Vinther