Merge pull request #145 from vevcom/feat/Article

Feat/article-1-seeding

.eslintrc.json

@@ -61,7 +61,14 @@
     // disallow use of undeclared variables unless mentioned in a /*global */ block
     "no-undef": "error",
     // disallow use of variables before they are defined
-    "no-use-before-define": "error",
+    "no-use-before-define": [
+        "error",
+        {
+            "functions": false,
+            "classes": false,
+            "variables": true
+        }
+    ],
     // enforces no braces where they can be omitted
     "arrow-body-style": [
         "error",

.github/workflows/build.yml

@@ -13,7 +13,7 @@ jobs:
     - name: checkout
       uses: actions/checkout@v3
     - name: build
-      run: docker-compose --env-file default.env build
+      run: docker compose --env-file default.env build
     - name: up
-      run: docker-compose --env-file default.env up -d
+      run: docker compose --env-file default.env up -d
 

docker-compose.dev.yml

@@ -54,7 +54,7 @@ services:
       DB_URI: ${DB_URI}
     volumes:
       - ./src/prisma/schema.prisma:/usr/src/app/schema.prisma
-      - devstore:/usr/src/app/store
+      - devstore:/usr/src/app/prismaservice/store
     depends_on:
       db:
         condition: service_healthy

docker-compose.yml

@@ -47,7 +47,7 @@ services:
       NODE_ENV: production
       DB_URI: ${DB_URI}
     volumes:
-      - store:/usr/src/app/store
+      - store:/usr/src/app/prismaservice/store
     depends_on:
       db:
         condition: service_healthy

package.json

@@ -17,6 +17,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@prisma/client": "^5.8.1",
     "@types/heic-convert": "^1.2.3",
     "eslint": "8.56.0",
     "eslint-config-next": "^14.1.0",
@@ -39,7 +40,6 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@prisma/client": "^5.8.1",
     "@types/google-map-react": "^2.1.10",
     "@types/node": "^20.11.10",
     "@types/react": "^18.2.48",

src/actions/cms/articleSections/ConfigVars.ts

@@ -1,3 +1,3 @@
-export const maxImageSize = 400
+export const maxImageSize = 540
 export const minImageSize = 130
 export const increment = 20

src/actions/cms/articles/ReturnType.ts

@@ -0,0 +1,8 @@
+import { ReturnType as ExpandedArticleSection } from '@/cms/articleSections/ReturnType'
+import type { Article, CmsImage } from '@prisma/client'
+
+export type ReturnType = Article & {
+    articleSections: ExpandedArticleSection[],
+    coverImage: CmsImage,
+}
+

src/actions/cms/articles/create.ts

@@ -1 +1,33 @@
 'use server'
+import { ReturnType } from './ReturnType'
+import { ActionReturn } from '@/actions/type'
+import prisma from '@/prisma'
+import errorHandeler from '@/prisma/errorHandler'
+
+export default async function create(name: string): Promise<ActionReturn<ReturnType>> {
+    try {
+        const article = await prisma.article.create({
+            data: {
+                name,
+                coverImage: {
+                    create: {
+                        name: `${name}_cover`,
+                    }
+                },
+            },
+            include: {
+                articleSections: {
+                    include: {
+                        cmsImage: true,
+                        cmsParagraph: true,
+                        cmsLink: true
+                    }
+                },
+                coverImage: true,
+            }
+        })
+        return { success: true, data: article }
+    } catch (error) {
+        return errorHandeler(error)
+    }
+}

src/actions/cms/articles/read.ts

@@ -0,0 +1,29 @@
+'use server'
+import { ReturnType } from './ReturnType'
+import { ActionReturn } from '@/actions/type'
+import prisma from '@/prisma'
+import errorHandeler from '@/prisma/errorHandler'
+
+export default async function read(name: string): Promise<ActionReturn<ReturnType>> {
+    try {
+        const article = await prisma.article.findUnique({
+            where: {
+                name
+            },
+            include: {
+                articleSections: {
+                    include: {
+                        cmsImage: true,
+                        cmsParagraph: true,
+                        cmsLink: true
+                    }
+                },
+                coverImage: true,
+            }
+        })
+        if (!article) return { success: false, error: [{ message: `Article ${name} not found` }] }
+        return { success: true, data: article }
+    } catch (error) {
+        return errorHandeler(error)
+    }
+}

src/actions/cms/articles/update.ts

@@ -0,0 +1,33 @@
+'use server'
+import prisma from '@/prisma'
+import errorHandler from '@/prisma/errorHandler'
+import { ActionReturn } from '@/actions/type'
+import type { ReturnType } from './ReturnType'
+
+export default async function update(id: number, config: {
+    name?: string,
+}) : Promise<ActionReturn<ReturnType>> {
+    try {
+        const article = await prisma.article.update({
+            where: {
+                id,
+            },
+            data: {
+                ...config,
+            },
+            include: {
+                coverImage: true,
+                articleSections: {
+                    include: {
+                        cmsImage: true,
+                        cmsParagraph: true,
+                        cmsLink: true,
+                    }
+                }
+            }
+        })
+        return { success: true, data: article }
+    } catch (error) {
+        return errorHandler(error)
+    }
+}

src/app/components/Cms/Article/Article.module.scss

@@ -1,5 +1,66 @@
 @use "@/styles/ohma";
 
+$padding: 4rem;
+$cover-height: min(300px, 40vh);
+
 .Article {
-
-}
+    .coverImage {
+        overflow: hidden;
+        isolation: isolate;
+        display: block;
+        width: 100%;
+        height: $cover-height;
+        position: relative;
+        > *:first-child {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            &::after {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(to bottom, rgba(ohma.$colors-primary, 0), ohma.$colors-yellow);
+                z-index: 1;
+            }
+            > * {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100% !important;
+                height: 100%;
+                object-fit: cover;
+                img {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100% !important;
+                    height: $cover-height !important; // Add this line
+                    object-fit: cover;
+                }
+            }
+        }
+        >*:nth-child(2) {
+            position: absolute;
+            left: $padding;
+            bottom: 1em;
+            .title {
+                font-size: ohma.$fonts-xxl;
+                font-family: ohma.$fonts-secondary;
+                text-transform: uppercase;
+                color: ohma.$colors-white;
+                z-index: 2;
+            }
+        }   
+
+    }
+    article {
+        > * {
+            margin: 2em $padding;
+            isolation: isolate;
+        }
+    }
+}   
+

src/app/components/Cms/Article/Article.tsx

@@ -1,9 +1,32 @@
 import styles from './Article.module.scss'
+import CmsImage from '@/cms/CmsImage/CmsImage'
+import SlideInOnView from '@/components/SlideInOnView/SlideInOnView'
+import ArticleSection from '@/cms/ArticleSection/ArticleSection'
+import type { ReturnType } from '@/cms/articles/ReturnType'
 
-export default function Article() {
+type PropTypes = {
+    article: ReturnType,
+}
+
+export default function Article({ article } : PropTypes) {
     return (
         <span className={styles.Article}>
-            <h1>Article</h1>
+            <span className={styles.coverImage}>
+                <CmsImage width={500} name={article.coverImage.name} />
+                <SlideInOnView direction="bottom">
+                    <h1 className={styles.title}>{article.name}</h1>
+                </SlideInOnView>
+            </span>
+            <article>
+
+                {
+                    article.articleSections.sort((a, b) => (a.order - b.order)).map(section => (
+                        <SlideInOnView direction="left" key={section.id}>
+                            <ArticleSection articleSection={section} />
+                        </SlideInOnView>
+                    ))
+                }
+            </article>
         </span>
     )
 }

src/app/components/Cms/ArticleSection/AddParts.module.scss

@@ -1,21 +1,26 @@
 @use '@/styles/ohma';
 
 .AddParts {
-    position: relative;
     padding: ohma.$gap;
-    border: ohma.$colors-secondary 3px solid;
-    border-radius: ohma.$rounding;
-    min-height: 100px;
-    padding: 1em;
-    > .addControls {
-        position: absolute;
-        bottom: 3px;
-        right: 3px;
-        z-index: 1;
-        display: flex;
-        button {
+    max-width: calc(100% - 2 * ohma.$gap);
+    > .wrapper {
+        position: relative;
+        border: ohma.$colors-secondary 3px solid;
+        border-radius: ohma.$rounding;
+        min-height: 100px;
+        > .addControls {
+            position: absolute;
+            bottom: 3px;
+            right: 3px;
+            z-index: 1;
             display: flex;
+            button {
+                display: flex;
+            }
         }
-    }
-    padding-bottom: 60px;
+        padding: 2*ohma.$gap;
+        &.paddingBottom {
+            padding-bottom: 60px;
+        }
+    } 
 }