Merge pull request #524 from maiieul/provider-meta-glob

refactor/docs: Add Showcase & CodeSnippet components w/ import.meta.glob pattern for .mdx routes

Author: thejackshelton

apps/website/src/components/code-snippet/code-snippet.tsx

@@ -0,0 +1,42 @@
+import { QwikIntrinsicElements, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
+import { isDev } from '@builder.io/qwik/build';
+import { Highlight } from '../highlight/highlight';
+
+type CodeSnippetProps = QwikIntrinsicElements['div'] & {
+  name: string;
+};
+
+const rawCodeSnippets: any = import.meta.glob('/src/routes/docs/**/**/snippets/*', {
+  as: 'raw',
+  eager: isDev ? false : true,
+});
+
+export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
+  const location = useLocation();
+
+  let lang = '.tsx';
+
+  if (name.endsWith('.tsx')) lang = '';
+  if (name.endsWith('.ts')) lang = '';
+  if (name.endsWith('.css')) lang = '';
+
+  const snippetPath = `/src/routes${location.url.pathname}snippets/${name}${lang}`;
+
+  const CodeSnippet = useSignal<string>();
+
+  useTask$(async () => {
+    if (isDev) {
+      CodeSnippet.value = await rawCodeSnippets[snippetPath]();
+    } else {
+      CodeSnippet.value = rawCodeSnippets[snippetPath];
+    }
+  });
+  return (
+    <div
+      class={`shadow-3xl shadow-light-medium dark:shadow-dark-medium mb-6 rounded-xl border-2 border-slate-200 dark:border-slate-400`}
+    >
+      <Highlight code={CodeSnippet.value || ''} />
+    </div>
+  );
+});

apps/website/src/components/mdx-components/index.tsx

@@ -5,7 +5,8 @@ import { AnatomyTable } from '../anatomy-table/anatomy-table';
 import { APITable } from '../api-table/api-table';
 import { KeyboardInteractionTable } from '../keyboard-interaction-table/keyboard-interaction-table';
 import { CodeCopy } from '../code-copy/code-copy';
-import { statusByComponent } from '~/_state/component-statuses';
+import { Showcase } from '../show-example/show-example';
+import { CodeSnippet } from '../code-snippet/code-snippet';
 
 export const components: Record<string, any> = {
   pre: component$<
@@ -41,5 +42,6 @@ export const components: Record<string, any> = {
   APITable,
   KeyboardInteractionTable,
   StatusBanner,
-  statusByComponent: statusByComponent,
+  Showcase,
+  CodeSnippet,
 };

apps/website/src/components/show-example/show-example.css

@@ -0,0 +1,9 @@
+.dark .previewCodeExampleSelectedTab {
+  background-color: var(--qwikui-purple-600);
+  font-weight: 600;
+}
+
+.previewCodeExampleSelectedTab {
+  background-color: var(--qwikui-blue-500);
+  font-weight: 600;
+}

apps/website/src/components/show-example/show-example.tsx

@@ -0,0 +1,80 @@
+import {
+  Component,
+  QwikIntrinsicElements,
+  component$,
+  useSignal,
+  useStyles$,
+  useTask$,
+} from '@builder.io/qwik';
+import styles from './show-example.css?inline';
+
+import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
+import { useLocation } from '@builder.io/qwik-city';
+import { isDev } from '@builder.io/qwik/build';
+import { Highlight } from '../highlight/highlight';
+
+// The below patterns are here so that import.meta.glob works both for fluffy and headless routes.
+// For example:
+// /src/routes/docs/components/fluffy/modal/examples/hero.tsx
+// /src/routes/docs/components/headless/modal/examples/hero.tsx
+
+const components: any = import.meta.glob('/src/routes/docs/**/**/examples/*.tsx', {
+  import: 'default',
+  eager: isDev ? false : true,
+});
+
+const componentsRaw: any = import.meta.glob('/src/routes/docs/**/**/examples/*.tsx', {
+  as: 'raw',
+  eager: isDev ? false : true,
+});
+
+type ShowcaseProps = QwikIntrinsicElements['div'] & {
+  name?: string;
+};
+
+export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
+  const location = useLocation();
+
+  const componentPath = `/src/routes${location.url.pathname}examples/${name}.tsx`;
+
+  console.log('componentPath', componentPath);
+
+  const Component = useSignal<Component<any>>();
+  const ComponentRaw = useSignal<string>();
+
+  useTask$(async () => {
+    if (isDev) {
+      Component.value = await components[componentPath]();
+      ComponentRaw.value = await componentsRaw[componentPath]();
+    } else {
+      Component.value = components[componentPath];
+      ComponentRaw.value = componentsRaw[componentPath];
+    }
+  });
+
+  useStyles$(styles);
+  return (
+    <Tabs
+      {...props}
+      class="shadow-light-medium dark:shadow-dark-medium mb-12 rounded-xl"
+      selectedClassName="previewCodeExampleSelectedTab"
+    >
+      <TabList class="bg-qwikui-blue-700 dark:bg-qwikui-purple-800 border-qwikui-blue-300 dark:border-qwikui-purple-200 flex rounded-t-xl border-[1.5px] border-b-0 text-white">
+        <Tab class="hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600 text-outline-lg rounded-tl-[.625rem] px-4 py-2">
+          Preview
+        </Tab>
+        <Tab class="hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600 text-outline-lg px-4 py-2">
+          Code
+        </Tab>
+      </TabList>
+      <TabPanel class="shadow-light-medium dark:shadow-dark-medium border-qwikui-blue-300 dark:border-qwikui-purple-200 rounded-b-xl border-[1.5px] bg-slate-200 bg-slate-800  p-4 dark:bg-slate-900 md:p-12">
+        <section class="flex flex-col items-center">
+          {Component.value && <Component.value />}
+        </section>
+      </TabPanel>
+      <TabPanel class="border-qwikui-blue-300 dark:border-qwikui-purple-200 relative rounded-b-xl border-[1.5px]">
+        <Highlight class="rounded-b-xl rounded-t-none" code={ComponentRaw.value || ''} />
+      </TabPanel>
+    </Tabs>
+  );
+});