DOCSEARCHbyAlgolia
Submit Docs

Thulite Documentation

website·Indexed 33 days ago

https://docs.thulite.io/

A documentation theme for Ventizo projects using Hugo and the Norrsken UX design. Covers core concepts, template selection, integrations, deployment workflows, performance optimization, security, and SEO strategies.

Tokens
3.4K
Snippets
0
Records
36
Agent score
66%

What's inside Thulite

  1. Overview of Thulite Documentation Theme

    Thulite is a documentation theme for Ventizo projects built using Hugo and based on the Norrsken UX design. It is designed for production-ready websites with a fast setup flow and practical defaults, guiding developers from initial scaffolding to a running site.

  2. Manage SEO metadata and indexing in Thulite

    Thulite SEO provides a comprehensive suite of tools to control how search engines and social platforms perceive your site. Key capabilities include:

    • Indexing Control: Use robots meta values in page frontmatter to control crawler indexing and use robots.txt to manage site-wide crawler access.
    • URL Management: Set canonical URLs via frontmatter or page permalinks to prevent duplicate content issues. Configure the HTML base element to set a document base URL for relative links and anchor navigation.
    • Multilingual SEO: Generate hreflang and x-default tags automatically from multilingual page variants.
    • Page Metadata: Build page titles using frontmatter, separators, and suffixes. Configure meta descriptions with page-level overrides and fallback behaviors.
    • Feeds: Generate rel=alternate tags for RSS feeds based on Hugo output formats.

  4. Generate Schema.org structured data with Thulite SEO

    Thulite SEO automatically generates Schema.org structured data for the following entity types:

    • Websites
    • Organizations
    • People
    • Breadcrumbs
    • Articles
    • Products

  5. Integrate a Headless CMS with Thulite

    Thulite supports Git-based workflows for content editing and publishing through the following headless CMS integrations:

    • CloudCannon: Provides a visual editing workflow connected directly to the Git repository.
    • Decap CMS: Uses Git-backed content editing with configurable collections that map to the project's Markdown structure.
    • Tina CMS: Supports Git-backed editing for both local and production workflows via configured collections and scripts.

  7. Use Hugo shortcodes in Thulite Markdown

    Thulite utilizes Hugo shortcodes to embed reusable UI patterns directly within Markdown content. This allows for expressive content while keeping the underlying template logic reusable.

  8. Render SVGs in Hugo content and templates

    Thulite provides two primary ways to inline SVGs:

    • Shortcodes: Use the inline-svg shortcode within Markdown content. This allows for configurable arguments regarding sizing, styling, and accessibility.
    • Partials: Use the inline-svg partial within Hugo templates. This provides flexible arguments for adding CSS classes, attributes, and accessibility labels.

    Best Practices:

    • Placement: Use page resources or global assets depending on whether the SVG is page-specific or site-wide.
    • Accessibility: Always provide meaningful titles, descriptions, roles, and ARIA attributes to ensure icons are accessible to assistive technologies.
    • Styling: Use reusable CSS classes or direct SVG attributes to control stroke, fill, and size.

  9. Add custom JavaScript to Thulite

    Custom JavaScript should be placed in assets/js. It is recommended to use DOM-ready patterns and focused behaviors to maintain page interactivity without impacting load performance.

  10. Secure a Thulite production website

    Strengthen the security of a Thulite site by implementing the following:

    • Content Security Policy (CSP): Enforce a strict CSP to limit resource origins and reduce XSS risks.
    • Secure Headers: Implement a baseline of HSTS, nosniff, and framing controls.
    • Email Obfuscation: Use CSS-based obfuscation to protect published email addresses from basic scrapers while keeping them readable for users.

  11. Insert SVGs and Icons using the inline-svg shortcode

    Use the inline-svg shortcode to insert page-specific or global SVG resources and icon-set symbols directly into content. The shortcode supports custom classes, dimensions, light/dark mode variants, and accessibility metadata such as titles, descriptions, and ARIA roles.

  12. Install and configure Thulite SEO

    Thulite SEO manages metadata, structured data, and sitemaps.

    Installation: Install via npm, pnpm, Yarn, or bun. You must add the required module mounts to ensure integration layouts load correctly.

    Configuration: Settings are managed in hugo.toml, params.toml, and page frontmatter. Configurable options include sitemap settings, title/description length, and schema settings.