├── netlify.toml
├── .npmrc
├── public
    └── favicon.ico
├── src
    ├── constants
    │   ├── builder.ts
    │   └── cache-header.ts
    ├── pages
    │   ├── index.astro
    │   ├── builder-preview.astro
    │   └── [...slug].astro
    ├── markdown
    │   └── readme.md
    └── components
    │   └── Layout.astro
├── .vscode
    ├── extensions.json
    └── launch.json
├── tailwind.config.cjs
├── .gitignore
├── astro.config.mjs
├── package.json
├── tsconfig.json
└── README.md


/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "npm run build"
3 |   publish = "netlify"


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | # Expose Astro dependencies for `pnpm` users
2 | shamefully-hoist=true
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BuilderIO/perf-experiments/main/public/favicon.ico


--------------------------------------------------------------------------------
/src/constants/builder.ts:
--------------------------------------------------------------------------------
1 | export const builderPublicKey = "4e6a0f7516934972acc567b99a73a683";
2 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/src/constants/cache-header.ts:
--------------------------------------------------------------------------------
1 | export const cacheHeaderValue =
2 |   "public, max-age=5, s-maxage=5, stale-if-error=2628000, stale-while-revalidate=2628000";
3 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: ["./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}"],
 3 |   theme: {
 4 |     extend: {},
 5 |   },
 6 |   plugins: [
 7 |     require("@tailwindcss/typography")({
 8 |       className: "builder-text",
 9 |     }),
10 |   ],
11 | };
12 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../components/Layout.astro';
 3 | import { Content as Readme } from '../markdown/readme.md';
 4 | ---
 5 | 
 6 | <Layout title="Perf Experiments | Builder.io">
 7 | 	<main class="p-8 builder-text container mx-auto">
 8 | 		<Readme />
 9 | 	</main>
10 | </Layout>
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | .output/
 4 | netlify/
 5 | 
 6 | # dependencies
 7 | node_modules/
 8 | 
 9 | # logs
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | 
16 | # environment variables
17 | .env
18 | .env.production
19 | 
20 | # macOS-specific files
21 | .DS_Store
22 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "astro/config";
 2 | import netlify from "@astrojs/netlify/functions";
 3 | 
 4 | import tailwind from "@astrojs/tailwind";
 5 | import partytown from "@astrojs/partytown";
 6 | import sitemap from "@astrojs/sitemap";
 7 | 
 8 | // https://astro.build/config
 9 | export default defineConfig({
10 |   adapter: netlify(),
11 |   integrations: [tailwind(), partytown(), sitemap()],
12 | });
13 | 


--------------------------------------------------------------------------------
/src/pages/builder-preview.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../components/Layout.astro';
 3 | import { builderPublicKey } from '../constants/builder'
 4 | 
 5 | ---
 6 | 
 7 | <Layout title="Builder.io Preview page">
 8 |   <builder-component name="page" api-key={builderPublicKey}>
 9 |     <div class="text-center p-10">
10 |       This is a preview page for use in the Builder.io visual editor
11 |     </div>
12 |   </builder-component>
13 |   <script src="https://cdn.builder.io/js/webcomponents" async></script>
14 | </Layout>
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@builder.io/site-perf-experiments",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro build",
 9 |     "preview": "astro preview"
10 |   },
11 |   "devDependencies": {
12 |     "@astrojs/netlify": "^0.3.3",
13 |     "@astrojs/partytown": "^0.1.2",
14 |     "@astrojs/sitemap": "^0.1.0",
15 |     "@astrojs/tailwind": "^0.2.1",
16 |     "@tailwindcss/typography": "^0.5.2",
17 |     "astro": "^1.0.0-beta.20"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     // Enable top-level await, and other modern ESM features.
 4 |     "target": "ESNext",
 5 |     "module": "ESNext",
 6 |     // Enable node-style module resolution, for things like npm package imports.
 7 |     "moduleResolution": "node",
 8 |     // Enable JSON imports.
 9 |     "resolveJsonModule": true,
10 |     // Enable stricter transpilation for better output.
11 |     "isolatedModules": true,
12 |     // Add type definitions for our Vite runtime.
13 |     "types": ["vite/client"]
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/pages/[...slug].astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../components/Layout.astro';
 3 | import { builderPublicKey } from '../constants/builder'
 4 | 
 5 | const url = Astro.request.url;
 6 | 
 7 | const urlPath = new URL(url).pathname;
 8 | const qwikApiUrl = `https://cdn.builder.io/api/v1/qwik/page?userAttributes.urlPath=${encodeURIComponent(urlPath)}&apiKey=${builderPublicKey}`
 9 | 
10 | const builderContent = await fetch(qwikApiUrl)
11 |   .then(res => res.json())
12 |   .catch(err => {
13 |     console.warn(err)
14 |     return null;
15 |   });
16 | 
17 | if (!builderContent?.html) {
18 |   return new Response(null, {
19 |     status: 404,
20 |     statusText: 'Not found'
21 |   });
22 | }
23 | 
24 | ---
25 | <Layout title={builderContent.data?.title || "Builder.io Perf Experiment"}>
26 |   <main set:html={builderContent.html} />
27 | </Layout>
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Perf Experiments
 2 | 
 3 | This is a repo to host pages to run performance tests against them with [PageSpeed Insights](https://pagespeed.web.dev/).
 4 | 
 5 | This also serves as a good example of using Astro + Builder.io via our [Qwik API](https://www.builder.io/c/docs/qwik-api)
 6 | 
 7 | Source code is on [Github here](https://github.com/builderio/perf-experiments)
 8 | 
 9 | ## Setup
10 | 
11 | If you would like to clone this repo as an example of using Builder.io with Astro and our Qwik API, see [this video](https://www.loom.com/share/d8f49865120e417f93a6e62c8b29c8b1) for instructions
12 | 
13 | ## Commands
14 | 
15 | All commands are run from the root of the project, from a terminal:
16 | 
17 | | Command           | Action                                       |
18 | | :---------------- | :------------------------------------------- |
19 | | `npm install`     | Installs dependencies                        |
20 | | `npm run dev`     | Starts local dev server at `localhost:3000`  |
21 | | `npm run build`   | Build your production site to `./dist/`      |
22 | | `npm run preview` | Preview your build locally, before deploying |
23 | 


--------------------------------------------------------------------------------
/src/markdown/readme.md:
--------------------------------------------------------------------------------
 1 | <!-- HACK: this is a copy and paste from the root README for the homepage,
 2 | until I can find why netlify deploys can't handle importing from the top
 3 | level readme.md -->
 4 | 
 5 | # Perf Experiments
 6 | 
 7 | This is a repo to host pages to run performance tests against them with [PageSpeed Insights](https://pagespeed.web.dev/).
 8 | 
 9 | This also serves as a good example of using Astro + Builder.io via our [Qwik API](https://www.builder.io/c/docs/qwik-api)
10 | 
11 | Source code is on [Github here](https://github.com/builderio/perf-experiments)
12 | 
13 | ## Setup
14 | 
15 | If you would like to clone this repo as an example of using Builder.io with Astro and our Qwik API, see [this video](https://www.loom.com/share/d8f49865120e417f93a6e62c8b29c8b1) for instructions
16 | 
17 | ## Commands
18 | 
19 | All commands are run from the root of the project, from a terminal:
20 | 
21 | | Command           | Action                                       |
22 | | :---------------- | :------------------------------------------- |
23 | | `npm install`     | Installs dependencies                        |
24 | | `npm run dev`     | Starts local dev server at `localhost:3000`  |
25 | | `npm run build`   | Build your production site to `./dist/`      |
26 | | `npm run preview` | Preview your build locally, before deploying |
27 | 


--------------------------------------------------------------------------------
/src/components/Layout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { cacheHeaderValue } from '../constants/cache-header';
 3 | export interface Props {
 4 | 	title: string;
 5 | }
 6 | 
 7 | const { title } = Astro.props as Props;
 8 | 
 9 | Astro.response.headers.set('Cache-Control', cacheHeaderValue)
10 | ---
11 | 
12 | <!DOCTYPE html>
13 | <html lang="en">
14 | <head>
15 | 	<meta charset="UTF-8">
16 | 	<meta name="viewport" content="width=device-width">
17 |   <link rel="icon" type="image/x-icon" href="/favicon.ico" />
18 | 	<title>{title}</title>
19 |   <script async src="https://cdn.builder.io/js/qwik/qwikloader.js"></script>
20 | </head>
21 | <body>
22 | 	<slot />
23 | </body>
24 | </html>
25 | 
26 | <style>
27 |   :root {
28 |     --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
29 | 		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); 
30 |     --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
31 | 
32 |     --color-text: hsl(12, 5%, 4%);
33 |     --color-bg: white;
34 |   }
35 | 
36 |   html {
37 |     font-family: system-ui, sans-serif;
38 |     font-size: var(--font-size-base);
39 |     color: var(--color-text);
40 |     background-color: var(--color-bg);
41 |   }
42 | 
43 |   body {
44 |     margin: 0;
45 |   }
46 | 
47 |   :global(h1) {
48 |     font-size: var(--font-size-xl);
49 |   }
50 | 
51 |   :global(h2) {
52 |     font-size: var(--font-size-lg);
53 |   }
54 | 
55 |   :global(code) {
56 |     font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
57 | 			Bitstream Vera Sans Mono, Courier New, monospace;
58 |   }
59 | </style>
60 | 


--------------------------------------------------------------------------------