docker

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "sqltools.connections": [
+    {
+      "previewLimit": 50,
+      "server": "localhost",
+      "port": 5432,
+      "driver": "PostgreSQL",
+      "name": "local",
+      "database": "directus",
+      "username": "directus"
+    }
+  ]
+}

compose.dev.yml

@@ -0,0 +1,75 @@
+version: '3.8'
+services:
+  web:
+    build:
+      context: ./website
+      target: production
+      network: host
+      extra_hosts:
+        - 'cms.localhost:127.0.0.1'
+    container_name: web
+    volumes:
+      - ./website:/app:rw
+    depends_on:
+      - directus
+    networks:
+      - directus
+    env_file:
+      - ./website/.env
+
+  nginx:
+    # restart: 'always'
+    container_name: nginx
+    image: nginx:1.23.3-alpine
+    volumes:
+      - './nginx/nginx.conf:/etc/nginx/nginx.conf'
+    ports:
+      - '80:80'
+      - '433:433'
+    depends_on:
+      - directus
+    networks:
+      - directus
+
+  database:
+    image: postgres:15-alpine
+    container_name: database
+    environment:
+      POSTGRES_USER: directus
+      POSTGRES_PASSWORD: directus
+      POSTGRES_DB: directus
+    volumes:
+      - db-data:/var/lib/postgresql/data
+    ports:
+      - 5432:5432
+    networks:
+      - directus
+
+  directus:
+    image: directus/directus:10.0.0
+    ports:
+      - 8055:8055
+    volumes:
+      - uploads:/directus/uploads
+    depends_on:
+      - database
+    networks:
+      - directus
+    environment:
+      KEY: '255d861b-5ea1-5996-9aa3-922530ec40b1'
+      SECRET: '6116487b-cda1-52c2-b5b5-c8022c45e263'
+      MAX_PAYLOAD_SIZE: '100mb'
+      DB_CLIENT: 'pg'
+      DB_HOST: 'database'
+      DB_PORT: '5432'
+      DB_DATABASE: 'directus'
+      DB_USER: 'directus'
+      DB_PASSWORD: 'directus'
+      ADMIN_EMAIL: 'admin@example.com'
+      ADMIN_PASSWORD: 'd1r3ctu5'
+volumes:
+  db-data:
+  uploads:
+networks:
+  directus:
+    driver: bridge

compose.yml

@@ -4,7 +4,6 @@ services:
     build:
       context: ./website
       target: production
-      network: host
     container_name: web
     volumes:
       - './website/nginx/conf.d:/etc/nginx/conf.d:rw'
@@ -16,18 +15,20 @@ services:
       - directus
       - nginx
     environment:
-      - DIRECTUS_URL=http://localhost:8055
+      - DIRECTUS_URL=http://cms.localhost
       - DIRECTUS_EMAIL=admin@example.com
       - DIRECTUS_PASSWORD=d1r3ctu5
       - DIRECTUS_STATIC_TOKEN=
 
   nginx:
+    restart: 'always'
     container_name: nginx
     image: nginx:1.23.3-alpine
     volumes:
       - './nginx/nginx.conf:/etc/nginx/nginx.conf'
     ports:
       - '80:80'
+      - '433:433'
     depends_on:
       - directus
     networks:
@@ -43,7 +44,7 @@ services:
     volumes:
       - db-data:/var/lib/postgresql/data
     ports:
-      - 5432:5432
+      - 5432
     networks:
       - directus
 
@@ -56,7 +57,7 @@ services:
   directus:
     image: directus/directus:latest
     ports:
-      - 8055:8055
+      - 8055
     volumes:
       - uploads:/directus/uploads
     depends_on:

nginx/nginx.conf

@@ -23,6 +23,8 @@ http {
 
     server_tokens off;
 
+    resolver 127.0.0.11 valid=30s ipv6=off;
+
     server {
       listen 80;
       listen [::]:80;
@@ -30,7 +32,8 @@ http {
       server_name localhost;
 
       location / {
-        proxy_pass http://web:80;
+        set $website http://web:80;
+        proxy_pass $website;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';

website/.dockerignore

@@ -1,3 +1,3 @@
-node_modules/
-uploads/
-dist/
+./node_modules
+./dist
+./.astro

website/Dockerfile

@@ -1,11 +1,11 @@
-# syntax=docker/dockerfile:1.0
+# syntax=docker/dockerfile:1
 
 ARG NODE_IMAGE=node:19-alpine3.16
 ARG NGINX_IMAGE=nginx:1.23.3-alpine
 
+# DEVELOPMENT STAGE
 FROM ${NODE_IMAGE} as development
 WORKDIR /app
-
 COPY ./package.json ./
 COPY ./package-lock.json ./
 
@@ -16,10 +16,13 @@ COPY . .
 EXPOSE 3000
 CMD [ "npm", "start" ]
 
+# BUILDER STAGE
 FROM development as builder
+ENV DIRECTUS_URL=http://cms.localhost
 WORKDIR /app
 RUN npm run build
 
+# PRODUCTION STAGE
 FROM ${NGINX_IMAGE} as production
 
 COPY --from=builder /app/dist /usr/share/nginx/html

website/lib/directus-collections.d.ts

@@ -15,9 +15,9 @@ export type ContactsCollection = {
 
 export type ArticleCollection = {
   id: ID;
-  status: string;
+  status: 'published' | 'draft' | 'archieved';
   title: string;
-  slug: 'published' | 'draft' | 'archieved';
+  slug: string;
   description?: string;
   cover?: string;
   body?: string;
@@ -34,8 +34,8 @@ export type SettingsCollection = {
 };
 
 export type DirectusCollections = {
+  articles: ArticleCollection;
   about_us: AboutUsCollection;
   contacts: ContactsCollection;
-  articles: ArticleCollection;
   settings: SettingsCollection;
 };

website/package.json

@@ -10,10 +10,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/tailwind": "^3.1.0",
-    "@directus/sdk": "^10.3.1",
-    "astro": "^2.1.2",
+    "@astrojs/tailwind": "^3.1.2",
+    "@directus/sdk": "^10.3.3",
+    "astro": "^2.4.5",
     "astro-icon": "^0.8.0",
-    "tailwindcss": "^3.2.7"
+    "tailwindcss": "^3.3.2"
   }
 }

website/src/pages/contact.astro

@@ -6,7 +6,7 @@ import { Icon } from 'astro-icon';
 const data = await directus.singleton('contacts').read();
 ---
 
-<PageLayout title={data?.heading || 'Contacts'}>
+<PageLayout title={'Contacts'}>
   <div>
     <h1>{data?.heading}</h1>
     <div set:html={data?.body} />
@@ -16,10 +16,12 @@ const data = await directus.singleton('contacts').read();
         <ul class='flex'>
           {data.contacts.map((c) => (
             <li class='flex items-center mr-5 italic text-sm mb-1.5'>
+              {c.icon && (
                 <span class='mr-1.5'>
-                <Icon name={c?.icon} height={16} width={16} />
+                  <Icon name={c.icon} height={16} width={16} />
                 </span>
-              {c?.href_prefix ? (
+              )}
+              {c.href_prefix ? (
                 <a class='underline' href={`${c.href_prefix}:${c.data}`}>
                   {c.data}
                 </a>