From f708aec4e5f8b970d7adbe389d4a03ccb1fa8d19 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Thu, 17 Aug 2023 22:45:25 +0200
Subject: [PATCH] docs improvements

---
 docs/components/alerts.mdx                    | 12 +--
 .../app/(marketing)/docs/[[...slug]]/page.tsx | 93 ++++++++++---------
 site/components/Ad.tsx                        |  2 +-
 site/components/Example.tsx                   | 87 ++++++-----------
 site/components/TOC.tsx                       |  2 +-
 site/components/TablerSponsorsBanner.tsx      |  6 +-
 site/styles/_typo.scss                        |  2 +-
 7 files changed, 89 insertions(+), 115 deletions(-)

diff --git a/docs/components/alerts.mdx b/docs/components/alerts.mdx
index 2311ec34f..ef606c117 100644
--- a/docs/components/alerts.mdx
+++ b/docs/components/alerts.mdx
@@ -8,7 +8,7 @@ bootstrapLink: components/alerts/
 
 Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
 
-```html example
+```html example vertical
 <div class="alert alert-success" role="alert">
   <h4 class="alert-title">Wow! Everything worked!</h4>
   <div class="text-secondary">Your account has been saved!</div>
@@ -38,18 +38,12 @@ Depending on the information you need to convey, you can use one of the followin
 
 Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
 
-```html example
+```html example vertical code
 <div class="alert alert-danger m-0">
   This is a danger alert — <a href="#" class="alert-link">check it out</a>!
 </div>
 ```
 
-```html
-<div class="alert alert-danger" role="alert">
-  This is a danger alert — <a href="#" class="alert-link">check it out</a>!
-</div>
-```
-
 ## Dismissible alerts
 
 Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
@@ -351,7 +345,7 @@ Add primary and secondary buttons to your alert modals if you want users to take
 
 If you want your alert to be really eye-catching, you can add a class `alert-important`.
 
-```html example
+```html example vertical height="20rem"
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
diff --git a/site/app/(marketing)/docs/[[...slug]]/page.tsx b/site/app/(marketing)/docs/[[...slug]]/page.tsx
index 033f58b95..f71c65410 100644
--- a/site/app/(marketing)/docs/[[...slug]]/page.tsx
+++ b/site/app/(marketing)/docs/[[...slug]]/page.tsx
@@ -72,55 +72,62 @@ export default async function DocPage({ params }: DocPageProps) {
         {/*<input type="search" className="form-control w-100 mb-5" placeholder="Search&hellip;" />*/}
         <DocsMenu />
       </div>
-      <div className="md:col">
-        <div className="py-6 md:pl-6">
-          <nav aria-label="breadcrumbs" className="breadcrumb mb-6">
-            <ul className="breadcrumb-list">
-              <li className="breadcrumb-item">
-                <Link href="/" className="breadcrumb-link">
-                  Home
-                </Link>
-              </li>
-              <li className="breadcrumb-item">
-                <Link href="/docs" className="breadcrumb-link">
-                  Documentation
-                </Link>
-              </li>
-              <li className="breadcrumb-item">
-                <Link href={`/docs/${params.slug.join('/')}`} className="breadcrumb-link">
-                  {doc.title}
-                </Link>
-              </li>
-            </ul>
-          </nav>
-          <div className="markdown">
-            {/* {category && (
+      <div className="col">
+        <div className="row">
+          <div className="md:col">
+            <div className="py-6 md:pl-6">
+              <nav aria-label="breadcrumbs" className="breadcrumb mb-6">
+                <ul className="breadcrumb-list">
+                  <li className="breadcrumb-item">
+                    <Link href="/" className="breadcrumb-link">
+                      Home
+                    </Link>
+                  </li>
+                  <li className="breadcrumb-item">
+                    <Link href="/docs" className="breadcrumb-link">
+                      Documentation
+                    </Link>
+                  </li>
+                  <li className="breadcrumb-item">
+                    <Link href={`/docs/${params.slug.join('/')}`} className="breadcrumb-link">
+                      {doc.title}
+                    </Link>
+                  </li>
+                </ul>
+              </nav>
+              <div className="markdown">
+                {/* {category && (
         <div className="h-subheader text-primary">{category}</div>
       )} */}
-            {doc.title && <h1>{doc.title}</h1>}
-            {doc.description && <p className="lead">{doc.description}</p>}
+                {doc.title && <h1>{doc.title}</h1>}
+                {doc.description && <p className="lead">{doc.description}</p>}
 
-            <Mdx code={doc.body.code} />
+                <Mdx code={doc.body.code} />
+              </div>
+            </div>
           </div>
+          <div className="docs-side-toc">
+            <div className="pl-6 font-h6 pt-6">
+              <div className="h6 mb-3">On this page</div>
+              <div>
+                <TOC toc={toc} />
+              </div>
+              <div className="mt-4 border-top pt-4">
+                <a href={`https://github.com/tabler/tabler/blob/main/docs/${doc.slugAsParams.split(',').join('/')}.mdx`} className="link-muted">
+                  Improve this page
+                  <Icon name="edit" className="icon-inline ml-2" />
+                </a>
+              </div>
 
-          <TablerSponsorsBanner className="mt-7" />
-        </div>
-      </div>
-      <div className="docs-side-toc">
-        <div className="pl-6 font-h6 pt-6">
-          <div className="h6 mb-3">On this page</div>
-          <div>
-            <TOC toc={toc} />
+              <div className="mt-5">
+                <Ad />
+              </div>
+            </div>
           </div>
-          <div className="mt-4 border-top pt-4">
-            <a href={`https://github.com/tabler/tabler/blob/main/docs/${doc.slugAsParams.split(',').join('/')}.mdx`} className="link-muted">
-              Improve this page
-              <Icon name="edit" className="icon-inline ml-2" />
-            </a>
-          </div>
-
-          <div className="mt-5">
-            <Ad />
+          <div className="col-12">
+            <div className="pl-6 mt-7">
+              <TablerSponsorsBanner />
+            </div>
           </div>
         </div>
       </div>
diff --git a/site/components/Ad.tsx b/site/components/Ad.tsx
index 6dd96f998..b8d3df095 100644
--- a/site/components/Ad.tsx
+++ b/site/components/Ad.tsx
@@ -7,7 +7,7 @@ export default function Ad({ className, horizontal }: { className?: string; hori
   const ad = useRef<any>(null);
 
   useEffect(() => {
-    if (ad.current) {
+    if (ad.current && process.env.NODE_ENV !== 'development') {
       ad.current.innerHTML = '';
 
       const script = document.createElement('script');
diff --git a/site/components/Example.tsx b/site/components/Example.tsx
index 036c39c46..b9ff1d8a3 100644
--- a/site/components/Example.tsx
+++ b/site/components/Example.tsx
@@ -3,14 +3,8 @@
 import { useState } from 'react';
 import clsx from 'clsx';
 
-
-
 import { uiCdnUrl, uiUrl } from '@/config/site';
 
-
-
-
-
 const previewHtml = (
   example,
   {
@@ -27,46 +21,32 @@ const previewHtml = (
     plugins = [],
     libs = [],
   }: {
-    vertical?: boolean
-    background?: string
-    scrollable?: boolean
-    columns?: number
-    centered?: boolean
-    vcentered?: boolean
-    separated?: boolean
-    vendors?: boolean
-    overview?: boolean
-    fullpage?: boolean
-    plugins?: string[]
-    libs?: string[]
-  }
+    vertical?: boolean;
+    background?: string;
+    scrollable?: boolean;
+    columns?: number;
+    centered?: boolean;
+    vcentered?: boolean;
+    separated?: boolean;
+    vendors?: boolean;
+    overview?: boolean;
+    fullpage?: boolean;
+    plugins?: string[];
+    libs?: string[];
+  },
 ) => {
   let assetsUrl = uiCdnUrl;
 
   if (process.env.TABLER_LOCAL) {
-    assetsUrl = uiUrl;
+    assetsUrl = 'http://localhost:3000';
   }
 
   let content = example;
   if (!fullpage) {
-    content = `<main class="min-vh-100 ${vertical ? 'p-4' : 'py-4 px-4'}${
-      centered
-        ? ' d-flex justify-content-center align-items-center flex-wrap'
-        : ''
-    }${vcentered ? ' d-flex justify-content-center flex-column' : ''}">
+    content = `<main class="min-vh-100 ${vertical ? 'p-4' : 'py-4 px-4'}${centered ? ' d-flex justify-content-center align-items-center flex-wrap' : ''}${vcentered ? ' d-flex justify-content-center flex-column' : ''}">
 
-			${
-        columns
-          ? `<div class="mx-auto w-100" style="max-width: ${columns * 20}rem">`
-          : ''
-      }
-			${
-        separated
-          ? vertical
-            ? '<div class="space-y">'
-            : '<div class="space-x">'
-          : ''
-      }
+			${columns ? `<div class="mx-auto w-100" style="max-width: ${columns * 20}rem">` : ''}
+			${separated ? (vertical ? '<div class="space-y">' : '<div class="space-x">') : ''}
 
 			 ${example}
 
@@ -75,32 +55,17 @@ const previewHtml = (
 		 </main>`;
   }
 
-  example = example
-    .replace(/a href="[^"]+"/g, 'a href="javascript:void(0)"')
-    .replace(/action="[^"]+"/g, 'action="javascript:void(0)"');
+  example = example.replace(/a href="[^"]+"/g, 'a href="javascript:void(0)"').replace(/action="[^"]+"/g, 'action="javascript:void(0)"');
 
   return `<html lang="en">
 	<head>
 	<title>Example</title>
 	<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler.css">
-	${
-    plugins
-      ? plugins.map(
-          (plugin) =>
-            `	<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler-${plugin}.css" />`
-        )
-      : ''
-  }
+	${plugins ? plugins.map((plugin) => `	<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler-${plugin}.css" />`) : ''}
 </head>
-	<body class="h-100${background ? ` bg-${background}` : ''}${
-    scrollable || fullpage ? ' auto-scroll' : ' no-scroll'
-  }"${!background && ' style="--tblr-body-bg: #fbfcfd"'}>
+	<body class="h-100${background ? ` bg-${background}` : ''}${scrollable || fullpage ? ' auto-scroll' : ' no-scroll'}"${!background && ' style="--tblr-body-bg: #fbfcfd"'}>
 		 ${content}
-	${
-    vendors
-      ? `<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler-vendors.css" />`
-      : ''
-  }
+	${vendors ? `<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler-vendors.css" />` : ''}
 	<script src="${assetsUrl}/dist/js/tabler.js"></script>
 	</body>
 </html>`;
@@ -141,9 +106,13 @@ export default function Example({
 
   return (
     <div className="example">
-      <iframe className={clsx('example-frame', {
-        'example-frame-resizable': resizable,
-      })} srcDoc={srcDoc} style={{ height: iframeHeight }} />
+      <iframe
+        className={clsx('example-frame', {
+          'example-frame-resizable': resizable,
+        })}
+        srcDoc={srcDoc}
+        style={{ height: iframeHeight }}
+      />
     </div>
   );
 }
diff --git a/site/components/TOC.tsx b/site/components/TOC.tsx
index d9f2359d9..0706c6a8f 100644
--- a/site/components/TOC.tsx
+++ b/site/components/TOC.tsx
@@ -31,7 +31,7 @@ export default function TOC({ toc }: TocProps) {
 
   return mounted ? (
     <Tree tree={toc} activeItem={activeHeading} />
-  ) : null;
+  ) : <Tree tree={toc} />;
 }
 
 function useActiveItem(itemIds: (string | undefined)[]) {
diff --git a/site/components/TablerSponsorsBanner.tsx b/site/components/TablerSponsorsBanner.tsx
index 361b89559..3b90000d5 100644
--- a/site/components/TablerSponsorsBanner.tsx
+++ b/site/components/TablerSponsorsBanner.tsx
@@ -2,7 +2,11 @@ import { sponsorsUrl } from '@/config/site';
 import clsx from 'clsx';
 import Icon from './Icon';
 
-export default function TablerSponsorsBanner({ className }) {
+export default function TablerSponsorsBanner({
+  className
+ }: {
+    className?: string;
+}) {
    return <a href={sponsorsUrl} target="_blank" className={clsx('sponsors', className )}>
       <div
          className="logo logo-gray mb-5"
diff --git a/site/styles/_typo.scss b/site/styles/_typo.scss
index 3d9b55d1f..357731893 100644
--- a/site/styles/_typo.scss
+++ b/site/styles/_typo.scss
@@ -241,7 +241,7 @@ pre {
   color: $color-white;
   border-radius: $border-radius;
   padding: $gap-3 $gap-4;
-  font-size: 14px;
+  font-size: 13px;
   word-break: break-word;
   tab-size: 2;
   overflow: auto;