Merge pull request #36 from appwrite/feat-perf

feat: perf

adapters/vercel-edge/vite.config.ts

@@ -1,16 +1,21 @@
 import { vercelEdgeAdapter } from '@builder.io/qwik-city/adapters/vercel-edge/vite';
 import { extendConfig } from '@builder.io/qwik-city/vite';
 import baseConfig from '../../vite.config';
+import { nodePolyfills as viteNodePolyfills } from 'vite-plugin-node-polyfills'
 
 export default extendConfig(baseConfig, () => {
   return {
     build: {
       ssr: true,
       rollupOptions: {
         input: ['src/entry.vercel-edge.tsx', '@qwik-city-plan'],
+        external: ['util'],
       },
       outDir: '.vercel/output/functions/_qwik-city.func',
     },
-    plugins: [vercelEdgeAdapter()],
+    ssr: {
+      noExternal: true,
+    },
+    plugins: [vercelEdgeAdapter(), viteNodePolyfills()],
   };
 });

package.json

@@ -2,7 +2,7 @@
   "name": "my-qwik-basic-starter",
   "description": "App with Routing built-in (recommended)",
   "engines": {
-    "node": ">=15.0.0"
+    "node": ">=18.0.0"
   },
   "private": true,
   "scripts": {
@@ -22,28 +22,27 @@
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "1.1.4",
-    "@builder.io/qwik-city": "^1.1.4",
-    "@types/eslint": "8.37.0",
-    "@types/js-cookie": "^3.0.3",
-    "@types/marked": "^4.3.1",
-    "@types/node": "^20.2.1",
-    "@typescript-eslint/eslint-plugin": "5.59.6",
-    "@typescript-eslint/parser": "5.59.6",
-    "eslint": "8.40.0",
-    "eslint-plugin-qwik": "1.1.4",
-    "prettier": "2.8.8",
-    "typescript": "5.0.4",
-    "undici": "5.22.1",
-    "vercel": "^29.3.4",
-    "vite": "4.3.8",
-    "vite-tsconfig-paths": "4.2.0"
+    "@builder.io/qwik": "^1.2.15",
+    "@builder.io/qwik-city": "^1.2.15",
+    "@types/eslint": "8.44.6",
+    "@types/js-cookie": "^3.0.5",
+    "@types/marked": "^6.0.0",
+    "@types/node": "^20.8.9",
+    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/parser": "6.9.0",
+    "eslint": "8.52.0",
+    "eslint-plugin-qwik": "1.2.15",
+    "prettier": "3.0.3",
+    "typescript": "5.2.2",
+    "vercel": "^32.5.0",
+    "vite": "4.5.0",
+    "vite-plugin-node-polyfills": "^0.15.0",
+    "vite-tsconfig-paths": "4.2.1"
   },
   "dependencies": {
-    "@appwrite.io/pink": "^0.0.6-rc.11",
+    "@appwrite.io/pink": "^0.0.6-rc.15",
     "appwrite": "npm:meldiron-appwrite@11.0.2",
     "js-cookie": "^3.0.5",
-    "marked": "^5.0.2",
-    "marked-gfm-heading-id": "^3.0.3"
+    "marked": "^9.1.2"
   }
 }

src/components/layout/Project.tsx

@@ -4,6 +4,8 @@ import type { Project } from "~/AppwriteService";
 import { AppwriteService } from "~/AppwriteService";
 import Upvote from "../blocks/Upvote";
 import ProjectTags from "./ProjectTags";
+import ImgProjectPlaceHolder from "../../../public/images/project-placeholder.png";
+import ImgProjectPlaceHolderLight from "../../../public/images/project-placeholder-light.png";
 
 export default component$((props: { project: Project | null }) => {
   const { project } = props;
@@ -26,12 +28,20 @@ export default component$((props: { project: Project | null }) => {
         </div>
       </div>
 
-      <div class="object-og" style="height: 200px;">
-        <img class="c-dark-only" src="/images/project-placeholder.png" alt="" />
+      <div class="object-og">
+        <img
+          class="c-dark-only"
+          height={200}
+          width={355}
+          src={ImgProjectPlaceHolder}
+          alt="No project image"
+        />
         <img
           class="c-light-only"
-          src="/images/project-placeholder-light.png"
-          alt=""
+          height={200}
+          width={355}
+          src={ImgProjectPlaceHolderLight}
+          alt="No project image"
         />
       </div>
     </div>
@@ -64,7 +74,12 @@ export default component$((props: { project: Project | null }) => {
       </div>
 
       <Link class="object-og" href={`/projects/${project.$id}`}>
-        <img src={AppwriteService.getProjectThumbnail(project.imageId)} />
+        <img
+          src={AppwriteService.getProjectThumbnail(project.imageId)}
+          width={1280}
+          height={720}
+          alt=""
+        />
       </Link>
 
       <div

src/components/layout/ProjectFeatured.tsx

@@ -4,7 +4,7 @@ import { AppwriteService, type Project } from "~/AppwriteService";
 import { Link } from "@builder.io/qwik-city";
 import ProjectTags from "./ProjectTags";
 
-export default component$((props: { project: Project }) => {
+export default component$((props: { project: Project; lazy?: boolean }) => {
   const { project } = props;
 
   return (
@@ -17,6 +17,10 @@ export default component$((props: { project: Project }) => {
           >
             <img
               src={AppwriteService.getProjectThumbnail(project.imageId, 1920)}
+              loading={props.lazy ? "lazy" : "eager"}
+              width={1920}
+              height={1080}
+              alt=""
             />
           </Link>
         </div>