upgrade package

.eslintrc.cjs

@@ -20,7 +20,7 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ['@typescript-eslint'],
+  plugins: ['@typescript-eslint','prettier'],
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -1,4 +1,4 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
 
-npx pretty-quick --staged
+npx lint-staged

package.json

@@ -26,66 +26,70 @@
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/partytown": "^0.7.0",
-    "@builder.io/qwik": "^0.23.0",
-    "@builder.io/qwik-city": "0.0.128",
-    "@builder.io/qwik-react": "0.2.1",
-    "@types/eslint": "8.21.2",
-    "@types/express": "4.17.15",
-    "@types/lodash": "^4.14.191",
+    "@builder.io/partytown": "^0.8.0",
+    "@builder.io/qwik": "^1.2.6",
+    "@builder.io/qwik-city": "^1.2.6",
+    "@builder.io/qwik-react": "^0.5.0",
+    "@types/eslint": "^8.44.1",
+    "@types/express": "^4.17.17",
+    "@types/lodash": "^4.14.196",
     "@types/node": "latest",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "18.0.5",
-    "@typescript-eslint/eslint-plugin": "5.48.0",
-    "@typescript-eslint/parser": "5.48.0",
-    "autoprefixer": "^10.4.12",
-    "eslint": "8.36.0",
-    "eslint-plugin-qwik": "0.16.2",
+    "@types/react": "^18.2.17",
+    "@types/react-dom": "^18.2.7",
+    "@types/toastify-js": "^1.12.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.45.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-qwik": "^1.2.6",
     "express": "4.18.2",
-    "husky": "^8.0.0",
-    "node-fetch": "3.3.0",
-    "postcss": "^8.4.16",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.3",
+    "node-fetch": "^3.3.2",
+    "postcss": "^8.4.27",
     "postcss-nesting": "^12.0.0",
-    "prettier": "2.8.4",
-    "pretty-quick": "^3.1.3",
-    "qwik-speak": "^0.5.0",
+    "prettier": "^3.0.0",
+    "qwik-speak": "^0.15.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "^3.1.8",
-    "typescript": "4.9.4",
-    "vite": "4.0.4",
-    "vite-plugin-pwa": "^0.14.0",
-    "vite-tsconfig-paths": "4.0.7",
-    "vitest": "^0.28.5",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.7",
+    "vite-plugin-pwa": "^0.16.4",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.33.0",
     "wrangler": "latest"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.7",
-    "@heroicons/react": "^2.0.13",
+    "@headlessui/react": "^1.7.16",
+    "@heroicons/react": "^2.0.18",
     "@picocss/pico": "^1.5.10",
-    "@react-spring/web": "^9.7.1",
-    "@tailwindcss/forms": "^0.5.3",
+    "@react-spring/web": "^9.7.3",
+    "@tailwindcss/forms": "^0.5.4",
     "@tailwindcss/typography": "^0.5.9",
     "@types/animejs": "^3.1.7",
     "@types/d3": "^7.4.0",
-    "@types/toastify-js": "^1.11.1",
-    "@types/youtube-player": "^5.5.6",
-    "@use-gesture/vanilla": "^10.2.24",
+    "@types/youtube-player": "^5.5.7",
+    "@use-gesture/vanilla": "^10.2.27",
     "animejs": "^3.2.1",
     "d3": "^7.8.5",
-    "daisyui": "^2.51.3",
-    "dayjs": "^1.11.7",
-    "firebase": "^9.15.0",
+    "daisyui": "^3.5.0",
+    "dayjs": "^1.11.9",
+    "firebase": "^10.1.0",
     "focus-visible": "^5.2.0",
-    "heroicons": "^2.0.13",
+    "heroicons": "^2.0.18",
     "lodash": "^4.17.21",
     "motion": "^10.16.2",
-    "open-props": "^1.3.10",
-    "postcss-focus-visible": "^7.1.0",
-    "prettier-plugin-tailwindcss": "^0.2.1",
-    "tailwind-merge": "^1.8.1",
+    "open-props": "^1.5.10",
+    "postcss-focus-visible": "^9.0.0",
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "tailwind-merge": "^1.14.0",
     "toastify-js": "^1.12.0",
-    "typed.js": "^2.0.12",
-    "youtube-player": "^5.5.2"
+    "typed.js": "^2.0.16",
+    "youtube-player": "^5.6.0"
+  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix"
   }
 }

src/components/TypedComponent.tsx

@@ -1,7 +1,7 @@
 import {
   Component,
   component$,
-  useBrowserVisibleTask$,
+  useVisibleTask$,
   useSignal,
 } from '@builder.io/qwik'
 import Typed from 'typed.js'
@@ -11,7 +11,7 @@ export const TypedComponent: Component<{
 }> = component$(({ strings = [] }) => {
   const ref = useSignal<HTMLSpanElement>()
 
-  useBrowserVisibleTask$(() => {
+  useVisibleTask$(() => {
     if (!ref.value) return
     const typed = new Typed(ref.value, {
       strings,

src/components/router-head/router-head.tsx

@@ -1,19 +1,21 @@
 import { component$ } from '@builder.io/qwik'
 import { useDocumentHead, useLocation } from '@builder.io/qwik-city'
+import { useTranslate } from 'qwik-speak'
 import { ThemeScript } from '../ThemeToggle/theme-script'
 
 /**
  * The RouterHead component is placed inside of the document `<head>` element.
  */
 export const RouterHead = component$(() => {
   const head = useDocumentHead()
-  const loc = useLocation()
-
+  // const loc = useLocation()
+  const t = useTranslate();
+
   return (
     <>
       <title>{head.title}</title>
 
-      <link rel="canonical" href={loc.href} />
+      {/* <link rel="canonical" href={loc.href} /> */}
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
@@ -30,8 +32,11 @@ export const RouterHead = component$(() => {
       <meta name="twitter:site" content="@QwikDev" />
       <meta name="twitter:title" content="Qwik" />
 
-      {head.meta.map((m) => (
+      {/* {head.meta.map((m) => (
         <meta {...m} />
+      ))} */}
+       {head.meta.map((m) => (
+        <meta key={m.key} name={m.name} content={m.name === 'description' ? t(m.content!) : m.content} />
       ))}
 
       {head.links.map((l) => (

src/entry.ssr.tsx

@@ -10,9 +10,18 @@
  * - npm run build
  *
  */
-import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
+import { RenderOptions, renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
 import { manifest } from '@qwik-client-manifest';
 import Root from './root';
+import { isDev } from '@builder.io/qwik/build';
+
+export function extractBase({ serverData }: RenderOptions): string {
+  if (!isDev && serverData?.locale) {
+    return '/build/' + serverData.locale;
+  } else {
+    return '/build';
+  }
+}
 
 export default function (opts: RenderToStreamOptions) {
   return renderToStream(<Root />, {
@@ -25,5 +34,7 @@ export default function (opts: RenderToStreamOptions) {
         prefetchEvent: 'always',
       },
     },
+    base: extractBase
   });
 }
+

src/root.tsx

@@ -1,41 +1,43 @@
 import {
   $,
   component$,
-  createContext,
-  useClientEffect$,
+  createContextId,
   useContext,
   useContextProvider,
   useOnWindow,
   useStore,
-  useVisibleTask$,
-} from '@builder.io/qwik'
+  useTask$,
+  useVisibleTask$
+} from '@builder.io/qwik';
 import {
   QwikCityProvider,
   RouterOutlet,
   ServiceWorkerRegister,
-} from '@builder.io/qwik-city'
-import { QwikSpeak } from 'qwik-speak'
-import { RouterHead } from './components/router-head/router-head'
-import './global.css'
+} from '@builder.io/qwik-city';
 
+import { RouterHead } from './components/router-head/router-head';
+import './global.css';
+import { config } from './speak-config';
+import { translationFn } from './speak-functions';
+
+import { QwikSpeakProvider } from 'qwik-speak';
 import {
   colorSchemeChangeListener,
   getColorPreference,
   setPreference,
-} from './components/ThemeToggle/ThemeToggle'
-import { GlobalStore, SiteStore } from './context'
-import { config, translationFn } from './speak-config'
+} from './components/ThemeToggle/ThemeToggle';
+import { GlobalStore, SiteStore } from './context';
 
 export interface PageState {
   pageName: string
 }
 
-export const pageContext = createContext<PageState>('page-context')
+export const pageContext = createContextId<PageState>('page-context')
 
 export const usePageContext = (pageName: string) => {
   const page = useContext<PageState>(pageContext)
 
-  useClientEffect$(() => {
+  useTask$(() => {
     page.pageName = pageName
   })
 }
@@ -96,7 +98,7 @@ export default component$(() => {
     //   </body>
     // </QwikCity>
 
-    <QwikSpeak config={config} translationFn={translationFn}>
+    <QwikSpeakProvider  config={config} translationFn={translationFn}>
       <QwikCityProvider>
         <head>
           {/* <QwikPartytown forward={['dataLayer.push']} /> */}
@@ -121,6 +123,6 @@ export default component$(() => {
           <ServiceWorkerRegister />
         </body>
       </QwikCityProvider>
-    </QwikSpeak>
+    </QwikSpeakProvider >
   )
 })

src/routes/index.tsx

@@ -1,14 +1,24 @@
-import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'
-import type { DocumentHead } from '@builder.io/qwik-city'
-import { $translate as t, Speak } from 'qwik-speak'
-import { TypedComponent } from '../components/TypedComponent'
-import { usePageContext } from '../root'
-import MotionOne from '~/integrations/motionOne'
-import { D3 } from '~/integrations/D3'
+import { component$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+import {
+  Speak,
+  useTranslate
+} from 'qwik-speak';
+import { D3 } from '~/integrations/D3';
+import MotionOne from '~/integrations/motionOne';
+import { TypedComponent } from '../components/TypedComponent';
+import { usePageContext } from '../root';
 
 export const Home = component$(() => {
   usePageContext('Home')
 
+  const t = useTranslate();
+
+  const strings = [
+    t('home.typed_1@@I go to school by bus.'),
+    t('home.typed_2@@I go to school on train.'),
+  ]
+
   return (
     <div>
       <h1 class="text-[2em]">
@@ -17,10 +27,7 @@ export const Home = component$(() => {
       </h1>
 
       <TypedComponent
-        strings={[
-          t('home.typed_1@@I go to school by bus.'),
-          t('home.typed_2@@I go to school on train.'),
-        ]}
+        strings={strings}
       />
       <D3 />
 

src/routes/layout.tsx

@@ -57,18 +57,8 @@ export default component$(() => {
   )
 })
 
-export const onRequest: RequestHandler = ({ request, response }) => {
-  const acceptLanguage = request.headers?.get('accept-language')
 
-  let lang: string | null = null
-  // Try to use user language
-  if (acceptLanguage) {
-    lang = acceptLanguage.split(';')[0]?.split(',')[0]
-  }
 
-  // Set locale in response
-  response.locale = lang || config.defaultLocale.lang
-}
 
 export const Header = component$(() => {
   return (

src/routes/plugin.ts

@@ -0,0 +1,28 @@
+import { RequestHandler } from '@builder.io/qwik-city';
+import { config } from '../speak-config';
+
+export const onRequest: RequestHandler = ({ request, locale }) => {
+  const cookie = request.headers?.get('cookie');
+  const acceptLanguage = request.headers?.get('accept-language');
+
+  let lang: string | null = null;
+  // Try whether the language is stored in a cookie
+  if (cookie) {
+    const result = new RegExp('(?:^|; )' + encodeURIComponent('locale') + '=([^;]*)').exec(cookie);
+    if (result) {
+      lang = JSON.parse(result[1])['lang'];
+    }
+  }
+  // Try to use user language
+  if (!lang) {
+    if (acceptLanguage) {
+      lang = acceptLanguage.split(';')[0]?.split(',')[0];
+    }
+  }
+
+  // Check supported locales
+  lang = config.supportedLocales.find(value => value.lang === lang)?.lang || config.defaultLocale.lang;
+
+  // Set Qwik locale
+  locale(lang);
+};