josh-development · RealShadowNova · Sep 24, 2022 · Oct 19, 2022 · Oct 19, 2022 · Oct 19, 2022
@@ -1,3 +1,7 @@
+/public/ @dan-online @RealShadowNova
+/src/ @dan-online @RealShadowNova
+
+
 /.github/ @RealShadowNova
 /.husky/ @RealShadowNova
 /.vscode/ @RealShadowNova

diff --git a/.prettierignore b/.prettierignore
@@ -27,3 +27,5 @@ CHANGELOG.md
 
 # Ignore toml files
 *.toml
+
+*.mdx
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Ledger&family=Maven+Pro&family=Varela+Round&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Ledger&family=Maven+Pro:wght@400;700&display=swap" rel="stylesheet" />
   </head>
 
   <body class="dark">

@@ -21,12 +21,14 @@
   },
   "dependencies": {
     "@mdx-js/rollup": "^2.3.0",
+    "@sapphire/fetch": "^2.4.1",
     "@solidjs/meta": "^0.28.2",
     "@solidjs/router": "^0.7.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/markdown-it": "^12.2.3",
     "highlight.js": "^11.7.0",
     "markdown-it": "^13.0.1",
+    "query-registry": "^2.6.0",
     "remark-gfm": "^3.0.1",
     "solid-icons": "^1.0.4",
     "solid-js": "^1.6.11",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,25 +1,19 @@
-import { Route, Routes } from '@solidjs/router';
-
+import { useRoutes } from '@solidjs/router';
 import { Footer } from './components/layout/footer';
 import { Navigation } from './components/layout/navigation';
-import DocsPage from './pages/docs';
-import { LandingPage } from './pages/landing';
-import NotFound from './pages/notfound';
+import { Up } from './components/layout/up';
+import { routes } from './routes';
 
 export function App() {
+  const Routes = useRoutes(routes);
+
   return (
     <div class='dark:bg-zinc-900 transition'>
       <div class='min-h-screen 2xl:container 2xl:mx-auto sm:py-6 sm:px-7 py-5 px-4'>
-        <Navigation></Navigation>
-        <Routes>
-          <Route path='/' component={LandingPage} />
-          <Route
-            path={['/docs', '/docs/guide', '/docs/guide/:category', '/docs/guide/:category/:page', '/docs/:pkg', '/docs/:pkg/:type']}
-            component={DocsPage}
-          />
-          <Route path='*' component={NotFound} />
-        </Routes>
-        <Footer></Footer>
+        <Navigation />
+        <Routes />
+        <Up></Up>
+        <Footer />
       </div>
     </div>
   );

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -42,7 +42,7 @@ p,
 span {
   font-family: 'Maven Pro', sans-serif;
 }
-h1,
+/* h1,
 h2,
 h3,
 p,
@@ -51,7 +51,7 @@ span {
   -webkit-font-smoothing: antialiased !important;
   -moz-font-smoothing: antialiased !important;
   text-rendering: optimizelegibility !important;
-}
+} */
 .prose,
 .prose * {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
@@ -77,6 +77,10 @@ span {
 .dark p code {
   background: rgba(0, 0, 0, 0.3);
 }
+.prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before,
+.prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
+  content: '';
+}
 .animate-cursor {
   animation: blink 1s step-end infinite;
 }

diff --git a/src/components/docs/SideBar.tsx → src/components/docs/Contents.tsx b/src/components/docs/SideBar.tsx → src/components/docs/Contents.tsx
@@ -2,35 +2,28 @@ import { Link } from '@solidjs/router';
 import { Accessor, Show } from 'solid-js';
 import type { DocsPageParams, ExtraClassMethod } from '../types';
 
-export const DocsSideBar = ({
-  scrollValue,
+export const DocsContents = ({
   params,
-  allMethods,
-  onUpdateScroll
+  allMethods
 }: {
-  scrollValue: Accessor<number>;
   params: Accessor<DocsPageParams>;
   allMethods: Accessor<ExtraClassMethod[]>;
-  onUpdateScroll: (value: boolean) => void;
 }) => {
   return (
     <div
-      class='hidden sm:block sm:w-80 max-h-[75vh] will-change-transform'
-      style={{ transform: `translateY(${scrollValue() > 20 ? scrollValue() - 20 : 0}px)` }}
+      class='hidden sm:block sm:w-80 max-h-[75vh]'
     >
       <Show when={params().type.length > 0}>
         <h1 class='text-primary font-bold text-xl mb-2 font-ledger'>Contents</h1>
-        <div class='overflow-y-scroll h-full' id='sidebar'>
+        <div class='overflow-y-scroll h-full'>
           <Show when={params().type === 'methods'}>
             {allMethods().map((method) => (
               <div class='pt-2 pr-4'>
                 <div
-                  class={`transition px-2 border-l ${
-                    location.hash.slice(1) === `${method.from.name}-${method.name}` ? 'border-primary' : 'dark:border-zinc-800'
-                  }`}
+                  class={`transition px-2 border-l ${location.hash.slice(1) === `${method.from.name}-${method.name}` ? 'border-primary' : 'dark:border-zinc-800'
+                    }`}
                 >
                   <Link
-                    onClick={() => onUpdateScroll(true)}
                     class='dark:text-gray-300 break-words'
                     href={`/docs/${params().pkg}/${params().type}#${method.from.name}-${method.name}`}
                   >

diff --git a/src/components/docs/Navigation.tsx b/src/components/docs/Navigation.tsx
@@ -3,7 +3,7 @@ import { FiChevronDown } from 'solid-icons/fi';
 import { createMemo, Show } from 'solid-js';
 import type { NavigationProps } from '../types';
 
-export const NavigationDocs = ({ params, onSetPackage, onChoosePackage, folders, scrollValue, selectedPkg, allMethods, docs }: NavigationProps) => {
+export const NavigationDocs = ({ params, onSetPackage, onChoosePackage, folders, selectedPkg, allMethods, docs }: NavigationProps) => {
   const navigateTo = useNavigate();
 
   const maxH = createMemo(() => {
@@ -28,19 +28,15 @@ export const NavigationDocs = ({ params, onSetPackage, onChoosePackage, folders,
 
   return (
     <div
-      class='sm:w-72 sm:max-h-[75vh] sm:overflow-y-scroll will-change-transform'
-      style={{
-        transform: `translateY(${scrollValue() > 20 ? scrollValue() - 20 : 0}px)`
-      }}
+      class='sm:w-72 pb-10 will-change-transform'
     >
       <h1 class='text-primary font-bold text-xl font-ledger'>Documentation</h1>
 
       <div>
         {docs.map((category) => (
           <div
-            class={`transition my-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 ${
-              params().category === category.category ? 'dark:bg-zinc-800 bg-zinc-100' : ''
-            }`}
+            class={`transition my-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 ${params().category === category.category ? 'dark:bg-zinc-800 bg-zinc-100' : ''
+              }`}
           >
             <button
               onClick={() => {
@@ -87,9 +83,8 @@ export const NavigationDocs = ({ params, onSetPackage, onChoosePackage, folders,
           <div class={folder.packages.length > 1 ? 'pl-4' : ''}>
             {folder.packages.map((pkg) => (
               <div
-                class={`transition my-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 ${
-                  params().pkg === pkg.name ? 'dark:bg-zinc-800 bg-zinc-100' : ''
-                }`}
+                class={`transition my-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 ${params().pkg === pkg.name ? 'dark:bg-zinc-800 bg-zinc-100' : ''
+                  }`}
               >
                 <button
                   onClick={() => {

diff --git a/src/components/docs/packages/classes.tsx b/src/components/docs/packages/classes.tsx
@@ -3,7 +3,7 @@ import { Show } from 'solid-js';
 import { md } from '../../../utils/mdit';
 import type { ClassesProps } from '../../types';
 
-export const DocsClasses = ({ onUpdateScroll, selectedPkg, params }: ClassesProps) => {
+export const DocsClasses = ({ selectedPkg, params }: ClassesProps) => {
   return (
     <div class='pt-4 sm:pt-0 sm:px-10'>
       <h1 class='dark:text-white text-4xl font-ledger'>{params().type[0].toUpperCase() + params().type.slice(1)}</h1>
@@ -13,7 +13,6 @@ export const DocsClasses = ({ onUpdateScroll, selectedPkg, params }: ClassesProp
           <div class='my-4'>
             <div>
               <Link
-                onClick={() => onUpdateScroll(true)}
                 class='hover:opacity-70 transition'
                 href={`/docs/${params().pkg}/${params().type}#${cls.name}`}
               >
@@ -25,56 +24,52 @@ export const DocsClasses = ({ onUpdateScroll, selectedPkg, params }: ClassesProp
               <div class='dark:text-zinc-200 my-4' innerHTML={md.render(cls.comment.description || '')}></div>
 
               <Show when={cls.construct.parameters}>
-                <div class='overflow-x-auto relative w-full sm:w-3/5 border-2 dark:border-0 sm:rounded-lg'>
-                  <table class='text-sm w-full text-left text-gray-500 dark:text-gray-400'>
-                    <thead class='text-xs text-gray-700 uppercase bg-zinc-50 dark:bg-zinc-700 dark:text-gray-400'>
-                      <tr>
-                        <th scope='col' class='py-3 px-6'>
-                          Parameter
-                        </th>
-                        <th scope='col' class='py-3 px-6'>
-                          Type
+                <table class='text-sm text-left text-gray-500 dark:text-gray-400'>
+                  <thead class='text-xs text-gray-700 uppercase bg-zinc-50 dark:bg-zinc-700 dark:text-gray-400'>
+                    <tr>
+                      <th scope='col' class='py-3 px-6'>
+                        Parameter
+                      </th>
+                      <th scope='col' class='py-3 px-6'>
+                        Type
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {cls.construct.parameters.map((prop) => (
+                      <tr class='border-b dark:bg-zinc-800 dark:border-gray-700'>
+                        <th scope='row' class='py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white'>
+                          {prop.name}
                         </th>
+                        <td class='py-4 px-6 break-words'>{prop.type.toString()}</td>
                       </tr>
-                    </thead>
-                    <tbody>
-                      {cls.construct.parameters.map((prop) => (
-                        <tr class='border-b dark:bg-zinc-800 dark:border-gray-700'>
-                          <th scope='row' class='py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white'>
-                            {prop.name}
-                          </th>
-                          <td class='py-4 px-6 break-words'>{prop.type.toString()}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                    ))}
+                  </tbody>
+                </table>
               </Show>
               <Show when={cls.properties}>
-                <div class='overflow-x-auto mt-4 relative w-full sm:w-3/5 border-2 dark:border-0 sm:rounded-lg'>
-                  <table class='text-sm w-full text-left text-gray-500 dark:text-gray-400'>
-                    <thead class='text-xs text-gray-700 uppercase bg-zinc-50 dark:bg-zinc-700 dark:text-gray-400'>
-                      <tr>
-                        <th scope='col' class='py-3 px-6'>
-                          Property
-                        </th>
-                        <th scope='col' class='py-3 px-6'>
-                          Type
+                <table class='text-sm mt-4 text-left text-gray-500 dark:text-gray-400'>
+                  <thead class='text-xs text-gray-700 uppercase bg-zinc-50 dark:bg-zinc-700 dark:text-gray-400'>
+                    <tr>
+                      <th scope='col' class='py-3 px-6'>
+                        Property
+                      </th>
+                      <th scope='col' class='py-3 px-6'>
+                        Type
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {cls.properties.map((prop) => (
+                      <tr class='border-b dark:bg-zinc-800 dark:border-gray-700'>
+                        <th scope='row' class='py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white'>
+                          {prop.name}
                         </th>
+                        <td class='py-4 px-6 break-words'>{prop.type ? prop.type.toString() : 'N/A'}</td>
                       </tr>
-                    </thead>
-                    <tbody>
-                      {cls.properties.map((prop) => (
-                        <tr class='border-b dark:bg-zinc-800 dark:border-gray-700'>
-                          <th scope='row' class='py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white'>
-                            {prop.name}
-                          </th>
-                          <td class='py-4 px-6 break-words'>{prop.type ? prop.type.toString() : 'N/A'}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                    ))}
+                  </tbody>
+                </table>
               </Show>
               <div
                 class='prose prose-pre:bg-zinc-800 font-mono prose-pre:my-4 my-3 text-lg tracking-wide'

diff --git a/src/components/docs/packages/enums.tsx b/src/components/docs/packages/enums.tsx
@@ -3,7 +3,7 @@ import { Show } from 'solid-js';
 import { md } from '../../../utils/mdit';
 import type { EnumsProps } from '../../types';
 
-export const DocsEnums = ({ selectedPkg, onUpdateScroll, params }: EnumsProps) => {
+export const DocsEnums = ({ selectedPkg, params }: EnumsProps) => {
   return (
     <div class='pt-4 sm:pt-0 sm:px-10'>
       <h1 class='dark:text-white text-4xl font-ledger'>{params().type[0].toUpperCase() + params().type.slice(1)}</h1>
@@ -13,7 +13,6 @@ export const DocsEnums = ({ selectedPkg, onUpdateScroll, params }: EnumsProps) =
           <div class='my-4'>
             <div>
               <Link
-                onClick={() => onUpdateScroll(true)}
                 class='hover:opacity-70 transition'
                 href={`/docs/${params().pkg}/${params().type}#${enu.name}`}
               >
@@ -24,39 +23,37 @@ export const DocsEnums = ({ selectedPkg, onUpdateScroll, params }: EnumsProps) =
 
               <div class='dark:text-zinc-200 my-4' innerHTML={md.render(enu.comment.description || '')}></div>
 
-              <Show when={enu.properties}>
-                <div class='overflow-x-auto relative w-full sm:w-3/5 border-2 dark:border-0 sm:rounded-lg'>
-                  <table class='text-sm w-full text-left text-gray-500 dark:text-gray-400'>
-                    <thead class='text-xs text-gray-700 uppercase bg-zinc-50 dark:bg-zinc-700 dark:text-gray-400'>
-                      <tr>
+              <Show when={enu.members}>
+                <table class='text-sm text-left text-gray-500 dark:text-gray-400'>
+                  <thead class='text-xs text-gray-700 uppercase bg-zinc-50 dark:bg-zinc-700 dark:text-gray-400'>
+                    <tr>
+                      <th scope='col' class='py-3 px-6'>
+                        Member
+                      </th>
+                      <th scope='col' class='py-3 px-6'>
+                        Value
+                      </th>
+                      <Show when={enu.members.find((x) => x.comment.description)}>
                         <th scope='col' class='py-3 px-6'>
-                          Property
+                          Description
                         </th>
-                        <th scope='col' class='py-3 px-6'>
-                          Value
+                      </Show>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {enu.members.map((prop) => (
+                      <tr class='border-b dark:bg-zinc-800 dark:border-gray-700'>
+                        <th scope='row' class='py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white'>
+                          {prop.name}
                         </th>
-                        <Show when={enu.properties.find((x) => x.comment.description)}>
-                          <th scope='col' class='py-3 px-6'>
-                            Description
-                          </th>
+                        <td class='py-4 px-6 break-words'>{prop.value}</td>
+                        <Show when={prop.comment.description}>
+                          <td class='py-4 px-6 break-words'>{prop.comment.description}</td>
                         </Show>
                       </tr>
-                    </thead>
-                    <tbody>
-                      {enu.properties.map((prop) => (
-                        <tr class='border-b dark:bg-zinc-800 dark:border-gray-700'>
-                          <th scope='row' class='py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white'>
-                            {prop.name}
-                          </th>
-                          <td class='py-4 px-6 break-words'>{prop.value}</td>
-                          <Show when={prop.comment.description}>
-                            <td class='py-4 px-6 break-words'>{prop.comment.description}</td>
-                          </Show>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                    ))}
+                  </tbody>
+                </table>
               </Show>
               <div
                 class='prose prose-pre:bg-zinc-800 font-mono prose-pre:my-4 my-3 text-lg tracking-wide'
Original file line number	Diff line number	Diff line change
Expand Up		@@ -27,3 +27,5 @@ CHANGELOG.md

		# Ignore toml files
		*.toml

		*.mdx