directus for cms

docker-compose.prod.yml

@@ -8,6 +8,7 @@ services:
 
   front:
     build: .
+    restart: unless-stopped
     ports:
       - 80
     networks:
@@ -18,3 +19,30 @@ services:
       - 'traefik.docker.network=traefik'
       - 'traefik.frontend.rule=Host:fantus.studio'
       - 'traefik.port=80'
+  
+  mysql:
+    image: mysql:5.7
+    restart: unless-stopped
+    env_file: .directus
+    ports:
+      - 3306
+    volumes:
+      - ./data/db:/var/lib/mysql
+
+  directus:
+    image: directus/directus:v8-apache
+    restart: unless-stopped
+    env_file: .directus
+    volumes:
+      - ./data/config:/var/directus/config
+      - ./data/uploads:/var/directus/public/uploads
+      - ./custom.ini:/usr/local/etc/php/conf.d/custom.ini
+    networks:
+      - traefik
+      - default
+    labels:
+      - "traefik.enable=true"
+      - "traefik.port=80"
+      - "traefik.docker.network=traefik"
+      - "traefik.backend=fantus-api"
+      - "traefik.frontend.rule=Host:api.fantus.studio"

pages/sets.tsx

@@ -1,24 +1,29 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import { NextPage } from 'next'
+import axios from 'axios'
+
+const Home: NextPage = () => {
+
+    const [links, setLinks] = useState([] as string[])
+
+    useEffect(() => {
+        axios.get('https://api.fantus.studio/directus/items/mixes?status=published')
+            .then(({ data }) => {
+                setLinks(data.data.map((entry: any) => entry.link))
+            })
+    }, [])
 
-const Home = () => {
     return <div className='sets'>
         <h1 className='ma0'>sets</h1>
         <p>
             collection of some sets made here and there.
         </p>
         <ul>
-            <li>
-                <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=%2Ffantus%2Fmxs04-lounge%2F" />
-            </li>
-            <li>
-                <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=%2Ffantus%2Fmxs03-techno%2F" />
-            </li>
-            <li>
-                <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=%2Ffantus%2Fmxs02-techno%2F" />
-            </li>
-            <li>
-                <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=%2Ffantus%2Fmxs01-melodic-techno%2F" />
+            {links.map(link => (
+                <li key={link}>
+                    <iframe width="100%" height="120" src={link} />
                 </li>
+            ))}
         </ul>
     </div>
 }