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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

@ -1,3 +1,4 @@
ASTRO_TO_PAYLOAD_URL=http://payload:3001
PAYLOAD_SECRET=supersecretkey PAYLOAD_SECRET=supersecretkey
PAYLOAD_URL=http://localhost:3001 PAYLOAD_URL=http://localhost:3001
PAYLOAD_PORT=3001 PAYLOAD_PORT=3001
@ -5,5 +6,4 @@ MONGODB_URI=mongodb://payload:test@mongo:27017
MONGODB_USER=payload MONGODB_USER=payload
MONGODB_PW=test MONGODB_PW=test
MONGODB_DB=payload MONGODB_DB=payload
NAME=astroad NAME=astroad

1
.gitignore vendored
View File

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

29
README.md Normal file
View File

@ -0,0 +1,29 @@
# Astroad
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.
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.
## Getting started
To get started with Astroad, you'll need to have Docker and NPM || Yarn || PNPM installed on your machine.
1. Clone this repository: `git clone https://github.com/mooxl/astroad.git`
2. Change into the repository directory: `cd astroad`
3. Start the containers: `yarn dev`
This will start up the Astro, Payloadcms and Mongo containers and make them available on your local machine. Astro will be served at http://localhost:3000 and the Payload will be available at http://localhost:3001.
## Development
The `docker-compose.yml` and `docker-compose-dev.yml` files includes everything you need to run the containers. The containers use the environment variables declared in the `.env.dev` file and mounted volumes to store data persistently even after the containers are stopped and started.
## Deployment
When you're ready to deploy your website to a production environment, you'll should copy the `.env.dev` and rename it into `.env.prod`. Then you modify the file to suit your needs. This file contains the configuration for the Astro, Payload, Mongo, GitHub Workflow and Traefik.
Deployment is handled by a Github Actions Workflow on every push on branch `prod`. It logs into the server via SSH, pulls or clones the latest version of the repository, and runs `yarn prod`.
Because Astro is completely static, a content change in the CMS must trigger a new build of Astro. Therefore, there's a `payload.yml` workflow that gets triggered by a webhook after every content change from Payload.
Ensure you have Traefik set up as a reverse proxy before deployment. The prod script will launch your site in a production-ready environment.

1
astro/.dockerignore
View File

@ -1 +1,2 @@
node_modules 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 components;
@tailwind utilities; @tailwind utilities;
h1 { @font-face {
@apply text-4xl; 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" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>{title}</title> <title>{title}</title>
</head> </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 /> <slot />
</body> </body>
</html> </html>

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

@ -5,22 +5,41 @@ import { getPosts } from "../utils/payload";
const posts = await getPosts(); const posts = await getPosts();
--- ---
<Layout title="Welcome to Astroad"> <Layout title="Astroad">
<main class="flex flex-col items-center py-10 gap-5"> <main class="">
<h1>This is Astroad</h1> <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 ? ( posts.length > 0 ? (
posts.reverse().map((post) => ( posts.reverse().map((post) => (
<a href={`/posts/${post.id}`}> <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"> <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">
<h2>{post.title}</h2> <h3>{post.title}</h3>
<p>{new Date(post.updatedAt).toLocaleDateString("de-DE")}</p> {post.publishedDate && (
<p>
{new Date(post.publishedDate).toLocaleDateString("de-DE")}
</p>
)}
</article> </article>
</a> </a>
)) ))
) : ( ) : (
<p>No posts...</p> <p>Add Posts in Payloadcms</p>
) )
} }
</div>
</main> </main>
</Layout> </Layout>

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

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

18
astro/tailwind.config.cjs
View File

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

6
docker-compose-dev.yml
View File

@ -1,17 +1,17 @@
services: services:
astro: astro:
build: build:
context: astro
target: dev target: dev
volumes: volumes:
- ./astro/src:/base/src - ./astro/src:/base/src
- .env.development:/base/.env.development - ./astro/public:/base/public
- ./astro/astro.config.mjs:/base/astro.config.mjs
- ./astro/tailwind.config.cjs:/base/tailwind.config.cjs
ports: ports:
- 3000:3000 - 3000:3000
payload: payload:
build: build:
context: payload
target: dev target: dev
volumes: volumes:
- ./payload/src:/base/src - ./payload/src:/base/src

24
docker-compose.yml
View File

@ -2,31 +2,33 @@ services:
astro: astro:
container_name: ${NAME}-astro container_name: ${NAME}-astro
restart: unless-stopped restart: unless-stopped
build:
context: astro
networks: networks:
- hallo - front
depends_on: depends_on:
- payload - payload
payload: payload:
container_name: ${NAME}_payload container_name: ${NAME}-payload
restart: unless-stopped restart: unless-stopped
build: build:
context: ./payload context: payload
dockerfile: Dockerfile
volumes: volumes:
- ./data/media:/app/dist/media - ./data/media:/app/dist/media
environment: environment:
PORT: ${PAYLOAD_PORT} PAYLOAD_PORT: ${PAYLOAD_PORT}
PAYLOAD_SECRET: ${PAYLOAD_SECRET} PAYLOAD_SECRET: ${PAYLOAD_SECRET}
MONGODB_URI: ${MONGODB_URI} MONGODB_URI: ${MONGODB_URI}
PAYLOAD_URL: ${PAYLOAD_URL}
networks: networks:
- hallo - front
- test - back
depends_on: depends_on:
- mongo - mongo
mongo: mongo:
container_name: ${NAME}_mongo container_name: ${NAME}-mongo
image: mongo:6.0.5 image: mongo:6.0.5
volumes: volumes:
- ./data/mongo:/data/db - ./data/mongo:/data/db
@ -36,8 +38,8 @@ services:
MONGO_INITDB_ROOT_USERNAME: ${MONGODB_USER} MONGO_INITDB_ROOT_USERNAME: ${MONGODB_USER}
MONGO_INITDB_ROOT_PASSWORD: ${MONGODB_PW} MONGO_INITDB_ROOT_PASSWORD: ${MONGODB_PW}
networks: networks:
- test - back
networks: networks:
hallo: front:
test: back:

5
deno.json → package.json
View File

@ -1,7 +1,10 @@
{ {
"tasks": { "name": "astrotus",
"license": "MIT",
"scripts": {
"dev": "docker compose -f docker-compose.yml -f docker-compose-dev.yml --env-file .env.dev up -d", "dev": "docker compose -f docker-compose.yml -f docker-compose-dev.yml --env-file .env.dev up -d",
"prod": "docker compose -f docker-compose.yml -f docker-compose-prod.yml --env-file .env.prod up -d --build", "prod": "docker compose -f docker-compose.yml -f docker-compose-prod.yml --env-file .env.prod up -d --build",
"stop": "docker compose -f docker-compose.yml -f docker-compose-dev.yml --env-file .env.dev down && docker compose -f docker-compose.yml -f docker-compose-prod.yml --env-file .env.prod down",
"dump": "docker exec -i astrotus_database /bin/sh -c 'PGPASSWORD=password pg_dump --username directus directus' > ./dump.sql" "dump": "docker exec -i astrotus_database /bin/sh -c 'PGPASSWORD=password pg_dump --username directus directus' > ./dump.sql"
} }
} }

5
payload/src/server.ts
View File

@ -4,12 +4,10 @@ import payload from "payload";
require("dotenv").config(); require("dotenv").config();
const app = express(); const app = express();
// Redirect root to Admin panel
app.get("/", (_, res) => { app.get("/", (_, res) => {
res.redirect("/admin"); res.redirect("/admin");
}); });
// Initialize Payload
payload.init({ payload.init({
secret: process.env.PAYLOAD_SECRET, secret: process.env.PAYLOAD_SECRET,
mongoURL: process.env.MONGODB_URI, mongoURL: process.env.MONGODB_URI,
@ -18,7 +16,4 @@ payload.init({
payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`); payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
}, },
}); });
// Add your own express routes here
app.listen(process.env.PAYLOAD_PORT); app.listen(process.env.PAYLOAD_PORT);

4
yarn.lock
View File

@ -1,4 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1