Tailwind CSS

Overview of Maintainable Statamic Development Building a website is easy; maintaining it for three years is where the real challenge lies. In the ecosystem of Laravel, Statamic stands out as a unique hybrid CMS—balancing the speed of flat-file storage with the power of a dynamic framework. This guide focuses on building sites that don't just work on launch day but remain easy to update, scale, and support through architectural best practices. By embracing "The Statamic Way," developers can create highly composable interfaces that empower clients while maintaining strict design integrity. We will explore how to use fieldsets for global consistency, implement a robust "Page Builder" using replicator sets, and organize Antlers templates to prevent the dreaded "spaghetti view" folder. Prerequisites To follow this tutorial, you should have a baseline understanding of: - **PHP & Laravel Basics**: Understanding how Laravel structures its directories and handles logic. - **Statamic Fundamentals**: Knowledge of Entries, Collections, and Blueprints. - **Tailwind CSS**: Used for the styling examples in our components. - **Antlers Templating**: Familiarity with the double-curly brace `{{ variable }}` syntax. Key Libraries & Tools - Statamic: A flat-file first CMS built on Laravel. - **Antlers**: The built-in templating engine for Statamic, optimized for CMS data. - **Alpine.js**: For lightweight front-end interactivity. - **Tailwind CSS**: The preferred utility-first CSS framework for Statamic sites. - **Vite**: The build tool used for asset compilation. - **PHPStorm**: The IDE used for the code demonstrations. Code Walkthrough: Composable Components and Page Builders 1. Creating Reusable Metadata with Fieldsets Instead of defining SEO fields for every collection, we use Fieldsets to create a "single source of truth." ```yaml metadata.yaml fieldset configuration title: Metadata fields: - handle: meta_title field: type: text display: Meta Title - handle: meta_description field: type: textarea display: Meta Description - handle: og_image field: type: assets max_files: 1 display: Open Graph Image ``` By linking this fieldset in your **Blueprints**, any change to the metadata structure (like adding a canonical URL field) automatically propagates to both your "Pages" and "Movies" collections. 2. The Button Component with Slots To ensure buttons look consistent across the site while remaining flexible, we use partials with slots. ```antlers {{# views/partials/components/button.antlers.html #}} <a href="{{ href ?? '#' }}" class="px-4 py-2 bg-amber-500 rounded text-white hover:bg-amber-600 transition"> {{ slot }} {{ if icon }} <span class="ml-2">{{ partial:icons/{{ icon }} }}</span> {{ /if }} </a> ``` You can then call this button from any template, passing specific markup into the default slot: ```antlers {{ partial:components/button href="/tickets" }} Buy Tickets Now {{ slot:icon }}ticket{{ /slot:icon }} {{ /partial:components/button }} ``` 3. Implementing the Dynamic Page Builder A maintainable Page Builder avoids huge `if/else` chains in your main layout. Instead, use the `type` variable to dynamically load partials. ```antlers {{# In your layout file #}} <div class="page-builder"> {{ page_builder }} {{ partial src="page_builder/{type}" }} {{ /page_builder }} </div> ``` This pattern looks for files in `views/partials/page_builder/`. If the user adds a "Text" set, Statamic loads `text.antlers.html`. If they add a "Random Movies" set, it loads `random_movies.antlers.html`. This keeps each block's logic isolated and clean. Syntax Notes: Antlers Best Practices - **The Colon Prefix (`:`)**: When passing a variable into a partial, use `{{ partial:name :variable="actual_var" }}`. The colon tells Antlers to treat the string as a variable rather than a literal string. - **Local Variables**: Use a leading underscore (e.g., `_my_var`) for variables that are only relevant within a specific partial. This distinguishes them from global entry data. - **Dry Templates**: Use `{{ yield }}` and `{{ section }}` just like you would in Blade to inject scripts or styles into specific parts of your main layout from a nested template. Practical Examples: The "Salt + G" Stack Modern Statamic development often follows the **SALT+G** acronym: Statamic, Alpine.js, Laravel, Tailwind CSS, plus **Git**. Because Statamic is flat-file, your content exists as YAML and Markdown files. By using the Git Integration, content changes made by a client on production are automatically committed and pushed back to your repository. This allows developers to pull down the production content locally without ever touching a database dump. Reducing the Cost of Action in Development Teams While code quality is vital, Max Brokman argues that the most expensive part of software development isn't the CPU cycles—it's the **Cost of Action**. This is the sum of fear, uncertainty, and frustration that prevents a developer from making progress. Eliminating Decision Fatigue Every choice—from which queue driver to use to where to place a utility class—has a cost. 1. **Don't Fight the Framework**: If you are using Laravel, do things the "Laravel Way." Avoid the temptation to bolt on micro-framework patterns that require ten different documentation sites to understand. 2. **Avoid Resume-Driven Development**: Implementing Kafka for a small blog because it looks good on a resume adds massive maintenance debt. Use the simplest tool that solves the problem "right now." Optimizing the "Joiner" Experience A team's health is often measured by how quickly a new developer can run `git clone` and see the application in their browser. - **Seeders over Dumps**: Never rely on production database dumps for local dev. Maintain robust seeders and factories. - **The "Nuke" Command**: Create a script that deletes all Docker volumes and rebuilds the environment from scratch. If this script fails, your environment is too fragile. - **Document the "Arcane"**: If a specific environment variable is required for a third-party API, it must be in the `.env.example`. Tips & Gotchas - **Premature Abstraction**: Don't build a component for a button if you only have one button on the entire site. Wait until you see the pattern repeat three times. - **The Scaling Myth**: Many developers over-architect for 100 million users when they currently have zero. Use the `sync` or `database` queue driver until you actually hit a performance ceiling. - **Reviewer Fatigue**: In code reviews, automate the nitpicks. Use tools like Laravel Pint to handle formatting so humans can focus on the architectural logic. - **Read the Docs**: Statamic has world-class documentation. Most "custom" solutions developers build are actually already handled by a built-in tag or fieldtype.

Overview Modern web development often requires a clean separation between the data layer and the presentation layer. Connecting Remix to a Laravel REST API allows you to utilize the powerful server-side rendering (SSR) capabilities of React while keeping your business logic within a robust PHP backend. This approach moves authentication logic to the server, enhancing security by keeping sensitive tokens out of the client's reach. Prerequisites To follow this guide, you should have a solid grasp of JavaScript and React. You will also need Node.js installed and a functioning Laravel API. Familiarity with environment variables and HTTP requests is essential. Key Libraries & Tools * **Axios:** A promise-based HTTP client used to perform requests to the API. * **dotenv:** Loads configuration variables from a `.env` file. * **Tailwind CSS:** A utility-first CSS framework for rapid UI development. * **Laravel Sanctum:** Provides the token-based authentication system on the backend. Code Walkthrough Configuring the Server-Side Axios Instance Create `services/axios.server.js` to centralize your API requests. This ensures every request uses the correct base URL and handles errors globally. ```javascript import axios from "axios"; const api = axios.create({ baseURL: process.env.API_HOST, headers: { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest", }, }); api.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { throw redirect("/login"); } return Promise.reject(error); } ); export default api; ``` Secure Session Management Instead of storing tokens in `localStorage`, we use encrypted cookies. This mitigates Cross-Site Scripting (XSS) risks. In `services/oauth.server.js`, we initialize the cookie storage. ```javascript import { createCookieSessionStorage } from "@remix-run/node"; export const storage = createCookieSessionStorage({ cookie: { name: "_session", secure: process.env.NODE_ENV === "production", secrets: [process.env.SESSION_SECRET], sameSite: "lax", path: "/", maxAge: 60 * 60 * 24 * 30, httpOnly: true, }, }); ``` Syntax Notes Remix uses **loaders** for GET requests and **actions** for mutations. By throwing a `redirect()` object within an interceptor, you can halt the execution flow and force the browser to a new URL, a pattern that simplifies authentication checks across multiple routes. Practical Examples This architecture is ideal for high-security applications like dashboards or booking systems. By fetching data in the loader, Remix populates the page before it reaches the user, improving SEO and perceived performance. Tips & Gotchas Always include the `Accept: application/json` header. Without it, Laravel might return HTML error pages instead of JSON during a failure. Remember that `httpOnly` cookies cannot be accessed by client-side scripts, so all token logic must reside in your server-side files.

Overview Connecting a Nuxt.js frontend to a Laravel REST API creates a powerful, SEO-friendly architecture. By using session-based authentication rather than just tokens, you gain the native security benefits of CSRF protection and reduced XSS risks. This guide explores how to synchronize these environments to share cookies and fetch data seamlessly using a first-party frontend approach. Prerequisites To follow along, you need a working knowledge of JavaScript and PHP. You should have a Laravel API already configured and Nuxt.js (version 2 is used here) installed. Basic familiarity with terminal commands and local development environments like Laravel Valet will help you manage local subdomains. Key Libraries & Tools * Axios: A promise-based HTTP client for the browser and Node.js. * Nuxt Auth Module: A dedicated library to handle authentication strategies. * Laravel Sanctum: Provides a featherweight authentication system for SPAs and simple APIs. * Tailwind CSS: A utility-first CSS framework for rapid UI development. Environment Synchronization For session-based auth to work, both apps must share a top-level domain. Use Laravel Valet to link your API to `api.ergodnc.test` and proxy your Nuxt app to `app.ergodnc.test`. In your Laravel `.env`, set `SESSION_DOMAIN` to `.ergodnc.test`. This dot prefix is non-negotiable; it tells the browser the cookie belongs to all subdomains. Additionally, update `cors.php` by setting `supports_credentials` to `true` to allow the browser to pass cookies back and forth. Code Walkthrough: Data Fetching and Auth In your Nuxt pages, the `fetch` hook is your best friend. It allows you to populate data on the server side or during client-side navigation. ```javascript async fetch() { const response = await this.$axios.get('/offices'); this.offices = response.data; } ``` For authentication, configure the Nuxt Auth Module in `nuxt.config.js` using the `cookie` strategy. You must define four critical endpoints: `login`, `logout`, `user`, and the Sanctum `client-side-csrf` cookie. This ensures Nuxt initializes the CSRF token before attempting a login. Syntax Notes Nuxt’s `fetchState` is an elegant way to handle UI states. Use `$fetchState.pending` to show loaders and `$fetchState.error` to catch failures. When using the Nuxt Auth Module, the `$auth` helper becomes globally available, allowing you to check `$auth.loggedIn` or access user data via `$auth.user` directly in your templates. Tips & Gotchas Always verify that your Laravel Sanctum stateful domains include your Nuxt URL. If you miss this, Laravel won't attach the session middleware, and your authentication will fail silently. If you get 401 errors after a session expires, use an Axios interceptor to catch the error and force a logout on the frontend to keep the UI in sync with the server.