Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unclear refactoring task #8321

Closed
garysassano opened this issue May 17, 2024 · 0 comments · Fixed by #8584
Closed

Unclear refactoring task #8321

garysassano opened this issue May 17, 2024 · 0 comments · Fixed by #8584
Labels
improve documentation Enhance existing documentation (e.g. add an example, improve description) tutorial Content/UI for the Build a Blog Tutorial

Comments

@garysassano
Copy link
Contributor

garysassano commented May 17, 2024 •
edited
Loading

📋 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>
@sarah11918 sarah11918 mentioned this issue Jun 19, 2024
Merged
@sarah11918 sarah11918 added improve documentation Enhance existing documentation (e.g. add an example, improve description) tutorial Content/UI for the Build a Blog Tutorial labels Jun 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
improve documentation Enhance existing documentation (e.g. add an example, improve description) tutorial Content/UI for the Build a Blog Tutorial
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

extra step in tutorial refactor guidance withastro/docs
2 participants
@sarah11918 @garysassano