Update dependencies and code to fix issue #15

Author: prototypa

.eslintignore

@@ -31,3 +31,8 @@ tsconfig.tsbuildinfo
 vite.config.ts
 *.spec.tsx
 *.spec.ts
+.netlify
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+server

.eslintrc.cjs

@@ -36,5 +36,7 @@ module.exports = {
     "no-case-declarations": "off",
     "no-console": "off",
     "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/consistent-type-imports": "warn",
+    "@typescript-eslint/no-unnecessary-condition": "warn",
   },
 };

.prettierignore

@@ -1,6 +1,38 @@
-# Files Prettier should not format
 **/*.log
 **/.DS_Store
 *.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
 dist
+dist-dev
+lib
+lib-types
+etc
+external
 node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts
+*.spec.tsx
+*.spec.ts
+.netlify
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+server

adapters/static/vite.config.ts

@@ -1,6 +1,6 @@
-import { staticAdapter } from '@builder.io/qwik-city/adapters/static/vite';
-import { extendConfig } from '@builder.io/qwik-city/vite';
-import baseConfig from '../../vite.config';
+import { staticAdapter } from "@builder.io/qwik-city/adapters/static/vite";
+import { extendConfig } from "@builder.io/qwik-city/vite";
+import baseConfig from "../../vite.config";
 
 import { SITE } from "../../src/config.mjs";
 
@@ -9,7 +9,7 @@ export default extendConfig(baseConfig, () => {
     build: {
       ssr: true,
       rollupOptions: {
-        input: ['@qwik-city-plan'],
+        input: ["@qwik-city-plan"],
       },
     },
     plugins: [

package.json

@@ -9,7 +9,7 @@
     "build.preview": "vite build --ssr src/entry.preview.tsx",
     "build.server": "vite build -c adapters/static/vite.config.ts",
     "build.types": "tsc --incremental --noEmit",
-    "deploy": "echo 'Run \"npm run qwik add\" to install a server adaptor'",
+    "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
     "dev": "vite --mode ssr",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
@@ -20,10 +20,10 @@
     "qwik": "qwik"
   },
   "dependencies": {
-    "@builder.io/qwik": "1.2.3",
-    "@builder.io/qwik-city": "1.2.3",
-    "@fontsource-variable/inter": "^5.0.3",
-    "@unpic/qwik": "^0.0.20",
+    "@builder.io/qwik": "1.2.6",
+    "@builder.io/qwik-city": "1.2.6",
+    "@fontsource-variable/inter": "^5.0.4",
+    "@unpic/qwik": "^0.0.23",
     "gray-matter": "^4.0.3",
     "markdown-it": "^13.0.1",
     "node-fetch": "3.3.1"
@@ -34,16 +34,16 @@
     "@types/eslint": "8.40.2",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "5.60.1",
+    "@typescript-eslint/eslint-plugin": "5.61.0",
+    "@typescript-eslint/parser": "5.61.0",
     "autoprefixer": "10.4.14",
     "eslint": "8.44.0",
-    "eslint-plugin-qwik": "1.2.3",
-    "postcss": "^8.4.24",
-    "prettier": "2.8.8",
+    "eslint-plugin-qwik": "1.2.6",
+    "postcss": "^8.4.25",
+    "prettier": "3.0.0",
     "tailwindcss": "^3.3.2",
     "typescript": "5.1.6",
-    "vite": "4.3.9",
+    "vite": "4.4.1",
     "vite-tsconfig-paths": "4.2.0"
   },
   "engines": {

src/entry.dev.tsx

@@ -9,7 +9,7 @@
  * - More code is transferred to the browser than in SSR mode.
  * - Optimizer/Serialization/Deserialization code is not exercised!
  */
-import { render, RenderOptions } from "@builder.io/qwik";
+import { render, type RenderOptions } from "@builder.io/qwik";
 import Root from "./root";
 
 export default function (opts: RenderOptions) {

src/entry.preview.tsx

@@ -11,10 +11,10 @@
  *
  */
 import { createQwikCity } from "@builder.io/qwik-city/middleware/node";
-import render from "./entry.ssr";
 import qwikCityPlan from "@qwik-city-plan";
+import render from "./entry.ssr";
 
 /**
- * The default export is the QwikCity adaptor used by Vite preview.
+ * The default export is the QwikCity adapter used by Vite preview.
  */
 export default createQwikCity({ render, qwikCityPlan });

src/entry.ssr.tsx

@@ -1,7 +1,7 @@
 /**
  * WHAT IS THIS FILE?
  *
- * SSR entry point, in all cases the application is render outside the browser, this
+ * SSR entry point, in all cases the application is rendered outside the browser, this
  * entry point will be the common one.
  *
  * - Server (express, cloudflare...)
@@ -10,7 +10,10 @@
  * - npm run build
  *
  */
-import { renderToStream, RenderToStreamOptions } from "@builder.io/qwik/server";
+import {
+  renderToStream,
+  type RenderToStreamOptions,
+} from "@builder.io/qwik/server";
 import { manifest } from "@qwik-client-manifest";
 import Root from "./root";
 
@@ -26,4 +29,4 @@ export default function (opts: RenderToStreamOptions) {
       ...opts.containerAttributes,
     },
   });
-}
+}

src/root.tsx

@@ -33,10 +33,10 @@ export default component$(() => {
         /> */}
         <RouterHead />
         <DarkThemeLauncher />
+        <ServiceWorkerRegister />
       </head>
       <body class="text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-gray-900 antialiased">
         <RouterOutlet />
-        <ServiceWorkerRegister />
       </body>
     </QwikCityProvider>
   );

src/routes/blog/[slug]/index.tsx

@@ -1,4 +1,4 @@
-import { component$, Resource } from "@builder.io/qwik";
+import { component$ } from "@builder.io/qwik";
 import { routeLoader$ } from "@builder.io/qwik-city";
 
 import type { DocumentHead, StaticGenerateHandler } from "@builder.io/qwik-city";
@@ -8,68 +8,63 @@ import md from "markdown-it";
 
 import { fetchPosts, findPostBySlug } from "~/utils/posts";
 
-export const useGetPostBySlug = routeLoader$(async ({ params, status }): Promise<Post> => {
+export const useGetPostBySlug = routeLoader$(async ({ params, status }) => {
   const post = await findPostBySlug(params.slug);
 
   if (!post) {
-    status(404);
+    return status(404);
   }
 
   return post as Post;
 });
 
 export default component$(() => {
-  const data = useGetPostBySlug();
+  const signal = useGetPostBySlug();
+
+  const post = signal.value as Post;
 
   return (
-    <Resource
-      value={data}
-      onPending={() => <div>Loading...</div>}
-      onRejected={() => <div>Error</div>}
-      onResolved={(post: Post) => (
-        <section class="mx-auto py-8 sm:py-16 lg:py-20">
-          <article>
-            <header class={post?.image ? "text-center" : ""}>
-              <p class="mx-auto max-w-3xl px-4 sm:px-6">
-                <time dateTime={String(post.publishDate.getTime())}>
-                  {post.publishDate.toLocaleDateString("en-us", {
-                    year: "numeric",
-                    month: "short",
-                    day: "numeric",
-                    timeZone: "UTC",
-                  })}
-                </time>
-                {/* ~{" "} {Math.ceil(post.readingTime)} min read */}
-              </p>
-              <h1 class="leading-tighter font-heading mx-auto mb-8 max-w-3xl px-4 text-4xl font-bold tracking-tighter sm:px-6 md:text-5xl">
-                {post.title}
-              </h1>
-              {post.image ? (
-                <img
-                  src={post.image}
-                  class="mx-auto mt-4 mb-6 max-w-full bg-gray-400 dark:bg-slate-700 sm:rounded-md lg:max-w-6xl"
-                  sizes="(max-width: 900px) 400px, 900px"
-                  alt={post.excerpt}
-                  loading="eager"
-                  width={900}
-                  height={480}
-                />
-              ) : (
-                <div class="mx-auto max-w-3xl px-4 sm:px-6">
-                  <div class="border-t dark:border-slate-700" />
-                </div>
-              )}
-            </header>
-            <div
-              class="prose-md prose-headings:font-heading prose-headings:leading-tighter container prose prose-lg mx-auto mt-8 max-w-3xl px-6 prose-headings:font-bold prose-headings:tracking-tighter prose-a:text-primary-600 prose-img:rounded-md prose-img:shadow-lg dark:prose-invert dark:prose-headings:text-slate-300 dark:prose-a:text-primary-400 sm:px-6 lg:prose-xl"
-              dangerouslySetInnerHTML={md({
-                html: true,
-              }).render(post.content)}
+    <section class="mx-auto py-8 sm:py-16 lg:py-20">
+      <article>
+        <header class={post?.image ? "text-center" : ""}>
+          <p class="mx-auto max-w-3xl px-4 sm:px-6">
+            <time dateTime={String(post.publishDate.getTime())}>
+              {post.publishDate.toLocaleDateString("en-us", {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+                timeZone: "UTC",
+              })}
+            </time>
+            {/* ~{" "} {Math.ceil(post.readingTime)} min read */}
+          </p>
+          <h1 class="leading-tighter font-heading mx-auto mb-8 max-w-3xl px-4 text-4xl font-bold tracking-tighter sm:px-6 md:text-5xl">
+            {post.title}
+          </h1>
+          {post.image ? (
+            <img
+              src={post.image}
+              class="mx-auto mt-4 mb-6 max-w-full bg-gray-400 dark:bg-slate-700 sm:rounded-md lg:max-w-6xl"
+              sizes="(max-width: 900px) 400px, 900px"
+              alt={post.excerpt}
+              loading="eager"
+              width={900}
+              height={480}
             />
-          </article>
-        </section>
-      )}
-    />
+          ) : (
+            <div class="mx-auto max-w-3xl px-4 sm:px-6">
+              <div class="border-t dark:border-slate-700" />
+            </div>
+          )}
+        </header>
+        <div
+          class="prose-md prose-headings:font-heading prose-headings:leading-tighter container prose prose-lg mx-auto mt-8 max-w-3xl px-6 prose-headings:font-bold prose-headings:tracking-tighter prose-a:text-primary-600 prose-img:rounded-md prose-img:shadow-lg dark:prose-invert dark:prose-headings:text-slate-300 dark:prose-a:text-primary-400 sm:px-6 lg:prose-xl"
+          dangerouslySetInnerHTML={md({
+            html: true,
+          }).render(post.content)}
+        />
+      </article>
+    </section>
   );
 });
 
@@ -82,7 +77,7 @@ export const onStaticGenerate: StaticGenerateHandler = async () => {
 };
 
 export const head: DocumentHead = ({ resolveValue }) => {
-  const post = resolveValue(useGetPostBySlug);
+  const post = resolveValue(useGetPostBySlug) as Post;
 
   return {
     title: `${post.title} — Qwind`,