DOCSEARCHbyAlgolia
Submit Docs

Static Shock

website·Indexed 32 days ago

https://staticshock.io

A static site generator for Dart. It features a plugin-based pipeline for transforming pages and assets, support for Markdown and Jinja templates, and built-in capabilities for compiling Sass and Tailwind CSS, generating RSS feeds, and deploying to GitHub Pages.

Tokens
13.8K
Snippets
84
Records
115
Agent score
64%

What's inside Static Shock

  1. Overview of Jinja templating in Static Shock

    Static Shock uses Jinja, a templating system originally developed as a Python library and ported to Dart via the jinja Pub package. It is used to create dynamic content within text or HTML files by inserting values, executing loops, and running template behaviors.

  2. Overview of the Static Shock DataIndex

    The DataIndex is the primary mechanism for sharing data between pipeline steps, plugins, and page renderers (such as the Jinja page renderer). It is a hierarchical structure similar to a JSON object and is accessed via the StaticShockPipelineContext.

  3. Overview of the WebsiteScreenshotsPlugin

    The WebsiteScreenshotsPlugin allows you to take screenshots of websites, save them as images, and display them in your generated website. This is particularly useful for creating showcase or portfolio sections.

  4. Understand the Static Shock monorepo structure

    Static Shock uses a monorepo architecture containing multiple independent Dart packages. The project is divided into the following components:

    • static_shock: The core implementation used to build static sites.
    • static_shock_cli: A command-line interface tool for generating, building, and testing Static Shock websites.
    • static_shock_docs: The project's own documentation website, which is built using the Static Shock framework.

  5. Understand Asset data structures in Static Shock

    In Static Shock, an Asset is a data structure representing any output file that is not a page (e.g., CSS, JavaScript, images, videos). An Asset consists of two primary pieces of information: a source and a destination. Both the source and destination contain a file path and the actual content, which can be either text or binary data.

  6. Understand the Static Shock Page data structure

    A Page is the primary data structure in Static Shock that eventually becomes a URL-addressable HTML page in the final static site build. Page objects are created by PageLoaders (e.g., a Markdown plugin creating a Page for every .md file) and can be modified by plugins that register a PageTransformer during the 'transform pages' step of the pipeline.

  7. Use the PagesIndex to query website pages in the pipeline

    The PagesIndex is a queryable data structure that stores all Page objects as they are loaded into the StaticShock pipeline. It allows plugins to retrieve and filter pages to perform site-wide operations. Common use cases include:

    • Jinja plugin: Rendering HTML for groups of pages (e.g., generating navigation menus).
    • RSS plugin: Iterating through all pages to assemble the website's RSS feed.
    • Redirects plugin: Identifying pages that require HTTP redirect configurations.

    The PagesIndex is accessed via the StaticShockPipelineContext.

  8. Static Shock Jinja implementation details

    Static Shock uses the jinja package from Pub. Because it is a specific implementation, it may not support all features found in the original Python Jinja documentation. For full syntax specifications, refer to the official Jinja website.

  9. Understand static site concepts and limitations

    A static site is a website where all content is available at build time and does not rely on user-submitted content after deployment. They are composed of standard browser files (HTML, CSS, JavaScript, images, audio, and video). Common use cases include marketing pages, blogs, and documentation. In contrast, dynamic sites (like Facebook or GitHub) cannot be fully generated at build time because their content is created by users.

  10. Understand the Static Shock plugin architecture

    A plugin in Static Shock is a collection of configurations used to share functionality across projects. Plugins do not have special permissions; they simply organize code that configures the StaticShockPipeline. The pipeline processes source files into final static website build files using the following components:

    • Picker: Selects files/directories to enter the pipeline.
    • DataLoader: Loads external data for page rendering.
    • AssetTransformer: Transforms asset content (e.g., Sass to CSS).
    • PageLoader: Identifies source files as pages and loads them into Page objects.
    • PageTransformer: Modifies Page objects before rendering.
    • PageRenderer: Renders Page objects to final HTML files.
    • Finisher: Executes behavior after all pages are rendered.

  11. Understand Tailwind integration in Static Shock

    The TailwindPlugin integrates with the Static Shock build phase by spawning a separate process to run the Tailwind CLI. It scans the files defined in tailwind.config.js, processes the input CSS file, and generates a single optimized CSS file containing only the classes used in the project.

  12. Guidelines for contributing to Static Shock issues

    Before starting work on an issue in the Static Shock repository, contributors must request that the team assign the issue to them to avoid duplicate effort. When requesting assignment, provide details regarding your familiarity with the task and your proposed implementation plan to ensure alignment with the project's goals.