├── public ├── robots.txt ├── fonts │ ├── poppins-400.woff2 │ ├── poppins-500.woff2 │ └── poppins-700.woff2 ├── manifest.json └── favicon.svg ├── postcss.config.js ├── .vscode └── extensions.json ├── tailwind.config.js ├── vercel.json ├── src ├── components │ ├── starter │ │ ├── counter │ │ │ ├── counter.module.css │ │ │ └── counter.tsx │ │ ├── infobox │ │ │ ├── infobox.tsx │ │ │ └── infobox.module.css │ │ ├── footer │ │ │ ├── footer.module.css │ │ │ └── footer.tsx │ │ ├── gauge │ │ │ ├── gauge.module.css │ │ │ └── index.tsx │ │ ├── hero │ │ │ ├── hero.module.css │ │ │ └── hero.tsx │ │ ├── header │ │ │ ├── header.module.css │ │ │ └── header.tsx │ │ ├── next-steps │ │ │ ├── next-steps.module.css │ │ │ └── next-steps.tsx │ │ ├── tailwind │ │ │ └── tailwind-example.tsx │ │ └── icons │ │ │ └── qwik.tsx │ └── router-head │ │ └── router-head.tsx ├── entry.vercel-edge.tsx ├── entry.dev.tsx ├── routes │ ├── layout.tsx │ ├── service-worker.ts │ ├── demo │ │ ├── todolist │ │ │ ├── todolist.module.css │ │ │ └── index.tsx │ │ └── flower │ │ │ ├── flower.css │ │ │ └── index.tsx │ ├── index.tsx │ └── styles.css ├── entry.preview.tsx ├── entry.ssr.tsx ├── root.tsx └── global.css ├── vite.config.ts ├── .eslintignore ├── .gitignore ├── .prettierignore ├── adapters └── vercel-edge │ └── vite.config.ts ├── adaptors └── vercel-edge │ └── vite.config.ts ├── tsconfig.json ├── .eslintrc.cjs ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/fonts/poppins-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/qwik-tw-vercel-starter-kit/main/public/fonts/poppins-400.woff2 -------------------------------------------------------------------------------- /public/fonts/poppins-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/qwik-tw-vercel-starter-kit/main/public/fonts/poppins-500.woff2 -------------------------------------------------------------------------------- /public/fonts/poppins-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/qwik-tw-vercel-starter-kit/main/public/fonts/poppins-700.woff2 -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["dbaeumer.vscode-eslint", "unifiedjs.vscode-mdx"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "headers": [ 3 | { 4 | "source": "/build/(.*)", 5 | "headers": [ 6 | { 7 | "key": "Cache-Control", 8 | "value": "public, max-age=31536000, s-maxage=31536000, immutable" 9 | } 10 | ] 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /src/components/starter/counter/counter.module.css: -------------------------------------------------------------------------------- 1 | .counter-wrapper { 2 | margin-top: 50px; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | gap: 10px; 7 | } 8 | 9 | @media screen and (min-width: 768px) { 10 | .counter-wrapper { 11 | gap: 30px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/web-manifest-combined.json", 3 | "name": "qwik-project-name", 4 | "short_name": "Welcome to Qwik", 5 | "start_url": ".", 6 | "display": "standalone", 7 | "background_color": "#fff", 8 | "description": "A Qwik project app." 9 | } 10 | -------------------------------------------------------------------------------- /src/components/starter/infobox/infobox.tsx: -------------------------------------------------------------------------------- 1 | import { Slot, component$ } from '@builder.io/qwik'; 2 | import styles from './infobox.module.css'; 3 | 4 | export default component$(() => { 5 | return ( 6 |
7 |

8 | 9 |

10 | 11 |
12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /src/entry.vercel-edge.tsx: -------------------------------------------------------------------------------- 1 | import { createQwikCity, type PlatformVercel } from '@builder.io/qwik-city/middleware/vercel-edge'; 2 | import qwikCityPlan from '@qwik-city-plan'; 3 | import { manifest } from '@qwik-client-manifest'; 4 | import render from './entry.ssr'; 5 | 6 | declare global { 7 | interface QwikCityPlatform extends PlatformVercel {} 8 | } 9 | 10 | export default createQwikCity({ render, qwikCityPlan, manifest }); 11 | -------------------------------------------------------------------------------- /src/components/starter/infobox/infobox.module.css: -------------------------------------------------------------------------------- 1 | .infobox { 2 | color: white; 3 | font-size: 0.8rem; 4 | line-height: 2; 5 | margin: 0 0 40px; 6 | } 7 | 8 | .infobox h3 { 9 | font-size: 1rem; 10 | font-weight: 400; 11 | margin: 0 0 15px; 12 | padding: 0; 13 | } 14 | 15 | .infobox li { 16 | line-height: 2.5; 17 | } 18 | 19 | @media screen and (min-width: 600px) { 20 | .infobox { 21 | margin: 0; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { qwikVite } from '@builder.io/qwik/optimizer'; 3 | import { qwikCity } from '@builder.io/qwik-city/vite'; 4 | import tsconfigPaths from 'vite-tsconfig-paths'; 5 | 6 | export default defineConfig(() => { 7 | return { 8 | plugins: [qwikCity(), qwikVite(), tsconfigPaths()], 9 | preview: { 10 | headers: { 11 | 'Cache-Control': 'public, max-age=600', 12 | }, 13 | }, 14 | }; 15 | }); 16 | -------------------------------------------------------------------------------- /src/components/starter/footer/footer.module.css: -------------------------------------------------------------------------------- 1 | .anchor { 2 | color: white !important; 3 | display: block; 4 | font-size: 0.8rem; 5 | text-align: center; 6 | text-decoration: none; 7 | line-height: 1.5; 8 | } 9 | 10 | .anchor span:not(.spacer) { 11 | display: block; 12 | } 13 | 14 | .spacer { 15 | display: none; 16 | padding: 0 15px; 17 | } 18 | 19 | @media screen and (min-width: 768px) { 20 | .anchor span { 21 | display: inline !important; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/starter/gauge/gauge.module.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | position: relative; 3 | } 4 | 5 | .gauge { 6 | width: 160px; 7 | } 8 | 9 | .value { 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | color: white; 14 | font-size: 3rem; 15 | transform: translate(-50%, -50%); 16 | width: 200px; 17 | text-align: center; 18 | } 19 | 20 | @media screen and (min-width: 768px) { 21 | .gauge { 22 | width: 400px; 23 | } 24 | .value { 25 | font-size: 7rem; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.log 2 | **/.DS_Store 3 | *. 4 | .vscode/settings.json 5 | .history 6 | .yarn 7 | bazel-* 8 | bazel-bin 9 | bazel-out 10 | bazel-qwik 11 | bazel-testlogs 12 | dist 13 | dist-dev 14 | lib 15 | lib-types 16 | etc 17 | external 18 | node_modules 19 | temp 20 | tsc-out 21 | tsdoc-metadata.json 22 | target 23 | output 24 | rollup.config.js 25 | build 26 | .cache 27 | .vscode 28 | .rollup.cache 29 | dist 30 | tsconfig.tsbuildinfo 31 | vite.config.ts 32 | *.spec.tsx 33 | *.spec.ts 34 | .netlify 35 | pnpm-lock.yaml 36 | package-lock.json 37 | yarn.lock 38 | server 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Build 2 | /dist 3 | /lib 4 | /lib-types 5 | /server 6 | 7 | # Development 8 | node_modules 9 | *.local 10 | 11 | # Cache 12 | .cache 13 | .mf 14 | .rollup.cache 15 | tsconfig.tsbuildinfo 16 | 17 | # Logs 18 | logs 19 | *.log 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | pnpm-debug.log* 24 | lerna-debug.log* 25 | 26 | # Editor 27 | .vscode/* 28 | !.vscode/extensions.json 29 | .idea 30 | .DS_Store 31 | *.suo 32 | *.ntvs* 33 | *.njsproj 34 | *.sln 35 | *.sw? 36 | 37 | # Yarn 38 | .yarn/* 39 | !.yarn/releases 40 | 41 | # Vercel 42 | .vercel 43 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.log 2 | **/.DS_Store 3 | *. 4 | .vscode/settings.json 5 | .history 6 | .yarn 7 | bazel-* 8 | bazel-bin 9 | bazel-out 10 | bazel-qwik 11 | bazel-testlogs 12 | dist 13 | dist-dev 14 | lib 15 | lib-types 16 | etc 17 | external 18 | node_modules 19 | temp 20 | tsc-out 21 | tsdoc-metadata.json 22 | target 23 | output 24 | rollup.config.js 25 | build 26 | .cache 27 | .vscode 28 | .rollup.cache 29 | dist 30 | tsconfig.tsbuildinfo 31 | vite.config.ts 32 | *.spec.tsx 33 | *.spec.ts 34 | .netlify 35 | pnpm-lock.yaml 36 | package-lock.json 37 | yarn.lock 38 | server 39 | -------------------------------------------------------------------------------- /adapters/vercel-edge/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { vercelEdgeAdapter } from '@builder.io/qwik-city/adapters/vercel-edge/vite'; 2 | import { extendConfig } from '@builder.io/qwik-city/vite'; 3 | import baseConfig from '../../vite.config'; 4 | 5 | export default extendConfig(baseConfig, () => { 6 | return { 7 | build: { 8 | ssr: true, 9 | rollupOptions: { 10 | input: ['src/entry.vercel-edge.tsx', '@qwik-city-plan'], 11 | }, 12 | outDir: '.vercel/output/functions/_qwik-city.func', 13 | }, 14 | plugins: [vercelEdgeAdapter()], 15 | }; 16 | }); 17 | -------------------------------------------------------------------------------- /src/components/starter/hero/hero.module.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | display: flex; 3 | vertical-align: middle; 4 | flex-direction: column; 5 | flex-wrap: nowrap; 6 | align-items: center; 7 | height: 450px; 8 | justify-content: center; 9 | gap: 40px; 10 | } 11 | 12 | .hero p { 13 | color: white; 14 | margin: 0; 15 | font-size: 1rem; 16 | } 17 | 18 | .button-group { 19 | display: flex; 20 | flex-direction: row; 21 | gap: 24px; 22 | } 23 | 24 | @media screen and (min-width: 768px) { 25 | .hero { 26 | gap: 60px; 27 | height: 500px; 28 | } 29 | 30 | .hero p { 31 | font-size: 1.3rem; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /adaptors/vercel-edge/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { vercelEdgeAdaptor } from '@builder.io/qwik-city/adaptors/vercel-edge/vite'; 2 | import { extendConfig } from '@builder.io/qwik-city/vite'; 3 | import baseConfig from '../../vite.config'; 4 | 5 | export default extendConfig(baseConfig, () => { 6 | return { 7 | build: { 8 | ssr: true, 9 | rollupOptions: { 10 | input: ['src/entry.vercel-edge.tsx', '@qwik-city-plan'], 11 | }, 12 | outDir: '.vercel/output/functions/_qwik-city.func', 13 | }, 14 | plugins: [ 15 | vercelEdgeAdaptor({ 16 | staticGenerate: true, 17 | }), 18 | ], 19 | }; 20 | }); 21 | -------------------------------------------------------------------------------- /src/components/starter/footer/footer.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from '@builder.io/qwik'; 2 | import { useServerTimeLoader } from '~/routes/layout'; 3 | import styles from './footer.module.css'; 4 | 5 | export default component$(() => { 6 | const serverTime = useServerTimeLoader(); 7 | 8 | return ( 9 | 18 | ); 19 | }); 20 | -------------------------------------------------------------------------------- /src/entry.dev.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * WHAT IS THIS FILE? 3 | * 4 | * Development entry point using only client-side modules: 5 | * - Do not use this mode in production! 6 | * - No SSR 7 | * - No portion of the application is pre-rendered on the server. 8 | * - All of the application is running eagerly in the browser. 9 | * - More code is transferred to the browser than in SSR mode. 10 | * - Optimizer/Serialization/Deserialization code is not exercised! 11 | */ 12 | import { render, type RenderOptions } from '@builder.io/qwik'; 13 | import Root from './root'; 14 | 15 | export default function (opts: RenderOptions) { 16 | return render(document, , opts); 17 | } 18 | -------------------------------------------------------------------------------- /src/routes/layout.tsx: -------------------------------------------------------------------------------- 1 | import { component$, Slot, useStyles$ } from '@builder.io/qwik'; 2 | import { routeLoader$ } from '@builder.io/qwik-city'; 3 | 4 | import Header from '~/components/starter/header/header'; 5 | import Footer from '~/components/starter/footer/footer'; 6 | 7 | import styles from './styles.css?inline'; 8 | 9 | export const useServerTimeLoader = routeLoader$(() => { 10 | return { 11 | date: new Date().toISOString(), 12 | }; 13 | }); 14 | 15 | export default component$(() => { 16 | useStyles$(styles); 17 | return ( 18 | <> 19 |
20 |
21 | 22 |
23 |