docs improvements

f708aec4 · codecalm · 76aedb83 · f708aec4 · f708aec4 · f708aec4
7 changed file
--- 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>

--- 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>
-
-          <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="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>
+
+              <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>

--- 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');

--- 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>
  );
 }
--- 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)[]) {

--- 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"

--- 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;