ruidy/orbital-orbit
1
0
Fork 0
mirror of https://github.com/rjNemo/orbital-orbit synced 2026-06-12 18:06:38 +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>

40
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,28 +29,7 @@ const goal = 3
const skillColor = "navy" const skillColor = "navy"
--- ---
<html lang="en"> <BaseLayout pageTitle={pageTitle}>
<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 }}>
h1 {
color: purple;
font-size: 4rem;
}
.skill {
color: var(--skillColor);
font-weight: bold;
}
</style>
</head>
<body>
<Header />
<h1>{pageTitle}</h1>
<h2>... and my new website!</h2> <h2>... and my new website!</h2>
<p>I'm a web developer and I'm learning Astro.</p> <p>I'm a web developer and I'm learning Astro.</p>
<p>This is my first website!</p> <p>This is my first website!</p>
@ -77,7 +55,15 @@ const skillColor = "navy"
{finished && <p>I finished this tutorial!</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>} {goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}
</BaseLayout>
<Footer/> <style define:vars={{skillColor }}>
</body> h1 {
</html> color: purple;
font-size: 4rem;
}
.skill {
color: var(--skillColor);
font-weight: bold;
}
</style>

26
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>
<ul>
<li><a href="/posts/post-1">My first blog post</a></li> <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-2">My second blog post</a></li>
<li><a href="/posts/post-3">My third blog post</a></li> <li><a href="/posts/post-3">My third blog post</a></li>
</ul> </ul>
<Footer/> </BaseLayout>
</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>