migrate blog to analog

.eslintrc.json

@@ -20,6 +20,10 @@
                 "sourceTag": "scope:bff",
                 "onlyDependOnLibsWithTags": ["scope:bff", "scope:shared"]
               },
+              {
+                "sourceTag": "scope:client-analog",
+                "onlyDependOnLibsWithTags": ["scope:client", "scope:bff", "scope:shared"]
+              },
               {
                 "sourceTag": "scope:shared",
                 "onlyDependOnLibsWithTags": ["scope:shared"]

.gitignore

@@ -47,3 +47,6 @@ Thumbs.db
 .env.*
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+
+vite.config.*.timestamp*
+vitest.config.*.timestamp*

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
     "firsttris.vscode-jest-runner",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "ms-playwright.playwright"
   ]
 }

Jenkinsfile.deploy

@@ -29,15 +29,16 @@ pipeline {
         TURSO_EU_AUTH_TOKEN=credentials('turso-eu-auth-token')
         TURSO_US_WEST_AUTH_TOKEN=credentials('turso-us-west-auth-token')
         TURSO_US_EAST_AUTH_TOKEN=credentials('turso-us-east-auth-token')
-        WP_REST_API_BASE_URL="https://wp.angular.love"
-        WP_REST_API_TOKEN=credentials('al-wp-token')
-        AL_ALGOLIA_API_KEY=credentials('al_angolia_api_key')
-        AL_ALGOLIA_APPLICATION_ID=credentials('al_angolia_app_id')
-        AL_ALGOLIA_INDEX_NAME=credentials('al_angolia_index_name')
-        AL_GISCUS_CATEGORY=credentials('al_giscus_category')
-        AL_GISCUS_CATEGORY_ID=credentials('al_giscus_category_id')
-        AL_GISCUS_REPO=credentials('al_giscus_repo')
-        AL_GISCUS_REPO_ID=credentials('al_giscus_repo_id')
+        VITE_AL_API_URL="/api"
+        VITE_WP_REST_API_BASE_URL="https://wp.angular.love"
+        VITE_WP_REST_API_TOKEN=credentials('al-wp-token')
+        VITE_AL_ALGOLIA_API_KEY=credentials('al_angolia_api_key')
+        VITE_AL_ALGOLIA_APPLICATION_ID=credentials('al_angolia_app_id')
+        VITE_AL_ALGOLIA_INDEX_NAME=credentials('al_angolia_index_name')
+        VITE_AL_GISCUS_CATEGORY=credentials('al_giscus_category')
+        VITE_AL_GISCUS_CATEGORY_ID=credentials('al_giscus_category_id')
+        VITE_AL_GISCUS_REPO=credentials('al_giscus_repo')
+        VITE_AL_GISCUS_REPO_ID=credentials('al_giscus_repo_id')
     }
 
     stages {
@@ -46,7 +47,7 @@ pipeline {
                 script {
                     sh """
                         corepack enable && corepack prepare pnpm@10.6.2 --activate
-                        pnpm install 
+                        pnpm install
                     """
                 }
             }
@@ -57,24 +58,24 @@ pipeline {
                     env.USE_BRANCH_NAME = env.BRANCH_NAME
                     env.IS_PR = "FALSE"
                     env.ENVIRONMENT = 'dev'
-                    env.WORKER_DOMAIN_END = '-blog-bff-dev.contact-ef8.workers.dev' 
+                    env.WORKER_DOMAIN_END = '-blog-analog-dev.contact-ef8.workers.dev'
                     if (env.BRANCH_NAME == 'main') {
                         env.ENVIRONMENT = 'prod'
-                        env.WORKER_DOMAIN_END = '-blog-bff.contact-ef8.workers.dev'
+                        env.WORKER_DOMAIN_END = '-blog-analog.contact-ef8.workers.dev'
                     }
 
                     if (env.CHANGE_ID) {
                         echo "CHANGE_ID: $CHANGE_ID"
                         env.IS_PR = "TRUE"
                     }
 
-                    // DOn't rember how it worked so for safety for now , todo remove later 
+                    // DOn't rember how it worked so for safety for now , todo remove later
                     if (env.IS_PR == "TRUE" && env.CHANGE_BRANCH != env.BRANCH_NAME) {
                         echo "Banch missmatch in pr"
-                        echo "CHANGE_BRANCH: $CHANGE_BRANCH"    
+                        echo "CHANGE_BRANCH: $CHANGE_BRANCH"
                         echo "BRANCH_NAME: $BRANCH_NAME"
                         env.ENVIRONMENT = 'dev'
-                        env.WORKER_DOMAIN_END = '-blog-bff-dev.contact-ef8.workers.dev' 
+                        env.WORKER_DOMAIN_END = '-blog-bff-dev.contact-ef8.workers.dev'
                         env.USE_BRANCH_NAME = env.CHANGE_BRANCH
                     }
 
@@ -87,17 +88,17 @@ pipeline {
         stage("Select master db") {
             steps {
                 script {
-                    env.USE_PARAMS_DB="false"                    
+                    env.USE_PARAMS_DB="false"
                     def setCount = 0
                     if (params.DB_MAIN_EU != "") setCount++
                     if (params.DB_MAIN_US_WEST != "") setCount++
                     if (params.DB_MAIN_US_EAST != "") setCount++
                     if (setCount > 0 && setCount < 3) {
                         error("Only some main db params are set. Please set all or none.")
                     }
-                    
-                    
-                    if (setCount == 3) { 
+
+
+                    if (setCount == 3) {
                         echo "Using params db"
                         env.USE_PARAMS_DB = "true"
                     }
@@ -115,7 +116,7 @@ pipeline {
                     if (env.BRANCH_HASH.length() > 5) {
                         env.BRANCH_HASH = env.BRANCH_HASH.substring(0, 5)
                     }
-                    
+
                     def branchNameForDB = env.USE_BRANCH_NAME
                     if (env.USE_BRANCH_NAME.length() > 30) {
                         echo "Branch name is too long, truncating to 30 characters"
@@ -129,7 +130,7 @@ pipeline {
                     if (env.DB_BRANCH_NAME.length() > 46) { // 46 since we will be adding the group name to the db name
                         error("DB branch name is too long")
                     }
-                withCredentials([string(credentialsId: 'tursor_api_token', variable: 'TURSO_API_TOKEN')]) {                    
+                withCredentials([string(credentialsId: 'tursor_api_token', variable: 'TURSO_API_TOKEN')]) {
                     echo "prams status $USE_PARAMS_DB"
                     if (env.USE_PARAMS_DB == "true") {
                         echo "Using params db"
@@ -147,10 +148,10 @@ pipeline {
                             turso db create usw-${DB_BRANCH_NAME} --from-db $TURSO_US_WEST_DB --group blog-us-west
                             turso db create use-${DB_BRANCH_NAME} --from-db $TURSO_US_EAST_DB --group blog-us-east
                         """
-                        
+
                     }
-                    
-                    
+
+
                     sh """
                         turso org switch angular-love
                         turso db list -g blog-eu | grep -q "eu-${DB_BRANCH_NAME}" || { echo "EU database not found after creation"; exit 1; }
@@ -171,19 +172,33 @@ pipeline {
                     [$class: 'BooleanParameterValue', name: 'dryRun', value: false]], wait: false)
 
                 }
-
+
+            }
+        }
+        stage("Build blog analog") {
+            steps {
+                sh """
+                    npx nx run blog-analog:build --no-tui
+                """
             }
         }
         stage("Deploy bff prod") {
             stages {
                 stage("Prepare secrets") {
                     steps {
                         sh """
-                            sed -i "s/<kv_dev_namespace_id>/$KV_DEV/g" apps/blog-bff/wrangler.toml
-                            sed -i "s/<kv_prod_namespace_id>/$KV_PROD/g" apps/blog-bff/wrangler.toml
+                            sed -i "s/<kv_dev_namespace_id>/$KV_DEV/g" apps/blog-analog/wrangler.jsonc
+                            sed -i "s/<kv_prod_namespace_id>/$KV_PROD/g" apps/blog-analog/wrangler.jsonc
                             echo "{
-\\"WP_REST_API_BASE_URL\\":\\"$WP_REST_API_BASE_URL\\",
-\\"WP_REST_API_TOKEN\\":\\"$WP_REST_API_TOKEN\\",
+\\"VITE_WP_REST_API_BASE_URL\\":\\"$VITE_WP_REST_API_BASE_URL\\",
+\\"VITE_WP_REST_API_TOKEN\\":\\"$VITE_WP_REST_API_TOKEN\\",
+\\"VITE_AL_ALGOLIA_API_KEY\\":\\"$VITE_AL_ALGOLIA_API_KEY\\",
+\\"VITE_AL_ALGOLIA_APPLICATION_ID\\":\\"$VITE_AL_ALGOLIA_APPLICATION_ID\\",
+\\"VITE_AL_ALGOLIA_INDEX_NAME\\":\\"$VITE_AL_ALGOLIA_INDEX_NAME\\",
+\\"VITE_AL_GISCUS_CATEGORY\\":\\"$VITE_AL_GISCUS_CATEGORY\\",
+\\"VITE_AL_GISCUS_CATEGORY_ID\\":\\"$VITE_AL_GISCUS_CATEGORY_ID\\",
+\\"VITE_AL_GISCUS_REPO\\":\\"$VITE_AL_GISCUS_REPO\\",
+\\"VITE_AL_GISCUS_REPO_ID\\":\\"$VITE_AL_GISCUS_REPO_ID\\",
 \\"TURSO_EU_CONNECTION_URL\\":\\"$TURSO_EU_CONNECTION_URL\\",
 \\"TURSO_EU_AUTH_TOKEN\\":\\"$TURSO_EU_AUTH_TOKEN\\",
 \\"TURSO_US_EAST_CONNECTION_URL\\":\\"$TURSO_US_EAST_CONNECTION_URL\\",
@@ -200,7 +215,7 @@ pipeline {
                         ]) {
                             script {
                                 output = sh(returnStdout: true, script: """
-                                    npx wrangler versions upload --config apps/blog-bff/wrangler.toml --env $ENVIRONMENT
+                                    npx wrangler versions upload --config apps/blog-analog/wrangler.jsonc --env $ENVIRONMENT
                                 """)
                                 echo "Output: $output"
                             }
@@ -214,7 +229,7 @@ pipeline {
                         ]) {
                             script {
                                 output = sh(returnStdout: true, script: """
-                                    npx wrangler versions secret bulk new-secrets-bff --config apps/blog-bff/wrangler.toml --env $ENVIRONMENT
+                                    npx wrangler versions secret bulk new-secrets-bff --config apps/blog-analog/wrangler.jsonc --env $ENVIRONMENT
                                 """)
                                 echo "Output: $output"
                                 def versionId = (output =~ /Created version ([^\s]+)/)[0][1]
@@ -223,10 +238,10 @@ pipeline {
 
                                 def previewUrl = versionId.substring(0, 8) + env.WORKER_DOMAIN_END
                                 env.PREVIEW_URL = "https://" + previewUrl
-                                env.AL_API_URL = "https://" + previewUrl
+                                env.DEPLOY_URL = "https://" + previewUrl
                                 echo "Preview URL: $PREVIEW_URL"
                             }
-                        }   
+                        }
                     }
                 }
                 stage ("Wrangler deploy bff") {
@@ -235,43 +250,8 @@ pipeline {
                             usernamePassword(credentialsId: 'cf-workers-creds', usernameVariable: 'CLOUDFLARE_ACCOUNT_ID', passwordVariable: 'CLOUDFLARE_API_TOKEN'),
                         ]) {
                             sh """
-                                npx wrangler versions deploy --config apps/blog-bff/wrangler.toml --env $ENVIRONMENT $VERSION_ID@100 -y
-                            """   
-                        }
-                    }
-                }
-            }
-        }
-        stage("sleep") {
-            steps {
-                sleep 10
-            }
-        }
-        stage("Build blog") {
-            steps {
-                sh """
-                    pnpm run prerender
-                """
-            }
-        }
-        stage("Deploy blog prod") {
-            steps {
-                script {
-                    withCredentials([
-                        usernamePassword(credentialsId: 'cf-workers-creds', usernameVariable: 'CLOUDFLARE_ACCOUNT_ID', passwordVariable: 'CLOUDFLARE_API_TOKEN'),
-                    ]) {
-                        output = sh(returnStdout: true, script: """                                                
-                            npx wrangler pages deploy dist/apps/blog/browser --project-name angular-love-client --branch ${USE_BRANCH_NAME}
-                        """)
-                        echo "Output: $output"
-                        def deploy_url = (output =~ /Take a peek over at ([^\s]+)/)[0][1]
-                        echo "Deploy URL: $deploy_url"
-                        env.DEPLOY_URL = deploy_url
-                        env.ALIAS_URL = "No alias on main branch"
-                        if (env.IS_PR == "TRUE") {
-                            def alias_url = (output =~ /Deployment alias URL: ([^\s]+)/)[0][1]
-                            echo "Alias URL: $alias_url"
-                            env.ALIAS_URL = alias_url
+                                npx wrangler versions deploy --config apps/blog-analog/wrangler.jsonc --env $ENVIRONMENT $VERSION_ID@100 -y
+                            """
                         }
                     }
                 }
@@ -288,9 +268,7 @@ pipeline {
                     pullRequest.comment("""
 Deployed to $ENVIRONMENT environment
 Branch: $USE_BRANCH_NAME
-BFF URL: $AL_API_URL
 Deploy URL: $DEPLOY_URL
-Alias URL: $ALIAS_URL
 """)
                 }
             }
@@ -306,9 +284,9 @@ Alias URL: $ALIAS_URL
                 if (env.IS_PR == "TRUE") {
                     pullRequest.comment("""
 Deploy failed, please check the logs in jenkins for more details.
-""")            
+""")
                 }
             }
         }
     }
-}
+}

apps/blog-analog-e2e/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "extends": ["plugin:playwright/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["src/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
+    }
+  ]
+}

apps/blog-analog-e2e/playwright.config.ts

@@ -0,0 +1,68 @@
+import { workspaceRoot } from '@nx/devkit';
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { defineConfig, devices } from '@playwright/test';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm exec nx run blog-analog:serve',
+    url: 'http://localhost:4200',
+    reuseExistingServer: true,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+});

apps/blog-analog-e2e/project.json

@@ -0,0 +1,19 @@
+{
+  "name": "blog-analog-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/blog-analog-e2e/src",
+  "implicitDependencies": ["blog-analog"],
+  "targets": {
+    "e2e": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/apps/blog-analog-e2e"],
+      "options": {
+        "config": "apps/blog-analog-e2e/playwright.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}