Vue 2 -> 3 PROOF OF CONCEPT

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.gitattributes

@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -1,21 +1,29 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+*.spec.ts-snapshots/

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+	"arrowParens": "always",
+	"trailingComma": "es5",
+	"printWidth": 100,
+	"singleQuote": true
+}

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode"
+  ]
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

e2e/home.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test';
+
+const ScreenshotOptions  = {
+  animations: 'disabled' as const, 
+  threshold: 0.7,
+  maxDiffPixelRatio: 0.9,
+  maxDiffPixels: 3000,
+};
+
+test('Home Page Top', async ({ page }) => {
+  await page.goto('/');
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/OpenAlex/);
+  await expect(page).toHaveScreenshot('home-top.png', ScreenshotOptions);
+});
+
+test('Home Page Bottom', async ({ page }) => {
+  await page.goto('/');
+  await page.getByText('Learn more').click();
+  await expect(page).toHaveScreenshot('home-bottom.png', ScreenshotOptions);
+});
+
+// test('Home Page Login Button', async ({ page }) => {
+//   await page.goto('/');
+//   await page.getByRole('button', { name: 'Log in' }).click()
+//   await expect(page).toHaveScreenshot('home-login.png', ScreenshotOptions);
+// });
+
+// test('Home Page Sign Up Button', async ({ page }) => {
+//   await page.goto('/');
+//   await page.getByRole('button', { name: 'Sign up' }).click()
+//   await expect(page).toHaveScreenshot('home-SignUp.png', ScreenshotOptions);
+// });
+
+// test('Home Page info Button', async ({ page }) => {
+//   await page.goto('/');
+//   await page.getByRole('button').nth(2).click()
+//   await expect(page).toHaveScreenshot('home-info-menu.png', ScreenshotOptions);
+// });
+
+test('Home Page Search', async ({ page }) => {
+  await page.goto('/');
+  await page.getByText('coriander OR cilantro').click();
+  await expect(page).toHaveScreenshot('home-search-open.png', ScreenshotOptions);
+
+
+});
+
+test('Home Page Final Footer', async ({ page }) => {
+  await page.goto('/');
+  await  page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  await expect(page).toHaveScreenshot('home-final.png', ScreenshotOptions);
+});

eslint.config.js

@@ -0,0 +1,39 @@
+import tsParser from '@typescript-eslint/parser';
+import js from '@eslint/js';
+import sonarJs from 'eslint-plugin-sonarjs';
+import pluginVue from 'eslint-plugin-vue';
+import vueParser from 'vue-eslint-parser';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import pluginVuetify from 'eslint-plugin-vuetify';
+
+export default [
+  js.configs.recommended,
+  sonarJs.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+  ...pluginVue.configs['flat/strongly-recommended'],
+  ...pluginVue.configs['flat/recommended'],
+  eslintConfigPrettier,
+  {
+    languageOptions: {
+      parser: vueParser,
+      globals: {
+        node: true,
+      },
+      parserOptions: {
+        ecmaVersion: 2020,
+        parser: tsParser,
+      },
+    },
+    rules: {
+      'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+      'vue/component-tags-order': [
+        'error',
+        {
+          order: ['script', 'template', 'style'],
+        },
+      ],
+      // Add Vuetify-specific rules
+      ...pluginVuetify.configs.recommended,
+    },
+  },
+];

public/index.html → index.html

@@ -2,23 +2,22 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.png">
+    <link rel="icon" href="favicon.png">
     <title>OpenAlex</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@100;200;300;400;500;600;700;800;900&display=swap"
           rel="stylesheet">
 
 <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">-->
-    <script defer data-domain="alpha.openalex.org" src="https://plausible.io/js/script.outbound-links.js"></script>
+    <script defer data-domain="openalex.org" src="https://plausible.io/js/script.outbound-links.js"></script>
 </head>
 <body>
 <noscript>
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+    <strong>We're sorry but OpenAlex doesn't work properly without JavaScript enabled.
         Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
-<!-- built files will be auto injected -->
+<script type="module" src="/src/main.ts"></script>
 </body>
 </html>