Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

docs improvements

Browse Source
This commit is contained in:
codecalm
2023-08-17 22:45:25 +02:00
parent 76aedb8365
commit f708aec4e5
7 changed files with 89 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/components/alerts.mdx
View File

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

93
site/app/(marketing)/docs/[[...slug]]/page.tsx
View File

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

2
site/components/Ad.tsx
View File

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

87
site/components/Example.tsx
View File

@@ -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>
);
}

2
site/components/TOC.tsx
View File

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

6
site/components/TablerSponsorsBanner.tsx
View File

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

2
site/styles/_typo.scss
View File

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