Move to Astro

src/components/Callout.astro

@@ -0,0 +1,38 @@
+---
+export interface Props {
+  title?: string;
+  src: string;
+  type?: "info" | "warning";
+}
+
+const { title, type = "info" } = Astro.props;
+---
+
+<div class={`callout callout-${type}`}>
+  {title ? <h4>{title}</h4> : <h4>💡 Did you know? 💡</h4>}
+
+  <slot />
+</div>
+
+<style lang="scss">
+  .callout {
+    padding: 1rem;
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+    border: 1px solid #e9ecef;
+    border-radius: 0.25rem;
+    border-left-width: 0.25rem;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .callout-info {
+    border-left-color: #5bc0de;
+  }
+
+  .callout-warning {
+    border-left-color: #f0ad4e;
+  }
+</style>

src/components/Card.astro

@@ -0,0 +1,23 @@
+---
+export interface Props {
+  title: string;
+  src: string;
+}
+
+const { title, src } = Astro.props;
+---
+
+<div class="col">
+  <div class="card">
+    <div class="card-body">
+      <b class="card-title">{title}</b>
+    </div>
+    <img src={`/images/${src}`} alt={title} />
+  </div>
+</div>
+
+<style lang="scss">
+  .card {
+    margin-bottom: 20px;
+  }
+</style>

src/components/Cards.astro

@@ -0,0 +1,15 @@
+---
+import Card from "./Card.astro";
+
+export interface Props {
+  images: { title: string; src: string }[];
+}
+
+const { images } = Astro.props;
+---
+
+<div class="container">
+  <div class="row row-cols-1 row-cols-md-2">
+    {images.map((i) => <Card title={i.title} src={i.src} />)}
+  </div>
+</div>

src/components/FrontPageLink.astro

@@ -0,0 +1,62 @@
+---
+export interface Props {
+  title: string;
+  description: string;
+  imageSrc: string;
+  href: string;
+}
+
+const { href, title, imageSrc, description } = Astro.props;
+---
+
+<div class="col">
+  <a href={href} class="fp-link">
+    <div class="card">
+      <img src={`/images/${imageSrc}`} class="card-img-top" />
+      <div class="card-body">
+        <h5 class="card-title">{title}</h5>
+        <p class="card-text">in which {description}</p>
+      </div>
+    </div>
+  </a>
+</div>
+
+<style lang="scss">
+  .card {
+    margin-bottom: 20px;
+  }
+
+  .fp-link {
+    display: inline-flex;
+    text-decoration: none;
+    margin: 5px;
+  }
+
+  .fp-link .card {
+    //background-color: rgb(142, 181, 222);
+    color: #555;
+    border-radius: 0;
+    border: 0;
+
+    img {
+      border-radius: 5px;
+      object-fit: cover;
+      aspect-ratio: 4 / 3;
+    }
+
+    .card-body {
+      color: white;
+      position: absolute;
+      bottom: 5px;
+      left: 12px;
+    }
+
+    .card-title {
+      font-size: large;
+    }
+
+    .card-text {
+      font-size: medium;
+    }
+  }
+</style>

src/components/Hero.astro

@@ -0,0 +1,61 @@
+---
+export interface Props {
+  title: string;
+  date?: Date;
+  image: string;
+  bold?: boolean;
+}
+
+const { title, date, image, bold = false } = Astro.props;
+const actualDate = date ? new Date(date) : undefined;
+const dateString = actualDate?.toISOString()?.slice(0, 10);
+---
+
+<div class:list={[{ "page-hero": !bold, "index-hero": bold }]}>
+  <div class="title-text text-center">
+    <h1 class:list={[{ "fw-bold": bold, "display-5": bold }]}>{title}</h1>
+    {date && <div class="col-auto date align-self-end">{dateString}</div>}
+  </div>
+
+  <img src={`/images/${image}`} />
+</div>
+
+<style lang="scss">
+  @media (min-width: 600px) {
+    .index-hero img {
+      aspect-ratio: 3 / 1;
+    }
+    .page-hero img {
+      aspect-ratio: 4 / 1;
+    }
+  }
+  @media (max-width: 600px) {
+    .index-hero img {
+      aspect-ratio: 1 / 2;
+    }
+    .page-hero img {
+      aspect-ratio: 1 / 1;
+    }
+  }
+
+  .index-hero,
+  .page-hero {
+    margin-bottom: 50px;
+
+    img {
+      width: 100%;
+      object-fit: cover;
+    }
+    .title-text {
+      color: white;
+      position: absolute;
+      top: 30%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      h1 {
+        border: 0;
+      }
+    }
+  }
+</style>

src/components/NextPrev.astro

@@ -0,0 +1,30 @@
+---
+export interface Props {
+  prev?: string;
+  next?: string;
+}
+
+const { prev, next } = Astro.props;
+---
+
+<div class="row mt-4">
+  <div class="col-5 d-flex justify-content-center">
+    {
+      prev && (
+        <a class="btn btn-outline-dark" href={prev}>
+          &lt; Prev
+        </a>
+      )
+    }
+  </div>
+  <div class="col-2"></div>
+  <div class="col-5 d-flex justify-content-center">
+    {
+      next && (
+        <a class="btn btn-outline-dark" href={next}>
+          Next &gt;
+        </a>
+      )
+    }
+  </div>
+</div>

src/components/Progress.astro

@@ -0,0 +1,46 @@
+---
+export interface Props {
+  value: number;
+  max: number;
+}
+
+const { value, max } = Astro.props;
+---
+
+<div style="width:100%; text-align:center">
+  <h3>📦 Unpack-o-meter 📦</h3>
+  <progress value={value} max={max}></progress>
+  <br />
+  We've unpacked {value} boxes out of {max}!
+  <p></p>
+</div>
+
+<style lang="scss">
+  progress[value] {
+    /* Reset the default appearance */
+    -webkit-appearance: none;
+    appearance: none;
+    width: 80%;
+    height: 20px;
+
+    &::-webkit-progress-bar {
+      background-color: #eee;
+      border-radius: 2px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+    }
+
+    &::-webkit-progress-value {
+      background-image: -webkit-linear-gradient(
+          -45deg,
+          transparent 33%,
+          rgba(0, 0, 0, 0.1) 33%,
+          rgba(0, 0, 0, 0.1) 66%,
+          transparent 66%
+        ),
+        -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
+        -webkit-linear-gradient(left, #09c, #f44);
+      border-radius: 2px;
+      background-size: 35px 20px, 100% 100%, 100% 100%;
+    }
+  }
+</style>

src/components/Quote.astro

@@ -0,0 +1,21 @@
+---
+export interface Props {
+  person: string;
+  date: string;
+}
+
+const { person, date } = Astro.props;
+---
+
+<figure class="text-center">
+  <blockquote class="blockquote">
+    <p>
+      <slot />
+    </p>
+    <footer class="blockquote-footer">
+      {person} in <cite title="Nozzy House News">Nozzy House News</cite>, {date}
+    </footer>
+  </blockquote>
+</figure>
+
+<style></style>

src/components/Solocard.astro

@@ -0,0 +1,16 @@
+---
+import Card from "./Card.astro";
+
+export interface Props {
+  title: string;
+  src: string;
+}
+
+const { title, src } = Astro.props;
+---
+
+<div class="container solocard-container">
+  <div class="row">
+    <Card title={title} src={src} />
+  </div>
+</div>

src/components/YTVideo.astro

@@ -0,0 +1,35 @@
+---
+export interface Props {
+  src: string;
+}
+
+const { src } = Astro.props;
+---
+
+<div class="videoWrapper">
+  <iframe
+    src={`https://www.youtube.com/embed/${src}`}
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen></iframe>
+</div>
+
+<style lang="scss">
+  .videoWrapper {
+    position: relative;
+    padding-bottom: 56.25%;
+
+    /* 16:9 */
+    height: 0;
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    margin-bottom: 10px;
+  }
+</style>