Initial commit

astro/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+Dockerfile
+README.md

astro/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# macOS-specific files
+.DS_Store
+
+# types
+src/types.ts

astro/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

astro/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:lts-alpine as base
+WORKDIR /base
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+COPY . .
+
+FROM base AS dev
+ENV NODE_ENV=development
+EXPOSE 3000
+CMD ["yarn","dev"]
+
+FROM base AS build
+ENV NODE_ENV=production
+WORKDIR /build
+COPY --from=base /base .
+ADD "https://random-uuid.deno.dev" skipcache

astro/astro.config.mjs

@@ -0,0 +1,29 @@
+import { defineConfig } from "astro/config";
+import tailwind from "@astrojs/tailwind";
+import image from "@astrojs/image";
+import sitemap from "@astrojs/sitemap";
+import prefetch from "@astrojs/prefetch";
+
+export default defineConfig({
+  compressHTML: true,
+  build: {
+    inlineStylesheets: "auto",
+  },
+  experimental: {
+    viewTransitions: true,
+  },
+  integrations: [
+    tailwind({
+      config: {
+        applyBaseStyles: false,
+      },
+    }),
+    image({
+      serviceEntryPoint: "@astrojs/image/sharp",
+    }),
+    prefetch({
+      selector: "a",
+    }),
+    sitemap(),
+  ],
+});

astro/nginx.conf

@@ -0,0 +1,36 @@
+events {
+    worker_connections  1024;
+}
+
+http {
+    include    mime.types;
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+    
+    server {
+        listen 80;
+
+        location / {
+            root /usr/share/nginx/html;
+            try_files $uri $uri/ =404;
+        }
+
+        location /error_page.html {
+            internal;
+        }
+
+        location ~* \.(jpg|jpeg|png|gif|ico|css|js|htm|html)$ {
+            root /usr/share/nginx/html;
+            expires 30d;  
+            add_header Pragma public;
+            add_header Cache-Control "public";
+        }
+
+        error_page 404 /error_page.html;
+    }
+}

astro/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "astroad",
+  "description": "Astroad - Astro",
+  "type": "module",
+  "version": "1.1",
+  "license": "MIT",
+  "scripts": {
+    "dev": "astro dev --host",
+    "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",
+    "css-select": "5.1.0",
+    "sharp": "^0.32.6",
+    "slate-serializers": "0.4.1",
+    "tailwindcss": "^3.3.3"
+  },
+  "devDependencies": {
+    "prettier": "^3.0.2",
+    "prettier-plugin-astro": "^0.11.1",
+    "prettier-plugin-tailwindcss": "^0.5.4"
+  }
+}

astro/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

astro/src/components/Content.astro

@@ -0,0 +1,27 @@
+---
+import { Image } from "@astrojs/image/components";
+import { getContentArray } from "@/utils/helpers";
+import { getImageSrc } from "@/utils/payload";
+const { content } = Astro.props;
+const contentArray = getContentArray(content);
+---
+
+<div>
+  {
+    contentArray.map((value) => {
+      if (typeof value === "string") {
+        return <article set:html={value} />;
+      } else {
+        return (
+          <Image
+            src={getImageSrc(value.src)}
+            width={value.width}
+            height={value.height}
+            format="webp"
+            alt="hallo"
+          />
+        );
+      }
+    })
+  }
+</div>

astro/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

astro/src/layouts/Layout.astro

@@ -0,0 +1,36 @@
+---
+
+export interface Props {
+  title: string;
+}
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title}</title>
+    <style>
+      @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;
+      }
+    </style>
+  </head>
+  <body class="mx-auto max-w-7xl bg-gray px-6 py-8 font-plex text-gray-200">
+    <slot />
+  </body>
+</html>

astro/src/pages/index.astro

@@ -0,0 +1,45 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { getPosts } from "@/utils/payload";
+
+const posts = await getPosts();
+---
+
+<Layout title="Astroad">
+  <main class="" >
+    <h1 class="font-bold text-5xl">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 font-bold text-2xl">Posts</h2>
+    <div class="flex gap-4 mt-3 flex-wrap">
+      {
+        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">
+                <h3 class="font-bold text-lg" transition:name=`title-${post.id}`>{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>

astro/src/pages/posts/[id].astro

@@ -0,0 +1,31 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import Content from "@/components/Content.astro";
+import type { Post } from "@/types";
+import { getPost, getPosts } from "@/utils/payload";
+
+export async function getStaticPaths() {
+  const posts = await getPosts();
+  const paths = posts.map((post: Post) => ({
+    params: { id: post.id },
+  }));
+  return paths;
+}
+
+const { id } = Astro.params;
+const post = id && (await getPost(id));
+---
+
+{
+  post ? (
+    <Layout title={`Astroad | ${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>
+        {post.content && <Content content={post.content} />}
+      </div>
+    </Layout>
+  ) : (
+    <div>404</div>
+  )
+}

astro/src/utils/helpers.ts

@@ -0,0 +1,41 @@
+import { payloadSlateToDomConfig, slateToHtml } from "slate-serializers";
+import { Element } from "domhandler";
+
+export const getContentArray = (content: any) => {
+  const html = slateToHtml(content, {
+    ...payloadSlateToDomConfig,
+    elementTransforms: {
+      ...payloadSlateToDomConfig.elementTransforms,
+      upload: ({ node }) =>
+        // @ts-ignore
+        new Element("img", {
+          src: node.value.filename,
+          width: `${node.value.width}`,
+          height: `${node.value.height}`,
+        }),
+    },
+  }).replaceAll("<p></p>", "<p>&nbsp;</p>");
+  const htmlImageArray: (
+    | string
+    | { src: string; width: number; height: number }
+  )[] = [];
+  let lastIndex = 0;
+  while (true) {
+    const imgStartIndex = html.indexOf("<img", lastIndex);
+    if (imgStartIndex === -1) {
+      htmlImageArray.push(html.substring(lastIndex));
+      break;
+    }
+    const imgEndIndex = html.indexOf(">", imgStartIndex) + 1;
+    const imgTag = html.substring(imgStartIndex, imgEndIndex);
+    const remainingHtml = html.substring(lastIndex, imgStartIndex);
+    const imgObject = {
+      src: imgTag.match(/src="(.*?)"/)![1],
+      width: +imgTag.match(/width="(.*?)"/)![1],
+      height: +imgTag.match(/height="(.*?)"/)![1],
+    };
+    htmlImageArray.push(remainingHtml, imgObject);
+    lastIndex = imgEndIndex;
+  }
+  return htmlImageArray;
+};

astro/src/utils/payload.ts

@@ -0,0 +1,13 @@
+import type { Post } from "@/types";
+
+const url = import.meta.env.DEV
+  ? "http://payload:3001"
+  : `${import.meta.env.PAYLOAD_URL}`;
+
+export const getPosts = async () =>
+  (await (await fetch(`${url}/api/posts`)).json()).docs as Post[];
+
+export const getPost = async (id: string) =>
+  (await (await fetch(`${url}/api/posts/${id}`)).json()) as Post;
+
+export const getImageSrc = (src: string) => `${url}/media/${src}`;

astro/tailwind.config.cjs

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  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: [],
+};

astro/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "types": ["@astrojs/image/client"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}