Fix frontend/backend volume binding, use Bulma instead of Tailwind

docker-compose.override.yml

@@ -4,15 +4,15 @@ services:
   frontend:
     command: yarn dev
     volumes:
-      - ./node_modules:/usr/src/backend/node_modules
+      - ./src/frontend:/usr/src/frontend
+      - ./node_modules:/usr/src/frontend/node_modules
     environment:
       HTTPS_PROXY: https://proxy
   backend:
     command: yarn dev
     volumes:
+      - ./src/backend:/usr/src/backend
       - ./node_modules:/usr/src/backend/node_modules
-      - ./src/backend/.tmp:/usr/src/backend/.tmp
-      - ./src/backend/public:/usr/src/backend/public
     ports:
       - "1337:1337"
   proxy:

package.json

@@ -12,6 +12,6 @@
     "typescript": "~3.9"
   },
   "workspaces": [
-    "packages/*"
+    "src/*"
   ]
 }

src/frontend/components/cover-image.js

@@ -1,9 +1,13 @@
 import Link from 'next/link'
 
 export default function CoverImage({ title, url, slug }) {
+  if (!url) {
+    return null;
+  }
+
   const imageUrl = `${
     url.startsWith('/') ? process.env.NEXT_PUBLIC_STRAPI_API_URL : ''
-  }${url}`
+    }${url}`
   return (
     <div className="-mx-5 sm:mx-0">
       {slug ? (
@@ -13,8 +17,8 @@ export default function CoverImage({ title, url, slug }) {
           </a>
         </Link>
       ) : (
-        <img src={imageUrl} alt={title} />
-      )}
+          <img src={imageUrl} alt={title} />
+        )}
     </div>
   )
 }

src/frontend/lib/api.js

@@ -55,7 +55,7 @@ export async function getAllPostsForHome(preview) {
     `
     query Posts($where: JSON){
       posts(sort: "created_at:desc", where: $where) {
-        title        
+        title
         slug
         created_at
         excerpt
@@ -84,7 +84,7 @@ export async function getPostAndMorePosts(slug, preview) {
     `
   query PostBySlug($where: JSON, $where_ne: JSON) {
     posts(where: $where) {
-      title        
+      title
       slug
       created_at
       excerpt

src/frontend/package.json

@@ -8,20 +8,21 @@
     "start": "next start"
   },
   "dependencies": {
+    "bulma": "^0.9.0",
     "classnames": "2.2.6",
     "date-fns": "2.14.0",
     "isomorphic-unfetch": "3.0.0",
     "next": "latest",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "remark": "12.0.0",
-    "remark-html": "11.0.2"
+    "remark-html": "11.0.2",
+    "sass": "^1.26.9"
   },
   "devDependencies": {
     "@types/node": "~12",
     "@types/react": "^16.9.41",
     "postcss-flexbugs-fixes": "4.2.1",
-    "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.4.6"
+    "postcss-preset-env": "^6.7.0"
   }
 }

src/frontend/pages/_app.tsx

@@ -1,4 +1,4 @@
-import '@/styles/index.css'
+import '@/styles/index.scss'
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

src/frontend/pages/index.tsx

@@ -6,8 +6,10 @@ import Layout from '@/components/layout'
 import { getAllPostsForHome } from '@/lib/api'
 import Head from 'next/head'
 import { CMS_NAME } from '@/lib/constants'
+import { InferGetStaticPropsType, GetStaticProps } from "next"
 
-export default function Index({ allPosts, preview }) {
+
+export default function Index({ allPosts, preview }: InferGetStaticPropsType<typeof getStaticProps>) {
   const heroPost = allPosts[0]
   const morePosts = allPosts.slice(1)
   return (
@@ -35,7 +37,7 @@ export default function Index({ allPosts, preview }) {
   )
 }
 
-export async function getStaticProps({ preview = null }) {
+export const getStaticProps: GetStaticProps  = async ({ preview = null }) => {
   const allPosts = (await getAllPostsForHome(preview)) || []
   return {
     props: { allPosts, preview },

src/frontend/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: [
-    'tailwindcss',
     'postcss-flexbugs-fixes',
     [
       'postcss-preset-env',

src/frontend/styles/index.scss

@@ -0,0 +1,6 @@
+
+@import "~bulma";
+
+.grayscale {
+  filter: grayscale(1);
+}