[website] Add blog (#417)

* add ghost api

* connect blog overview page

* connect and render post detail

* add processing to server

* update blog detail page

* add eslint-plugin-tailwindcss

* add @tanstack/react-query

* truncate text by numberOfLines

* use ComponentPropsWithRef to infer style prop type

* update ghost fns

* update index

* add tag page

* add author page

* update /

* update /tag

* update /author

* update detail page

* fix posts type

* disable redirect

* remove global background

- not found pages
- pages without common layout (preview)

* tmp: hide nav on smaller screens

* update app layout spacing

* remove text truncating

* update / spacing and sizing

* update .vscode/settings.json

* update .eslintrc

* update prettier-plugin-tailwindcss

* sort tailwind classes

* add packages/eslint-config-custom

* use turbo lint

* use tailwind.config.cjs

see francoismassart/eslint-plugin-tailwindcss#212

* reset global line-height

* fix lint-staged

* update color tokens

* update spacing and sizes

* Update apps/website/src/lib/ghost.ts

Co-authored-by: Pavel <14926950+prichodko@users.noreply.github.com>

* update layout max width

* update card min width

* set line-height

* set overflow on pre

* use flex for markdown content to prevent overflow

* collect follow-ups

* add visibility filter

* update page count

* rename var

* remove filter

* use prod ghost api key

* update ghost api

* revert line-height

* add limit to getPosts params

* update visible posts

* add related articles

* add env vars to gh

* rename eslint config package

* update gh vars

* rename envs

* set emtpy array to related posts

* fix lint-staged

* prevent importing server envs on client

* set limit

---------

Co-authored-by: Felicio Mununga <felicio@users.noreply.github.com>

.github/workflows/ci.yml

@@ -6,6 +6,11 @@ on:
   pull_request:
     types: [opened, synchronize]
 
+env:
+  NEXT_PUBLIC_GHOST_API_KEY: ''
+  INFURA_API_KEY: ''
+  TAMAGUI_TARGET: 'web'
+
 jobs:
   build:
     name: Build and Test

.vscode/settings.json

@@ -1,5 +1,11 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "eslint.packageManager": "yarn",
-  "npm.packageManager": "yarn"
+  "npm.packageManager": "yarn",
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto",
+      "#comment": "See https://github.com/microsoft/vscode-eslint/issues/1161 for reason (i.e. multiple .eslintrc config files)"
+    }
+  ]
 }

apps/mobile/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["@status-im/eslint-config"]
+}

apps/mobile/package.json

@@ -38,6 +38,7 @@
     "@types/react-native": "~0.70.6",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "@status-im/eslint-config": "*",
     "typescript": "^5.0.3"
   }
 }

apps/web/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": [
+    "@status-im/eslint-config",
+    "plugin:tailwindcss/recommended",
+    "next",
+    "next/core-web-vitals"
+  ]
+}

apps/web/package.json

@@ -24,6 +24,7 @@
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.2.0",
+    "@status-im/eslint-config": "*",
     "typescript": "^5.0.3",
     "vite": "^4.2.1"
   }

apps/website/.env

@@ -1,4 +1,3 @@
 IGNORE_TS_CONFIG_PATHS=true
 TAMAGUI_TARGET=web
 TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD=1
-

apps/website/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": [
+    "@status-im/eslint-config",
+    "plugin:tailwindcss/recommended",
+    "next",
+    "next/core-web-vitals"
+  ]
+}

apps/website/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "tailwindConfig": "./tailwind.config.cjs"
+}

apps/website/env.d.ts

@@ -1,6 +1,7 @@
-import type { env } from './src/config/env.mjs'
+import type { clientEnv } from './src/config/env.client.mjs'
+import type { serverEnv } from './src/config/env.server.mjs'
 
-type Env = typeof env
+type Env = typeof clientEnv & typeof serverEnv
 
 declare global {
   namespace NodeJS {

apps/website/next.config.mjs

@@ -1,7 +1,8 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable import/default */
 
-import './src/config/env.mjs'
+import './src/config/env.server.mjs'
+import './src/config/env.client.mjs'
 
 import tamagui_next_plugin from '@tamagui/next-plugin'
 import { join } from 'node:path'

apps/website/package.json

@@ -8,7 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "typecheck": "tsc",
-    "clean": "rimraf .next .tamagui .vercel/output node_modules .turbo",
+    "clean": "rimraf .next .tamagui .turbo .vercel/output node_modules",
     "preview": "next start --port 8151"
   },
   "dependencies": {
@@ -23,6 +23,7 @@
     "@tamagui/next-theme": "1.11.1",
     "@tanstack/react-query": "^4.29.7",
     "@vercel/og": "^0.5.4",
+    "@tryghost/content-api": "^1.11.13",
     "@visx/visx": "^2.18.0",
     "class-variance-authority": "^0.6.0",
     "d3-array": "^3.2.3",
@@ -37,17 +38,24 @@
   },
   "devDependencies": {
     "@achingbrain/ssdp": "^4.0.1",
+    "@tailwindcss/typography": "^0.5.9",
     "@tamagui/next-plugin": "1.11.1",
     "@types/d3-array": "^3.0.4",
     "@types/d3-time-format": "^4.0.0",
     "@types/node": "^18.11.11",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
+    "@types/tryghost__content-api": "^1.3.11",
     "autoprefixer": "^10.4.14",
+    "@status-im/eslint-config": "*",
     "postcss": "^8.4.21",
+    "rehype-parse": "^8.0.4",
+    "rehype-react": "^7.2.0",
+    "rehype-stringify": "^9.0.3",
     "tailwindcss": "^3.3.1",
     "tailwindcss-animate": "^1.0.5",
-    "typescript": "^5.0.3"
+    "typescript": "^5.0.3",
+    "unified": "^10.1.2"
   },
   "engines": {
     "node": "^18.x"