Fixes frontend image bugs (#176)

* Fixes frontend image loading bug
* Updates frontend deps
* Changes banner style to reduce low-end device lag
* Improves NextJS image performance
* Improves backup and store

.gitignore

@@ -1,4 +1,5 @@
 .idea/
 docker/roodjongeren_prod/.env.prod
 dump_rood*.sql
+roodjongeren-export*
 node_modules/

README.md

@@ -84,27 +84,13 @@ Pull the latest changes from GitHub via `sudo git pull`.
 
 Afterwards `cd ..` back into the folder with your docker compose file and
 run `sudo docker compose build [service] [--no-cache]` to create new docker images.
-Deploy them with `sudo docker compose up`.
+Deploy them with `sudo docker compose up -d`.
 
-### Backing Up & Restoring Database
+### Backing Up
 
-You can back up a database from the host machine using the following command:
-
-```bash
-docker exec -t rood_postgres pg_dump -c -U rood rood > dump_rood.sql
-```
-
-To restore the backup of the database into a running Postgres container, use the following:
-
-```bash
-cat dump_rood.sql | docker exec -i rood_postgres psql -U rood -d rood
-```
-
-To back up images and files uploaded to Strapi, you can run `docker cp` in the instance:
-
-```bash
-sudo docker cp rood_strapi:/usr/src/app/public/uploads/ uploads_backup/
-```
+You can back up the database and Strapi assets using `import.sh` on the production instance.
+This will export all data to a compressed file named `roodjongeren-export.tar.gz`.
+You can use `yarn strapi import` to import the back up locally.
 
 ### Configuring SSL
 

backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM arm64v8/node:19.8-alpine
+FROM arm64v8/node:16.14-alpine
 
 WORKDIR /usr/src/app
 

backend/package.json

@@ -8,7 +8,8 @@
         "start": "strapi start",
         "build": "strapi build",
         "start-prod": "strapi build && strapi start",
-        "strapi": "strapi"
+        "strapi": "strapi",
+        "import-backup": "strapi import --file ../roodjongeren-export.tar.gz"
     },
     "devDependencies": {},
     "dependencies": {

docker/roodjongeren_prod/docker-compose.no-nginx.yml

@@ -47,7 +47,7 @@ services:
     build: ./roodjongeren/frontend
     restart: unless-stopped
     environment:
-      - BACKEND_URL=http://strapi:1337
+      - BACKEND_URL=$STRAPI_URL
       - NEXT_PUBLIC_BACKEND_URL=/backend
     depends_on:
       - strapi

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM arm64v8/node:19.8-alpine AS dependencies
+FROM arm64v8/node:16.14-alpine AS dependencies
 
 ENV NODE_ENV=production
 

frontend/package.json

@@ -13,23 +13,23 @@
         "@types/leaflet": "^1.9.3",
         "@types/node": "17.0.33",
         "@types/qs": "^6.9.7",
-        "@types/react": "18.0.28",
+        "@types/react": "18.0.33",
         "autoprefixer": "^10.4.14",
-        "axios": "^1.3.4",
-        "eslint": "8.36.0",
-        "eslint-config-next": "13.2.4",
+        "axios": "^1.3.5",
+        "eslint": "8.38.0",
+        "eslint-config-next": "13.3.0",
         "leaflet": "^1.9.3",
         "leaflet-defaulticon-compatibility": "^0.1.1",
-        "next": "13.2.4",
+        "next": "13.3.0",
         "next-transpile-modules": "^10.0.0",
         "qs": "^6.11.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-icons": "^4.8.0",
         "react-leaflet": "^4.2.1",
-        "react-markdown": "^8.0.5",
+        "react-markdown": "^8.0.6",
         "remark-gfm": "^3.0.1",
-        "tailwindcss": "^3.2.7",
+        "tailwindcss": "^3.3.1",
         "typescript": "4.9.4"
     },
     "devDependencies": {

frontend/src/components/Banner.tsx

@@ -19,11 +19,12 @@ export default function Banner(props: Props) {
             <Image
                 src={props.background}
                 fill
+                sizes="100vw"
                 loader={imageLoader}
                 alt="Banner"
-                className="blur object-cover"
+                className="object-cover"
             />
-            <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-primary via-transparent to-transparent mix-blend-darken" />
+            <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-primary to-transparent mix-blend-darken" />
             <div
                 className="absolute top-0 left-0 w-full h-full bg-primary mix-blend-darken"
                 style={{ clipPath: "polygon(101% 85%, 40% 101%, 101% 101%)" }}
@@ -32,14 +33,16 @@ export default function Banner(props: Props) {
                 className="absolute top-0 left-0 w-full h-full bg-primary"
                 style={{ clipPath: "polygon(0% 85%, 0% 101%, 60% 101%)" }}
             />
-            <div className="w-full px-4 pt-[128px] pb-16 text-white text-center relative uppercase font-title">
+            <div className="w-full px-4 pt-[128px] pb-16 text-white text-center relative font-title leading-none">
                 <h1
-                    className="text-[4rem] sm:text-[6rem] md:text-[7rem] font-bold leading-none text-outline"
+                    className="text-[4rem] sm:text-[5rem] md:text-[6rem] font-bold"
                     style={{ wordBreak: "break-word" }}
                 >
                     {props.title}
                 </h1>
-                <h2 className="text-6xl text-outline">{props.subtitle}</h2>
+                <h2 className="text-[3rem] sm:text-[4rem] md:text-[4rem]">
+                    {props.subtitle}
+                </h2>
                 <ContentLink />
             </div>
         </div>
@@ -50,9 +53,9 @@ function ContentLink() {
     return (
         <div className="mt-12">
             <a href="#main-content" className="inline-block group" tabIndex={-1}>
-                <div className="flex mt-12 opacity-75 group-hover:opacity-100 transition-opacity">
-                    <div className="h-[2px] w-14 bg-white transition-colors origin-right rotate-45" />
-                    <div className="h-[2px] w-14 bg-white transition-colors origin-left -rotate-45" />
+                <div className="flex mt-12 opacity-80 group-hover:opacity-100 transition-opacity">
+                    <div className="h-[3px] w-14 bg-white transition-colors origin-right rotate-45" />
+                    <div className="h-[3px] w-14 bg-white transition-colors origin-left -rotate-45" />
                 </div>
             </a>
         </div>

frontend/src/components/ConfidantCard.tsx

@@ -18,6 +18,7 @@ export default function ConfidantCard(props: Props) {
                 <Image
                     src={confidant.photo}
                     fill
+                    sizes="20rem"
                     className="object-cover"
                     loader={imageLoader}
                     alt={`Foto van ${confidant.name}`}

frontend/src/components/PostItem.tsx

@@ -35,13 +35,15 @@ export default function PostItem(props: Props) {
                         src={post.banner}
                         alt=""
                         fill
+                        sizes="10rem"
                         className="object-cover"
                     />
                 ) : (
                     <Image
                         src="/images/rood-logo.svg"
                         alt=""
                         fill
+                        sizes="10rem"
                         className="object-contain opacity-10"
                     />
                 )}

frontend/src/pages/index.tsx

@@ -74,8 +74,8 @@ export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
     const [homeContent, afdelingen, news, submissions] = await Promise.all([
         fetchHome(),
         fetchAfdelingen(),
-        fetchPosts(PostType.NEWS, null, null, 1, 8, true),
-        fetchPosts(PostType.SUBMISSION, null, null, 1, 4, true),
+        fetchPosts(PostType.NEWS, null, null, 1, 9, true),
+        fetchPosts(PostType.SUBMISSION, null, null, 1, 3, true),
     ]);
 
     return {

frontend/src/pages/posts.tsx

@@ -52,8 +52,6 @@ export default function PostsPage(props: Props) {
         }
     }, [searchString, page, props]);
 
-    console.log(posts);
-
     return (
         <div>
             <HeadPage