FixIt Hugo Theme

repository·main·Indexed 22 days ago

https://github.com/hugo-fixit/fixit

A high-performance, feature-rich Hugo theme for advanced blogging. It includes AI integration, diverse comment systems, rich Markdown extensions (KaTeX, Mermaid, ECharts), and PWA support. The ecosystem provides specialized tools such as @hugo-fixit/encrypt for AES-256-GCM content encryption, @hugo-fixit/chroma-lexers for SCSS map generation, and @hugo-fixit/gen-docs for automated API reference documentation.

Tokens
10.1K
Snippets
35
Records
53
Agent score
77%

What's inside FixIt

  1. Overview of @hugo-fixit/shared

    main
    @hugo-fixit/shared is a package containing internal utilities shared across all @hugo-fixit workspace packages. It provides common helpers for path resolution, shell command execution, string manipulation, and logging to maintain consistency across the monorepo.
  2. Overview of FixIt features

    main

    FixIt is an advanced Hugo theme designed for performance and rich functionality. Key feature areas include:

    • Performance & SEO: Optimized for Google PageSpeed Insights (99/100 mobile, 100/100 desktop) and supports JSON-LD SEO schema and various analytics providers (Google, Fathom, Baidu, Umami, etc.).
    • Appearance: Responsive design with Light/Dark mode, pagination, and self-expanding Table of Contents.
    • Social & Comments: Extensive support for social links (up to 87) and numerous comment systems (Disqus, Gitalk, Valine, Waline, giscus, etc.).
    • Extended Markdown & Shortcodes: Supports KaTeX/MathJax for math, Mermaid for diagrams, ECharts for data visualization, Font Awesome icons, and specialized shortcodes for music players, maps, and more.
    • Advanced Tools: AI-powered search/summary, PWA support, content encryption, and custom search engines (Algolia, Fuse.js, Pagefind).
  3. Overview of FixIt Hugo Theme

    main
    FixIt is a concise, elegant, and efficient Hugo blog theme. It is based on the prototypes of the LoveIt, KeepIt, and LeaveIt themes. It is designed for high performance (achieving 99/100 on Google PageSpeed Insights mobile scores) and includes extensive support for SEO, various analytics providers, and social/commenting systems.
  4. Explore FixIt Hugo theme components

    main

    To balance simplicity and extensibility, FixIt provides a suite of specialized Hugo theme components. These components can be used to add specific functionality to your site without bloating the core theme.

    Key components include:

    • fixit-bundle: Bundles the FixIt core theme and all components into a single unit.
    • cmpt-translate: Provides automatic site translation.
    • component-projects: Displays GitHub projects and can generate blog posts from README files.
    • hugo-atom-feed & hugo-json-feed: Custom output formats for ATOM and JSON feeds.
    • Shortcodes:
      • asciinema-embed: For embedding asciinema recordings.
      • caniuse: For displaying Can I Use data.
      • docs-bookmark: To embed bookmarks for FixIt Docs.
      • missing-translation: To indicate missing translations.
      • mmt-netease: For NetEase Cloud random comments.
      • reward-log / sponsor-log: For displaying reward or sponsor logs.
  5. Explore FixIt theme components

    main

    FixIt provides an ecosystem of Hugo theme components to balance simplicity with extensibility. You can use individual components for specific features or use fixit-bundle to include the core theme and all components in a single package.

    Available Components

    Bundles

    • fixit-bundle: Bundles the FixIt core theme and all hugo-fixit components into a single component.

    Animation & UI

    • cmpt-flyfish: A canvas-implemented animation effect of small fish swimming.
    • cmpt-mdevtools: Mobile devtools component powered by vConsole and eruda.
    • cmpt-santa-hat: A Christmas Easter Egg implemented with JavaScript.

    Translation & Content

    • cmpt-translate: A component for automatic site translation.
    • shortcode-missing-translation: A component providing a missing-translation shortcode.
    • component-projects: Displays GitHub projects and generates blog posts from README files.

    Feeds

    • hugo-atom-feed: Custom Output Format for ATOM feeds.
    • hugo-json-feed: Custom Output Format for JSON feeds.

    Shortcodes

    • shortcode-asciinema: Provides the asciinema-embed shortcode.
    • shortcode-caniuse: Provides the caniuse shortcode.
    • shortcode-docs-bookmark: Embeds a bookmark of FixIt Docs.
    • shortcode-mmt-netease: Provides a NetEase Cloud random comment shortcode.
    • shortcode-rewards: Provides reward-log or sponsor-log shortcodes.
  6. Multilingual and I18n support in FixIt

    main
    FixIt is built with internationalization (i18n) in mind and supports multilingual site structures. It currently provides built-in support for several languages, including English, Simplified Chinese, Traditional Chinese, French, Spanish, German, Japanese, and Korean, among others. For detailed implementation instructions, refer to the Content Management - Multilingual documentation.
  7. How @hugo-fixit/chroma-lexers works

    main

    The @hugo-fixit/chroma-lexers package automates the creation of the $chroma-lexers SCSS map through the following pipeline:

    1. Fetch: Retrieves lexer definitions (XML and Go files) from the official Chroma GitHub repository using the GitHub API.
    2. Extract: Parses the definitions to identify language names and their associated aliases.
    3. Generate: Produces a SCSS map ($chroma-lexers) that maps these aliases to their canonical language names.
    4. Extend: Appends any custom code types defined in the local src/custom-types.ts file to the generated map.
  8. How @hugo-fixit/integration merges build outputs

    main

    The integration process follows a specific sequence to ensure a clean and organized unified directory:

    1. Cleanup: It removes the existing public/ directory to prevent stale files from persisting.
    2. Demo Integration: It copies the contents of apps/demo/public/ directly into the root public/ directory.
    3. Test Integration: It copies the contents of apps/test/public/ into a subdirectory named public/test/.

    This structure allows the demo application to serve from the root while the test application is isolated within its own path.

  9. How @hugo-fixit/versioning versioning modes work

    main

    The behavior of the versioning tool depends on the mode selected:

    • dev mode: Generates a development version string following the pattern v[patch]-[base36_timestamp] (e.g., v0.3.21-mq7veaoa). This mode is intended to run on dev or main branches during a pre-commit hook, specifically when theme files have changed.
    • prod mode: Uses the official version defined in package.json. It also performs cleanup by removing the nextVersion field if it exists.
  10. How @hugo-fixit/encrypt works and its security model

    main

    The tool performs post-build encryption on HTML files by following these steps:

    1. Scanning: It scans all .html files in the target --input directory.
    2. Identification: It looks for <template data-password="..."> elements, which serve as encryption placeholders.
    3. Encryption: It encrypts the plaintext content using AES-256-GCM.
    4. Key Derivation: It uses PBKDF2 with 100,000 iterations and a random 16-byte salt to derive keys.
    5. Replacement: It replaces the data-password hash with a PBKDF2-protected version and writes the encrypted payload back to the template.

    Security Specifications

    • Algorithm: AES-256-GCM (authenticated encryption).
    • Key Derivation: PBKDF2 (100,000 iterations, random 16-byte salt).
    • Password Verification: Uses a PBKDF2-protected hash rather than a raw SHA-256.
    • Payload Format: base64(salt).base64(iv).base64(ciphertext+tag).

    Performance Note

    Encryption is CPU-bound due to the PBKDF2 key derivation. Expect approximately ~53ms per template regardless of file size or count.

  11. Use the fixit-encrypt CLI

    main

    You can run the encryption tool using several methods depending on your setup:

    • Via npm scripts: Run npm run postbuild if configured in package.json.
    • Via npx: Run npx @hugo-fixit/encrypt without installing globally.
    • Via global installation: Install with npm install -g @hugo-fixit/encrypt and run the fixit-encrypt command directly.
    npx @hugo-fixit/encrypt
  12. Configure front matter for posts using the posts archetype

    main

    When creating new posts, use the archetypes/posts.md template to define the initial front matter. This archetype automatically generates a title based on the filename and sets a short slug using the first 7 characters of the file's unique ID.

    Key fields available in the post front matter include:

    • title: Automatically derived from the filename.
    • slug: A short identifier (first 7 chars of UniqueID).
    • draft: Set to true by default.
    • repost: An object to control reposting behavior with enable (boolean) and url (string).
    • password and message: Used for content protection/encryption.
    • featured_image and featured_image_preview: For managing post thumbnails.

    For a full list of supported front matter keys, refer to the official documentation at https://fixit.lruihao.cn/docs/content-management/front-matter/.

    ---
    title: {{ replace .TranslationBaseName "-" " " | title }}
    subtitle:
    date: {{ .Date }}
    slug: {{ substr .File.UniqueID 0 7 }}
    draft: true
    description:
    keywords:
    weight: 0
    categories:
      - draft
    collections:
      - draft
    tags:
      - draft
    summary:
    featured_image:
    featured_image_preview:
    password:
    message:
    repost:
      enable: false
      url:
    
    # See: https://fixit.lruihao.cn/docs/content-management/front-matter/
    ---
    
    <!--more-->