🎢

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,18 @@
+[
+  { "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://rosa.be", "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,124 @@
+const fs = require('fs');
+const puppeteer = require('puppeteer');
+const pages = require('./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('src/routes/showcase/pages.json', 'utf8');
+      existingJson = JSON.parse(data);
+      console.log('Found existing pages.json', existingJson);
+    } catch (e) {}
+
+    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('src/routes/showcase/pages.json', JSON.stringify(output));
+}
+
+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/routes/showcase/index.tsx

@@ -0,0 +1,123 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+import styles from './styles.css?inline';
+import pages from './pages.json';
+
+export interface MediaEntry {
+  title: string;
+  href: string;
+  imgSrc: string;
+  size: 'small' | 'large';
+  perf: {
+    score: number;
+    fcpDisplay: string;
+    fcpScore: number;
+    lcpDisplay: string;
+    lcpScore: number;
+    ttiDisplay: string;
+    ttiScore: number;
+    ttiTime: number;
+  };
+}
+
+export const SiteLink = component$((props: { entry: MediaEntry }) => {
+  return (
+    <li class={props.entry.size}>
+      <Score speedScore={props.entry.perf.score} url={props.entry.href}></Score>
+      <a href={props.entry.href} target="_blank" rel="noreferrer">
+        <img width="1440" height="980" loading="lazy" src={props.entry.imgSrc} aria-hidden="true" />
+        <div class="backdrop">
+          <div class="metrics">
+            <div
+              style={{
+                '--color': getLighthouseColorForScore(props.entry.perf.ttiScore),
+              }}
+            >
+              <h3>TTF</h3>
+              <p>{props.entry.perf.ttiDisplay}</p>
+            </div>
+            <div
+              style={{
+                '--color': getLighthouseColorForScore(props.entry.perf.fcpScore),
+              }}
+            >
+              <h3>FCP</h3>
+              <p>{props.entry.perf.fcpDisplay}</p>
+            </div>
+            <div
+              style={{
+                '--color': getLighthouseColorForScore(props.entry.perf.lcpScore),
+              }}
+            >
+              <h3>LCP</h3>
+              <p>{props.entry.perf.lcpDisplay}</p>
+            </div>
+          </div>
+          <p class="title">{props.entry.title}</p>
+        </div>
+      </a>
+    </li>
+  );
+});
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <article class="showcase">
+      <h1>Showcase</h1>
+
+      <ul class="grid">
+        {pages.map((entry) => (
+          <SiteLink entry={entry as any} />
+        ))}
+      </ul>
+    </article>
+  );
+});
+
+export const Score = ({ speedScore, url }: { speedScore: number; url: string }) => {
+  return (
+    <a
+      class="score"
+      style={{
+        '--color': getLighthouseColorForScore(speedScore),
+      }}
+      target="_blank"
+      rel="noreferrer"
+      href={getPagespeedInsightsUrl(url)}
+    >
+      <div class="score-inner">
+        <svg viewBox="0 0 120 120">
+          <circle class="circle-1" r="56" cx="60" cy="60" stroke-width="8"></circle>
+          <circle
+            r="56"
+            cx="60"
+            cy="60"
+            stroke-width="8"
+            class="circle-2"
+            style={{
+              transform: `rotate(-87.9537deg)`,
+              strokeDasharray: `${(speedScore * 350).toFixed(2)} 1000`,
+            }}
+          ></circle>
+        </svg>
+        <div class="score-text">{Math.round(speedScore * 100)}</div>
+      </div>
+    </a>
+  );
+};
+
+const lighthouseRed = '#f33';
+const lighthouseOrange = '#ffaa32';
+const lighthouseGreen = '#0c6';
+
+export function getLighthouseColorForScore(score: number) {
+  return score < 0.5 ? lighthouseRed : score < 0.9 ? lighthouseOrange : lighthouseGreen;
+}
+
+export function getPagespeedInsightsUrl(url: string) {
+  return `https://pagespeed.web.dev/report?url=${encodeURIComponent(url)}`;
+}
+export const head: DocumentHead = {
+  title: 'Qwik Presentations, Talks, Videos and Podcasts',
+};