ruidy/orbital-orbit
1
0
Fork 0
mirror of https://github.com/rjNemo/orbital-orbit synced 2026-06-12 17:06:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: using layout

Browse source
This commit is contained in:
Ruidy 2024-12-31 10:09:28 +01:00
parent 628e4d955e
commit f39b2715a2
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
4 changed files with 75 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/layouts/BaseLayout.astro Normal file
View file

@ -0,0 +1,27 @@
---
import "../styles/global.css"
import Footer from "../components/Footer.astro"
import Header from "../components/Header.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>

84
src/pages/about.astro
View file

@ -1,7 +1,6 @@
--- ---
import "../styles/global.css" import "../styles/global.css"
import Header from "../components/Header.astro" import BaseLayout from "../layouts/BaseLayout.astro"
import Footer from "../components/Footer.astro"
const pageTitle = "About Me" const pageTitle = "About Me"
@ -30,54 +29,41 @@ const goal = 3
const skillColor = "navy" const skillColor = "navy"
--- ---
<html lang="en"> <BaseLayout pageTitle={pageTitle}>
<head> <h2>... and my new website!</h2>
<meta charset="utf-8" /> <p>I'm a web developer and I'm learning Astro.</p>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <p>This is my first website!</p>
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <h2>A few things about me:</h2>
<title>{pageTitle}</title> <ul>
<li> I'm {identity.firstName}. </li>
<li>I'm {identity.age} years old.</li>
<li>I'm a {identity.occupation} in {identity.location}.</li>
<li>I'm interested in {identity.interests.join(", ")}.</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>
<style define:vars={{skillColor }}> <style define:vars={{skillColor }}>
h1 { h1 {
color: purple; color: purple;
font-size: 4rem; font-size: 4rem;
} }
.skill { .skill {
color: var(--skillColor); color: var(--skillColor);
font-weight: bold; font-weight: bold;
} }
</style> </style>
</head>
<body>
<Header />
<h1>{pageTitle}</h1>
<h2>... and my new website!</h2>
<p>I'm a web developer and I'm learning Astro.</p>
<p>This is my first website!</p>
<h2>A few things about me:</h2>
<ul>
<li> I'm {identity.firstName}. </li>
<li>I'm {identity.age} years old.</li>
<li>I'm a {identity.occupation} in {identity.location}.</li>
<li>I'm interested in {identity.interests.join(", ")}.</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/>
</body>
</html>

32
src/pages/blog.astro
View file

@ -1,32 +1,18 @@
--- ---
import "../styles/global.css" import "../styles/global.css"
import Header from "../components/Header.astro" import BaseLayout from "../layouts/BaseLayout.astro"
import Footer from "../components/Footer.astro"
const pageTitle = "Blog posts" const pageTitle = "Blog posts"
--- ---
<BaseLayout pageTitle={pageTitle}>
<html lang="en"> <p>This is a list of my blog posts.</p>
<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> <ul>
<p>This is a list of my blog posts.</p> <li><a href="/posts/post-1">My first blog post</a></li>
<li><a href="/posts/post-2">My second blog post</a></li>
<li><a href="/posts/post-3">My third blog post</a></li>
</ul>
<ul> </BaseLayout>
<li><a href="/posts/post-1">My first blog post</a></li>
<li><a href="/posts/post-2">My second blog post</a></li>
<li><a href="/posts/post-3">My third blog post</a></li>
</ul>
<Footer/>
</body>
</html>

25
src/pages/index.astro
View file

@ -1,26 +1,9 @@
--- ---
import "../styles/global.css" import BaseLayout from "../layouts/BaseLayout.astro"
import Footer from "../components/Footer.astro"
import Header from "../components/Header.astro"
const pageTitle = "Orbital Orbit" const pageTitle = "Orbital Orbit"
--- ---
<html lang="en"> <BaseLayout pageTitle={pageTitle}>
<head> <h2>My awesome blog subtitle</h2>
<meta charset="utf-8" /> </BaseLayout>
<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>