Merge pull request #672 from thejackshelton/shiki-utf8

fix: docs examples

Author: thejackshelton

apps/website/src/components/highlight/highlight.tsx

@@ -1,7 +1,16 @@
-import { ClassList, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import {
+  ClassList,
+  PropsOf,
+  component$,
+  useSignal,
+  useTask$,
+  useVisibleTask$,
+  $,
+} from '@builder.io/qwik';
 import { CodeCopy } from '../code-copy/code-copy';
 import { getHighlighterCore } from 'shiki';
 import { cn } from '@qwik-ui/utils';
+import { isDev } from '@builder.io/qwik/build';
 
 export type HighlightProps = PropsOf<'div'> & {
   code: string;
@@ -22,8 +31,7 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
-    // eslint-disable-next-line qwik/no-use-visible-task
-    useTask$(async function createHighlightedCode() {
+    const addShiki$ = $(async () => {
       let modifiedCode: string = code;
 
       let partsOfCode = modifiedCode.split(splitCommentStart);
@@ -59,6 +67,22 @@ export const Highlight = component$(
       codeSig.value = str.toString();
     });
 
+    useTask$(async function createHighlightedCode() {
+      if (!isDev) {
+        await addShiki$();
+      }
+    });
+
+    // eslint-disable-next-line qwik/no-use-visible-task
+    useVisibleTask$(
+      async () => {
+        if (isDev) {
+          await addShiki$();
+        }
+      },
+      { strategy: 'document-ready' },
+    );
+
     return (
       <div class="code-example relative max-h-[31.25rem]">
         <CodeCopy

apps/website/src/routes/docs/headless/accordion/examples/custom-heading.tsx

@@ -11,7 +11,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot>
+        <AccordionRoot class="w-full">
           <AccordionItem class="border-b">
             <AccordionHeader as="h4">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/default-value.tsx

@@ -11,7 +11,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot>
+        <AccordionRoot class="w-full">
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/disabled.tsx

@@ -12,7 +12,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot>
+        <AccordionRoot class="w-full">
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/dynamic.tsx

@@ -53,7 +53,7 @@ export default component$(({ itemsLength = 3 }: DynamicAccordionProps) => {
           </label>
         </div>
 
-        <AccordionRoot>
+        <AccordionRoot class="w-full">
           {itemStore.map(({ label, id }, index) => {
             return (
               <AccordionItem id={`${id}`} key={id} class="border-b">

apps/website/src/routes/docs/headless/accordion/examples/focused-index.tsx

@@ -14,6 +14,7 @@ export default component$(() => {
     <>
       <div class="flex w-full flex-col items-center gap-4">
         <AccordionRoot
+          class="w-full"
           onFocusIndexChange$={(index: number) => {
             focusedIndexSig.value = index;
           }}

apps/website/src/routes/docs/headless/accordion/examples/hero.tsx

@@ -12,7 +12,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot animated enhance={true}>
+        <AccordionRoot class="w-full" animated enhance={true}>
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/multi.tsx

@@ -12,7 +12,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot collapsible animated behavior="multi">
+        <AccordionRoot class="w-full" collapsible animated behavior="multi">
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm  py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/non-collapsible.tsx

@@ -13,7 +13,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot animated collapsible={false}>
+        <AccordionRoot class="w-full" animated collapsible={false}>
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm  py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/selected-index.tsx

@@ -14,6 +14,7 @@ export default component$(() => {
     <>
       <div class="flex w-full flex-col items-center gap-4">
         <AccordionRoot
+          class="w-full"
           onSelectedIndexChange$={(index: number) => {
             selectedIndexSig.value = index;
           }}