Merge pull request #412 from shairez:pr-fix-mdx-examples

feat(docs): reduce duplicate code examples

Author: shairez

apps/website/.eslintrc.json

@@ -1,9 +1,9 @@
 {
   "extends": [
+    "../../.eslintrc.json",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:qwik/recommended",
-    "../../.eslintrc.json"
+    "plugin:qwik/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -12,9 +12,7 @@
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
-    },
-    "parser": "@typescript-eslint/parser",
-    "tsconfigRootDir": "__dirname"
+    }
   },
   "plugins": ["@typescript-eslint"],
   "ignorePatterns": ["!**/*"],

apps/website/src/_state/root-store-context-id.ts renamed to apps/website/src/_state/app-state-context-id.ts

@@ -1,4 +1,4 @@
 import { createContextId } from '@builder.io/qwik';
 import { AppState } from './app-state.type';
 
-export const ROOT_STORE_CONTEXT_ID = createContextId<AppState>('app-state-context-id');
+export const APP_STATE_CONTEXT_ID = createContextId<AppState>('app-state-context-id');

apps/website/src/_state/app-state.type.ts

@@ -1,5 +1,9 @@
+import { NoSerialize } from '@builder.io/qwik';
+import type { Highlighter } from 'shiki';
+
 export interface AppState {
   mode: 'light' | 'dark';
+  highlighter?: NoSerialize<Highlighter>;
   isSidebarOpened: boolean;
   featureFlags?: {
     showFluffy?: boolean;

apps/website/src/_state/use-app-state.ts

@@ -0,0 +1,7 @@
+import { useContext } from '@builder.io/qwik';
+import { APP_STATE_CONTEXT_ID } from './app-state-context-id';
+
+export const useAppState = () => {
+  const appState = useContext(APP_STATE_CONTEXT_ID);
+  return appState;
+};

apps/website/src/_state/use-root-store.ts

@@ -35,6 +35,16 @@
     --color-ring: 263 84% 25%;
 
     --border-radius: 0.375rem;
+
+    --shiki-color-text: theme('colors.white');
+    --shiki-token-constant: theme('colors.emerald.300');
+    --shiki-token-string: theme('colors.emerald.300');
+    --shiki-token-comment: theme('colors.zinc.500');
+    --shiki-token-keyword: theme('colors.sky.300');
+    --shiki-token-parameter: theme('colors.pink.300');
+    --shiki-token-function: theme('colors.violet.300');
+    --shiki-token-string-expression: theme('colors.emerald.300');
+    --shiki-token-punctuation: theme('colors.zinc.200');
   }
 
   .dark {

apps/website/src/global.css

@@ -12,8 +12,8 @@ import {
 } from '@builder.io/qwik-city';
 import { RouterHead } from './routes/_components/router-head/router-head';
 
+import { APP_STATE_CONTEXT_ID } from './_state/app-state-context-id';
 import { AppState } from './_state/app-state.type';
-import { ROOT_STORE_CONTEXT_ID } from './_state/root-store-context-id';
 import { THEME_STORAGE_KEY, useCSSTheme } from './_state/use-css-theme';
 import { OLD_APP_STATE_CONTEXT_ID } from './constants';
 import globalStyles from './global.css?inline';
@@ -28,22 +28,22 @@ export default component$(() => {
    */
   useStyles$(globalStyles);
 
-  const rootStore = useStore<AppState>({
+  const appState = useStore<AppState>({
     mode: 'light',
     isSidebarOpened: false,
     featureFlags: {
       showFluffy: import.meta.env.DEV,
     },
   });
 
-  useContextProvider(ROOT_STORE_CONTEXT_ID, rootStore);
+  useContextProvider(APP_STATE_CONTEXT_ID, appState);
 
-  useVisibleTask$(() => {
+  useVisibleTask$(async () => {
     const userStoredTheme = localStorage.getItem(THEME_STORAGE_KEY);
     if (userStoredTheme) {
-      rootStore.mode = userStoredTheme === 'dark' ? 'dark' : 'light';
+      appState.mode = userStoredTheme === 'dark' ? 'dark' : 'light';
     } else {
-      rootStore.mode = window.matchMedia('(prefers-color-scheme: dark)').matches
+      appState.mode = window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light';
     }
@@ -55,7 +55,7 @@ export default component$(() => {
   });
   useContextProvider(OLD_APP_STATE_CONTEXT_ID, state);
 
-  useCSSTheme(rootStore);
+  useCSSTheme(appState);
 
   return (
     <QwikCityProvider>
@@ -67,7 +67,7 @@ export default component$(() => {
       <body
         lang="en"
         class={{
-          'overflow-y-hidden': rootStore.isSidebarOpened,
+          'overflow-y-hidden': appState.isSidebarOpened,
         }}
       >
         <RouterOutlet />

apps/website/src/root.tsx

@@ -2,8 +2,9 @@ import { $, component$, useComputed$ } from '@builder.io/qwik';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { version as headlessVersion } from '../../../../../../packages/kit-headless/package.json';
 // eslint-disable-next-line @nx/enforce-module-boundaries
+import { useLocation } from '@builder.io/qwik-city';
 import { KitName } from 'apps/website/src/_state/kit-name.type';
-import { useRootStore } from 'apps/website/src/_state/use-root-store';
+import { useAppState } from 'apps/website/src/_state/use-app-state';
 import { version as fluffyVersion } from '../../../../../../packages/kit-fluffy/package.json';
 import { useSelectedKit } from '../../docs/use-selected-kit';
 import { CloseIcon } from '../icons/CloseIcon';
@@ -12,7 +13,6 @@ import { MenuIcon } from '../icons/MenuIcon';
 import { MoonIcon } from '../icons/MoonIcon';
 import { SunIcon } from '../icons/SunIcon';
 import { Logo } from '../icons/logo';
-import { useLocation } from '@builder.io/qwik-city';
 
 export interface HeaderProps {
   showVersion?: boolean;
@@ -21,7 +21,7 @@ export interface HeaderProps {
 
 export default component$(
   ({ showVersion = false, showBottomBorder = false }: HeaderProps) => {
-    const rootStore = useRootStore();
+    const rootStore = useAppState();
     const selectedKitSig = useSelectedKit();
     const location = useLocation();
 

apps/website/src/routes/_components/header/header.tsx

@@ -0,0 +1,10 @@
+import { getHighlighter, type Highlighter } from 'shiki';
+
+let highlighter: Highlighter;
+export async function getOrCreateHighlighter() {
+  if (highlighter) {
+    return highlighter;
+  }
+  highlighter = await getHighlighter({ theme: 'css-variables' });
+  return highlighter;
+}

apps/website/src/routes/docs/_components/highlight/get-or-create-highlighter.ts

@@ -0,0 +1,49 @@
+import { QwikIntrinsicElements, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import { OmitSignalClass } from '@qwik-ui/type-utils';
+import { getOrCreateHighlighter } from './get-or-create-highlighter';
+
+export type HighlightProps = OmitSignalClass<QwikIntrinsicElements['pre']> & {
+  code: string;
+  splitCommentStart?: string;
+  splitCommentEnd?: string;
+};
+
+export const Highlight = component$(
+  ({
+    code,
+    splitCommentStart = '{/* start */}',
+    splitCommentEnd = '{/* end */}',
+    ...props
+  }: HighlightProps) => {
+    const codeSig = useSignal('');
+
+    useTask$(async function createHighlightedCode() {
+      const highlighter = await getOrCreateHighlighter();
+      let modifiedCode: string = code;
+
+      let partsOfCode = modifiedCode.split(splitCommentStart);
+      if (partsOfCode.length > 1) {
+        modifiedCode = partsOfCode[1];
+      }
+
+      partsOfCode = modifiedCode.split(splitCommentEnd);
+      if (partsOfCode.length > 1) {
+        modifiedCode = partsOfCode[0];
+      }
+
+      codeSig.value = highlighter.codeToHtml(modifiedCode, { lang: 'tsx' });
+    });
+
+    return (
+      <pre
+        {...props}
+        class={[
+          'theme-atom-one-dark shadow-3xl tab-size relative h-full max-w-full overflow-hidden text-sm',
+          props.class,
+        ]}
+      >
+        <code dangerouslySetInnerHTML={codeSig.value} />
+      </pre>
+    );
+  },
+);