TailwindUI Syntax Teardown
TailwindUI Syntax Teardown
- Use markdoc
- What is markdoc? TODO link website, readup quickly, summarize (in own words?) in sentence or para
- How do they do search ✅2022-07-14 they use algolia docsearch https://docsearch.algolia.com - see the
src/components/Search.jsx
. Qu: can we use docsearch? At least for flowershow we can! - How do they style front page?
- How do they do LHS and RHS sidebars?
- How do they style other pages?
- How do they do light/dark etc?
- What frontmatter do they have and how do they use it?
- Do they do SEO?
Markdoc
Site: https://markdoc.io/ Docs: https://markdoc.io/docs/getting-started Setup with Nextjs: https://markdoc.io/docs/nextjs
Framework for markdown based content created by Stripe. Configs, or extra setups are done in a folder called markdoc located at root.
Basic Features:
-
Markdown with extended syntax - tags, annotations, variables, functions
- tags - somewhat similar to html but also more
- further customization with custom tags eg. with props, etc
- docs - https://markdoc.io/docs/tags
{% div %} {% span %} ... {% /span %} {% /div %} --- {% if %} ... {% else /%} ... {% /if %} --- {% image width=40 /%}
- annotations - basically adding class or id properties directly to markdown content without need of any html syntax. eg. see below
- Also works with tags
# Header {% #custom-id %} # Heading {% .custom-class-name-here %}
Search
- Clean and simple algolia docsearch integration - react package '@docsearch/react' https://www.npmjs.com/package/@docsearch/react
- Using Docsearch modal and a keyboard events hook (ie, to find docs) from docsearch package
- navigating to page with next router
- Within a react modal setup
- navigator events in useEffect and
<kbd>
element for command+k search - Added to Navbar in layout.js
Files
.
├── LICENSE.md
├── README.md
├── jsconfig.json
├── markdoc
│ ├── nodes.js
│ └── tags.js
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── prettier.config.js
├── public
│ ├── favicon.ico
│ └── fonts
│ ├── Inter-italic.var.woff2
│ ├── Inter-roman.var.woff2
│ ├── lexend.txt
│ └── lexend.woff2
├── src
│ ├── components
│ │ ├── Button.jsx
│ │ ├── Callout.jsx
│ │ ├── Fence.jsx
│ │ ├── Hero.jsx
│ │ ├── HeroBackground.jsx
│ │ ├── Icon.jsx
│ │ ├── Layout.jsx
│ │ ├── LinkGrid.jsx
│ │ ├── Logo.jsx
│ │ ├── MobileNavigation.jsx
│ │ ├── Navigation.jsx
│ │ ├── Prose.jsx
│ │ ├── Search.jsx
│ │ ├── ThemeSelector.jsx
│ │ └── icons
│ │ ├── InstallationIcon.jsx
│ │ ├── LightbulbIcon.jsx
│ │ ├── PluginsIcon.jsx
│ │ ├── PresetsIcon.jsx
│ │ ├── ThemingIcon.jsx
│ │ └── WarningIcon.jsx
│ ├── images
│ │ ├── blur-cyan.png
│ │ └── blur-indigo.png
│ ├── pages
│ │ ├── _app.jsx
│ │ ├── _document.jsx
│ │ ├── docs
│ │ │ ├── architecture-guide.md
│ │ │ ├── basics-of-time-travel.md
│ │ │ ├── cacheadvance-flush.md
│ │ │ ├── cacheadvance-predict.md
│ │ │ ├── cacheadvance-regret.md
│ │ │ ├── cacheadvance-revert.md
│ │ │ ├── compile-time-caching.md
│ │ │ ├── design-principles.md
│ │ │ ├── how-to-contribute.md
│ │ │ ├── installation.md
│ │ │ ├── introduction-to-string-theory.md
│ │ │ ├── neuralink-integration.md
│ │ │ ├── predicting-user-behavior.md
│ │ │ ├── predictive-data-generation.md
│ │ │ ├── temporal-paradoxes.md
│ │ │ ├── testing.md
│ │ │ ├── the-butterfly-effect.md
│ │ │ ├── understanding-caching.md
│ │ │ └── writing-plugins.md
│ │ └── index.md
│ └── styles
│ ├── docsearch.css
│ ├── fonts.css
│ ├── prism.css
│ └── tailwind.css
└── tailwind.config.js
_app.js
- Sets page title (nice and simple)
- Collects table of contents by walking markdoc nodetree
- Hands everything off to layout component
Front Page Sample
Front Page Styling
in components/Layout.js
- Singular sitewide docs layout
- Renders Hero component if router = home
/
Other Pages Styling
Same as above in Frontpage ie., in /components/Layout.js
- Without Hero component.
- Table of contents
LHS & RHS Sidebars
-
Table of Contents layout configured in components/Layout.js
-
Using custom created functions and hooks (no packages)
- custom hook useTableOfContents for scroll events
- handling headings hierarchy in _app.js
- custom function collectHeadings used to get content from props markdoc pages which is passed to
<Layout tableOfContents={tableOfContents} />
let tableOfContents = pageProps.markdoc?.content ? collectHeadings(pageProps.markdoc.content) : []
SEO
- Only title and meta description set in Head element in
_app.js
Light/Dark Mode
- Theme script in _document.jsx
- stored in window.localStorage
- ThemeSelector component (and imported in Layout's Header)
- Uses 'Listbox' component from @headlessui/react
- Three themes ie, dark, light, system
- sets document's 'data-theme' attribute using state and useEffect
Frontmatter
- Markdoc supported, no configuration or defining specific required fields
- Add frontmatter to pages as needed
- Available in _app.js pageProps.markdoc?.frontmatter
- Current theme uses title, pageTitle and description
- title is used in Layout.js
Navigation
- Hardcoded in Layout.js
const navigation = [ { title: "...", href: /docs/{file-name-here} }, ... ]
Raw source
Questions
- How does styling work
- What is
{.lead}
etc