ruangrupa/kios-webapp
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lool

Browse Source 
Signed-off-by: Max Schmidt <max.schmidt@outlook.de>
This commit is contained in:
Max Schmidt
2023-05-17 11:56:36 +02:00
parent 7f01d39909
commit d30d3e61b9
16 changed files with 133 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
astro/.dockerignore
View File

@ -1 +1,2 @@
node_modules
yarn.lock

BIN
astro/public/fonts/Plex-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
astro/public/fonts/Plex-Regular.woff2 Normal file
View File

Binary file not shown.

25
astro/src/global.css
View File

@ -2,6 +2,27 @@
@tailwind components;
@tailwind utilities;
h1 {
@apply text-4xl;
@font-face {
font-family: "Plex";
src: url("/fonts/Plex-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Plex";
src: url("/fonts/Plex-Bold.woff2") format("woff2");
font-weight: bold;
font-style: normal;
font-display: swap;
}
h1 {
@apply text-6xl font-bold;
}
h2 {
@apply text-4xl font-bold;
}
h3 {
@apply text-xl font-bold;
}

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

@ -14,7 +14,7 @@ const { title } = Astro.props;
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>{title}</title>
</head>
<body class="bg-teal-950 text-yellow-100">
<body class="font-plex bg-gray max-w-7xl mx-auto py-8 text-gray-200">
<slot />
</body>
</html>

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

@ -5,22 +5,41 @@ import { getPosts } from "../utils/payload";
const posts = await getPosts();
---
<Layout title="Welcome to Astroad">
<main class="flex flex-col items-center py-10 gap-5">
<h1>This is Astroad</h1>
{
posts ? (
posts.reverse().map((post) => (
<a href={`/posts/${post.id}`}>
<article class="text-teal-950 bg-yellow-100 px-5 py-3 rounded-md shadow-md w-64 text-center">
<h2>{post.title}</h2>
<p>{new Date(post.updatedAt).toLocaleDateString("de-DE")}</p>
</article>
</a>
))
) : (
<p>No posts...</p>
)
}
<Layout title="Astroad">
<main class="">
<h1>Astroad</h1>
<p class="mt-3 text-lg">
Astroad is a pre-configured setup for Astro and Payloadcms that makes it
easy to get started with building your website. With Astroad, you'll have
a complete development environment that you can run locally using Docker.
This makes it easy to test and develop your website before deploying it to
a production environment.
<br />
When you're ready to deploy the website on your own server, Astrotus comes
with a production environment that requires the use of Traefik as a reverse
proxy. This setup provides a secure and scalable production environment for
your website.
</p>
<h2 class="mt-6">Posts</h2>
<div class="grid grid-cols-3 mt-3">
{
posts.length > 0 ? (
posts.reverse().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>{post.title}</h3>
{post.publishedDate && (
<p>
{new Date(post.publishedDate).toLocaleDateString("de-DE")}
</p>
)}
</article>
</a>
))
) : (
<p>Add Posts in Payloadcms</p>
)
}
</div>
</main>
</Layout>

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

@ -18,8 +18,8 @@ const post = id && (await getPost(id));
{
post ? (
<Layout title={post.title!}>
<div class="max-w-3xl mx-auto space-y-3 my-3">
<Layout title={`Astroad | ${post.title!}`}>
<div class="space-y-3 my-3">
<a href="/">BACK</a>
<h1>{post.title}</h1>
{post.content && <Content content={post.content} />}

24
astro/tailwind.config.cjs
View File

@ -1,8 +1,20 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
}
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
fontFamily: {
plex: ["Plex", "sans-serif"],
},
extend: {
colors: {
gray: {
DEFAULT: "#111111",
light: "#888888",
dark: "#222222",
},
},
},
},
safelist: [],
plugins: [],
};