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

© 2024 All rights reservedBuilt with DataHub Cloud

Built with LogoDataHub Cloud