docs icon indicating copy to clipboard operation
docs copied to clipboard

Published 20 hours ago • verified publisher icon withastro

Unclear refactoring task

Open garysassano opened this issue 1 year ago • 0 comments

📋 Explain your issue

At some point of the tutorial, you are tasked with refactoring existing pages to use a BaseLayout instead: image

At that point your files look like this:

src/pages/about.astro

---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css";

const pageTitle = "About Me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Technical Writer",
  hobbies: ["photography", "birdwatching", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---

<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>{pageTitle}</title>
    <style define:vars={{ skillColor, fontWeight, textCase }}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>
  </head>
  <body>
    <Header />

    <h1>{pageTitle}</h1>
    <h2>... and my new Astro site!</h2>

    <p>
      I am working through Astro's introductory tutorial. This is the second
      page on my website, and it's the first one I built myself!
    </p>

    <p>
      This site will update as I complete more of the tutorial, so keep checking
      back and see how my journey is going!
    </p>

    <p>Here are a few facts about me:</p>
    <ul>
      <li>My name is {identity.firstName}.</li>
      <li>
        I live in {identity.country} and I work as a {identity.occupation}.
      </li>
      {
        identity.hobbies.length >= 2 && (
          <li>
            Two of my hobbies are: {identity.hobbies[0]} and{" "}
            {identity.hobbies[1]}
          </li>
        )
      }
    </ul>
    <p>My skills are:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>

    {happy && <p>I am happy to be learning Astro!</p>}

    {finished && <p>I finished this tutorial!</p>}

    {
      goal === 3 ? (
        <p>My goal is to finish in 3 days.</p>
      ) : (
        <p>My goal is not 3 days.</p>
      )
    }

    <Footer />
    <script>
      import "../scripts/menu.ts";
    </script>
  </body>
</html>

src/layouts/BaseLayout.astro

---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css";

const { pageTitle } = 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>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <slot />
    <Footer />

    <script>
      import "../scripts/menu.ts";
    </script>
  </body>
</html>

It's not intuitive for a beginner how you are going to retain the following <style> block inside the <head> after the refactoring:

<style define:vars={{ skillColor, fontWeight, textCase }}>
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: var(--skillColor);
    font-weight: var(--fontWeight);
    text-transform: var(--textCase);
  }
</style>

garysassano avatar May 17 '24 13:05 garysassano