feat: update

.gitignore

@@ -47,4 +47,5 @@ Thumbs.db
 .nuxt
 .nitro
 .cache
-**/vite.config.{js,ts,mjs,mts,cjs,cts}.timestamp*
+**/vite.config.{js,ts,mjs,mts,cjs,cts}.timestamp*
+.astro

.npmrc

@@ -0,0 +1,2 @@
+# Expose Astro dependencies for \`pnpm\` users
+shamefully-hoist=true

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
-    "ms-playwright.playwright"
+    "ms-playwright.playwright",
+    "astro-build.astro-vscode"
   ]
 }

apps/web01-e2e/eslint.config.js

@@ -0,0 +1,13 @@
+const playwright = require('eslint-plugin-playwright');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  playwright.configs['flat/recommended'],
+
+  ...baseConfig,
+  {
+    files: ['**/*.ts', '**/*.js'],
+    // Override or add rules here
+    rules: {},
+  },
+];

apps/web01-e2e/playwright.config.ts

@@ -0,0 +1,69 @@
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4300';
+
+/**
+ * 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: 'npx nx run web01:preview',
+    url: 'http://localhost:4300',
+    reuseExistingServer: !process.env.CI,
+    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/web01-e2e/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "web01-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/web01-e2e/src",
+  "implicitDependencies": ["web01"],
+  "// targets": "to see all targets run: nx show project web01-e2e --web",
+  "targets": {}
+}

apps/web01-e2e/src/example.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('/');
+
+  // Expect h1 to contain a substring.
+  expect(await page.locator('h1').innerText()).toContain('Welcome');
+});

apps/web01-e2e/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "sourceMap": false
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "playwright.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.ts",
+    "src/**/*.test.js",
+    "src/**/*.d.ts"
+  ]
+}

apps/web01/eslint.config.js

@@ -0,0 +1,17 @@
+const vue = require('eslint-plugin-vue');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...vue.configs['flat/recommended'],
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parserOptions: { parser: require('@typescript-eslint/parser') },
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.vue'],
+    rules: { 'vue/multi-word-component-names': 'off' },
+  },
+];

apps/web01/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>web01</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

apps/web01/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "web01",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/web01/src",
+  "// targets": "to see all targets run: nx show project web01 --web",
+  "targets": {}
+}

apps/web01/src/app/App.spec.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+
+import router from '../router';
+
+import { mount } from '@vue/test-utils';
+import App from './App.vue';
+
+describe('App', () => {
+  it('renders properly', async () => {
+    const wrapper = mount(App, { global: { plugins: [router] } });
+
+    await router.isReady();
+
+    expect(wrapper.text()).toContain('Welcome web01 👋');
+  });
+});

apps/web01/src/app/App.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router';
+</script>
+
+<template>
+  <header>
+    <nav>
+      <RouterLink to="/">
+        Home
+      </RouterLink>
+      <RouterLink to="/about">
+        About
+      </RouterLink>
+    </nav>
+  </header>
+  <h1>Web01</h1>
+  <RouterView />
+</template>
+
+<style scoped lang="scss">
+header {
+  line-height: 1.5;
+  max-width: 100vw;
+}
+
+nav > a {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 768px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 768px;
+  }
+
+  nav {
+    text-align: left;
+    font-size: 1rem;
+
+    padding: 1rem 0;
+    margin-top: 1rem;
+  }
+}
+</style>