chore: clean up docs site build warnings (#5391)
This commit is contained in:
Miško Hevery
@@ -8,9 +8,9 @@
|
||||
"@algolia/autocomplete-core": "1.7.4",
|
||||
"@algolia/client-search": "4.14.3",
|
||||
"@builder.io/partytown": "^0.8.1",
|
||||
"@builder.io/qwik": "github:BuilderIo/qwik-build#7521f8e9157e643e7948fa4ae99234e41b56cf95",
|
||||
"@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96",
|
||||
"@builder.io/qwik-labs": "github:BuilderIo/qwik-labs-build#5f672e948330926b348cbac8692d9aba6f8f41b2",
|
||||
"@builder.io/qwik": "github:BuilderIo/qwik-build#0080db89d43112fea2ed6b281f70f61d00f42edd",
|
||||
"@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#fd39ca1abf09e4016ff738679030b2486ea5f7fc",
|
||||
"@builder.io/qwik-labs": "github:BuilderIo/qwik-labs-build#c336fbf3ac62af6b056b8f7b203a6c1d48756f91",
|
||||
"@builder.io/qwik-react": "0.5.0",
|
||||
"@builder.io/sdk-qwik": "^0.6.2",
|
||||
"@docsearch/css": "^3.5.2",
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
export interface Callout {
|
||||
html: string;
|
||||
nextToken?: string;
|
||||
}
|
||||
export const CALLOUTS: Record<string, Callout> = {
|
||||
component$: {
|
||||
nextToken: '(',
|
||||
html: `Declares component in Qwik. The <code>$</code> suffix tells
|
||||
Qwik Optimizer to pull out the component into a separate lazy-executed (lazy-loaded) symbol so
|
||||
that the component only gets download to the client if it is needed for re-rendering.`,
|
||||
},
|
||||
routeLoader$: {
|
||||
nextToken: '(',
|
||||
html: `Creates a <code>use____()</code> method which loads data for the route.
|
||||
the data loading runs on the server, but the data can be used on the client. The <code>$</code> allows the
|
||||
client code to reffer to server function so that the type information can flow, without forcing the bundler
|
||||
to bundle the server code on the client.`,
|
||||
},
|
||||
onInput$: {
|
||||
html: `Listen to <code>input</code> events. The <code>$</code> allows the listener to be resumeb
|
||||
on the client. The listener is eagerly loaded in browser chache, but is broght into the application only when
|
||||
event happens.`,
|
||||
},
|
||||
server$: {
|
||||
nextToken: `(`,
|
||||
html: `Invoke the function on the server. (Similar to RPC.)`,
|
||||
},
|
||||
};
|
||||
|
||||
export function getCallout(
|
||||
hoverText: string | null | undefined,
|
||||
nextText: string | null | undefined
|
||||
): Callout | null {
|
||||
if (hoverText) {
|
||||
const callout = CALLOUTS[hoverText];
|
||||
if (callout && callout.nextToken && callout.nextToken !== nextText) {
|
||||
return null;
|
||||
}
|
||||
return callout;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
export const getTasksFromDB = () => {
|
||||
return null! as Task[];
|
||||
};
|
||||
export const hasText = (task: Task, text: string) => true;
|
||||
export interface Task {
|
||||
id: string;
|
||||
completed: boolean;
|
||||
title: string;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
img {
|
||||
max-height: 500px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
section.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.tagline,
|
||||
.sub-tagline {
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sub-tagline {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p.box {
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
p a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { component$, useStylesScoped$ } from '@builder.io/qwik';
|
||||
import STYLES from './index.css?inline';
|
||||
import { SrcAnimation } from './src-animation';
|
||||
|
||||
export default component$(() => {
|
||||
useStylesScoped$(STYLES);
|
||||
return (
|
||||
<main>
|
||||
<section class="row">
|
||||
<section class="left">
|
||||
<p class="tagline">
|
||||
The next-generation framework that streams your JS app, no matter how large it is.
|
||||
</p>
|
||||
<p class="sub-tagline">
|
||||
(instantly load any scale of the app with no extra development effort)
|
||||
</p>
|
||||
</section>
|
||||
<section class="right">
|
||||
<img src="https://cdn.builder.io/api/v1/image/assets%2Ffe30f73e01ef40558cd69a9493eba2a2%2Fc65b2edb5e354db98e7a62e18eb44543?width=2000&format=webp" />
|
||||
</section>
|
||||
</section>
|
||||
<section class="row">
|
||||
<section class="left">
|
||||
<img src="https://cdn.builder.io/api/v1/image/assets%2Ffe30f73e01ef40558cd69a9493eba2a2%2Fc65b2edb5e354db98e7a62e18eb44543?width=2000&format=webp" />
|
||||
</section>
|
||||
<section class="right">
|
||||
<p class="box">
|
||||
Too much JavaScript is the most significant performance problem on the web today. It
|
||||
prevents your site from getting good CWV / PageSpeed scores resulting in a frustrating
|
||||
experience for your users and{' '}
|
||||
<a href="https://web.dev/tags/case-study/">forgone revenue</a> for you. Qwik’s{' '}
|
||||
<a href="/docs/concepts/resumable/">resumability</a> keeps the amount of JavaScript
|
||||
small and constant even as your application grows in complexity.
|
||||
</p>
|
||||
<p class="box">
|
||||
Universal execution model seamlessly blends execution of code on the server and client
|
||||
in a DX so clean you don't even have to think about it. Powered by{' '}
|
||||
<a href="https://www.builder.io/blog/wtf-is-code-extraction">Code Extraction</a>, which
|
||||
breaks your application code into small code chunks and delivers them to the correct
|
||||
runtime environment enabling the streaming of JavaScript without any developer effort.
|
||||
</p>
|
||||
<p class="box">
|
||||
<a href="/docs/advanced/speculative-module-fetching/">Speculative Module Fetching</a>{' '}
|
||||
ensures the code is loaded before user interaction to ensure instant interactivity, even
|
||||
on slow or intermittent networks. Collect real-world user behavior to further optimize
|
||||
the javascript bundles and speculative module fetching.
|
||||
</p>
|
||||
<p class="box">
|
||||
Qwik is designed so that the easy path for the developer is the performant path for the
|
||||
user—no need to know special performance hacks or learn new APIs to optimize the site
|
||||
performance. Even your junior developer can create performant sites.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<section class="row">
|
||||
<div style="width: 650px">
|
||||
<h1 style="height: 100px">Some Text</h1>
|
||||
<h1 style="height: 100px">Some Text</h1>
|
||||
<h1 style="height: 100px">Some Text</h1>
|
||||
<h1 style="height: 100px">Some Text</h1>
|
||||
<h1 style="height: 100px">Some Text</h1>
|
||||
<h1 style="height: 100px">Some Text</h1>
|
||||
<h1 style="height: 100px">Some Text</h1>
|
||||
<h1 style="height: 100px">Some Text</h1>
|
||||
<h1 style="height: 100px">Some Text</h1>
|
||||
<SrcAnimation />
|
||||
</div>
|
||||
</section>
|
||||
<section class="row">
|
||||
<section class="left">
|
||||
<img src="https://cdn.builder.io/api/v1/image/assets%2Ffe30f73e01ef40558cd69a9493eba2a2%2Fc65b2edb5e354db98e7a62e18eb44543?width=2000&format=webp" />
|
||||
</section>
|
||||
<section class="right">
|
||||
<p class="box">
|
||||
Qwik goes beyond other meta-frameworks to solve the whole web application creation,
|
||||
optimization, and delivery out of the box.
|
||||
</p>
|
||||
<p class="box">
|
||||
SEO-first: SEO is not an afterthought but a fundamental property of Qwik. Turn off
|
||||
JavaScript and navigate this site to see what SEO will see.
|
||||
</p>
|
||||
<p class="box">
|
||||
Edge-Enabled: Get even better performance by running your application on edge close to
|
||||
your users. Check out our <a href="/ecosystem/">integrations page</a>.
|
||||
</p>
|
||||
<p class="box">
|
||||
SSR/SSG: Server-Side-Rendering? Static-Site-Generation? A mixture of both? Yes, Qwik
|
||||
does it all in a way that works well with your CDN.
|
||||
</p>
|
||||
<p class="box">
|
||||
Bundling: Be the master of code-splitting and lazy-loading without writing a single
|
||||
dynamic import or refactoring your application. Learn from real-world user behavior and
|
||||
adjust the bundles by changing configuration parameters.
|
||||
</p>
|
||||
<p class="box">
|
||||
Integrate your existing React components in Qwik with{' '}
|
||||
<a href="/integrations/react/">Qwik-React</a>. Lazy load and hydrate the React
|
||||
components for improved startup performance.
|
||||
</p>
|
||||
<p class="box">
|
||||
Reach a <a href="/chat/">community of developers</a> ready to answer your questions on
|
||||
Discord.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
});
|
||||
@@ -1,83 +0,0 @@
|
||||
const PATH: StyleFrame[] = [
|
||||
{
|
||||
pos: 0,
|
||||
rotateX: 0,
|
||||
rotateY: 0,
|
||||
rotateZ: 0,
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
translateZ: 0,
|
||||
marginLeft: 0,
|
||||
marginTop: 0,
|
||||
opacity: 0,
|
||||
layerAlpha: 0,
|
||||
},
|
||||
{
|
||||
pos: 0.5,
|
||||
rotateX: 0,
|
||||
rotateY: 0,
|
||||
rotateZ: 0,
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
translateZ: 0,
|
||||
marginLeft: 0,
|
||||
marginTop: 0,
|
||||
opacity: 0,
|
||||
layerAlpha: 0.2,
|
||||
},
|
||||
{
|
||||
pos: 1,
|
||||
rotateX: 0,
|
||||
rotateY: 50,
|
||||
rotateZ: 0,
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
translateZ: 0,
|
||||
marginLeft: 420,
|
||||
marginTop: 0,
|
||||
opacity: 1,
|
||||
layerAlpha: 0,
|
||||
},
|
||||
];
|
||||
|
||||
export interface StyleFrame {
|
||||
pos: number;
|
||||
rotateX: number;
|
||||
rotateY: number;
|
||||
rotateZ: number;
|
||||
translateX: number;
|
||||
translateY: number;
|
||||
translateZ: number;
|
||||
marginLeft: number;
|
||||
marginTop: number;
|
||||
opacity: number;
|
||||
layerAlpha: number;
|
||||
}
|
||||
|
||||
export function setPosition(pos: number) {
|
||||
const prev = findPos(pos, 0);
|
||||
const next = findPos(pos, 1);
|
||||
return interpolate(pos, prev, next);
|
||||
}
|
||||
|
||||
function findPos(pos: number, offset: number) {
|
||||
let lastPos = 0;
|
||||
for (let i = 0; i < PATH.length; i++) {
|
||||
if (PATH[i].pos <= pos) {
|
||||
lastPos = i;
|
||||
}
|
||||
}
|
||||
return PATH[lastPos + offset] || PATH[PATH.length - 1];
|
||||
}
|
||||
|
||||
function interpolate(pos: number, prev: StyleFrame, next: StyleFrame) {
|
||||
if (prev.pos === next.pos) {
|
||||
return next;
|
||||
}
|
||||
const percent = (pos - prev.pos) / (next.pos - prev.pos);
|
||||
const values: StyleFrame = {} as any;
|
||||
(Object.keys(prev) as Array<keyof StyleFrame>).forEach((k) => {
|
||||
values[k] = prev[k] * (1 - percent) + next[k] * percent;
|
||||
});
|
||||
return values;
|
||||
}
|
||||
@@ -1,149 +0,0 @@
|
||||
.sticky {
|
||||
position: sticky;
|
||||
bottom: 100px;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
ul.layers {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li.layer {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
transform-style: preserve-3d;
|
||||
width: 630px;
|
||||
perspective: 5000px;
|
||||
font-weight: 500;
|
||||
}
|
||||
li.layer.layer-0 {
|
||||
position: static;
|
||||
}
|
||||
li.layer > div {
|
||||
padding: 1em;
|
||||
}
|
||||
li.layer-0 > div {
|
||||
/*background-color: rgb(29, 166, 243, var(--opacity));*/
|
||||
background-color: rgb(15, 83, 172, var(--opacity));
|
||||
}
|
||||
|
||||
li.layer-1 > div {
|
||||
/*background-color: rgb(220, 220, 220, var(--opacity));*/
|
||||
background-color: rgb(110, 110, 110, var(--opacity));
|
||||
}
|
||||
|
||||
li.layer-2 > div {
|
||||
/*background-color: rgb(155, 99, 241, var(--opacity));*/
|
||||
background-color: rgb(78, 50, 120, var(--opacity));
|
||||
}
|
||||
|
||||
li.layer-0 span.layer-0 {
|
||||
background-color: rgb(29, 166, 243, var(--layer-alpha));
|
||||
}
|
||||
|
||||
li.layer-1 span.layer-1 {
|
||||
background-color: rgb(255, 255, 255, var(--layer-alpha));
|
||||
}
|
||||
|
||||
li.layer-2 span.layer-2 {
|
||||
background-color: rgb(155, 99, 241, var(--layer-alpha));
|
||||
}
|
||||
|
||||
#srcOut,
|
||||
li.layer {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.code-keyword {
|
||||
color: rgb(29, 166, 243);
|
||||
}
|
||||
|
||||
.code-brace {
|
||||
color: rgb(254, 209, 11);
|
||||
}
|
||||
|
||||
.code-ident {
|
||||
color: rgb(141, 211, 254);
|
||||
}
|
||||
|
||||
.code-misc {
|
||||
color: rgb(202, 202, 202);
|
||||
}
|
||||
|
||||
.code-decl {
|
||||
color: rgb(70, 137, 204);
|
||||
}
|
||||
|
||||
.code-string {
|
||||
color: rgb(194, 127, 101);
|
||||
}
|
||||
|
||||
.code-invocation {
|
||||
color: rgb(212, 214, 153);
|
||||
}
|
||||
|
||||
.code-type {
|
||||
color: rgb(67, 191, 161);
|
||||
}
|
||||
|
||||
.code-JSX-element {
|
||||
color: rgb(70, 137, 204);
|
||||
}
|
||||
|
||||
.code-JSX-brace {
|
||||
color: rgb(109, 109, 109);
|
||||
}
|
||||
|
||||
.code-JSX-component {
|
||||
color: rgb(66, 187, 157);
|
||||
}
|
||||
|
||||
.code-JSX-attr {
|
||||
color: rgb(141, 211, 254);
|
||||
}
|
||||
|
||||
.code-transparent {
|
||||
color: rgb(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.callout {
|
||||
margin-top: 10px;
|
||||
width: 300px;
|
||||
padding: 1em;
|
||||
background-color: darkgrey;
|
||||
border-radius: 5px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.callout:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 23px;
|
||||
top: -26px;
|
||||
border: 10px solid transparent;
|
||||
border-bottom: 16px solid black; /* IE8 Fallback */
|
||||
border-bottom: 16px solid black;
|
||||
z-index: 2;
|
||||
}
|
||||
.callout:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 25px;
|
||||
top: -22px;
|
||||
border: 8px solid transparent;
|
||||
border-bottom: 14px solid darkgrey;
|
||||
z-index: 3;
|
||||
}
|
||||
@@ -1,179 +0,0 @@
|
||||
import {
|
||||
component$,
|
||||
useSignal,
|
||||
$,
|
||||
useComputed$,
|
||||
useStore,
|
||||
useTask$,
|
||||
useStyles$,
|
||||
useOnDocument,
|
||||
type QwikMouseEvent,
|
||||
} from '@builder.io/qwik';
|
||||
import { isBrowser } from '@builder.io/qwik/build';
|
||||
import { type Callout, getCallout } from './callout';
|
||||
import { setPosition } from './layers';
|
||||
import { srcLayer0, srcLayer1, srcLayer2 } from './syntax';
|
||||
import STYLES from './src-animation.css?inline';
|
||||
|
||||
export const SrcAnimation = component$(() => {
|
||||
useStyles$(STYLES);
|
||||
const stickyDiv = useSignal<HTMLDivElement>();
|
||||
const calloutStyles = useSignal<Record<string, any>>({ display: 'none' });
|
||||
const hoverToken = useStore<{
|
||||
element: HTMLSpanElement | null;
|
||||
callout: Callout | null;
|
||||
}>({
|
||||
element: null,
|
||||
callout: null,
|
||||
});
|
||||
const position = useSignal(0);
|
||||
const inter = useComputed$(() => {
|
||||
return setPosition(position.value);
|
||||
});
|
||||
const transform2 = useComputed$(() =>
|
||||
[
|
||||
`rotateX(${inter.value.rotateX}deg)`,
|
||||
`rotateY(${inter.value.rotateY}deg)`,
|
||||
`rotateZ(${inter.value.rotateZ}deg)`,
|
||||
`translateX(${inter.value.translateX}px)`,
|
||||
`translateY(${inter.value.translateY}px)`,
|
||||
`translateZ(${inter.value.translateZ}px)`,
|
||||
].join(' ')
|
||||
);
|
||||
const transform1 = useComputed$(() =>
|
||||
[
|
||||
`rotateX(${inter.value.rotateX}deg)`,
|
||||
`rotateY(${inter.value.rotateY}deg)`,
|
||||
`rotateZ(${inter.value.rotateZ}deg)`,
|
||||
].join(' ')
|
||||
);
|
||||
const transform0 = useComputed$(() =>
|
||||
[
|
||||
`rotateX(${inter.value.rotateX}deg)`,
|
||||
`rotateY(${inter.value.rotateY}deg)`,
|
||||
`rotateZ(${inter.value.rotateZ}deg)`,
|
||||
`translateX(${-inter.value.translateX}px)`,
|
||||
`translateY(${-inter.value.translateY}px)`,
|
||||
`translateZ(${-inter.value.translateZ}px)`,
|
||||
].join(' ')
|
||||
);
|
||||
useTask$(({ track }) => {
|
||||
track(hoverToken);
|
||||
if (!isBrowser) {
|
||||
return;
|
||||
}
|
||||
if (hoverToken.callout) {
|
||||
const rect = hoverToken.element!.getBoundingClientRect();
|
||||
const top = rect.bottom + window.scrollY;
|
||||
const left = rect.left + window.scrollX;
|
||||
calloutStyles.value = {
|
||||
display: 'block',
|
||||
position: 'absolute',
|
||||
top: top + 'px',
|
||||
left: left + 'px',
|
||||
zIndex: '2',
|
||||
};
|
||||
} else {
|
||||
calloutStyles.value = {
|
||||
display: 'none',
|
||||
};
|
||||
}
|
||||
});
|
||||
useOnDocument(
|
||||
'scroll',
|
||||
$((e) => {
|
||||
const stickyParent = stickyDiv.value!.parentElement!;
|
||||
const rectParent = stickyParent.getBoundingClientRect();
|
||||
const rectSticky = stickyDiv.value!.getBoundingClientRect();
|
||||
const scrollY = window.scrollY;
|
||||
const height = rectParent.height - rectSticky.height;
|
||||
const start = scrollY + rectParent.top;
|
||||
// const end = start + height;
|
||||
const pos = Math.max(0, Math.min(1, (scrollY - start) / height));
|
||||
position.value = pos;
|
||||
hoverToken.element = null;
|
||||
hoverToken.callout = null;
|
||||
})
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="sticky" ref={stickyDiv}>
|
||||
<ul
|
||||
class="layers"
|
||||
style={{
|
||||
'--layer-alpha': inter.value.layerAlpha,
|
||||
'--opacity': inter.value.opacity,
|
||||
}}
|
||||
onMouseMove$={(e) => {
|
||||
const spans = stickyDiv.value!.querySelectorAll('span.callout-anchor')!;
|
||||
let found = false;
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
const span = spans[i] as HTMLSpanElement;
|
||||
const rect = span.getBoundingClientRect();
|
||||
if (inside(e, rect)) {
|
||||
found = true;
|
||||
hoverToken.element = span;
|
||||
const hoverText = span.textContent;
|
||||
const nextText = span.nextSibling?.textContent;
|
||||
hoverToken.callout = getCallout(hoverText, nextText);
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
hoverToken.element = null;
|
||||
hoverToken.callout = null;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<li
|
||||
class="layer layer-0"
|
||||
style={{
|
||||
marginLeft: -1 * inter.value.marginLeft + 'px',
|
||||
marginTop: -1 * inter.value.marginTop + 'px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
dangerouslySetInnerHTML={srcLayer0}
|
||||
style={{
|
||||
transform: transform2.value,
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
<li class="layer layer-1">
|
||||
<div
|
||||
style={{
|
||||
transform: transform1.value,
|
||||
}}
|
||||
dangerouslySetInnerHTML={srcLayer1}
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
class="layer layer-2"
|
||||
style={{
|
||||
marginLeft: 1 * inter.value.marginLeft + 'px',
|
||||
marginTop: 1 * inter.value.marginTop + 'px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
transform: transform0.value,
|
||||
}}
|
||||
dangerouslySetInnerHTML={srcLayer2}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="callout"
|
||||
style={calloutStyles.value}
|
||||
dangerouslySetInnerHTML={hoverToken.callout?.html}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
function inside(pos: QwikMouseEvent, rect: DOMRect) {
|
||||
const { x, y } = pos;
|
||||
const { left, right, top, bottom } = rect;
|
||||
return left < x && x < right && top < y && y < bottom;
|
||||
}
|
||||
@@ -1,187 +0,0 @@
|
||||
import { getCallout } from './callout';
|
||||
|
||||
export function toHTML(tokens: Token[], layer: number) {
|
||||
const HTML: string[] = [];
|
||||
tokens.forEach((token, idx) => {
|
||||
const callout = token.layer == layer && getCallout(token.text, tokens[idx + 1]?.text);
|
||||
const classes = [
|
||||
'layer-' + token.layer,
|
||||
token.layer === layer ? 'code-' + token.type : 'code-transparent',
|
||||
];
|
||||
if (callout) {
|
||||
classes.push('callout-anchor');
|
||||
}
|
||||
HTML.push(`<span class="${classes.join(' ')}">${token.text.replace('<', '<')}</span>`);
|
||||
// if (callout) {
|
||||
// HTML.push('<div class="callout">', callout.html, '</div>');
|
||||
// }
|
||||
});
|
||||
|
||||
return HTML.join('');
|
||||
}
|
||||
|
||||
export interface Token {
|
||||
type: string;
|
||||
from: number;
|
||||
to: number;
|
||||
text: string;
|
||||
layer: number;
|
||||
}
|
||||
|
||||
function tokenize(text: string) {
|
||||
let layer = 0;
|
||||
const stack: Token[] = [];
|
||||
let i = 0;
|
||||
let lastI = i;
|
||||
const tokens: Token[] = [];
|
||||
while (i < text.length) {
|
||||
const ch = text[i++];
|
||||
const peekCh = text[i];
|
||||
if (ch == '"') {
|
||||
consume('string', (ch) => ch !== '"', true);
|
||||
} else if (ch == "'") {
|
||||
consume('string', (ch) => ch !== "'", true);
|
||||
} else if (isWhitespace(ch)) {
|
||||
consume('whitespace', isWhitespace);
|
||||
} else if (isIdent(ch)) {
|
||||
consume('ident', isIdent);
|
||||
} else if (ch === '<' && (isIdent(peekCh) || peekCh == '/' || peekCh == '>')) {
|
||||
consume('JSX-brace', () => false);
|
||||
} else if (ch == '=' && peekCh == '>') {
|
||||
consume('decl', (ch) => ch === '>', true);
|
||||
} else if (isOpenBrace(ch)) {
|
||||
consume('brace', () => false);
|
||||
} else if (isCloseBrace(ch)) {
|
||||
consume('brace', () => false);
|
||||
} else {
|
||||
consume('misc', () => false);
|
||||
}
|
||||
}
|
||||
return tokens;
|
||||
|
||||
function consume(type: string, predicate: (ch: string) => boolean, inclusive?: boolean) {
|
||||
while (i < text.length) {
|
||||
const ch = text[i];
|
||||
if (!predicate(ch)) {
|
||||
if (inclusive) {
|
||||
i++;
|
||||
}
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
push(type);
|
||||
}
|
||||
|
||||
function push(type: string) {
|
||||
const tokenText = text.substring(lastI, i);
|
||||
if (type == 'ident') {
|
||||
const inType = stack[stack.length - 1]?.type;
|
||||
if (inType !== 'JSX-brace' && (after(':') || after('as'))) {
|
||||
type = 'type';
|
||||
} else if (text[i] == '(') {
|
||||
type = 'invocation';
|
||||
} else {
|
||||
if (inType == 'JSX-brace') {
|
||||
type = isUpperCase(tokenText[0]) ? 'JSX-component' : 'JSX-element';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isCloseBrace(tokenText)) {
|
||||
const matchToken = stack.pop()!;
|
||||
layer = matchToken.layer;
|
||||
type = matchToken.type;
|
||||
}
|
||||
const token = {
|
||||
type: KEYWORDS[tokenText] || type,
|
||||
from: lastI,
|
||||
to: i,
|
||||
text: tokenText,
|
||||
layer: layer,
|
||||
};
|
||||
if (isOpenBrace(tokenText)) {
|
||||
const prevToken = tokens[tokens.length - 1];
|
||||
const prevPrevToken = tokens[tokens.length - 2];
|
||||
if (tokenText === '(' && prevToken?.text?.endsWith('$')) {
|
||||
layer = LAYERS[prevToken.text] || 0;
|
||||
} else if (tokenText == '{' && prevToken?.text === '=' && prevPrevToken?.text.endsWith('$')) {
|
||||
layer = 2;
|
||||
}
|
||||
stack.push(token);
|
||||
}
|
||||
tokens.push(token);
|
||||
lastI = i;
|
||||
//console.log(tokens[tokens.length - 1]);
|
||||
}
|
||||
|
||||
function after(text: string) {
|
||||
for (let i = tokens.length - 1; i >= 0; i--) {
|
||||
const token = tokens[i];
|
||||
if (token.type === 'whitespace') {
|
||||
continue;
|
||||
}
|
||||
return token.text == text;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function isWhitespace(ch: string) {
|
||||
return ch == ' ' || ch == '\n';
|
||||
}
|
||||
function isOpenBrace(ch: string) {
|
||||
return ch == '{' || ch == '(' || ch == '[' || ch == '<';
|
||||
}
|
||||
function isCloseBrace(ch: string) {
|
||||
return ch == '}' || ch == ')' || ch == ']' || ch == '>';
|
||||
}
|
||||
function isUpperCase(ch: string) {
|
||||
return 'A' <= ch && ch <= 'Z';
|
||||
}
|
||||
function isLowerCase(ch: string) {
|
||||
return 'a' <= ch && ch <= 'z';
|
||||
}
|
||||
|
||||
function isIdent(ch: string) {
|
||||
return isLowerCase(ch) || isUpperCase(ch) || ch === '_' || ch === '$';
|
||||
}
|
||||
|
||||
const KEYWORDS: Record<string, string> = {};
|
||||
'import|function|default|return|export|as|await|async'
|
||||
.split('|')
|
||||
.forEach((key) => (KEYWORDS[key] = 'keyword'));
|
||||
'const|let|var'.split('|').forEach((key) => (KEYWORDS[key] = 'decl'));
|
||||
|
||||
const LAYERS: Record<string, number> = {
|
||||
routeLoader$: 0,
|
||||
routeAction$: 0,
|
||||
component$: 1,
|
||||
server$: 0,
|
||||
};
|
||||
|
||||
const SRC = `import { component$ } from "@builder.io/qwik";
|
||||
import { Form, routeAction$, routeLoader$ } from "@builder.io/qwik-city";
|
||||
|
||||
const useDice = routeLoader$(() => Math.round(Math.random() * 6) + 1);
|
||||
const useBetAction = routeAction$((params) => {
|
||||
console.log(params.up ? "UP" : params.down ? "DOWN" : "???");
|
||||
});
|
||||
|
||||
export default component$(() => {
|
||||
const dice = useDice();
|
||||
const betAction = useBetAction();
|
||||
return (
|
||||
<>
|
||||
<span>Roll: {dice}</span>
|
||||
<Form action={betAction}>
|
||||
<button name="up">👍</button>
|
||||
<button name="down">👎</button>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
});
|
||||
`;
|
||||
const tokens = tokenize(SRC);
|
||||
export const srcLayer0 = toHTML(tokens, 0);
|
||||
export const srcLayer1 = toHTML(tokens, 1);
|
||||
export const srcLayer2 = toHTML(tokens, 2);
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
@@ -122,7 +122,9 @@ export const ReplOutputPanel = ({ input, store }: ReplOutputPanelProps) => {
|
||||
{diagnosticsLen === 0 ? (
|
||||
<p class="no-diagnostics">- No Reported Diagnostics -</p>
|
||||
) : (
|
||||
[...store.diagnostics, ...store.monacoDiagnostics].map((d) => <p>{d.message}</p>)
|
||||
[...store.diagnostics, ...store.monacoDiagnostics].map((d, key) => (
|
||||
<p key={key}>{d.message}</p>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -128,12 +128,16 @@
|
||||
"title": "@modular-forms/qwik",
|
||||
"github": "https://modularforms.dev/qwik/guides/introduction",
|
||||
"imgSrc": "/ecosystem/modular-forms.svg",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"description": "The modular and type-safe form library"
|
||||
},
|
||||
{
|
||||
"title": "@qwikest/icons",
|
||||
"github": "https://github.com/qwikest/icons",
|
||||
"imgSrc": "/ecosystem/rocket.svg",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"description": "Thousand of Open Source icons"
|
||||
},
|
||||
{
|
||||
@@ -146,48 +150,64 @@
|
||||
"title": "qwik-rive",
|
||||
"github": "https://github.com/qwikverse/qwik-rive",
|
||||
"imgSrc": "/ecosystem/rive.png",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"description": "Rive animations"
|
||||
},
|
||||
{
|
||||
"title": "qwik-lottie",
|
||||
"github": "https://github.com/qwikverse/qwik-lottie",
|
||||
"imgSrc": "/ecosystem/lottie.png",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"description": "Lottie animations"
|
||||
},
|
||||
{
|
||||
"title": "@papanasi/qwik",
|
||||
"github": "https://github.com/CKGrafico/papanasi",
|
||||
"imgSrc": "/ecosystem/papanasi.svg",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"description": "Cross platform UI library"
|
||||
},
|
||||
{
|
||||
"title": "qwik-wrap-balancer",
|
||||
"github": "https://github.com/harshmangalam/qwik-wrap-balancer",
|
||||
"imgSrc": "/ecosystem/balance.svg",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"description": "Good looking balanced paragraphs"
|
||||
},
|
||||
{
|
||||
"title": "@qwik-ui/headless",
|
||||
"github": "https://github.com/qwikifiers/qwik-ui",
|
||||
"imgSrc": "/ecosystem/qwik-ui.png",
|
||||
"width": 231,
|
||||
"height": 90,
|
||||
"description": "Headless UI library"
|
||||
},
|
||||
{
|
||||
"title": "@qwikbits/headless-ui",
|
||||
"github": "https://github.com/genie-design/qwikbits",
|
||||
"imgSrc": "/ecosystem/qwikbits.svg",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"description": "Headless UI components and other helpers"
|
||||
},
|
||||
{
|
||||
"title": "qwik-spin-delay",
|
||||
"github": "https://github.com/harshmangalam/qwik-spin-delay",
|
||||
"imgSrc": "/ecosystem/qwik-spin-delay.png",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"description": "Smart spinner component for Qwik, to manage the duration of loading states."
|
||||
},
|
||||
{
|
||||
"title": "qwik-image",
|
||||
"github": "https://github.com/qwikifiers/qwik-image",
|
||||
"imgSrc": "/ecosystem/qwik-image-logo.png",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"description": "Performant images with automatic optimization."
|
||||
}
|
||||
],
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { component$, useStyles$, type FunctionComponent } from '@builder.io/qwik';
|
||||
import type { DocumentHead } from '@builder.io/qwik-city';
|
||||
import { Link } from '@builder.io/qwik-city';
|
||||
import ImgQwikNewsletter from '~/media/ecosystem/qwik-newsletter.svg?jsx';
|
||||
import styles from '../ecosystem.css?inline';
|
||||
import data from '../ecosystem.json';
|
||||
import { MEDIA, type MediaEntry } from '../media/index';
|
||||
import SHOWCASE from '../showcase/generated-pages.json';
|
||||
import { EcosystemMenu } from './ecosystem-menu';
|
||||
import { QwikPlusLogo } from './qwik-plus-logo';
|
||||
import { MobileEcosystemMenu } from './mobile-ecosystem-menu';
|
||||
import { QwikPlusLogo } from './qwik-plus-logo';
|
||||
|
||||
export default component$(() => {
|
||||
useStyles$(styles);
|
||||
@@ -92,6 +93,8 @@ export default component$(() => {
|
||||
title={item.title}
|
||||
href={item.github}
|
||||
imgSrc={item.imgSrc}
|
||||
width={item.width || 90}
|
||||
height={item.height || 90}
|
||||
description={item.description}
|
||||
key={i}
|
||||
thumbnailBg={true}
|
||||
@@ -109,11 +112,7 @@ export default component$(() => {
|
||||
class="flex justify-center p-4 w-full bg-[--qwik-dark-purple]
|
||||
bg-gradient-to-r from-[--qwik-dark-purple-bg] via-purple-500 to-[--qwik-dark-purple-bg]"
|
||||
>
|
||||
<img
|
||||
src="/ecosystem/qwik-newsletter.svg"
|
||||
alt="Qwikly Newsletter - Weekly news about Qwik"
|
||||
loading="lazy"
|
||||
/>
|
||||
<ImgQwikNewsletter />
|
||||
</div>
|
||||
<div class="text-2xl font-bold">Qwikly Newsletter - Weekly news about Qwik</div>
|
||||
</div>
|
||||
@@ -328,7 +327,13 @@ export const LibraryGridItem: FunctionComponent<LibraryGridItemProps> = (props)
|
||||
<li class="grid-item">
|
||||
<Link href={props.href}>
|
||||
<div class={{ thumbnail: props.thumbnailBg, cover: props.imgCover }}>
|
||||
<img src={props.imgSrc} alt={props.title} loading="lazy" />
|
||||
<img
|
||||
src={props.imgSrc}
|
||||
alt={props.title}
|
||||
width={props.width || 90}
|
||||
height={props.height || 90}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="text">{props.title}</div>
|
||||
<div class="description">{props.description}</div>
|
||||
@@ -365,6 +370,8 @@ interface LibraryGridItemProps {
|
||||
href: string;
|
||||
description: string;
|
||||
imgSrc?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
imgCover?: boolean;
|
||||
thumbnailBg: boolean;
|
||||
}
|
||||
|
||||
@@ -505,6 +505,8 @@ export const MEDIA = mediaObj({
|
||||
export interface MediaEntry {
|
||||
title: string;
|
||||
href: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
author?: string;
|
||||
language?: string;
|
||||
imgSrc?: string;
|
||||
@@ -519,6 +521,8 @@ export const ThumbnailLink = component$((props: { entry: MediaEntry; imgLoading?
|
||||
<div class="relative">
|
||||
<img
|
||||
src={props.entry.imgSrc ? props.entry.imgSrc : '/ecosystem/qwik-blog-fallback.png'}
|
||||
width={props.entry.width || 360}
|
||||
height={props.entry.height || 200}
|
||||
loading={props.imgLoading === 'eager' ? undefined : 'lazy'}
|
||||
decoding={props.imgLoading === 'eager' ? undefined : 'async'}
|
||||
class="thumbnail"
|
||||
@@ -533,6 +537,8 @@ export const ThumbnailLink = component$((props: { entry: MediaEntry; imgLoading?
|
||||
<div class="flex gap-2">
|
||||
<img
|
||||
src={`https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://${itemURL.host}&size=128`}
|
||||
width={128}
|
||||
height={128}
|
||||
alt={`${itemURL.host.split('.').at(1)} logo`}
|
||||
class="icon"
|
||||
/>
|
||||
@@ -572,15 +578,15 @@ export const Section = component$(
|
||||
</h2>
|
||||
|
||||
<ul class={props.listStyle}>
|
||||
{MEDIA[props.id].map((entry) => {
|
||||
{MEDIA[props.id].map((entry, key) => {
|
||||
if (entry.language && entry.language !== 'en') {
|
||||
entriesInOtherLanguages.push(entry);
|
||||
return null;
|
||||
}
|
||||
if (props.listStyle === 'thumbnails') {
|
||||
return <ThumbnailLink entry={entry} imgLoading={props.imgLoading} />;
|
||||
return <ThumbnailLink key={key} entry={entry} imgLoading={props.imgLoading} />;
|
||||
}
|
||||
return <BulletLink entry={entry} />;
|
||||
return <BulletLink key={key} entry={entry} />;
|
||||
})}
|
||||
</ul>
|
||||
|
||||
@@ -588,11 +594,11 @@ export const Section = component$(
|
||||
<>
|
||||
<h3>Other languages</h3>
|
||||
<ul class={props.listStyle}>
|
||||
{entriesInOtherLanguages.map((entry) =>
|
||||
{entriesInOtherLanguages.map((entry, key) =>
|
||||
props.listStyle === 'thumbnails' ? (
|
||||
<ThumbnailLink entry={entry} imgLoading={props.imgLoading} />
|
||||
<ThumbnailLink key={key} entry={entry} imgLoading={props.imgLoading} />
|
||||
) : (
|
||||
<BulletLink entry={entry} />
|
||||
<BulletLink key={key} entry={entry} />
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
|
||||
@@ -18,7 +18,7 @@ export const onRequest: RequestHandler = async (request) => {
|
||||
request.cacheControl(600);
|
||||
};
|
||||
|
||||
const useProductsLoader = routeLoader$(async () => {
|
||||
export const useProductsLoader = routeLoader$(async () => {
|
||||
const response = await fetchFromShopify(productsQuery());
|
||||
const {
|
||||
data: { node },
|
||||
@@ -26,7 +26,7 @@ const useProductsLoader = routeLoader$(async () => {
|
||||
return mapProducts(node.products.edges);
|
||||
});
|
||||
|
||||
const useCartLoader = routeLoader$(async ({ cookie }) => {
|
||||
export const useCartLoader = routeLoader$(async ({ cookie }) => {
|
||||
const cartId = cookie.get(COOKIE_CART_ID_KEY)?.value;
|
||||
const body = cartId ? checkoutQuery(cartId) : checkoutCreateMutation();
|
||||
const response = await fetchFromShopify(body);
|
||||
|
||||
@@ -16,8 +16,8 @@ export default component$(() => {
|
||||
<div class="purple-gradient" role="presentation" />
|
||||
<div class="blue-gradient" role="presentation" />
|
||||
<div class="flex flex-wrap gap-9 justify-center max-w-[1200px] mb-20 mx-auto">
|
||||
{(appShop.products || []).map((product) => (
|
||||
<ShopProduct product={product} />
|
||||
{(appShop.products || []).map((product, key) => (
|
||||
<ShopProduct key={key} product={product} />
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -41,7 +41,7 @@ interface Portal {
|
||||
name: string;
|
||||
jsx: JSXNode;
|
||||
close: QRL<() => void>;
|
||||
contexts: Array<ContextPair<unknown>>;
|
||||
contexts: Array<ContextPair<any>>;
|
||||
}
|
||||
|
||||
export const PortalProvider = component$(() => {
|
||||
@@ -84,8 +84,8 @@ export const Portal = component$<{ name: string }>(({ name }) => {
|
||||
const myPortals = portals.value.filter((portal) => portal.name === name);
|
||||
return (
|
||||
<>
|
||||
{myPortals.map((portal) => (
|
||||
<div data-portal={name}>
|
||||
{myPortals.map((portal, key) => (
|
||||
<div key={key} data-portal={name}>
|
||||
<WrapJsxInContext jsx={portal.jsx} contexts={portal.contexts} />
|
||||
</div>
|
||||
))}
|
||||
@@ -97,7 +97,10 @@ export const WrapJsxInContext = component$<{
|
||||
jsx: JSXNode;
|
||||
contexts: Array<ContextPair<any>>;
|
||||
}>(({ jsx, contexts }) => {
|
||||
contexts.forEach(({ id, value }) => useContextProvider(id, value));
|
||||
contexts.forEach(({ id, value }) => {
|
||||
// eslint-disable-next-line
|
||||
useContextProvider(id, value);
|
||||
});
|
||||
return (
|
||||
<>
|
||||
{/* Workaround: https://github.com/BuilderIO/qwik/issues/4966 */}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import { $, component$ } from '@builder.io/qwik';
|
||||
import { $, component$, type QRL } from '@builder.io/qwik';
|
||||
import { routeLoader$ } from '@builder.io/qwik-city';
|
||||
import type { InitialValues, SubmitHandler } from '@modular-forms/qwik';
|
||||
import { formAction$, useForm, valiForm$ } from '@modular-forms/qwik';
|
||||
@@ -35,7 +35,7 @@ export default component$(() => {
|
||||
validate: valiForm$(LoginSchema),
|
||||
});
|
||||
|
||||
const handleSubmit: SubmitHandler<LoginForm> = $((values, event) => {
|
||||
const handleSubmit: QRL<SubmitHandler<LoginForm>> = $((values, event) => {
|
||||
// Runs on client
|
||||
console.log(values);
|
||||
});
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
import {
|
||||
type JSXNode,
|
||||
Slot,
|
||||
component$,
|
||||
noSerialize,
|
||||
useContext,
|
||||
useStore,
|
||||
type JSXNode,
|
||||
type NoSerialize,
|
||||
} from '@builder.io/qwik';
|
||||
import { UnderstandingResumability } from './component';
|
||||
import {
|
||||
PortalProvider,
|
||||
Portal,
|
||||
PortalAPI,
|
||||
PortalProvider,
|
||||
} from '../cookbook/portal/portal-provider';
|
||||
import { UnderstandingResumability } from './component';
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
@@ -31,7 +33,7 @@ export const HoverProvider = component$(() => {
|
||||
x: 0,
|
||||
y: 0,
|
||||
currentTarget: null as null | HTMLElement,
|
||||
close: null as null | (() => void),
|
||||
close: null as null | NoSerialize<() => void>,
|
||||
});
|
||||
return (
|
||||
<div
|
||||
@@ -47,7 +49,7 @@ export const HoverProvider = component$(() => {
|
||||
detail: async (jsx: JSXNode) => {
|
||||
if (state.close) return;
|
||||
state.currentTarget = e.target as HTMLElement;
|
||||
state.close = await portal('popup', jsx);
|
||||
state.close = noSerialize(await portal('popup', jsx));
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
@@ -29,8 +29,8 @@ export default component$(() => {
|
||||
Add to list
|
||||
</button>
|
||||
<ul>
|
||||
{store.list.map((item) => (
|
||||
<li>{item}</li>
|
||||
{store.list.map((item, key) => (
|
||||
<li key={key}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
import { component$ } from '@builder.io/qwik';
|
||||
import { type DocumentHead, useLocation } from '@builder.io/qwik-city';
|
||||
import { type DocumentHead } from '@builder.io/qwik-city';
|
||||
import BuilderContentComp from '../components/builder-content';
|
||||
import { Footer } from '../components/footer/footer';
|
||||
import { Header } from '../components/header/header';
|
||||
import HomePageV2 from '../components/home-page-v2';
|
||||
import { QWIK_MODEL, QWIK_PUBLIC_API_KEY } from '../constants';
|
||||
|
||||
export default component$(() => {
|
||||
const showNewDesign = useLocation().url.searchParams.get('render') === 'v2';
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main>
|
||||
{showNewDesign ? (
|
||||
<HomePageV2 />
|
||||
) : (
|
||||
<BuilderContentComp apiKey={QWIK_PUBLIC_API_KEY} model={QWIK_MODEL} tag="main" />
|
||||
)}
|
||||
<BuilderContentComp apiKey={QWIK_PUBLIC_API_KEY} model={QWIK_MODEL} tag="main" />
|
||||
</main>
|
||||
<div class="px-4">
|
||||
<Footer />
|
||||
|
||||
@@ -91,6 +91,7 @@ export default component$(() => {
|
||||
<tbody>
|
||||
{queryData.results.data.map((result: any, i: any) => (
|
||||
<tr
|
||||
key={i}
|
||||
class={{
|
||||
'border-spacing-5': true,
|
||||
'bg-green-400': result.included,
|
||||
@@ -111,8 +112,9 @@ export default component$(() => {
|
||||
<h2>Similar queries</h2>
|
||||
<table class="text-xs table-auto border-collapse border border-slate-500">
|
||||
<tbody>
|
||||
{queryData.similar.map((result: any) => (
|
||||
{queryData.similar.map((result: any, key: string) => (
|
||||
<tr
|
||||
key={key}
|
||||
class={{
|
||||
'border-spacing-5': true,
|
||||
'bg-red-400': result.rate < 0,
|
||||
|
||||
@@ -31,6 +31,7 @@ export default component$(() => {
|
||||
<tbody>
|
||||
{queryData.results.data?.map((result: any, i: any) => (
|
||||
<tr
|
||||
key={i}
|
||||
class={{
|
||||
'bg-red-400': result.rate < 0,
|
||||
'bg-green-400': result.rate > 0,
|
||||
|
||||
@@ -22,8 +22,8 @@ export const TutorialContentHeader = component$(({ store }: TutorialContentHeade
|
||||
}
|
||||
}}
|
||||
>
|
||||
{tutorialSections.map((s) => (
|
||||
<optgroup label={s.title}>
|
||||
{(tutorialSections as Tutorial[]).map((s, key) => (
|
||||
<optgroup key={key} label={s.title}>
|
||||
{s.apps.map((t) => (
|
||||
<option selected={t.id === store.appId} value={t.id} key={t.id}>
|
||||
{t.title}
|
||||
@@ -38,6 +38,11 @@ export const TutorialContentHeader = component$(({ store }: TutorialContentHeade
|
||||
);
|
||||
});
|
||||
|
||||
interface Tutorial {
|
||||
title: string;
|
||||
apps: { id: string; title: string }[];
|
||||
}
|
||||
|
||||
interface TutorialContentHeaderProps {
|
||||
store: TutorialStore;
|
||||
}
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
"install": "^0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@builder.io/qwik": "github:BuilderIo/qwik-build#7521f8e9157e643e7948fa4ae99234e41b56cf95",
|
||||
"@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96",
|
||||
"@builder.io/qwik": "github:BuilderIo/qwik-build#0080db89d43112fea2ed6b281f70f61d00f42edd",
|
||||
"@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#fd39ca1abf09e4016ff738679030b2486ea5f7fc",
|
||||
"@builder.io/qwik-labs": "workspace:*",
|
||||
"@builder.io/vite-plugin-macro": "~0.0.7",
|
||||
"@netlify/edge-functions": "^2.2.0",
|
||||
|
||||
68
pnpm-lock.yaml
generated
68
pnpm-lock.yaml
generated
@@ -220,14 +220,14 @@ importers:
|
||||
specifier: ^0.8.1
|
||||
version: 0.8.1
|
||||
'@builder.io/qwik':
|
||||
specifier: github:BuilderIo/qwik-build#7521f8e9157e643e7948fa4ae99234e41b56cf95
|
||||
version: github.com/BuilderIo/qwik-build/7521f8e9157e643e7948fa4ae99234e41b56cf95(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
specifier: github:BuilderIo/qwik-build#0080db89d43112fea2ed6b281f70f61d00f42edd
|
||||
version: github.com/BuilderIo/qwik-build/0080db89d43112fea2ed6b281f70f61d00f42edd(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik-city':
|
||||
specifier: github:BuilderIo/qwik-city-build#bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96
|
||||
version: github.com/BuilderIo/qwik-city-build/bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0)
|
||||
specifier: github:BuilderIo/qwik-city-build#fd39ca1abf09e4016ff738679030b2486ea5f7fc
|
||||
version: github.com/BuilderIo/qwik-city-build/fd39ca1abf09e4016ff738679030b2486ea5f7fc(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0)
|
||||
'@builder.io/qwik-labs':
|
||||
specifier: github:BuilderIo/qwik-labs-build#5f672e948330926b348cbac8692d9aba6f8f41b2
|
||||
version: github.com/BuilderIo/qwik-labs-build/5f672e948330926b348cbac8692d9aba6f8f41b2
|
||||
specifier: github:BuilderIo/qwik-labs-build#c336fbf3ac62af6b056b8f7b203a6c1d48756f91
|
||||
version: github.com/BuilderIo/qwik-labs-build/c336fbf3ac62af6b056b8f7b203a6c1d48756f91
|
||||
'@builder.io/qwik-react':
|
||||
specifier: 0.5.0
|
||||
version: 0.5.0(@builder.io/qwik@1.2.16)(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0)
|
||||
@@ -245,7 +245,7 @@ importers:
|
||||
version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.28)(react@18.2.0)
|
||||
'@modular-forms/qwik':
|
||||
specifier: ^0.21.0
|
||||
version: 0.21.0(@builder.io/qwik-city@1.2.16-dev20231101222729)(@builder.io/qwik@1.2.16)
|
||||
version: 0.21.0(@builder.io/qwik-city@1.2.16-dev20231102212759)(@builder.io/qwik@1.2.16)
|
||||
'@mui/material':
|
||||
specifier: ^5.14.13
|
||||
version: 5.14.13(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0)
|
||||
@@ -372,13 +372,13 @@ importers:
|
||||
version: 0.7.1
|
||||
'@builder.io/qwik-auth':
|
||||
specifier: 0.1.0
|
||||
version: 0.1.0(@auth/core@0.7.1)(@builder.io/qwik-city@1.2.16-dev20231101222729)(@builder.io/qwik@1.2.16)
|
||||
version: 0.1.0(@auth/core@0.7.1)(@builder.io/qwik-city@1.2.16-dev20231102212759)(@builder.io/qwik@1.2.16)
|
||||
'@libsql/client':
|
||||
specifier: ^0.3.5
|
||||
version: 0.3.5
|
||||
'@modular-forms/qwik':
|
||||
specifier: ^0.12.0
|
||||
version: 0.12.0(@builder.io/qwik-city@1.2.16-dev20231101222729)(@builder.io/qwik@1.2.16)
|
||||
version: 0.12.0(@builder.io/qwik-city@1.2.16-dev20231102212759)(@builder.io/qwik@1.2.16)
|
||||
'@typescript/analyze-trace':
|
||||
specifier: ^0.10.1
|
||||
version: 0.10.1
|
||||
@@ -399,11 +399,11 @@ importers:
|
||||
version: 0.13.0
|
||||
devDependencies:
|
||||
'@builder.io/qwik':
|
||||
specifier: github:BuilderIo/qwik-build#7521f8e9157e643e7948fa4ae99234e41b56cf95
|
||||
version: github.com/BuilderIo/qwik-build/7521f8e9157e643e7948fa4ae99234e41b56cf95(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
specifier: github:BuilderIo/qwik-build#0080db89d43112fea2ed6b281f70f61d00f42edd
|
||||
version: github.com/BuilderIo/qwik-build/0080db89d43112fea2ed6b281f70f61d00f42edd(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik-city':
|
||||
specifier: github:BuilderIo/qwik-city-build#bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96
|
||||
version: github.com/BuilderIo/qwik-city-build/bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0)
|
||||
specifier: github:BuilderIo/qwik-city-build#fd39ca1abf09e4016ff738679030b2486ea5f7fc
|
||||
version: github.com/BuilderIo/qwik-city-build/fd39ca1abf09e4016ff738679030b2486ea5f7fc(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0)
|
||||
'@builder.io/qwik-labs':
|
||||
specifier: workspace:*
|
||||
version: link:../qwik-labs
|
||||
@@ -1342,7 +1342,7 @@ packages:
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/@builder.io/qwik-auth@0.1.0(@auth/core@0.7.1)(@builder.io/qwik-city@1.2.16-dev20231101222729)(@builder.io/qwik@1.2.16):
|
||||
/@builder.io/qwik-auth@0.1.0(@auth/core@0.7.1)(@builder.io/qwik-city@1.2.16-dev20231102212759)(@builder.io/qwik@1.2.16):
|
||||
resolution: {integrity: sha512-uwwVbam6yQs9evtmof/+SpRT7DzoxD+2DSwsndGcm9JBU4Sh1xMyzll6F9QbivKVboglx+4X05OzJG7QTttWMQ==}
|
||||
engines: {node: '>=16.8.0 <18.0.0 || >=18.11'}
|
||||
peerDependencies:
|
||||
@@ -1351,8 +1351,8 @@ packages:
|
||||
'@builder.io/qwik-city': '>=0.6.0'
|
||||
dependencies:
|
||||
'@auth/core': 0.7.1
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/7521f8e9157e643e7948fa4ae99234e41b56cf95(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik-city': github.com/BuilderIo/qwik-city-build/bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0)
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/0080db89d43112fea2ed6b281f70f61d00f42edd(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik-city': github.com/BuilderIo/qwik-city-build/fd39ca1abf09e4016ff738679030b2486ea5f7fc(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0)
|
||||
dev: false
|
||||
|
||||
/@builder.io/qwik-city@1.2.13(rollup@3.26.3):
|
||||
@@ -1381,7 +1381,7 @@ packages:
|
||||
react: '>=18.0.0'
|
||||
react-dom: '>=18.0.0'
|
||||
dependencies:
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/7521f8e9157e643e7948fa4ae99234e41b56cf95(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/0080db89d43112fea2ed6b281f70f61d00f42edd(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@types/react': 18.2.28
|
||||
'@types/react-dom': 18.2.13
|
||||
react: 18.2.0
|
||||
@@ -1405,7 +1405,7 @@ packages:
|
||||
'@builder.io/qwik': '>=1.0.0'
|
||||
undici: ^5.14.0
|
||||
dependencies:
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/7521f8e9157e643e7948fa4ae99234e41b56cf95(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/0080db89d43112fea2ed6b281f70f61d00f42edd(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
undici: 5.26.0
|
||||
dev: true
|
||||
|
||||
@@ -2817,24 +2817,24 @@ packages:
|
||||
resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
|
||||
dev: true
|
||||
|
||||
/@modular-forms/qwik@0.12.0(@builder.io/qwik-city@1.2.16-dev20231101222729)(@builder.io/qwik@1.2.16):
|
||||
/@modular-forms/qwik@0.12.0(@builder.io/qwik-city@1.2.16-dev20231102212759)(@builder.io/qwik@1.2.16):
|
||||
resolution: {integrity: sha512-IJi5Uvm1Z1tJZLOpYM8jWza40Viac6tblnMre0pdrslVv7tW3MnXFgQgO539YksooOsn1Jn1KjVUVmhiMuXXuA==}
|
||||
peerDependencies:
|
||||
'@builder.io/qwik': ^1.0.0
|
||||
'@builder.io/qwik-city': ^1.0.0
|
||||
dependencies:
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/7521f8e9157e643e7948fa4ae99234e41b56cf95(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik-city': github.com/BuilderIo/qwik-city-build/bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0)
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/0080db89d43112fea2ed6b281f70f61d00f42edd(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik-city': github.com/BuilderIo/qwik-city-build/fd39ca1abf09e4016ff738679030b2486ea5f7fc(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0)
|
||||
dev: false
|
||||
|
||||
/@modular-forms/qwik@0.21.0(@builder.io/qwik-city@1.2.16-dev20231101222729)(@builder.io/qwik@1.2.16):
|
||||
/@modular-forms/qwik@0.21.0(@builder.io/qwik-city@1.2.16-dev20231102212759)(@builder.io/qwik@1.2.16):
|
||||
resolution: {integrity: sha512-PJnGnXfAI9JStXZbgAByGOsTTuSkVhjb8FRDgrdHa33zoHOvC5PkA2ymxN7JK1LodKd4FC3c7ZlFv5goYFCKDA==}
|
||||
peerDependencies:
|
||||
'@builder.io/qwik': ^1.2.4
|
||||
'@builder.io/qwik-city': ^1.2.4
|
||||
dependencies:
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/7521f8e9157e643e7948fa4ae99234e41b56cf95(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik-city': github.com/BuilderIo/qwik-city-build/bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0)
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/0080db89d43112fea2ed6b281f70f61d00f42edd(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik-city': github.com/BuilderIo/qwik-city-build/fd39ca1abf09e4016ff738679030b2486ea5f7fc(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0)
|
||||
dev: true
|
||||
|
||||
/@mui/base@5.0.0-beta.19(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0):
|
||||
@@ -5562,7 +5562,7 @@ packages:
|
||||
peerDependencies:
|
||||
'@builder.io/qwik': '*'
|
||||
dependencies:
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/7521f8e9157e643e7948fa4ae99234e41b56cf95(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
'@builder.io/qwik': github.com/BuilderIo/qwik-build/0080db89d43112fea2ed6b281f70f61d00f42edd(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0)
|
||||
dev: true
|
||||
|
||||
/@vercel/nft@0.22.6(supports-color@9.4.0):
|
||||
@@ -18833,9 +18833,9 @@ packages:
|
||||
/zwitch@2.0.4:
|
||||
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
|
||||
|
||||
github.com/BuilderIo/qwik-build/7521f8e9157e643e7948fa4ae99234e41b56cf95(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0):
|
||||
resolution: {tarball: https://codeload.github.com/BuilderIo/qwik-build/tar.gz/7521f8e9157e643e7948fa4ae99234e41b56cf95}
|
||||
id: github.com/BuilderIo/qwik-build/7521f8e9157e643e7948fa4ae99234e41b56cf95
|
||||
github.com/BuilderIo/qwik-build/0080db89d43112fea2ed6b281f70f61d00f42edd(@types/node@20.8.4)(terser@5.21.0)(undici@5.26.0):
|
||||
resolution: {tarball: https://codeload.github.com/BuilderIo/qwik-build/tar.gz/0080db89d43112fea2ed6b281f70f61d00f42edd}
|
||||
id: github.com/BuilderIo/qwik-build/0080db89d43112fea2ed6b281f70f61d00f42edd
|
||||
name: '@builder.io/qwik'
|
||||
version: 1.2.16
|
||||
engines: {node: '>=16.8.0 <18.0.0 || >=18.11'}
|
||||
@@ -18855,11 +18855,11 @@ packages:
|
||||
- sugarss
|
||||
- terser
|
||||
|
||||
github.com/BuilderIo/qwik-city-build/bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0):
|
||||
resolution: {tarball: https://codeload.github.com/BuilderIo/qwik-city-build/tar.gz/bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96}
|
||||
id: github.com/BuilderIo/qwik-city-build/bc4e963e1243fd2a6d74dcc5fe5d12fd69a8ac96
|
||||
github.com/BuilderIo/qwik-city-build/fd39ca1abf09e4016ff738679030b2486ea5f7fc(@types/node@20.8.4)(rollup@3.26.3)(terser@5.21.0):
|
||||
resolution: {tarball: https://codeload.github.com/BuilderIo/qwik-city-build/tar.gz/fd39ca1abf09e4016ff738679030b2486ea5f7fc}
|
||||
id: github.com/BuilderIo/qwik-city-build/fd39ca1abf09e4016ff738679030b2486ea5f7fc
|
||||
name: '@builder.io/qwik-city'
|
||||
version: 1.2.16-dev20231101222729
|
||||
version: 1.2.16-dev20231102212759
|
||||
engines: {node: '>=16.8.0 <18.0.0 || >=18.11'}
|
||||
dependencies:
|
||||
'@mdx-js/mdx': 2.3.0
|
||||
@@ -18882,8 +18882,8 @@ packages:
|
||||
- supports-color
|
||||
- terser
|
||||
|
||||
github.com/BuilderIo/qwik-labs-build/5f672e948330926b348cbac8692d9aba6f8f41b2:
|
||||
resolution: {tarball: https://codeload.github.com/BuilderIo/qwik-labs-build/tar.gz/5f672e948330926b348cbac8692d9aba6f8f41b2}
|
||||
github.com/BuilderIo/qwik-labs-build/c336fbf3ac62af6b056b8f7b203a6c1d48756f91:
|
||||
resolution: {tarball: https://codeload.github.com/BuilderIo/qwik-labs-build/tar.gz/c336fbf3ac62af6b056b8f7b203a6c1d48756f91}
|
||||
name: '@builder.io/qwik-labs'
|
||||
version: 0.0.1
|
||||
engines: {node: '>=16.8.0 <18.0.0 || >=18.11'}
|
||||
|
||||
@@ -98,7 +98,8 @@
|
||||
"starters/dev-server.ts",
|
||||
"packages/qwik-react/vite",
|
||||
"@types/deno.d.ts",
|
||||
"@types/bun.d.ts"
|
||||
"@types/bun.d.ts",
|
||||
"types.d.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"packages/create-qwik/dist",
|
||||
|
||||
12
types.d.ts
vendored
Normal file
12
types.d.ts
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
declare module '*?jsx' {
|
||||
const Cmp: import('./packages/qwik/').FunctionComponent<
|
||||
Omit<
|
||||
import('./packages/qwik/').QwikIntrinsicElements['img'],
|
||||
'src' | 'width' | 'height' | 'srcSet'
|
||||
>
|
||||
>;
|
||||
export default Cmp;
|
||||
export const width: number;
|
||||
export const height: number;
|
||||
export const srcSet: string;
|
||||
}
|
||||
Reference in New Issue
Block a user