phil/plcom
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor index page in page layout, added 404 page, footer is at bottom

Browse source
This commit is contained in:
Philippe Loctaux 2023-05-19 15:16:55 +02:00
parent e0413f82fe
commit 2d1ab2bce1
4 changed files with 47 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/footer.astro
View file

@ -3,7 +3,7 @@ const year = new Date().getFullYear();
--- ---
<footer class="bg-black"> <footer class="bg-black">
<div class="container mx-auto px-4 py-8 mt-8"> <div class="container mx-auto px-4 py-8">
<p>&copy; 2015 - {year} Philippe Loctaux</p> <p>&copy; 2015 - {year} Philippe Loctaux</p>
</div> </div>
</footer> </footer>

26
src/layouts/page.astro Normal file
View file

@ -0,0 +1,26 @@
---
import Footer from "../components/footer.astro";
interface Props {
title?: string;
}
let { title } = Astro.props;
title = title !== undefined ? `${title} - ` : title;
---
<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" />
<title>{title}Philippe Loctaux</title>
</head>
<body class="flex flex-col min-h-screen bg-gray-900 text-white">
<div class="flex-grow">
<slot />
</div>
<Footer />
</body>
</html>

10
src/pages/404.astro Normal file
View file

@ -0,0 +1,10 @@
---
import Page from "../layouts/page.astro";
---
<Page title="404">
<main class="container mx-auto px-4 py-16">
<h1 class="text-3xl sm:text-4xl font-bold">404 Not Found</h1>
<p class="mt-4">This page could not be found.</p>
</main>
</Page>

29
src/pages/index.astro
View file

@ -1,25 +1,16 @@
--- ---
import Footer from "../components/footer.astro"; import Page from "../layouts/page.astro";
import Hero from "../components/hero.astro"; import Hero from "../components/hero.astro";
import Whoami from "../components/whoami.astro"; import Whoami from "../components/whoami.astro";
import Www from "../components/www.astro"; import Www from "../components/www.astro";
--- ---
<html lang="en"> <Page>
<head> <Hero />
<meta charset="utf-8" /> <main class="container mx-auto px-4 py-16">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <Whoami />
<meta name="viewport" content="width=device-width" /> <div class="my-16">
<title>Philippe Loctaux</title> <Www />
</head> </div>
<body class="bg-gray-900 text-white"> </main>
<Hero /> </Page>
<main class="container mx-auto px-4 py-16">
<Whoami />
<div class="my-16">
<Www />
</div>
</main>
<Footer />
</body>
</html>