Skip to content

Created a layout and refactored. Currently at https://docs.astro.build/en/tutorial/4-layouts/2/ #5

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

Merged
merged 1 commit into from
Aug 27, 2025
Merged

Created a layout and refactored. Currently at https://docs.astro.build/en/tutorial/4-layouts/2/ #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions src/layouts/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
import '../styles/global.css';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

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.js';
</script>
</body>
</html>
95 changes: 39 additions & 56 deletions src/pages/about.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
---
import '../styles/global.css';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import BaseLayout from '../layouts/BaseLayout.astro';

const pageTitle = "About Me";

Expand All @@ -23,56 +21,41 @@ 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.js';
</script>
</body>
</html>
<BaseLayout pageTitle={pageTitle}>
<style is:global define:vars={{skillColor, fontWeight, textCase}}>
h1 {
color: purple;
font-size: 4rem;
}

.skill {
color: var(--skillColor);
font-weight: var(--fontWeight);
text-transform: var(--textCase);
}
</style>
Comment on lines +25 to +36
Copy link

@gemini-code-assist gemini-code-assist bot Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using is:global on the entire <style> block makes all the styles within it global. While this is needed for the h1 selector to style the element in the layout, the .skill class is only used within this file. It's better to keep styles scoped whenever possible to avoid unintended side-effects.

You can split this into two <style> tags: one with is:global for the h1, and another one (the default, scoped) for .skill.

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

<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>}
</BaseLayout>
24 changes: 4 additions & 20 deletions src/pages/blog.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,14 @@
---
import '../styles/global.css';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import BaseLayout from '../layouts/BaseLayout.astro';

const pageTitle = "My Astro Learning Blog";
---

<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>Astro</title>
</head>
<body>
<Header />
<h1>My Astro Learning Blog</h1>
<BaseLayout pageTitle={pageTitle}>
<p>This is where I will post about my journey learning Astro.</p>
<ul>
<li><a href="/posts/post-1/">Post 1</a></li>
<li><a href="/posts/post-2/">Post 2</a></li>
<li><a href="/posts/post-3/">Post 3</a></li>
</ul>
<Footer />
<script>
import '../scripts/menu.js';
</script>
</body>
</html>
</BaseLayout>
28 changes: 5 additions & 23 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,7 @@
---
import '../styles/global.css';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

const pageTitle = 'Home Page';
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---

<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>
<Footer />
<script>
import '../scripts/menu.js';
</script>
</body>
</html>
<BaseLayout pageTitle={pageTitle}>
<h2>My awesome blog subtitle</h2>
</BaseLayout>