diff --git a/.env.dev b/.env.dev index 6895e77..a895845 100644 --- a/.env.dev +++ b/.env.dev @@ -1,3 +1,4 @@ +ASTRO_TO_PAYLOAD_URL=http://payload:3001 PAYLOAD_SECRET=supersecretkey PAYLOAD_URL=http://localhost:3001 PAYLOAD_PORT=3001 @@ -5,5 +6,4 @@ MONGODB_URI=mongodb://payload:test@mongo:27017 MONGODB_USER=payload MONGODB_PW=test MONGODB_DB=payload - NAME=astroad \ No newline at end of file diff --git a/.gitignore b/.gitignore index 6320cd2..5de73f5 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -data \ No newline at end of file +data +yarn.lock \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..d2122af --- /dev/null +++ b/README.md @@ -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. diff --git a/astro/.dockerignore b/astro/.dockerignore index 3c3629e..239ecff 100644 --- a/astro/.dockerignore +++ b/astro/.dockerignore @@ -1 +1,2 @@ node_modules +yarn.lock diff --git a/astro/public/fonts/Plex-Bold.woff2 b/astro/public/fonts/Plex-Bold.woff2 new file mode 100644 index 0000000..bf19bb7 Binary files /dev/null and b/astro/public/fonts/Plex-Bold.woff2 differ diff --git a/astro/public/fonts/Plex-Regular.woff2 b/astro/public/fonts/Plex-Regular.woff2 new file mode 100644 index 0000000..ebe11ec Binary files /dev/null and b/astro/public/fonts/Plex-Regular.woff2 differ diff --git a/astro/src/global.css b/astro/src/global.css index 327eec6..7d60c28 100644 --- a/astro/src/global.css +++ b/astro/src/global.css @@ -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; } diff --git a/astro/src/layouts/Layout.astro b/astro/src/layouts/Layout.astro index 8221364..10c6be3 100644 --- a/astro/src/layouts/Layout.astro +++ b/astro/src/layouts/Layout.astro @@ -14,7 +14,7 @@ const { title } = Astro.props; {title} - + diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro index 11af0d3..71fcab4 100644 --- a/astro/src/pages/index.astro +++ b/astro/src/pages/index.astro @@ -5,22 +5,41 @@ import { getPosts } from "../utils/payload"; const posts = await getPosts(); --- - -
-

This is Astroad

- { - posts ? ( - posts.reverse().map((post) => ( - -
-

{post.title}

-

{new Date(post.updatedAt).toLocaleDateString("de-DE")}

-
- - )) - ) : ( -

No posts...

- ) - } + +
+

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. +

+

Posts

+
+ { + posts.length > 0 ? ( + posts.reverse().map((post) => ( + +
+

{post.title}

+ {post.publishedDate && ( +

+ {new Date(post.publishedDate).toLocaleDateString("de-DE")} +

+ )} +
+ + )) + ) : ( +

Add Posts in Payloadcms

+ ) + } +
diff --git a/astro/src/pages/posts/[id].astro b/astro/src/pages/posts/[id].astro index 2efc21c..bd5a0eb 100644 --- a/astro/src/pages/posts/[id].astro +++ b/astro/src/pages/posts/[id].astro @@ -18,8 +18,8 @@ const post = id && (await getPost(id)); { post ? ( - -
+ +
BACK

{post.title}

{post.content && } diff --git a/astro/tailwind.config.cjs b/astro/tailwind.config.cjs index f5368a7..5da1796 100644 --- a/astro/tailwind.config.cjs +++ b/astro/tailwind.config.cjs @@ -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: [], +}; diff --git a/docker-compose-dev.yml b/docker-compose-dev.yml index da7c9ed..e09c316 100644 --- a/docker-compose-dev.yml +++ b/docker-compose-dev.yml @@ -1,17 +1,17 @@ services: astro: build: - context: astro target: dev volumes: - ./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: - 3000:3000 payload: build: - context: payload target: dev volumes: - ./payload/src:/base/src diff --git a/docker-compose.yml b/docker-compose.yml index fa7c183..5662956 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -2,31 +2,33 @@ services: astro: container_name: ${NAME}-astro restart: unless-stopped + build: + context: astro networks: - - hallo + - front depends_on: - payload payload: - container_name: ${NAME}_payload + container_name: ${NAME}-payload restart: unless-stopped build: - context: ./payload - dockerfile: Dockerfile + context: payload volumes: - ./data/media:/app/dist/media environment: - PORT: ${PAYLOAD_PORT} + PAYLOAD_PORT: ${PAYLOAD_PORT} PAYLOAD_SECRET: ${PAYLOAD_SECRET} MONGODB_URI: ${MONGODB_URI} + PAYLOAD_URL: ${PAYLOAD_URL} networks: - - hallo - - test + - front + - back depends_on: - mongo mongo: - container_name: ${NAME}_mongo + container_name: ${NAME}-mongo image: mongo:6.0.5 volumes: - ./data/mongo:/data/db @@ -36,8 +38,8 @@ services: MONGO_INITDB_ROOT_USERNAME: ${MONGODB_USER} MONGO_INITDB_ROOT_PASSWORD: ${MONGODB_PW} networks: - - test + - back networks: - hallo: - test: + front: + back: diff --git a/deno.json b/package.json similarity index 58% rename from deno.json rename to package.json index dda4cc7..2fbe51f 100644 --- a/deno.json +++ b/package.json @@ -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", "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" } } diff --git a/payload/src/server.ts b/payload/src/server.ts index 891c085..d72661c 100644 --- a/payload/src/server.ts +++ b/payload/src/server.ts @@ -4,12 +4,10 @@ import payload from "payload"; require("dotenv").config(); const app = express(); -// Redirect root to Admin panel app.get("/", (_, res) => { res.redirect("/admin"); }); -// Initialize Payload payload.init({ secret: process.env.PAYLOAD_SECRET, mongoURL: process.env.MONGODB_URI, @@ -18,7 +16,4 @@ payload.init({ payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`); }, }); - -// Add your own express routes here - app.listen(process.env.PAYLOAD_PORT); diff --git a/yarn.lock b/yarn.lock deleted file mode 100644 index fb57ccd..0000000 --- a/yarn.lock +++ /dev/null @@ -1,4 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - -