Compare commits
7 Commits
da435c8fc1
...
36b5ab7cd2
Author | SHA1 | Date |
---|---|---|
tobias | 36b5ab7cd2 | |
tobias | 03c14f0ca7 | |
tobias | 421394a794 | |
tobias | a8362fa88f | |
tobias | 467b4bb0ad | |
tobias | 7234cef7e1 | |
tobias | 7ba1f78721 |
|
@ -9,6 +9,9 @@ export default defineConfig({
|
|||
build: {
|
||||
inlineStylesheets: "auto",
|
||||
},
|
||||
server: {
|
||||
port: 3000
|
||||
},
|
||||
integrations: [
|
||||
tailwind({
|
||||
config: {
|
||||
|
|
|
@ -6,11 +6,11 @@ const { content } = Astro.props;
|
|||
const contentArray = getContentArray(content);
|
||||
---
|
||||
|
||||
<div>
|
||||
<article>
|
||||
{
|
||||
contentArray.map((value) => {
|
||||
if (typeof value === "string") {
|
||||
return <article set:html={value} />;
|
||||
return <section set:html={value} />;
|
||||
} else {
|
||||
return (
|
||||
<Image
|
||||
|
@ -18,10 +18,10 @@ const contentArray = getContentArray(content);
|
|||
width={value.width}
|
||||
height={value.height}
|
||||
format="webp"
|
||||
alt="hallo"
|
||||
alt={value.alt}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
@ -1,9 +1,5 @@
|
|||
---
|
||||
const links = [
|
||||
{
|
||||
label: "Home",
|
||||
link: "/home"
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
link: "/about"
|
||||
|
@ -22,9 +18,11 @@ const links = [
|
|||
|
||||
<header class="flex justify-between py-6">
|
||||
<div>
|
||||
<span class="font-extrabold">
|
||||
Logo
|
||||
</span>
|
||||
<a href="/">
|
||||
<span class="font-extrabold">
|
||||
Logo
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="flex gap-4 font-bold">
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
.autonomic {
|
||||
/* Palette */
|
||||
/* RGBA instead of hex so that opacity will work */
|
||||
--absolute-white: 255, 255, 255;
|
||||
--white: 243, 252, 248;
|
||||
--shocking-pink: 253, 0, 159;
|
||||
--shamrock-green: 0, 198, 88;
|
||||
--bubblegum-pink: 255, 133, 203;
|
||||
--bright-orange: 255, 96, 21;
|
||||
|
||||
/* Use these in tailwind.config.cjs */
|
||||
--primary: var(--shocking-pink);
|
||||
--secondary: var(--shamrock-green);
|
||||
--tertiary: var(--bright-orange);
|
||||
|
||||
--text: var(--shocking-pink);
|
||||
--textInverted: var(--absolute-white);
|
||||
--background: var(--white);
|
||||
}
|
|
@ -4,6 +4,7 @@ export interface Props {
|
|||
title: string;
|
||||
}
|
||||
const { title } = Astro.props;
|
||||
import "@/global.css"
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
@ -30,7 +31,7 @@ const { title } = Astro.props;
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col mx-auto max-w-7xl bg-gray px-6 py-8 font-plex text-gray-200">
|
||||
<body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 py-8 font-plex text-primary bg-background">
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -7,7 +7,7 @@ const posts = await getPosts();
|
|||
|
||||
<ContentLayout title="Paystro">
|
||||
<main class="" >
|
||||
<h1 class="font-bold text-5xl">Paystro</h1>
|
||||
<h1 class="font-bold text-5xl text-">Paystro</h1>
|
||||
<p class="mt-3 text-lg">
|
||||
Paystro is a pre-configured setup for Astro and Payloadcms that makes it
|
||||
easy to get started with building your website. With Paystro, you'll have
|
||||
|
@ -26,7 +26,7 @@ const posts = await getPosts();
|
|||
posts.length > 0 ? (
|
||||
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">
|
||||
<article class="bg-secondary text-textInverted px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
|
||||
<h3 class="font-bold text-lg">{post.title}</h3>
|
||||
{post.publishedDate && (
|
||||
<p>
|
||||
|
@ -42,4 +42,4 @@ const posts = await getPosts();
|
|||
}
|
||||
</div>
|
||||
</main>
|
||||
</CLayout>
|
||||
</ContentLayout>
|
||||
|
|
|
@ -20,11 +20,10 @@ const post = id && (await getPost(id));
|
|||
post ? (
|
||||
<ContentLayout title={`Paystro | ${post.title!}`}>
|
||||
<div class="space-y-3 my-3">
|
||||
<a href="/">BACK</a>
|
||||
<h1 class="font-bold text-5xl">{post.title}</h1>
|
||||
{post.content && <Content content={post.content} />}
|
||||
</div>
|
||||
</CLayout>
|
||||
</ContentLayout>
|
||||
) : (
|
||||
<div>404</div>
|
||||
)
|
||||
|
|
|
@ -12,12 +12,13 @@ export const getContentArray = (content: any) => {
|
|||
src: node.value.filename,
|
||||
width: `${node.value.width}`,
|
||||
height: `${node.value.height}`,
|
||||
alt: `${node.value.alt}`,
|
||||
}),
|
||||
},
|
||||
}).replaceAll("<p></p>", "<p> </p>");
|
||||
const htmlImageArray: (
|
||||
| string
|
||||
| { src: string; width: number; height: number }
|
||||
| { src: string; width: number; height: number, alt: string }
|
||||
)[] = [];
|
||||
let lastIndex = 0;
|
||||
while (true) {
|
||||
|
@ -33,6 +34,7 @@ export const getContentArray = (content: any) => {
|
|||
src: imgTag.match(/src="(.*?)"/)![1],
|
||||
width: +imgTag.match(/width="(.*?)"/)![1],
|
||||
height: +imgTag.match(/height="(.*?)"/)![1],
|
||||
alt: imgTag.match(/alt="(.*?)"/)![1],
|
||||
};
|
||||
htmlImageArray.push(remainingHtml, imgObject);
|
||||
lastIndex = imgEndIndex;
|
||||
|
|
|
@ -7,11 +7,12 @@ module.exports = {
|
|||
},
|
||||
extend: {
|
||||
colors: {
|
||||
gray: {
|
||||
DEFAULT: "#111111",
|
||||
light: "#888888",
|
||||
dark: "#222222",
|
||||
},
|
||||
primary: "rgba(var(--primary))",
|
||||
secondary: "rgba(var(--secondary))",
|
||||
tertiary: "rgba(var(--tertiary))",
|
||||
text: "rgba(var(--text))",
|
||||
textInverted: "rgba(var(--textInverted))",
|
||||
background: "rgba(var(--background))",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
"version": "1.2",
|
||||
"scripts": {
|
||||
"dev": "docker compose up",
|
||||
"stop": "docker compose down"
|
||||
"stop": "docker compose down",
|
||||
"dev:build": "docker compose up --build"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,6 +18,7 @@ export const Media: CollectionConfig = {
|
|||
{
|
||||
name: "alt",
|
||||
type: "text",
|
||||
required: true
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
@ -38,10 +38,7 @@ const Posts: CollectionConfig = {
|
|||
{
|
||||
name: "title",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
name: "hallo",
|
||||
type: "text",
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: "publishedDate",
|
||||
|
@ -59,7 +56,7 @@ const Posts: CollectionConfig = {
|
|||
media: {
|
||||
fields: [
|
||||
{
|
||||
name: "imagel",
|
||||
name: "image",
|
||||
type: "upload",
|
||||
relationTo: "media",
|
||||
required: true,
|
||||
|
|
Loading…
Reference in New Issue