DOCSEARCHbyAlgolia
Submit Docs

Peak Starter Kit

website·Indexed 33 days ago

https://peak.1902.studio/

An opinionated starter kit for Statamic sites. Peak provides a set of tools and features including a modular page builder, fluid grid system, social image generation, and a dedicated Tools addon with CLI commands and a developer toolbar. It integrates with Tailwind CSS, Vite, and AlpineJS, offering built-in support for fluid typography, accessibility features like skip-to-content and reduced motion, and optimized 404 handling.

Tokens
14.3K
Snippets
70
Records
122
Agent score
66%

What's inside Peak

  1. Overview of the Statamic Peak starter kit

    Peak is a design-agnostic starter kit for bespoke Statamic websites. It is designed to implement SEO and accessibility (a11y) best practices. The kit is opinionated and comes pre-configured with Tailwind CSS and AlpineJS, making it compatible with various design systems.

  2. Overview of Peak Forms functionality

    Peak Forms utilize Laravel Precognition for live validation and submission. They are built following Form Design Patterns and support AlpineJS-driven conditional fields.

  3. Overview of the Peak Statamic starter kit

    Peak is an opinionated starter kit designed to accelerate the development of Statamic sites. It is design-agnostic but comes pre-bundled with Tailwind CSS and AlpineJS. Key features include a built-in page builder, starter templates, fieldsets, blueprints, and SEO functionality, providing a standardized workflow that can be extended or edited to meet specific client needs.

  4. Manage global site settings in Peak

    Peak provides several global configuration sets to manage site-wide settings. These include:

    • Browser appearance: Configuration for browser appearance and favicons.
    • Configuration: Management of the 404 entry page, copyright information, and privacy statements.
    • Redirects: Setup of redirects that trigger upon 404 errors.
    • SEO: Global site search engine optimization options.
    • Social media: Integration of social media accounts, which are rendered as icon links in the site footer.

  5. Prerequisites and technology stack for Peak Starter Kit

    Peak is an opinionated Starter Kit built on a specific technology stack. To use Peak effectively, developers should be familiar with the following tools:

    • Statamic: A flat-file CMS based on Laravel.
    • Antlers: The template language used by Statamic.
    • Tailwind CSS: A utility-first CSS framework.
    • AlpineJS: A minimal JavaScript framework for composing behavior directly in markup.

  6. Manage Noscript accessibility and notifications

    The noscript partial ensures that content marked with x-cloak remains visible to users who have JavaScript disabled, preventing the site from appearing empty. It also displays a notification informing the user that JavaScript is required for full website functionality. The text for these notifications is translatable and can be modified in resources/lang/en/site.php.

  7. Configure binary paths for Node, npm, and Chrome

    If Browsershot cannot locate the necessary binaries, or if you are running on ARM architecture (where a custom Chrome path is required), define the following variables in your .env file. You can find the correct paths by running which node and which npm in your terminal.
    SOCIAL_IMAGE_NODE_BINARY=/path/to/node
SOCIAL_IMAGE_NPM_BINARY=/path/to/npm
SOCIAL_IMAGE_CHROME_PATH=/usr/bin/chromium-browser

  8. Implement the Fluid Grid layout system

    The fluid-grid component (defined in resources/css/peak.css) provides a horizontal layout spanning the full browser width. It consists of a central 12-column content area flanked by two flexible side areas (full-start and full-end), allowing for both centered content and full-bleed elements. You can customize the grid's behavior by altering the --col-gap and --content-max-width CSS custom properties.
    .fluid-grid {
    --col-gap: clamp(1rem, 3vw, 4rem);
    --content-max-width: theme('screens.xl');

    --padding-left: clamp(calc(env(safe-area-inset-left, 0rem) + 1rem), 2vw, calc(env(safe-area-inset-left, 0rem) + 2rem));
    --padding-right: clamp(calc(env(safe-area-inset-right, 0rem) + 1rem), 2vw, calc(env(safe-area-inset-right, 0rem) + 2rem));
    --col-width: calc((min(calc(100% - var(--padding-left) - var(--padding-right) - 2 * var(--col-gap)), var(--content-max-width)) - 11 * var(--col-gap)) / 12);
    --side-width: minmax(0, 1fr);

    display: grid;
    column-gap: var(--col-gap);
    grid-template-columns:
      [full-start] var(--side-width)
      [content-start col-1] var(--col-width)
      [col-2] var(--col-width)
      [col-3] var(--col-width)
      [col-4] var(--col-width)
      [col-5] var(--col-width)
      [col-6] var(--col-width)
      [col-7] var(--col-width)
      [col-8] var(--col-width)
      [col-9] var(--col-width)
      [col-10] var(--col-width)
      [col-11] var(--col-width)
      [col-12] var(--col-width) [content-end]
      var(--side-width) [full-end];
}

  9. Use the Peak Tools developer toolbar

    The Peak Tools addon provides a hidden toolbar located in the bottom right corner of the screen. It becomes visible upon hovering. Key features include:

    • Displays the current Tailwind CSS breakpoint (available only when the environment is set to local).
    • Provides an edit button for logged-in users.
    • Includes a toggle button to permanently fix the toolbar to the window.

  10. Manage long-form content with the Article Bard block

    For long-form content, use the Article content block. This is implemented as a Statamic Bard fieldtype containing multiple sets of fields designed for use in longer articles.

  11. Style long-form content using the prose class

    Apply the prose class to an element to ensure its children follow specific vertical flow, rhythm, and styling rules. This is particularly useful for rendering content from Bard fields. You can use the following modifiers to adjust the styling:

    • prose-invert: Inverts the styling for dark backgrounds.
    • prose-sm: Makes the content smaller.
    • prose-lg: Makes the content larger.
    • prose-xl: Makes the content even larger.
    <div class="prose prose-lg">
  <!-- Long form content here -->
</div>

  12. Extend Peak Commands with custom content and operations

    You can register custom blocks, sets, and presets for internal installation.

    Custom Operations: If the built-in operations (e.g., copy, rename, update_page_builder) are insufficient, you can create custom operations by extending the Studio1902\PeakCommands\Operations\Operation class and registering your own namespace.

    Registration Steps:

    1. Publish the config: php artisan vendor:publish --tag=statamic-peak-commands-config.
    2. Add paths to the blocks, sets, or presets arrays in the config file.
    3. Ensure each item is in its own folder with a config.php file specifying the type (snake-cased or fully qualified class name).
    php artisan vendor:publish --tag=statamic-peak-commands-config