DOCSEARCHbyAlgolia
Submit Docs

Olmokit Documentation

website·Indexed 29 days ago

https://olmokit.github.io/olmokit

A frontend toolkit and library featuring Laravel integration, TypeScript utility modules, and core UI components. It provides tools for CMS API communication, SEO management, scrolling animations, and a dedicated CLI via @olmokit/create-app for project scaffolding.

Tokens
36.2K
Snippets
318
Records
394
Agent score
74%

What's inside Olmokit

  1. Overview of olmo/laravel-frontend

    olmo/laravel-frontend is an opinionated Laravel wrapper used to build frontend applications in tandem with the @olmokit/cli. It provides specific customizations, conventions, and helpers integrated directly into the Laravel framework to streamline frontend development.

  2. Overview of OlmoKit frontend development packages

    OlmoKit provides a set of multi-language packages designed for developing, deploying, and maintaining Olmo-based frontend applications. The ecosystem includes both npm packages for JavaScript/TypeScript environments and Composer packages for PHP/Laravel environments.

  3. Overview of @olmokit/dom utility library

    @olmokit/dom is a collection of multi-purpose, low-level utilities designed to simplify interactions with the DOM. It is distributed as a scoped npm package and is synced with the @koine/dom package.
    import { ... } from "@olmokit/dom";

  4. Overview of olmokit Skeleton core elements

    Skeleton core elements are configurable SVGs used to create content-like placeholder graphics. These are displayed to the user while waiting for an asynchronous view to be fetched and rendered, improving the perceived loading experience.

  5. Overview of @olmokit/browser utilities

    @olmokit/browser is a library providing multi-purpose, low-level utilities designed to simplify interactions with various browser APIs. It is synced with the @koine/browser package.
    import { ... } from "@olmokit/browser";

  6. Understand olmokit configuration architecture

    Core configuration for olmokit projects is centralized within the @olmokit/cli npm package. Individual projects use their package.json to apply necessary configurations and execute scripts. This architecture allows scripts and core configurations to be updated independently of the project, ensuring all projects benefit from updates without increasing local dependency overhead.

  7. Install and use @olmokit/utils

    @olmokit/utils is a library providing a set of multi-purpose low-level utilities. It is distributed as a scoped npm package and is synced with @koine/utils.
    import { ... } from "@olmokit/utils";

  8. Implement asynchronous view updates using Fragments

    Fragments allow developers to create custom routes and asynchronous behaviors by retrieving views (components, utils, core elements, fragments, or route templates) without a full page reload. This is achieved using the /_/fragments/_replace/ endpoint exposed by Laravel Frontend and the @olmokit/core/fragments/replace utility, which handles the request to fetch and replace the view asynchronously.

  9. Recommended date library for olmokit

    For handling dates and times in JavaScript, the recommended library is date-fns. It is used within @olmokit/core because it is functional and optimized for tree-shaking.

  10. Manage application locale using olmokit I18n middleware

    The olmokit Laravel frontend I18n module provides a custom middleware designed to manage the correct locale setting for the application by interfacing with Laravel's API.

  11. Understand the Olmokit project folder structure

    Olmokit uses a source-first approach where frontend code resides in the src folder at the project root. The Olmokit CLI compiles and assembles this code into standard Laravel folders (/resources and /public), which are typically gitignored.

    Key directory roles:

    • src/: The primary source of all frontend code (not deployed).
    • resources/: Contains compiled Blade templates and PHP files.
    • public/: Contains compiled static assets and environment-specific .htaccess files.
    • config/: Contains application configuration, primarily laravel-frontend.php.

    Files marked as autogenerated by the CLI cannot be customized, while those marked with ** are generated initially and can be customized afterward.

  12. Understand the image caching and delivery route

    Images arriving from the CMS API are processed via Intervention Image and stored in the Laravel storage cache using the file driver and Cache facade. They are exposed publicly via a specific URL pattern. To maintain SEO best practices, the original image name is preserved, timestamps are removed, and the filename is converted to a hyphenated lowercase string.
    {APP_URL}/_/img/cache/{imgHash}/{imgName}.{imgExtension}