docs: improve docs for AI (QwikDev#3733)

packages/docs/.env

@@ -1,3 +1,3 @@
 VITE_ALGOLIA_APP_ID=X0ISHY6M1I
 VITE_ALGOLIA_SEARCH_KEY=33e17ca2559e66c62577ab1d6c195a36
-VITE_ALGOLIA_INDEX=qwik
+VITE_ALGOLIA_INDEX=qwik

packages/docs/.gitignore

@@ -34,3 +34,5 @@ lerna-debug.log*
 *.sw?
 
 # Cloudflare
+
+*.local

packages/docs/src/global.css

@@ -49,6 +49,11 @@
   -webkit-touch-callout: none;
 }
 
+:root body {
+  --docsearch-modal-width: 600px;
+  --docsearch-modal-height: 800px;
+}
+
 :root {
   color-scheme: light;
   --header-height: 80px;
@@ -313,3 +318,131 @@ code .word {
   padding: 0.25rem;
   border-radius: 0.25rem;
 }
+
+.ai-button {
+  background: var(--docsearch-hit-background);
+  border-radius: 4px;
+  box-shadow: var(--docsearch-hit-shadow);
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ai-button > button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding-left: 12px;
+  padding: 15px;
+}
+
+.ai-li[aria-selected='true'] button {
+  background-color: var(--docsearch-highlight-color);
+  color: white;
+}
+
+.qwikgpt-box {
+  background: white;
+  padding: 10px;
+  margin: 0;
+  font-weight: 100;
+  font-size: 14px;
+}
+
+.qwikgpt-box p {
+  margin: 10px 0;
+}
+
+.qwikgpt-box ol,
+.qwikgpt-box ul {
+  margin: 10px 15px 0;
+  list-style: auto;
+}
+
+.qwikgpt-box li {
+  font-weight: initial;
+}
+
+.qwikgpt-box code:not(.language-tsx) {
+  background: #5468ff5c;
+  padding: 2px 5px;
+  border-radius: 5px;
+}
+
+.qwikgpt-box a {
+  color: var(--interactive-text-color);
+  text-decoration: underline;
+}
+
+.qwikgpt-box pre {
+  font-size: 12px !important;
+  border-radius: 12px;
+  margin: 10px 0;
+}
+
+.indeterminate-progress-bar {
+  /* Color */
+  background-color: #d1d5db;
+
+  /* Rounded border */
+  border-radius: 9999px;
+
+  /* Size */
+  height: 0.5rem;
+
+  position: relative;
+  overflow: hidden;
+}
+
+.indeterminate-progress-bar__progress {
+  /* Color */
+  background-color: #3b82f6;
+
+  /* Rounded border */
+  border-radius: 9999px;
+
+  /* Absolute position */
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  width: 50%;
+
+  /* Move the bar infinitely */
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-name: indeterminate-progress-bar;
+}
+
+@keyframes indeterminate-progress-bar {
+  from {
+    left: -50%;
+  }
+  to {
+    left: 100%;
+  }
+}
+
+.ai-rate {
+  text-align: right;
+  margin-top: 20px;
+  border-top: 1px solid #cdcdcd;
+  padding: 10px 13px 0 0;
+  font-size: 12px;
+}
+
+.ai-rate button {
+  padding: 0px 18px;
+  font-size: 18px;
+  border-radius: 10px;
+  margin: 0 5px;
+}
+
+.ai-rate button.rate-good {
+  background: #c2ffc6;
+  border: 2px solid green;
+}
+
+.ai-rate button.rate-bad {
+  background: #ffc2c2;
+  border: 2px solid red;
+}

packages/docs/src/routes/docs/(qwik)/components/slots/index.mdx

@@ -20,13 +20,7 @@ This concept has different names in different frameworks:
 
 - In Angular is called Content Projection
 - In React, it's the `children` of the props
-- In Vue, and web components it's called slots as well
-
-Slots in Qwik are symbolic, allowing Qwik to render parents and children in perfect isolation, allowing to render the parent component without ever rerender the childrens and vice versa.
-
-> Note: Because slots are symbolic, the children can NOT be read, or transformed by the components, like it's possible in React.
-
-## Usage
+- In Web components it's [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) as well
 
 The main API to achieve this is the `<Slot>` component, exported in `@builder.io/qwik`:
 
@@ -44,30 +38,33 @@ export const Button = component$(() => {
 
 The `<Slot>` component is a placeholder for the children of the component. The `<Slot>` component will be replaced by the children of the component, when rendering the app.
 
-Let's see the usage of this component:
-
 ```tsx
 <Button>
   {... this will be placed where the <Slot> is used inside the Button component ...}
 </Button>
 ```
 
+> Slots in Qwik are symbolic, allowing Qwik to render parents and children in perfect isolation, which is good for performance.
+
+> Because slots are symbolic, the children can NOT be read, or transformed by the components.
+
+
 ### Named slots
 
 The `Slot` component can be used multiple times in the same component, as long as it has a different `name` property:
 
-```tsx
+```tsx {7,11} /start/#a /end/#c
 import { Slot, component$ } from '@builder.io/qwik';
 
 export const Button = component$(() => {
   return (
     <button>
       <div>
-        <Slot name="start" /> {/* "start" slot */}
+        <Slot name="start" />
       </div>
       <Slot /> {/* default slot */}
       <div>
-        <Slot name="end" /> {/* "end" slot */}
+        <Slot name="end" />
       </div>
     </button>
   );
@@ -76,7 +73,7 @@ export const Button = component$(() => {
 
 Now, when consuming the `<Button>` component, we can pass children and specify in which slot they should be placed, using the `q:slot` attribute:
 
-```tsx
+```tsx /q:slot/ /start/#a /end/#c
 <Button>
   <div q:slot="start">Start</div>
   <div>Default</div>
@@ -85,32 +82,14 @@ Now, when consuming the `<Button>` component, we can pass children and specify i
 </Button>
 ```
 
-The result will be:
-
-```html
-<button>
-  <div>
-    <!-- Slot name=start -->
-    <div q:slot="start">Start</div>
-  </div>
-  <!-- Slot (default) -->
-  <div>Default</div>
-  <div>
-    <!-- Slot name=end -->
-    <div q:slot="end">End</div>
-    <icon q:slot="end"></icon>
-  </div>
-</button>
-```
-
 Notice that:
 
 - If `q:slot` is not specified or it's an empty string, the content will be projected into the default `<Slot>`, i.e. the `<Slot>` without a `name` property.
 - Multiple `q:slot="end"` attributes coalesce items together in the content projection.
 
-### Not projecting content
+### Unprojected content
 
-Qwik keeps all content around, even if not projected. This is because the content could be projected in the future.
+Qwik keeps all content around, even if not projected. This is because the content could be projected in the future. When projected content does not match any `<Slot>` component, the content is moved into an inert `<q:template>` element.
 
 ```tsx
 import { component$ } from '@builder.io/qwik';
@@ -213,8 +192,6 @@ export const MyApp = component$(() => {
 
 The `Collapsible` component will always display the title, but the body of the text will only display if `store.isOpen` is `true`.
 
-### Rendered output
-
 The above example would render into this HTML if `isOpen===true`:
 
 ```html

packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx

@@ -16,6 +16,8 @@ contributors:
 
 # Styles
 
+Qwik does not enforce a specific styling approach, you can style your Qwik app using any method you prefer, such as CSS, CSS-in-JS, CSS modules...
+
 ## CSS Modules
 
 Qwik supports [CSS Modules](https://github.com/css-modules/css-modules) out of the box thanks to [Vite](https://vitejs.dev/guide/features.html#css-modules).
@@ -113,59 +115,42 @@ export const Cmp = component$(() => {
 });
 ```
 
-## Per-component styles
-
-Qwik provided built-in support for per-component styles, this technology allows Qwik to only inject the provided styles only if the component is used in the current page, this can be achieved by using the `useStyles$()` and `useStylesScoped$()` hook.
-
-### `useStyles$()`
-
-A lazy-loadable reference to component's styles.
+## Scoped CSS
 
-Component styles allow Qwik to lazy load the style information for the component only when needed. (And avoid double loading it in case of SSR hydration.)
+To use scoped CSS, you can use the `useStyleScoped$()` hook exported from `@builder.io/qwik`.
 
-```tsx
-import { useStyles$, component$ } from '@builder.io/qwik';
-import styles from './code-block.css?inline';
+```tsx {4-8} title="src/components/MyComponent/MyComponent.tsx"
+import { component$, useStyleScoped$ } from '@builder.io/qwik';
 
-export const CmpStyles = component$(() => {
-  useStyles$(styles);
-  return <span class="my-text">Some text</span>;
+export default component$(() => {
+  useStyleScoped$(`
+    .container {
+      background-color: red;
+    }
+  `);
+  return <div class="container">Hello world</div>;
 });
 ```
 
-```css
-// code-block.css
-.my-text {
-  color: red;
+You can also import an external CSS file. For that you need to add the `?inline` query parameter to the import of the CSS file, and pass the default export of the CSS file to the `useStyleScoped$()` hook.
+
+```css title="src/components/MyComponent/MyComponent.css"
+.container {
+  background-color: red;
 }
 ```
 
-> Notice that in order to import CSS as a string in Vite, you need to add the `?inline` query parameter to the import, like this: `import styles from './code-block.css?inline';`
-
-### `useStylesScoped$`
+```tsx {3,6} title="src/components/MyComponent/MyComponent.tsx"
+import { component$, useStyleScoped$ } from '@builder.io/qwik';
 
-In previous sections, we have discussed how styles can be loaded lazily as they are needed using the [`useStyles$()`](/docs/(qwik)/components/styles/index.mdx#usestyles) hook.
-Browser styles are global and apply to all DOM elements, for this reason, Qwik also provides a way to load styles that are specific to a specific component.
-This is achieved by generating a unique class for each component and then inserting that unique class id into the stylesheet.
+import styles from './MyComponent.css?inline';
 
-```tsx
-import { useStylesScoped$, component$ } from '@builder.io/qwik';
-import styles from './code-block.css?inline';
-
-export const CmpStyles = component$(() => {
-  useStylesScoped$(styles);
-  return <span class="my-text">Some text</span>;
+export default component$(() => {
+  useStyleScoped$(styles);
+  return <div class="container">Hello world</div>;
 });
 ```
 
-```css
-// code-block.css
-.my-text {
-  color: blue;
-}
-```
-
-> Please note that you need to add `?inline` to your styles import.
 
 ### `:global()` selector
 
@@ -197,6 +182,33 @@ This will render a css selector of `.list.⭐️8vzca0-0 > *:nth-child(3)`, allo
 
 > Beware that this may have unintended effects that cascade down your component tree.
 
+
+## `useStyles$()`
+
+A lazy-loadable reference to component's styles.
+
+Component styles allow Qwik to lazy load the style information for the component only when needed. (And avoid double loading it in case of SSR hydration.)
+
+```tsx
+import { useStyles$, component$ } from '@builder.io/qwik';
+import styles from './code-block.css?inline';
+
+export const CmpStyles = component$(() => {
+  useStyles$(styles);
+  return <span class="my-text">Some text</span>;
+});
+```
+
+```css
+// code-block.css
+.my-text {
+  color: red;
+}
+```
+
+> Notice that in order to import CSS as a string in Vite, you need to add the `?inline` query parameter to the import, like this: `import styles from './code-block.css?inline';`
+
+
 ## Preprocessors
 
 ### `.scss`, `.sass`, `.less`, `.styl`, `.stylus`