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">
<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>
</div>
</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 Whoami from "../components/whoami.astro";
import Www from "../components/www.astro";
---
<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>Philippe Loctaux</title>
</head>
<body class="bg-gray-900 text-white">
<Hero />
<main class="container mx-auto px-4 py-16">
<Whoami />
<div class="my-16">
<Www />
</div>
</main>
<Footer />
</body>
</html>
<Page>
<Hero />
<main class="container mx-auto px-4 py-16">
<Whoami />
<div class="my-16">
<Www />
</div>
</main>
</Page>