merge learn and home, simplify markdown codes

Author: KurtGokhan

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "npm start",
+      "name": "Docs: Debug Node",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

plugins/md-layout-loader.js

@@ -97,7 +97,7 @@ export default function Nav({
 }: {
   routeTree: RouteItem;
   breadcrumbs: RouteItem[];
-  section: 'learn' | 'reference' | 'home';
+  section: 'learn' | 'reference';
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [showFeedback, setShowFeedback] = useState(false);
@@ -116,13 +116,13 @@ export default function Nav({
   }
   if (isOpen) {
     switch (tab) {
-      case 'home':
-      case 'learn':
-        routeTree = sidebarLearn as RouteItem;
-        break;
       case 'reference':
         routeTree = sidebarReference as RouteItem;
         break;
+      case 'learn':
+      default:
+        routeTree = sidebarLearn as RouteItem;
+        break;
     }
   }
   // HACK. Fix up the data structures instead.
@@ -188,7 +188,7 @@ export default function Nav({
       });
   }, [showFeedback]);
 
-  function selectTab(nextTab: 'home' | 'learn' | 'reference') {
+  function selectTab(nextTab: 'learn' | 'reference') {
     setTab(nextTab);
     scrollParentRef.current!.scrollTop = 0;
   }
@@ -245,9 +245,6 @@ export default function Nav({
           </div>
         )}
         <div className="px-0 pt-2 w-full 2xl:max-w-xs hidden lg:flex items-center self-center border-b-0 lg:border-b border-border dark:border-border-dark">
-          <NavLink href="/" isActive={section === 'home'}>
-            Home
-          </NavLink>
           <NavLink href="/learn" isActive={section === 'learn'}>
             Learn
           </NavLink>
@@ -311,11 +308,6 @@ export default function Nav({
 
       {isOpen && (
         <div className="bg-wash dark:bg-wash-dark px-5 flex justify-end border-b border-border dark:border-border-dark items-center self-center w-full z-10">
-          <TabButton
-            isActive={tab === 'home'}
-            onClick={() => selectTab('home')}>
-            Home
-          </TabButton>
           <TabButton
             isActive={tab === 'learn'}
             onClick={() => selectTab('learn')}>

src/components/Layout/Nav/Nav.tsx

@@ -23,7 +23,7 @@ interface PageProps {
   toc: Array<TocItem>;
   routeTree: RouteItem;
   meta: { title?: string; description?: string };
-  section: 'learn' | 'reference' | 'home';
+  section: 'learn' | 'reference';
 }
 
 export function Page({ children, toc, routeTree, meta, section }: PageProps) {

src/components/Layout/Page.tsx

@@ -2,17 +2,17 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import { useSyncExternalStore } from 'react';
 import { useSandpack } from '@codesandbox/sandpack-react';
+import { useSyncExternalStore } from 'react';
 import { IconDownload } from '../../Icon/IconDownload';
-export interface DownloadButtonProps {}
+export interface DownloadButtonProps { }
 
 let supportsImportMap: boolean | void;
 
 function useSupportsImportMap() {
   function subscribe() {
     // It never updates.
-    return () => {};
+    return () => { };
   }
   function getCurrentValue() {
     if (supportsImportMap === undefined) {
@@ -29,7 +29,7 @@ function useSupportsImportMap() {
   return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);
 }
 
-const SUPPORTED_FILES = ['/App.js', '/styles.css'];
+const SUPPORTED_FILES = ['/App.js', '/styles.css', '/index.html'];
 
 export function DownloadButton({
   providedFiles,

src/components/MDX/Sandpack/DownloadButton.tsx

@@ -22,6 +22,11 @@ function SandpackRoot(props: SandpackProps) {
   const codeSnippets = Children.toArray(children) as React.ReactElement[];
   const files = createFileMap(codeSnippets);
 
+  files['/styles.css'] = {
+    code: '',
+    ...files['/styles.css'],
+  };
+
   return (
     <div className="sandpack sandpack--playground my-8">
       <SandpackProvider

src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -24,6 +24,12 @@ type CustomPreviewProps = {
   lintErrors: LintDiagnostic;
 };
 
+const sandboxStyle = `
+:root {
+  padding: 24px;
+}
+`;
+
 export function UnityPreview({
   isExpanded,
   className,
@@ -123,7 +129,7 @@ export function UnityPreview({
   );
 
   const code = sandpack.files['/App.js']?.code;
-  const css = sandpack.files['/style.css']?.code;
+  const css = sandpack.files['/styles.css']?.code;
 
   const compiledCode = React.useMemo(() => compile(code || '', 'jsx') || '', [code]);
   const compiledCss = React.useMemo(() => compile(css || '', 'css') || '', [css]);
@@ -174,7 +180,7 @@ export function UnityPreview({
         )}>
         <UnityCardridge
           script={delayedCode}
-          css={delayedCss}
+          css={sandboxStyle + delayedCss}
           ref={cartridgeRef}
           className={cn(
             'rounded-t-none bg-white md:shadow-md w-full max-w-full transition-opacity h-full absolute inset-0',

src/components/MDX/Sandpack/UnityPreview.tsx

@@ -16,19 +16,28 @@ export const createFileMap = (codeSnippets: any) => {
       let fileActive = false; // if the file tab is shown by default
 
       if (props.meta) {
-        const [name, ...params] = props.meta.split(' ');
-        filePath = '/' + name;
+        const params = props.meta.split(' ');
         if (params.includes('hidden')) {
           fileHidden = true;
+          params.splice(params.indexOf('hidden'), 1);
         }
         if (params.includes('active')) {
           fileActive = true;
+          params.splice(params.indexOf('active'), 1);
         }
-      } else {
-        if (props.className === 'language-js') {
+
+        if (params[0]) {
+          filePath = '/' + params[0];
+        }
+      }
+
+      if (!filePath) {
+        if (props.className.includes('language-js')) {
           filePath = '/App.js';
-        } else if (props.className === 'language-css') {
+        } else if (props.className.includes('language-css')) {
           filePath = '/styles.css';
+        } else if (props.className.includes('language-html')) {
+          filePath = '/index.html';
         } else {
           throw new Error(
             `Code block is missing a filename: ${props.children}`

src/components/MDX/Sandpack/createFileMap.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import { lazy, memo, Children, Suspense } from 'react';
+import { Children, lazy, memo, Suspense } from 'react';
 import { createFileMap } from './createFileMap';
 
 const SandpackRoot = lazy(() => import('./SandpackRoot'));
@@ -57,7 +57,7 @@ export default memo(function SandpackWrapper(props: any): any {
   );
   let activeCode;
   if (!activeCodeSnippet.length) {
-    activeCode = codeSnippet['/App.js'].code;
+    activeCode = codeSnippet['/App.js']?.code ?? codeSnippet['/index.html']?.code;
   } else {
     activeCode = codeSnippet[activeCodeSnippet[0]].code;
   }