autonomic-cooperative/astro-payload-test
0
0
Fork 0
generated from autonomic-cooperative/astro-payload-template
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create base layouts with basic blocks

Browse Source
This commit is contained in:
tobias 2024-05-19 06:57:49 +02:00
parent 8ef6ee2b2c
commit d4e0e1f994
7 changed files with 75 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
astro/src/components/Footer.astro Normal file
View File

@ -0,0 +1,9 @@
---
import { getCurrentYear } from "@/utils/date";
---
<footer>
<p class="text-lg font-semibold">
&copy; {getCurrentYear()} Example Website. All rights reserved.
</p>
</footer>

38
astro/src/components/Header.astro Normal file
View File

@ -0,0 +1,38 @@
---
const links = [
{
label: "Home",
link: "/home"
},
{
label: "About",
link: "/about"
},
{
label: "Services",
link: "/services"
},
{
label: "Contact",
link: "/contact"
},
];
---
<header class="flex justify-between py-6">
<div>
<span class="font-extrabold">
Logo
</span>
</div>
<nav>
<ul class="flex gap-4 font-bold">
{links.map((item, index) => (
<li>
<a href={item.link}>{item.label}</a>
</li>
))}
</ul>
</nav>
</header>

2
astro/src/layouts/Layout.astro → astro/src/layouts/BaseLayout.astro
View File

@ -30,7 +30,7 @@ const { title } = Astro.props;
} }
</style> </style>
</head> </head>
<body class="mx-auto max-w-7xl bg-gray px-6 py-8 font-plex text-gray-200"> <body class="min-h-screen flex flex-col mx-auto max-w-7xl bg-gray px-6 py-8 font-plex text-gray-200">
<slot /> <slot />
</body> </body>
</html> </html>

17
astro/src/layouts/ContentLayout.astro Normal file
View File

@ -0,0 +1,17 @@
---
import BaseLayout from "./BaseLayout.astro";
import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";
const { title } = Astro.props;
---
<BaseLayout title={title}>
<Header/>
<div class="min-h-screen flex flex-col">
<main class="flex-grow">
<slot/>
</main>
<Footer/>
</div>
</BaseLayout>

6
astro/src/pages/index.astro
View File

@ -1,11 +1,11 @@
--- ---
import Layout from "@/layouts/Layout.astro"; import ContentLayout from "@/layouts/ContentLayout.astro";
import { getPosts } from "@/utils/payload"; import { getPosts } from "@/utils/payload";
const posts = await getPosts(); const posts = await getPosts();
--- ---
<Layout title="Paystro"> <ContentLayout title="Paystro">
<main class="" > <main class="" >
<h1 class="font-bold text-5xl">Paystro</h1> <h1 class="font-bold text-5xl">Paystro</h1>
<p class="mt-3 text-lg"> <p class="mt-3 text-lg">
@ -42,4 +42,4 @@ const posts = await getPosts();
} }
</div> </div>
</main> </main>
</Layout> </CLayout>

6
astro/src/pages/posts/[id].astro
View File

@ -1,5 +1,5 @@
--- ---
import Layout from "@/layouts/Layout.astro"; import ContentLayout from "@/layouts/ContentLayout.astro";
import Content from "@/components/Content.astro"; import Content from "@/components/Content.astro";
import type { Post } from "@/types"; import type { Post } from "@/types";
import { getPost, getPosts } from "@/utils/payload"; import { getPost, getPosts } from "@/utils/payload";
@ -18,13 +18,13 @@ const post = id && (await getPost(id));
{ {
post ? ( post ? (
<Layout title={`Paystro | ${post.title!}`}> <ContentLayout title={`Paystro | ${post.title!}`}>
<div class="space-y-3 my-3"> <div class="space-y-3 my-3">
<a href="/">BACK</a> <a href="/">BACK</a>
<h1 class="font-bold text-5xl">{post.title}</h1> <h1 class="font-bold text-5xl">{post.title}</h1>
{post.content && <Content content={post.content} />} {post.content && <Content content={post.content} />}
</div> </div>
</Layout> </CLayout>
) : ( ) : (
<div>404</div> <div>404</div>
) )

4
astro/src/utils/date.ts Normal file
View File

@ -0,0 +1,4 @@
export const getCurrentYear = (): number => {
const currentYear = new Date().getFullYear();
return currentYear;
}