PS: This little app works even when JavaScript is disabled.
67 |
68 |
69 | );
70 | });
71 |
72 | export const head: DocumentHead = {
73 | title: 'Qwik Todo List',
74 | };
75 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Builder.io example with Qwik
2 |
3 | An exaple of using [Builder.io's](https://www.builder.io) drag and drop headless CMS with Qwik.
4 |
5 | See [src/routes[...index]/index.tsx](src/routes[...index]/index.tsx) for the integration code.
6 |
7 | ## How to use
8 |
9 | Clone and install:
10 |
11 | ```bash
12 | git clone https://github.com/BuilderIO/builder-qwik-example.git
13 | cd builder-qwik-example
14 | ```
15 |
16 | Create a free [Builder.io account](https://builder.io/signup) (only takes a couple minutes), and paste your [public API key](https://www.builder.io/c/docs/using-your-api-key) into `.env`
17 |
18 | ```diff
19 | - BUILDER_PUBLIC_API_KEY=YOUR_API_KEY
20 | + BUILDER_PUBLIC_API_KEY=abc123
21 | ```
22 |
23 | Then run the development server:
24 |
25 | ```bash
26 | npm run dev
27 | ```
28 |
29 | Now, go set your [preview URL](https://www.builder.io/c/docs/guides/preview-url) to `http://localhost:5173/`
30 |
31 | 1. Go to [https://builder.io/models](builder.io/models)
32 | 2. Choose the `page` model
33 | 3. Set the preview URL to `http://localhost:5173/` and click `save` in the top right
34 |
35 | Now, let's create a page in Builder.io and see it live in Qwik!
36 |
37 | 1. Go to [https://builder.io/content](builder.io/content)
38 | 2. Click `+ New` and choose `Page`
39 | 3. Give it a name and click `Create`
40 |
41 | Now, try out the visual editor! You can find a custom Qwik components
42 | in the `Custom Components` section of the insert tab.
43 |
44 | You may also choose to limit visual editing to only your custom components with [components-only mode](https://www.builder.io/c/docs/guides/components-only-mode).
45 |
46 | ## Next Steps
47 |
48 | See our full integration guides [here](https://www.builder.io/c/docs/developers)
49 |
50 | Also, when you push your integration to production, go back and update your preview URL to your production URL so now anyone on your team can visuall create content in your Qwik app!
51 |
52 | Also, to integrate structured data, see [this guide](https://www.builder.io/c/docs/integrate-cms-data)
53 |
--------------------------------------------------------------------------------
/src/components/starter/hero/hero.tsx:
--------------------------------------------------------------------------------
1 | import { component$ } from '@builder.io/qwik';
2 | import styles from './hero.module.css';
3 |
4 | export default component$(() => {
5 | return (
6 |
74 | );
75 | });
76 |
--------------------------------------------------------------------------------
/src/routes/[...index]/index.tsx:
--------------------------------------------------------------------------------
1 | import { component$, useStore } from "@builder.io/qwik";
2 | import { routeLoader$ } from "@builder.io/qwik-city";
3 | import {
4 | getContent,
5 | RenderContent,
6 | getBuilderSearchParams,
7 | type RegisteredComponent,
8 | } from "@builder.io/sdk-qwik";
9 |
10 | export const BUILDER_PUBLIC_API_KEY = process.env.BUILDER_PUBLIC_API_KEY!; // <-- Add your key in .env
11 | export const BUILDER_MODEL = "page";
12 |
13 | // Example component to use the in the drag and drop editor
14 | // https://www.builder.io/c/docs/custom-components-setup
15 | export const MyFunComponent = component$((props: { text: string }) => {
16 | const state = useStore({
17 | count: 0,
18 | });
19 |
20 | return (
21 |
22 |
{props.text.toUpperCase()}
23 |
{state.count}
24 |
25 |
26 | );
27 | });
28 |
29 | // You will find these components in the "custom components"
30 | // section of the visual editor
31 | // You can also turn on "components only mode" to limit
32 | // editing to only these components
33 | // https://www.builder.io/c/docs/guides/components-only-mode
34 | export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
35 | {
36 | component: MyFunComponent,
37 | name: "MyFunComponent",
38 | inputs: [
39 | {
40 | name: "text",
41 | type: "string",
42 | defaultValue: "Hello world",
43 | },
44 | ],
45 | },
46 | ];
47 |
48 | // Use Qwik City's `useBuilderContent` to get your content from Builder.
49 | // `routeLoader$()` takes an async function to fetch content
50 | // from Builder with `getContent()`.
51 | export const useBuilderContent = routeLoader$(async ({ url, error }) => {
52 | const isPreviewing = url.searchParams.has("builder.preview");
53 |
54 | const builderContent = await getContent({
55 | model: BUILDER_MODEL,
56 | apiKey: BUILDER_PUBLIC_API_KEY,
57 | options: getBuilderSearchParams(url.searchParams),
58 | userAttributes: {
59 | urlPath: url.pathname,
60 | },
61 | });
62 |
63 | // If there's no content, throw a 404.
64 | // You can use your own 404 component here
65 | if (!builderContent && !isPreviewing) {
66 | throw error(404, "Page not found");
67 | }
68 | // return content fetched from Builder, which is JSON
69 | return builderContent;
70 | });
71 |
72 | export default component$(() => {
73 | const content = useBuilderContent();
74 |
75 | // RenderContent uses `content` to
76 | // render the content of the given model, here a page,
77 | // of your space (specified by the API Key)
78 | return (
79 |
85 | );
86 | });
87 |
--------------------------------------------------------------------------------
/src/components/starter/icons/qwik.tsx:
--------------------------------------------------------------------------------
1 | export const QwikLogo = ({ width = 100, height = 35 }: { width?: number; height?: number }) => (
2 |
38 | );
39 |
--------------------------------------------------------------------------------
/src/components/starter/next-steps/next-steps.tsx:
--------------------------------------------------------------------------------
1 | import { component$, $, useOnWindow, useSignal } from '@builder.io/qwik';
2 | import styles from './next-steps.module.css';
3 |
4 | export const GETTING_STARTED_STEPS = [
5 | {
6 | message: "Press and hold the ALT key to active 'Click-to-Source' mode",
7 | },
8 | {
9 | message: 'Select the title of this page while keeping the ALT key pressed',
10 | hint: 'Edit the title and save the changes. If your editor does not open, have a look at this page to set the correct LAUNCH_EDITOR value.',
11 | },
12 | {
13 | message:
14 | 'Update now the routeLoader$ defined in the src/routes//layout.tsx file',
15 | hint: 'Instead of returning the current date, you could return any possible string. The output is displayed in the footer.',
16 | },
17 | {
18 | message: 'Create a new Route called /me',
19 | hint: 'Create a new directory called me in src/routes. Within this directory create a index.tsx file or copy the src/routes/index.tsx file. Your new route is now accessible here ✨',
20 | },
21 | {
22 | message: 'Time to have a look at Forms',
23 | hint: 'Open the TODO list App and add some items to the list. Try the same with disabled JavaScript 🐰',
24 | },
25 | {
26 | message: 'Congratulations! You are now familiar with the basics! 🎉',
27 | hint: "If you need further info on how to use qwik, have a look at qwik.builder.io or join the Discord channel.",
28 | },
29 | ];
30 |
31 | export default component$(() => {
32 | const gettingStartedStep = useSignal(0);
33 |
34 | useOnWindow(
35 | 'keydown',
36 | $((e) => {
37 | if ((e as KeyboardEvent).key === 'Alt') {
38 | gettingStartedStep.value = 1;
39 | }
40 | })
41 | );
42 |
43 | return (
44 |