Compare commits

...

2 Commits

Author SHA1 Message Date
tobias d4e0e1f994 Create base layouts with basic blocks 2024-05-19 06:57:49 +02:00
tobias 8ef6ee2b2c Update astro to v4 2024-05-19 06:55:47 +02:00
10 changed files with 1923 additions and 1613 deletions

View File

@ -9,9 +9,6 @@ export default defineConfig({
build: {
inlineStylesheets: "auto",
},
experimental: {
viewTransitions: true,
},
integrations: [
tailwind({
config: {

View File

@ -9,11 +9,11 @@
"build": "astro build"
},
"dependencies": {
"@astrojs/image": "^0.17.3",
"@astrojs/prefetch": "^0.3.0",
"@astrojs/sitemap": "^2.0.2",
"@astrojs/tailwind": "4.0.0",
"astro": "^2.10.12",
"@astrojs/image": "0.18.0",
"@astrojs/prefetch": "0.4.1",
"@astrojs/sitemap": "3.1.4",
"@astrojs/tailwind": "5.1.0",
"astro": "4.8.6",
"css-select": "5.1.0",
"sharp": "^0.32.6",
"slate-serializers": "0.4.1",

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>

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>

View File

@ -30,7 +30,7 @@ const { title } = Astro.props;
}
</style>
</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 />
</body>
</html>

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>

View File

@ -1,11 +1,11 @@
---
import Layout from "@/layouts/Layout.astro";
import ContentLayout from "@/layouts/ContentLayout.astro";
import { getPosts } from "@/utils/payload";
const posts = await getPosts();
---
<Layout title="Paystro">
<ContentLayout title="Paystro">
<main class="" >
<h1 class="font-bold text-5xl">Paystro</h1>
<p class="mt-3 text-lg">
@ -27,7 +27,7 @@ const posts = await getPosts();
posts.map((post) => (
<a href={`/posts/${post.id}/`}>
<article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
<h3 class="font-bold text-lg" transition:name=`title-${post.id}`>{post.title}</h3>
<h3 class="font-bold text-lg">{post.title}</h3>
{post.publishedDate && (
<p>
{new Date(post.publishedDate).toLocaleDateString("de-DE")}
@ -42,4 +42,4 @@ const posts = await getPosts();
}
</div>
</main>
</Layout>
</CLayout>

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

File diff suppressed because it is too large Load Diff