fix(website): fixed build and deployment for website and docs (#2172)

Author: lexasq

apps/docs-ui/src/app/js/vendor/highlight.bundle.js

@@ -1,7 +1,7 @@
 (function () {
   'use strict';
 
-  const hljs = require('highlight.js/lib/highlight');
+  const hljs = require('highlight.js/lib');
   hljs.registerLanguage(
     'asciidoc',
     require('highlight.js/lib/languages/asciidoc'),

apps/website/adapters/netlify-edge/vite.config.ts

@@ -1,7 +1,7 @@
 import { netlifyEdgeAdapter } from '@builder.io/qwik-city/adapters/netlify-edge/vite';
 import { extendConfig } from '@builder.io/qwik-city/vite';
 import { qwikVite } from '@builder.io/qwik/optimizer';
-import { UserConfig, Plugin } from 'vite';
+import { UserConfig, Plugin, UserConfigExport } from 'vite';
 import { join } from 'path';
 import baseConfig from '../../vite.config';
 
@@ -12,7 +12,7 @@ const modified: UserConfig = {
     (p) => (p as Plugin)?.name !== 'vite-plugin-qwik',
   ),
 };
-export default extendConfig(modified, () => {
+export default extendConfig(modified as UserConfigExport, () => {
   const outDir = 'dist/apps/website/.netlify/edge-functions/entry.netlify-edge';
   return {
     build: {

apps/website/project.json

@@ -9,7 +9,7 @@
       "executor": "qwik-nx:build",
       "options": {
         "runSequence": ["website:build.client", "website:build.ssr"],
-        "outputPath": "apps/website/dist",
+        "outputPath": "dist/apps/website",
         "skipTypeCheck": false
       },
       "configurations": {
@@ -20,15 +20,15 @@
     "build.client": {
       "executor": "@nrwl/vite:build",
       "options": {
-        "outputPath": "apps/website/dist",
+        "outputPath": "dist/apps/website",
         "configFile": "apps/website/vite.config.ts"
       }
     },
     "build.ssr": {
       "executor": "@nrwl/vite:build",
       "defaultConfiguration": "preview",
       "options": {
-        "outputPath": "apps/website/dist"
+        "outputPath": "dist/apps/website"
       },
       "configurations": {
         "preview": {

apps/website/src/components/navbar/navbar.tsx

@@ -290,8 +290,8 @@ export default component$((props: NavbarProps) => {
                 class="border-blue-gray-900 w-1/2 px-4 py-1.5 pr-8 bg-mf-gray hover:bg-white focus:bg-mf-gray text-lg focus:border-ui-blue"
                 name="language"
                 id="language"
-                onChange$={async (event, el) => {
-                  await changeLocale$(event.target.value as any);
+                onChange$={async (event: any, el) => {
+                  await changeLocale$(event.target?.value as any);
                 }}
               >
                 {locales.map((locale) => {

apps/website/src/root.tsx

@@ -9,7 +9,8 @@ import { QwikSpeakProvider } from 'qwik-speak';
 import { RouterHead } from './components/router-head/router-head';
 
 import globalStyles from './global.css?inline';
-import { config, translationFn } from './speak-config';
+import { config } from './speak-config';
+import { translationFn } from './speak-functions';
 
 export default component$(() => {
   /**

apps/website/src/speak-config.ts

@@ -1,12 +1,4 @@
-import { server$ } from '@builder.io/qwik-city';
-import {
-  LoadTranslationFn,
-  SpeakConfig,
-  TranslationFn,
-  SpeakLocale,
-  SpeakState,
-} from 'qwik-speak';
-
+import { SpeakConfig, SpeakLocale, SpeakState } from 'qwik-speak';
 export const LOCALES: Record<string, SpeakLocale> = {
   'en-US': { lang: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles' },
   'pt-BR': { lang: 'pt-BR', currency: 'BRL', timeZone: 'America/Sao_Paulo' },
@@ -35,20 +27,6 @@ export const config: SpeakConfig = {
   ],
 };
 
-const translationData = import.meta.glob('/src/i18n/**/*.json', {
-  as: 'raw',
-  eager: true,
-});
-
-const loadTranslation$: LoadTranslationFn = server$(
-  (lang: string, asset: string) =>
-    JSON.parse(translationData[`/src/i18n/${lang}/${asset}.json`]),
-);
-
-export const translationFn: TranslationFn = {
-  loadTranslation$: loadTranslation$,
-};
-
 export const localizedUrl = (url: string, speakState: SpeakState) => {
   const starturl = url.startsWith('/') ? url : `/${url}`;
   const endurl = starturl.endsWith('/') ? starturl : `${starturl}/`;

apps/website/src/speak-functions.ts

@@ -0,0 +1,16 @@
+import { LoadTranslationFn, TranslationFn } from 'qwik-speak';
+import { server$ } from '@builder.io/qwik-city';
+
+const translationData = import.meta.glob('/src/i18n/**/*.json', {
+  as: 'raw',
+  eager: true,
+});
+
+const loadTranslation$: LoadTranslationFn = server$(
+  (lang: string, asset: string) =>
+    JSON.parse(translationData[`/src/i18n/${lang}/${asset}.json`]),
+) as LoadTranslationFn;
+
+export const translationFn: TranslationFn = {
+  loadTranslation$: loadTranslation$,
+};

apps/website/vite.config.ts

@@ -44,12 +44,12 @@ export default defineConfig({
       'Cache-Control': 'public, max-age=600',
     },
   },
-  test: {
-    globals: true,
-    cache: {
-      dir: '../../node_modules/.vitest',
-    },
-    environment: 'node',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-  },
+  // test: {
+  //   globals: true,
+  //   cache: {
+  //     dir: '../../node_modules/.vitest',
+  //   },
+  //   environment: 'node',
+  //   include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  // },
 });

netlify.toml

@@ -1,2 +1,2 @@
 [build]
-publish = "apps/website/client/dist"
+publish = "dist/apps/website/client"

package.json

@@ -57,6 +57,7 @@
     "react-dom": "18.2.0",
     "react-router-dom": "6.22.0",
     "regenerator-runtime": "0.14.1",
+    "sharp": "^0.33.2",
     "tapable": "2.2.1",
     "tsup": "7.2.0",
     "typedoc": "0.25.8",
@@ -199,7 +200,7 @@
     "prettier": "3.0.3",
     "prettier-eslint": "16.2.0",
     "qwik-nx": "1.1.1",
-    "qwik-speak": "0.19.0",
+    "qwik-speak": "0.12.2",
     "react-refresh": "0.14.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-copy": "3.5.0",
@@ -215,7 +216,7 @@
     "url-loader": "4.1.1",
     "verdaccio": "5.29.0",
     "vinyl-fs": "4.0.0",
-    "vite": "4.4.11",
+    "vite": "5.0.10",
     "vite-tsconfig-paths": "4.2.3",
     "vitest": "1.2.2",
     "vitest-fetch-mock": "^0.2.2",