Migrate preview and docs packages from Eleventy to Astro (#2694)

Co-authored-by: Bartek <xbartoszdobija@gmail.com>
2026-08-05 01:44:41 +04:00 · 2026-07-28 00:09:02 +02:00
parent 9820d110f6
commit d8956a06d6
1150 changed files with 52147 additions and 32804 deletions
@@ -0,0 +1,52 @@
+// Rebuild Astro's public directory from source and generated workspace assets.
+import { cpSync, existsSync, mkdirSync, rmSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..');
+const repo = join(root, '..');
+const publicDir = join(root, 'public');
+
+const copies = [
+	{
+		from: join(root, 'assets'),
+		to: publicDir,
+		packageName: '@tabler/docs',
+		requiredFile: join(root, 'assets', 'css', 'docs.css'),
+	},
+	{
+		from: join(repo, 'core', 'dist'),
+		to: join(publicDir, 'dist'),
+		packageName: '@tabler/core',
+		requiredFile: join(repo, 'core', 'dist', 'css', 'tabler.css'),
+	},
+	{
+		from: join(repo, 'preview', 'dist', 'preview'),
+		to: join(publicDir, 'preview'),
+		packageName: '@tabler/preview',
+		requiredFile: join(repo, 'preview', 'dist', 'preview', 'css', 'demo.css'),
+	},
+	{
+		from: join(repo, 'shared', 'static'),
+		to: join(publicDir, 'static'),
+		packageName: 'shared assets',
+		requiredFile: join(repo, 'shared', 'static', 'logo.svg'),
+	},
+];
+
+rmSync(publicDir, { recursive: true, force: true, maxRetries: 5, retryDelay: 100 });
+mkdirSync(publicDir, { recursive: true });
+
+for (const { from, to, packageName, requiredFile } of copies) {
+	if (!existsSync(from) || !existsSync(requiredFile)) {
+		throw new Error(`copy-assets: missing ${requiredFile} — build ${packageName} first`);
+	}
+
+	cpSync(from, to, {
+		recursive: true,
+		dereference: true,
+		filter: src => !src.includes('/.vscode') && !src.includes('\\.vscode'),
+	});
+}
+
+console.log('copy-assets: done');
@@ -1,20 +0,0 @@
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { createViteConfig } from '../../.build/vite.config.helper'
-import getBanner from '../../shared/banner/index.mjs'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const entryPath = path.resolve(__dirname, '../js/docs')
-const entry = `${entryPath}.ts`
-
-export default createViteConfig({
-	entry: entry,
-	name: 'docs',
-	fileName: () => 'docs.js',
-	formats: ['es'],
-	outDir: path.resolve(__dirname, '../dist/js'),
-	banner: undefined,
-	minify: false
-})
-
@@ -1 +1,26 @@
-.vercel
+# build output
+dist/
+
+public/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
@@ -1,46 +0,0 @@
-# Tabler Documentation Changelog
-
-## 1.4.0
-
-### Patch Changes
-
- 6c38a48: Update Bootstrap to v5.3.7
- 6c47b5f: Change `package.json` to `core/libs.json` as a source of libraries
- 70a41e4: Replace a package list in `download.md` with a link to the 3rd-party libraries page
- Updated dependencies [6c4dd36]
- Updated dependencies [6fec73a]
- Updated dependencies [9951fe9]
- Updated dependencies [db6200a]
- Updated dependencies [e96f055]
- Updated dependencies [a200d30]
- Updated dependencies [6c38a48]
- Updated dependencies [2a12f72]
- Updated dependencies [49ab9ea]
- Updated dependencies [666a296]
- Updated dependencies [cfd4cb6]
-  - @tabler/core@1.4.0
-
-## 1.3.0
-
-### Patch Changes
-
- 8f70185: Improve Introduction, Base, Layout and Plugins sections in documentation
- e546706: Fix input mask example in docs
- 8850f61: Enhance pagination component with new styles
- 8470c9b: Fix broken links to other docs section and tabler.io website; improve some labels.
- 6a3513f: Fix links in Tabler Emails introduction, improve "How to contribute" and other small fixes
- 278967b: Fix switch icon examples with filled icons in documentation
- 38ea9aa: Use primary color for `::selection` inside `<code>` in docs
- 5b3e201: Fix documentation: remove duplicated code examples; increase height of dropdown examples; fix some links
- 7b72653: Fix ribbon component in the documentation
- c42b104: Fix incorrect label text on form elements docs page
- 895f943: Use tabs-package include to show webfont install steps
- 665472c: Demonstrate sticky header table more clearly in docs
- 7917f86: Replace non-existent Vimeo file and enhance the inline player documentation
- 7fc1d5c: Exclude headings in the carousel and modal examples from ToC
- 7773ff2: Exclude headings inside `.example` from the Table of Contents
- 222ddd4: Change WYSIWYG title to uppercase
- 9b15b94: Add missing `.steps-vertical` classes in docs
- 5fa662b: Use color-input examples in documentation
- 5619b2d: Fix `src` links to images in README and getting-started docs page
- f8075f6: Add documentation for 3rd-party libraries and resources
@@ -0,0 +1,46 @@
+# Astro Starter Kit: Basics
+
+```sh
+pnpm create astro@latest -- --template basics
+```
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src
+│   ├── assets
+│   │   └── astro.svg
+│   ├── components
+│   │   └── Welcome.astro
+│   ├── layouts
+│   │   └── Layout.astro
+│   └── pages
+│       └── index.astro
+└── package.json
+```
+
+To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `pnpm install`             | Installs dependencies                            |
+| `pnpm dev`             | Starts local dev server at `localhost:4321`      |
+| `pnpm build`           | Build your production site to `./dist/`          |
+| `pnpm preview`         | Preview your build locally, before deploying     |
+| `pnpm astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `pnpm astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
@@ -0,0 +1,35 @@
+// @ts-check
+import { defineConfig } from 'astro/config'
+import mdx from '@astrojs/mdx'
+import { fileURLToPath } from 'node:url'
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://docs.tabler.io',
+  // pages live at the package root (./pages) — content-first layout; all
+  // components/lib/data are shared (see the @shared alias)
+  srcDir: '.',
+  vite: {
+    // InlineScript.astro emits scripts inline at the component site —
+    // docs pages have no <PageScripts /> drain
+    define: {
+      'import.meta.env.INLINE_PAGE_SCRIPTS': 'true',
+    },
+    resolve: {
+      alias: {
+        '@data': fileURLToPath(new URL('../shared/data', import.meta.url)),
+        // Astro components/lib shared with preview-astro (single source of truth)
+        '@shared': fileURLToPath(new URL('../shared/astro', import.meta.url)),
+        // this package's pages dir — used by @shared/lib/docs-children's glob
+        '@pages': fileURLToPath(new URL('./pages', import.meta.url)),
+      },
+    },
+  },
+  integrations: [mdx()],
+  markdown: {
+    smartypants: false,
+    shikiConfig: {
+      theme: 'github-dark',
+    },
+  },
+})
@@ -1,6 +0,0 @@
-export default {
-	layout: 'docs/default',
-	permalink: function ({page}) {
-		return `${page.filePathStem.replace(/^\/content\//, '/').replace(/\/index$/, '') }/index.html`;
-	},
-};
@@ -1,16 +0,0 @@
---
-title: Tabler Icons
-summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
-order: 2
-description: Over 5000 pixel-perfect icons for web design and development
---
-
-# Browse icons
-
-Tabler Icons is a comprehensive icon library that features {{ iconsCount }} high-quality icons.
-These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
-
-To use Tabler Icons, you can visit their website at https://tabler-icons.io.
-From there, you can browse the full collection of icons by category or search for a specific icon using the search bar.
-
-Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.
@@ -1,17 +0,0 @@
---
-title: Preview
-summary: "Tabler Illustrations offers 80 illustrations in two themes: light and dark. You can use them in your projects to enhance the visual appeal and convey messages effectively."
---
-
-Look at full list of illustrations below and see how they look. Find out more and purchase Tabler Illustrations at [our website]({{ site.homepage }}/illustrations).
-
-{% assign all-illustrations = illustrations | sort %}
-<div class="row g-2 gy-6">
-{% for illustration in all-illustrations %}
-<div class="col-6 col-md-4 col-lg-3 text-center">
-<img src="/static/illustrations/light/{{ illustration }}.png" alt="{{ illustration }}" class="hide-theme-dark" />
-<img src="/static/illustrations/dark/{{ illustration }}.png" alt="{{ illustration }}" class="hide-theme-light" />
-<code>{{ illustration }}</code>
-</div>
-{% endfor %}
-</div>
@@ -1,19 +0,0 @@
---
-title: Welcome to Tabler Documentation
-summary: Tabler Docs provides a comprehensive guide to help you get started with the Tabler ecosystem, including its UI components, plugins, and icons. Explore detailed documentation to understand and leverage the full potential of Tabler in your projects.
---
-
-<img src="/img/tabler.png" alt="Tabler" class="mb-4 hide-theme-dark border-0" width="816" height="620" />
-<img src="/img/tabler-dark.png" alt="Tabler" class="mb-4 hide-theme-light border-0" width="816" height="620" />
-
-Find all the guides and resources you need to develop with Tabler and our other tools. Explore our UI components, icons, illustrations, and email templates to enhance your web development experience. Our tools are designed to be easy to use, customizable, and fully responsive, ensuring that your projects look great on any device.
-
-<div class="mt-6 pt-6">
-	<div class="row row-deck row-cards">
-		{% include "docs/docs-card.html" title="UI Components" href="/ui" icon="paint" description="Free and open source web application UI kit based on Bootstrap" %}
-		{% include "docs/docs-card.html" title="Plugins" href="/plugins" icon="plug" description="Free and open source plugins for Tabler UI components" %}
-		{% include "docs/docs-card.html" title="Icons" href="/icons" icon="ghost" description="Pixel-perfect icons for web design and development" %}
-		{% include "docs/docs-card.html" title="Illustrations" href="/illustrations" icon="brand-figma" description="Customizable SVG illustrations for your web project" %}
-		{% include "docs/docs-card.html" title="Email Templates" href="/emails" icon="mail" description="Responsive email templates ready to use in your marketing campaigns" %}
-	</div>
-</div>
@@ -1,14 +0,0 @@
---
-layout: null
-permalink: robots.txt
-eleventyExcludeFromCollections: true
---
-Sitemap: {% if environment == 'production' %}{{ site.docsUrl }}{% endif %}/sitemap.xml
-
-{% if environment != 'production' %}
-User-agent: *
-Disallow: /
-{% else %}
-User-agent: *
-Disallow:
-{% endif %}
@@ -1,19 +0,0 @@
---
-layout: null
-permalink: sitemap.xml
-eleventyExcludeFromCollections: true
---
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-
-{% for entry in collections.sitemap %}
-{% assign path = entry.url | replace: 'index.html', '' %}
-{% if path == '/' %}
-{% assign path = '' %}
-{% endif %}
-<url>
-	<loc>{% if environment != 'development' %}{{ site.docsUrl }}{% endif %}{{ path | xml_escape }}</loc>
-	<lastmod>{{ entry.last_modified_at | default: 'now' | date_to_xmlschema }}</lastmod>
-</url>
-{% endfor %}
-</urlset>
@@ -1,7 +0,0 @@
---
-title: Markdown
-layout: redirect
-redirect:
-  to: ui/base/prose/
-permalink: ui/base/markdown/
---
@@ -1,145 +0,0 @@
---
-title: Prose
-summary: Use the `.prose` wrapper to style long-form content without adding classes to every element.
-bootstrapLink: content/prose/
-description: Long-form content styles for markdown-like HTML.
---
-
-## How it works
-
-Wrap your content in the `.prose` class to apply long-form typography styles to headings, paragraphs, lists, tables, and other common elements. This is especially useful when rendering Markdown, MDX, or content from a WYSIWYG editor.
-
- Sets a base `font-size` and `line-height` for comfortable reading.
- Normalizes list spacing and nested list indentation.
- Adds consistent `margin-bottom` on headings and paragraphs.
- Gives blockquotes, code, and tables a readable default style.
-
-## Example
-
-This example shows typical content wrapped in `.prose`.
-
-{% capture html -%}
-<div class="prose">
-  <h1>Getting started with documentation</h1>
-  <p>
-    Writing clear and effective documentation is essential for any project. When you create content that others
-    will read and use, proper formatting makes all the difference. <em>Good documentation</em> helps users
-    understand complex concepts quickly and efficiently.
-  </p>
-  <blockquote>
-    <p>Documentation is a love letter that you write to your future self.</p>
-  </blockquote>
-  <p>
-    The foundation of great documentation starts with <strong>understanding your audience</strong> and their needs.
-  </p>
-</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Inline HTML elements
-
-HTML provides a long list of inline tags. These are commonly used inside `.prose`.
-
- **Bold text** uses `<strong>`.
- *Italic text* uses `<em>`.
- ==Highlighting== uses `<mark>`.
- Abbreviations like HTML use `<abbr>` with a `title`.
- Citations use `<cite>`.
- Deleted text uses `<del>` and inserted text uses `<ins>`.
- Superscript uses `<sup>` and subscript uses `<sub>`.
-
-Most of these elements are styled by browsers with only light adjustments from Tabler.
-
-## Headings
-
-Headings help readers scan long documents quickly. Use them to create a clear hierarchy and maintain a logical flow.
-
-### Code
-
-Inline code is available with `<code>`. For multi-line snippets, use `<pre><code>`.
-
-{% capture html -%}
-<div class="prose">
-  <p>Inline code looks like <code>console.log("Hello")</code> and uses monospace styling.</p>
-  <pre><code>// Create a function that returns a sum
-function add(a, b) {
-  return a + b;
-}
-</code></pre>
-</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-### Lists
-
-Use ordered lists for steps and unordered lists for related points.
-
-{% capture html -%}
-<div class="prose">
-  <ol>
-    <li>Start with the most important information.</li>
-    <li>Provide context before technical details.</li>
-    <li>Include practical examples.</li>
-  </ol>
-  <ul>
-    <li>Write clear, concise list items.</li>
-    <li>Keep the structure consistent.</li>
-    <li>Avoid overly long items.</li>
-  </ul>
-</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-### Images
-
-Images should support the text and provide useful context.
-
-{% capture html -%}
-<div class="prose">
-  <img src="/static/photos/cup-of-coffee-and-an-open-book.jpg" alt="Open book and coffee" />
-  <img src="/static/photos/book-on-the-grass.jpg" alt="Book on the grass" />
-  <img src="/static/photos/stylish-workspace-with-macbook-pro.jpg" alt="Workspace with laptop" />
-</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-### Tables
-
-Tables work best for comparing related data points.
-
-{% capture html -%}
-<div class="prose">
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Up-votes</th>
-        <th>Down-votes</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>Alice</td>
-        <td>10</td>
-        <td>11</td>
-      </tr>
-      <tr>
-        <td>Bob</td>
-        <td>4</td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td>Charlie</td>
-        <td>7</td>
-        <td>9</td>
-      </tr>
-      <tr>
-        <td>Totals</td>
-        <td>21</td>
-        <td>23</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
@@ -1,277 +0,0 @@
---
-title: Typography
-summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
-bootstrapLink: content/typography/
-description: Role of typography in interface design.
---
-
-## Headings
-
-Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings.
-The `h1` tag is the highest level and the `h6` tag is the lowest level.
-
-Below are examples of headings with different levels:
-
-{% capture html -%}
-<h1>H1 Heading</h1>
-<h2>H2 Heading</h2>
-<h3>H3 Heading</h3>
-<h4>H4 Heading</h4>
-<h5>H5 Heading</h5>
-<h6>H6 Heading</h6>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Paragraphs
-
-Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content.
-
-```html
-<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
-```
-
-If you use a second paragraph, it will be separated from the first one by a blank line.
-
-{% capture html -%}
-<p>
-	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-	ut labore et dolore magna aliquyam erat, sed diam voluptua.
-</p>
-<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
-{%- endcapture %}
-{% include "docs/example.html" html=html vertical %}
-
-
-## Semantic text elements
-
-Use a variety of semantic text elements, depending on how you want to display particular fragments of content.
-
-Here are examples of semantic text elements:
-
-{% capture html -%}
-<div>
-  <abbr title="Internationalization">I18N</abbr>
-</div>
-<div>
-	<strong>Bold</strong>
-</div>
-<div>
-  <cite>Citation</cite>
-</div>
-<div>
-  <code>Hello World!</code>
-</div>
-<div>
-  <del>Deleted</del>
-</div>
-<div>
-  <em>Emphasis</em>
-</div>
-<div>
-  <i>Italic</i>
-</div>
-<div>
-  <ins>Inserted</ins>
-</div>
-<div>
-  <kbd>Ctrl + S</kbd>
-</div>
-<div>
-  <mark>Highlighted</mark>
-</div>
-<div>
-  <s>Strikethrough</s>
-</div>
-<div>
-  <samp>Sample</samp>
-</div>
-<div>
-	Text <sub>Subscript</sub>
-</div>
-<div>
-	Text <sup>Superscript</sup>
-</div>
-<div>
-  <time>20:00</time>
-</div>
-<div>
-  <u>Underline</u>
-</div>
-<div>
-	<var>x</var> = <var>y</var> + 2
-</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Horizontal rules
-
-Use the `hr` tag to represent a thematic break between paragraphs within one section.
-
-{% capture html -%}
-<div>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam
-    reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita
-    quibusdam veniam?
-  </p>
-  <hr />
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam
-    reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita
-    quibusdam veniam?
-  </p>
-</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Horizontal rules with label
-
-You can also add a label to a horizontal rule and align it as you see fit. Centered label is the default.
-
-{% capture html -%}
-<p>
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-  labore et dolore magna aliquyam erat, sed diam voluptua.
-</p>
-<div class="hr-text">
-  <span>Rule text</span>
-</div>
-<p>
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-  takimata sanctus est Lorem ipsum dolor sit amet.
-</p>
-<div class="hr-text hr-text-center">
-  <span>Rule text</span>
-</div>
-<p>
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-  labore et dolore magna aliquyam erat, sed diam voluptua.
-</p>
-<div class="hr-text hr-text-start">
-  <span>Rule text</span>
-</div>
-<p>
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-  takimata sanctus est Lorem ipsum dolor sit amet.
-</p>
-<div class="hr-text hr-text-end">
-  <span>Rule text</span>
-</div>
-<p>
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-  labore et dolore magna aliquyam erat, sed diam voluptua.
-</p>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Optimized for different alphabets
-
-Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.
-
-{% capture html -%}
-<p>汉字</p>
-<p>日本語の表記体系</p>
-<p>Кириллица</p>
-<p>Eλληνική</p>
-<p>ქართული დამწერლობა</p>
-<p>Հայերենի այբուբեն</p>
-<p>الحروف العربية</p>
-<p>אלפבית עברי</p>
-<p>อักษรไทย</p>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Text transform
-
-Transform the content of components with text capitalization classes.
-
-{% capture html -%}
-<p class="text-lowercase">Lowercased text.</p>
-<p class="text-uppercase">Uppercased text.</p>
-<p class="text-capitalize">Capitalized text.</p>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Letter spacing
-
-Control the tracking (letter spacing) of an element and make it tight, wide or normal.
-
-{% capture html -%}
-<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
-<p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
-<p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Line height
-
-Control the leading (line height) of an element using the `.lh-*` classes. The line height is the vertical space between lines of text.
-
-{% capture html -%}
-<p class="lh-1">
-  This is the long text with line height 1. Lorem ipsum dolor sit amet. Dolor sit amet.
-</p>
-<p class="lh-sm">
-  This is the long text with small line height. Lorem ipsum dolor sit amet. Dolor sit amet.
-</p>
-<p class="lh-base">
-  This is the long text with base line height. Lorem ipsum dolor sit amet. Dolor sit amet.
-</p>
-<p class="lh-lg">
-  This is the long text with large line height. Lorem ipsum dolor sit amet. Dolor sit amet.
-</p>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Antialiasing
-
-Control the font smoothing of an element.
-
-Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing.
-
-{% capture html -%}
-<div class="antialiased">Text with antialiasing</div>
-<div class="subpixel-antialiased">Text without antialiasing</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Keyboard input
-
-Use the `<kbd>` to indicate input that is typically entered via keyboard.
-
-{% capture html -%}
-To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Prose
-
-If you can't use the CSS classes you want, or you just want to use HTML tags, use the `.prose` class in a container. It will apply the default styles for markdown elements. The `.markdown` class is an alias and will be removed in a future release. The `.wysiwyg` integration (`ui/wysiwyg.html`) is deprecated and will be removed in a future release. See the Prose page for full examples.
-
-{% capture html -%}
-<div class="prose">
-  <h1>Hello World</h1>
-  <p>
-    Lorem ipsum<sup>[1]</sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus
-    ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut
-    vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub
-      >script</sub
-    >
-    works as well!
-  </p>
-  <h2>Second level</h2>
-  <p>
-    Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum
-    maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis.
-    Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui.
-    Ut et neque nisl.
-  </p>
-  <ul>
-    <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
-    <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
-    <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
-    <li>Ut non enim metus.</li>
-  </ul>
-</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
--- a/Show More
+++ b/Show More