docs: add showcase (#2150)

packages/docs/package.json

@@ -15,6 +15,7 @@
     "fmt.check": "prettier --check .",
     "preview": "qwik build preview && vite preview --open",
     "serve": "wrangler pages dev ./dist",
+    "build.screenshots": "pnpm node scripts/showcase.js",
     "start": "pnpm dev"
   },
   "devDependencies": {
@@ -26,6 +27,7 @@
     "@builder.io/qwik-city": "0.0.122",
     "@builder.io/sdk-qwik": "0.0.34",
     "@docsearch/css": "3.3.0",
+    "@types/prismjs": "^1.26.0",
     "algoliasearch": "4.14.2",
     "autoprefixer": "10.4.13",
     "fflate": "0.7.4",
@@ -34,6 +36,7 @@
     "postcss": "8.4.19",
     "prism-themes": "1.9.0",
     "prismjs": "1.29.0",
+    "puppeteer": "^19.2.2",
     "tailwindcss": "3.2.4",
     "tsm": "2.2.2",
     "typescript": "4.8.4",

packages/docs/scripts/pages.json

@@ -0,0 +1,17 @@
+[
+  { "url": "https://www.builder.io/", "size": "small" },
+  { "url": "https://cursos.codigoencasa.com/node", "size": "small" },
+  { "url": "https://qwik-storefront.vendure.io/", "size": "small" },
+  { "url": "https://www.imgmodels.com/", "size": "large" },
+  { "url": "https://soundy.cloud/", "size": "small" },
+  { "url": "https://usaibis.com/", "size": "small" },
+  { "url": "https://pasha-app.com/", "size": "small" },
+  { "url": "https://pricing.oasisdigital.com/", "size": "small" },
+  { "url": "https://pulsestax.com/", "size": "small" },
+  { "url": "https://qwik-city-movies-wm.netlify.app/", "size": "large" },
+  { "url": "https://goshi.dev/", "size": "small" },
+  { "url": "https://jbnado.dev/", "size": "small" },
+  { "url": "https://reduced.to", "size": "small" },
+  { "url": "https://sanyamjainqwik.vercel.app/", "size": "small" },
+  { "url": "https://qwik.builder.io", "size": "small" }
+]

packages/docs/scripts/showcase.js

@@ -0,0 +1,128 @@
+/* eslint-disable no-console */
+
+const fs = require('fs');
+const puppeteer = require('puppeteer');
+const pages = require('./pages.json');
+
+const OUTPUT_JSON = 'src/routes/showcase/generated-pages.json';
+async function captureMultipleScreenshots() {
+  if (!fs.existsSync('public/showcases')) {
+    fs.mkdirSync('public/showcases');
+  }
+
+  let browser = null;
+  const output = [];
+  try {
+    // launch headless Chromium browser
+    browser = await puppeteer.launch({
+      headless: true,
+    });
+    // create new page object
+    const page = await browser.newPage();
+
+    // set viewport width and height
+    await page.setViewport({
+      width: 1440,
+      height: 980,
+    });
+
+    let existingJson = [];
+    try {
+      const data = fs.readFileSync(OUTPUT_JSON, 'utf8');
+      existingJson = JSON.parse(data);
+    } catch (e) {
+      // ignore
+    }
+
+    for (const { url, size } of pages) {
+      const existing = existingJson.find((item) => item.href === url);
+      if (existing) {
+        console.log('Skipping page', url);
+
+        output.push({
+          ...existing,
+          size,
+        });
+        continue;
+      }
+      console.log('Opening page', url);
+      await page.goto(url);
+      const title = await page.title();
+      const filename = url
+        .replace('https://', '')
+        .replace('/', '_')
+        .replace('.', '_')
+        .replace('.', '_')
+        .toLowerCase();
+
+      const path = `public/showcases/${filename}.webp`;
+      const [pagespeedOutput, _] = await Promise.all([
+        getPagespeedData(url),
+        page.screenshot({
+          path: path,
+          type: 'webp',
+          quality: 50,
+        }),
+      ]);
+      const fcpDisplay =
+        pagespeedOutput.lighthouseResult?.audits?.['first-contentful-paint']?.displayValue;
+      const fcpScore = pagespeedOutput?.lighthouseResult?.audits?.['first-contentful-paint']?.score;
+
+      const lcpDisplay =
+        pagespeedOutput?.lighthouseResult?.audits?.['largest-contentful-paint']?.displayValue;
+      const lcpScore =
+        pagespeedOutput?.lighthouseResult?.audits?.['largest-contentful-paint']?.score;
+
+      const ttiDisplay = pagespeedOutput?.lighthouseResult?.audits?.interactive?.displayValue;
+      const ttiScore = pagespeedOutput?.lighthouseResult?.audits?.interactive?.score;
+
+      const ttiTime = pagespeedOutput?.lighthouseResult?.audits?.interactive?.numericValue;
+
+      const score = pagespeedOutput?.lighthouseResult?.categories?.performance?.score;
+      const perf = {
+        score,
+        fcpDisplay,
+        fcpScore,
+        lcpDisplay,
+        lcpScore,
+        ttiDisplay,
+        ttiScore,
+        ttiTime,
+      };
+      output.push({
+        title,
+        href: url,
+        imgSrc: `/showcases/${filename}.webp`,
+        perf,
+        size,
+      });
+      console.log(`✅ ${title} - (${url})`);
+    }
+  } catch (err) {
+    console.log(`❌ Error: ${err.message}`);
+  } finally {
+    if (browser) {
+      await browser.close();
+    }
+    console.log(`\n🎉 ${pages.length} screenshots captured.`);
+  }
+  fs.writeFileSync(OUTPUT_JSON, JSON.stringify(output, undefined, 2));
+}
+
+async function getPagespeedData(url) {
+  const { default: fetch } = await import('node-fetch');
+  const requestURL = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(
+    url
+  )}&key=AIzaSyApBC9gblaCzWrtEBgHnZkd_B37OF49BfM&category=PERFORMANCE&strategy=MOBILE`;
+  return await fetch(requestURL, {
+    headers: {
+      referer: 'https://www.builder.io/',
+    },
+  }).then(async (res) => {
+    if (!res.ok) {
+      throw new Error(await res.text());
+    }
+    return res.json();
+  });
+}
+captureMultipleScreenshots();

packages/docs/src/components/docsearch/doc-search.tsx

@@ -40,7 +40,7 @@ export interface DocSearchProps {
 }
 
 export function isEditingContent(event: QwikKeyboardEvent<HTMLElement>): boolean {
-  const { isContentEditable, tagName } = event.target;
+  const { isContentEditable, tagName } = event.target as HTMLElement;
 
   return isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA';
 }

packages/docs/src/components/header/header.tsx

@@ -51,6 +51,11 @@ export const Header = component$(() => {
               <span>Qwik City</span>
             </a>
           </li>
+          <li>
+            <a href="/showcase/" class={{ active: pathname.startsWith('/showcase') }}>
+              <span>Showcase</span>
+            </a>
+          </li>
           <li>
             <a href="/media/" class={{ active: pathname.startsWith('/media') }}>
               <span>Media</span>

packages/docs/src/routes/media/media.css

@@ -51,14 +51,14 @@
   box-shadow: var(--qwik-dark-blue) 2px 2px 2px 0px;
 }
 
-.edit-page {
+.media .edit-page {
   font-weight: 400;
   display: inline-block;
   padding: 12px 0;
   color: var(--qwik-dark-blue);
 }
 
-.edit-page:hover {
+.media .edit-page:hover {
   text-decoration: underline;
 }