1158 Embed ghost blog articles in frontend app (#1161)

* Added ghost api as dependency

* Update date utils

* Added blog pages fetched from remote ghost instance

* Switch inline styles to emotion styles

* Update sentry dependency

* Update sitemaps

* Capture blog post exceptions

* Update testing-library to work with react 18

* Hide sentry sourcemaps

https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/\#use-hidden-source-map

* Setup env during builds in check-pr workflow

* Use ghost key from repo secret

* Copy env prior build

* Added more dockerfile args

* Update release.yml

* Wrap env usage in workflows on check pr and release

* Remove ghost envs from build args

* Revert "Remove ghost envs from build args"

This reverts commit df0456f.

.env.local.example

@@ -33,4 +33,9 @@ GOOGLE_SECRET=
 ## Paypal ##
 ##############
 # using 'sb' as sandbox. no need to put real sandbox key if you don't plan to test requests with backend webhooks
-PAYPAL_CLIENT_ID=sb
+PAYPAL_CLIENT_ID=sb
+
+## Ghost ##
+###########
+GHOST_API_URL=https://blog.podkrepi.bg
+GHOST_CONTENT_KEY=86ec17c4b9660acd66b6034682

.github/workflows/check-pr.yml

@@ -18,10 +18,15 @@ jobs:
         env:
           NODE_ENV: production
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          GHOST_API_URL: https://blog.podkrepi.bg
+          GHOST_CONTENT_KEY: ${{ secrets.GHOST_CONTENT_KEY }}
         with:
           push: false
           target: production
-          build-args: SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
+          build-args: |
+            SENTRY_AUTH_TOKEN=${{ env.SENTRY_AUTH_TOKEN }}
+            GHOST_API_URL=${{ env.GHOST_API_URL }}
+            GHOST_CONTENT_KEY=${{ env.GHOST_CONTENT_KEY }}
           tags: ghcr.io/podkrepi-bg/frontend:pr
 
       - name: Scan with Mondoo

.github/workflows/playwright.yml

@@ -51,14 +51,14 @@ jobs:
         working-directory: ./frontend
         run: yarn
 
-      - name: Build frontend
-        working-directory: ./frontend
-        run: yarn run next build
-
       - name: Setup env
         working-directory: ./frontend
         run: cp .env.local.example .env.local
 
+      - name: Build frontend
+        working-directory: ./frontend
+        run: yarn run next build
+
       - name: Wait on backend
         uses: iFaxity/wait-on-action@v1
         with:

.github/workflows/release.yml

@@ -68,11 +68,15 @@ jobs:
         env:
           NODE_ENV: production
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          GHOST_API_URL: https://blog.podkrepi.bg
+          GHOST_CONTENT_KEY: ${{ secrets.GHOST_CONTENT_KEY }}
         with:
           push: true
           target: production
           build-args: |
-            SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
+            SENTRY_AUTH_TOKEN=${{ env.SENTRY_AUTH_TOKEN }}
+            GHOST_API_URL=${{ env.GHOST_API_URL }}
+            GHOST_CONTENT_KEY=${{ env.GHOST_CONTENT_KEY }}
             VERSION=${{ env.VERSION }}
           tags: ghcr.io/podkrepi-bg/frontend:${{ env.VERSION }}
 

Dockerfile

@@ -33,6 +33,10 @@ FROM base AS builder
 ARG VERSION=unversioned
 ARG SENTRY_AUTH_TOKEN
 ENV SENTRY_AUTH_TOKEN="$SENTRY_AUTH_TOKEN"
+ARG GHOST_API_URL
+ENV GHOST_API_URL="$GHOST_API_URL"
+ARG GHOST_CONTENT_KEY
+ENV GHOST_CONTENT_KEY="$GHOST_CONTENT_KEY"
 COPY --from=dependencies /app/node_modules /app/node_modules
 COPY . /app
 

manifests/base/config-web.yaml

@@ -6,3 +6,5 @@ data:
   app-url: https://podkrepi.bg
   api-url: https://podkrepi.bg/api/v1
   image-host: podkrepi.bg
+  ghost-api-url: https://blog.podkrepi.bg
+  ghost-content-key: 86ec17c4b9660acd66b6034682

manifests/base/deployment.yaml

@@ -101,6 +101,16 @@ spec:
                 secretKeyRef:
                   name: secrets-web
                   key: paypal-client-id
+            - name: GHOST_API_URL
+              valueFrom:
+                configMapKeyRef:
+                  name: config-web
+                  key: ghost-api-url
+            - name: GHOST_CONTENT_KEY
+              valueFrom:
+                configMapKeyRef:
+                  name: config-web
+                  key: ghost-content-key
           ports:
             - containerPort: 3040
           resources:

next.config.js

@@ -36,8 +36,14 @@ const moduleExports = {
       CAMPAIGN: process.env.FEATURE_CAMPAIGN ?? false,
     },
   },
+  sentry: {
+    hideSourceMaps: true,
+  },
   images: {
-    domains: [process.env.IMAGE_HOST ?? 'localhost'],
+    domains: [
+      process.env.IMAGE_HOST ?? 'localhost',
+      process.env.GHOST_API_URL?.replace('https://', '') || 'blog.podkrepi.bg',
+    ],
   },
   async redirects() {
     return [

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "predev": "shx test -e .env.local && exit 0 || shx echo 'You need to create .env.local file. Please check README.md!' && exit 1",
     "dev": "yarn && next dev -p 3040",
-    "build": "yarn format && next build",
+    "build": "yarn && next build",
     "start": "next start -p 3040",
     "test": "jest --env=jsdom",
     "test:e2e": "playwright test",
@@ -38,9 +38,11 @@
     "@next/bundle-analyzer": "^12.1.0",
     "@paypal/react-paypal-js": "^7.8.1",
     "@react-pdf/renderer": "^3.0.1",
-    "@sentry/nextjs": "6.17.8",
+    "@sentry/nextjs": "7.21.1",
     "@tanstack/react-query": "^4.16.1",
+    "@tryghost/content-api": "^1.11.4",
     "@types/react-slick": "^0.23.10",
+    "@types/tryghost__content-api": "^1.3.11",
     "@uppy/aws-s3": "2.0.5",
     "@uppy/core": "2.1.1",
     "@uppy/facebook": "2.0.4",
@@ -83,8 +85,8 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.24.2",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/cookie": "^0.4.1",
     "@types/lodash.truncate": "^4.4.7",
     "@types/lru-cache": "^5.1.1",

public/locales/bg/blog.json

@@ -0,0 +1,10 @@
+{
+  "title": "Блог",
+  "description": "Място за истории, идеи и добри каузи.",
+  "created-on": "Създаден на:",
+  "reading-time": {
+    "label": "Време за прочитане:",
+    "count_one": "{{count}} минутa",
+    "count_other": "{{count}} минути"
+  }
+}

public/locales/bg/common.json

@@ -38,7 +38,8 @@
     "logout": "Изход",
     "register": "Регистрация",
     "changePassword": "Смяна на парола",
-    "forgottenPassword": "Забравена парола?"
+    "forgottenPassword": "Забравена парола?",
+    "go-back": "Назад"
   },
   "meta": {
     "title": "Подкрепи.бг"

public/locales/en/blog.json

@@ -0,0 +1,10 @@
+{
+  "title": "Blog",
+  "description": "A place for stories, ideas and good causes.",
+  "created-on": "Created on:",
+  "reading-time": {
+    "label": "Reading time:",
+    "count_one": "{{count}} minute",
+    "count_other": "{{count}} minutes"
+  }
+}

public/locales/en/common.json

@@ -38,7 +38,8 @@
     "logout": "Logout",
     "register": "Signup",
     "changePassword": "Change your password",
-    "forgottenPassword": "Forgotten password?"
+    "forgottenPassword": "Forgotten password?",
+    "go-back": "Go back"
   },
   "meta": {
     "title": "Podkrepi.bg"