### Quick Start Drupal Installation

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/30.create-new-project.md

Command to perform a quick start installation of Drupal using its built-in webserver.

```bash
php ./web/core/scripts/drupal quick-start standard
```

--------------------------------

### Launch Local Project with Ddev

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/30.create-new-project.md

Commands to clone the Lupus Decoupled project, start the ddev environment, install Composer dependencies, install the Drupal site using Drush, enable modules, and configure the frontend base URL.

```bash
git clone git@github.com:drunomics/lupus-decoupled-project.git
cd lupus-decoupled-project
ddev start
ddev composer install
ddev drush site-install -y --account-pass=admin --site-name='lupus_decoupled' standard
ddev drush pm-enable lupus_decoupled, services_env_parameter -y
# Configure lupus-decoupled frontend base URL
ddev drush config:set lupus_decoupled_ce_api.settings frontend_base_url https://lupus-nuxt.ddev.site -y
# Login and get started adding some test-nodes
ddev drush user-login
```

--------------------------------

### CodeGroup Component with Yarn and NPM Installation Examples

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Illustrates the CodeGroup component, which is used to create tabbed code examples. This specific example shows how to install a package using both Yarn and NPM, allowing users to switch between the two commands.

```markdown
::code-group
  ```bash [Yarn]
  yarn add docus
  ```

  ```bash [NPM]
  npm install docus
  ```
::
```

--------------------------------

### Install Dependencies and Run Dev Server (Bash)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/README.md

Commands to install project dependencies and start the local development server for the Lupus Decoupled Website. Requires Node.js and npm.

```bash
npm install
npm run dev
```

--------------------------------

### Install Drush

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/30.create-new-project.md

Commands to install Drush using Composer and set up an alias for the Drush launcher.

```bash
composer require drush/drush
# If no global drush launcher is already in use, run
alias drush=$PWD/vendor/bin/drush
```

--------------------------------

### Run Nuxt Development Server

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/10.introduction.md

Starts the Nuxt development server with instant hot-reloading. This command is essential for the development workflow.

```bash
npm run dev
```

--------------------------------

### Run Nuxt Development Server (npm, yarn, pnpm)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/30.create-new-project.md

Starts the Nuxt.js application in development mode, allowing for live reloading and testing. This command is essential for frontend development.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

--------------------------------

### Add Drupal CE Nuxt Module

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/20.setup.md

Installs the 'nuxtjs-drupal-ce' module into your Nuxt project using the Nuxt CLI.

```bash
npx nuxi@latest module add drupal-ce
```

--------------------------------

### Install Drupal and Nuxt Modules

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/0.index.md

These commands install the necessary Drupal and Nuxt modules to set up a decoupled Drupal website. The Drupal module is installed using Composer, and the Nuxt module is added using npx.

```bash
// Drupal module
composer require drupal/lupus_decoupled
```

```bash
// Nuxt module
npx nuxi@latest module add drupal-ce
```

--------------------------------

### Generate Drupal CE Scaffold Files

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/20.setup.md

Removes the default app.vue and generates scaffold pages and components for the Drupal Custom Elements Connector using the nuxt-drupal-ce-init command.

```bash
rm -f app.vue && npx nuxt-drupal-ce-init
```

--------------------------------

### CodeBlock Component for Previewing Rendered Code

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Shows how to use the CodeBlock component within a CodeGroup to display a preview of rendered code. This example specifically demonstrates displaying a badge with the text 'Hello World!'

```markdown
/* Added as a child of `<CodeGroup />` */

::code-block{label="Preview" preview}
  ::badge
  Hello World!
  ::
::
```

--------------------------------

### CopyButton Component Usage

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Demonstrates the functionality of the CopyButton component, which allows users to copy provided content to their clipboard. This example shows how to implement it with the text 'hey!'.

```markdown
:copy-button{content="hey!"}
```

--------------------------------

### Install REST Log Module

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/3.advanced-topics/80.debugging.md

Installs the REST Log module for Drupal using Composer. This module is essential for logging and inspecting API requests and responses.

```bash
composer require --dev drupal/rest_log
```

--------------------------------

### Example HTML with Custom Elements

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/10.how-it-works.md

Demonstrates a typical HTML structure for a teaser listing using nested custom elements: 'teaser-listing' and 'article-teaser'. This showcases how components are composed and passed data via attributes.

```html
<teaser-listing title="Latest news" icon="news">
    <article-teaser
        href="https://example.com/news/1"
        excerpt="The excerpt of the news entry."
    >
    </article-teaser>
    <article-teaser
        href="https://example.com/news/2"
        excerpt="The excerpt of another news entry."
    >
    </article-teaser>
</teaser-listing>
```

--------------------------------

### Metatags API Response Example (JSON)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/2.guide/50.metatags-local-tasks.md

Example of the metatags structure returned in the API response. Metatags are grouped by type, such as 'meta' for standard tags and 'link' for link relations.

```json
"metatags": {
  "meta": [
    {
      "name": "title",
      "content": "Lupus Decoupled Drupal"
    },
    {
      "name": "description",
      "content": "Lupus Decoupled Drupal"
    },
    {
      "property": "og:url",
      "content": "https://lupus-decoupled.org"
    },
  ],
  "link": [
    {
      "rel": "canonical",
      "href": "https://lupus-decoupled.org"
    }
  ]
}
```

--------------------------------

### Implementing BlockHero Component with Call to Action

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Shows how to implement the `<BlockHero />` component, which is used for prominent display sections. It includes a title, description, a primary call to action (CTA), a secondary link, and a code snippet example.

```markdown
::block-hero
---
cta:
  - Get started
  - /get-started
secondary:
  - Open on GitHub →
  - https://github.com/nuxtlabs/docus
snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter
---
#title
Document-driven framework

#description
Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.
::
```

--------------------------------

### CardGrid Component Example

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Demonstrates the usage of the CardGrid component to display a collection of cards, each with a title and description. The component is designed to present information in a structured, grid-based layout.

```markdown
::card-grid
#title
What's included

#root
:ellipsis

#default
  ::card
  #title
  Nuxt Architecture.
  #description
  Harness the full power of Nuxt and the Nuxt ecosystem.
  ::
  ::card
  #title
  Vue Components.
  #description
  Use built-in components (or your own!) inside your content.
  ::
  ::card
  #title
  Write Markdown.
  #description
  Enjoy the ease and simplicity of Markdown and discover MDC syntax.
  ::
::
```

--------------------------------

### Fetch Drupal Page using useDrupalCe Composable

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/35.composables.md

Demonstrates fetching a Drupal page using the `fetchPage` method from the `useDrupalCe` composable. Requires `useRoute` to get the current path. Fetches page data from a Drupal instance.

```javascript
import { useRoute } from '#imports';

const { fetchPage } = useDrupalCe();
const page = await fetchPage(useRoute().path);
```

--------------------------------

### Local Tasks API Response Example (JSON)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/2.guide/50.metatags-local-tasks.md

Example of the local tasks structure returned in the API response. Local tasks are categorized into primary and secondary tabs, each with a URL, label, and active status.

```json
"local_tasks": {
  "primary": [
    {
      "url": "/frontpage",
      "label": "View",
      "active": true
    },
    {
      "url": "/node/1/edit",
      "label": "Edit",
      "active": false
    },
    {
      "url": "/node/1/delete",
      "label": "Delete",
      "active": false
    },
    {
      "url": "/node/1/layout",
      "label": "Layout",
      "active": false
    },
    {
      "url": "/node/1/revisions",
      "label": "Revisions",
      "active": false
    },
    {
      "url": "/entity_clone/node/11",
      "label": "Clone",
      "active": false
    },
  ],
  "secondary": []
}
```

--------------------------------

### Full Vue Example with Props and Slots for Custom Elements

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/30.render-custom-elements.md

A comprehensive Vue component example demonstrating the use of props for attributes and slots for content, compatible with both JSON and markup serialization of custom elements. It integrates the `useDrupalCe` helper for rendering.

```vue
<template>
  <div class="node">
    <h2 v-if="title">Node: {{ title }}</h2>
    <slot name="body">
      <component :is="useDrupalCe().renderCustomElements(body)" />
    </slot>
  </div>
</template>

<script setup lang="ts">
defineSlots({
  body(): any;
})
defineProps<{
  title?: string;
  body?: CustomElementContent;
}>()
</script>
```

--------------------------------

### List Component with Various Styles

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Presents the List component, which can render lists with different stylistic themes. This example shows lists with primary, success, info, warning, and danger styles, each containing list items.

```markdown
::list{type="primary"}
- **Important**
- Always
::

::list{type="success"}
- Amazing
- Congrats
::

::list{type="info"}
- Do you know?
- You can also do this
::

::list{type="warning"}
- Be careful
- Use with precautions
::

::list{type="danger"}
- Drinking too much
- Driving drunk
::
```

--------------------------------

### TextFieldItemProcessor Example (PHP)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/50.custom-element-processors.md

Demonstrates the TextFieldItemProcessor service used for formatting text fields within the custom elements module. This class handles the logic for processing text-based field data.

```php
<?php

namespace Drupal\custom_elements\Processor;

use Drupal\Core\Field\FieldItemListInterface;

/**
 * Processes text field item.
 */
class TextFieldItemProcessor extends FieldProcessorBase {

  /**
   * {@inheritdoc}
   */
  public function process(FieldItemListInterface $item_list, string $field_name): array {
    // Process the text field item and return an array of attributes or markup.
    // This is a simplified example; actual implementation would involve
    // more detailed logic based on field settings and values.
    $values = [];
    foreach ($item_list as $item) {
      $values[] = $item->value;
    }
    return $values;
  }

}
```

--------------------------------

### Sandbox Component for Embedding External Content

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Illustrates how to embed external content, such as CodeSandbox or StackBlitz projects, using the Sandbox component. This example embeds a specific Nuxt Content project with navigation hidden and a dark theme.

```markdown
:sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
```

--------------------------------

### Configure Drupal CE Module in nuxt.config.js

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/20.setup.md

Configures the Drupal Custom Elements Connector module within the Nuxt configuration file. Requires setting the drupalBaseUrl to your Lupus Decoupled Drupal instance.

```javascript
export default defineNuxtConfig({
  modules: [
    'nuxtjs-drupal-ce',
  ],
  drupalCe: {
    drupalBaseUrl: 'https://your-drupal.example.com',
    // more options...
  }
})
```

--------------------------------

### Icon Component for Displaying Icons

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Exemplifies the use of the Icon component to display icons from icones.js.org. This example shows how to render the Nuxt icon, Vue icon, and Nuxt icon again by specifying their names.

```markdown
:icon{name="logos:nuxt-icon"}
:icon{name="logos:vue"}
:icon{name="logos:nuxt-icon"}
```

--------------------------------

### Serialize Custom Element Tree to JSON

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/20.custom-elements.md

Provides an example of serializing a tree of custom elements into JSON format using a dedicated normalizer service. It also shows how to handle bubbleable metadata for caching.

```php
<?php
      $custom_element_normalizer = \Drupal::service('custom_elements.normalizer');
      $bubbleable_metadata = BubbleableMetadata::createFromObject($custom_element);
      $json = $custom_element_normalizer->normalize($custom_element, NULL, ['cache_metadata' => $bubbleable_metadata]);
  
```

--------------------------------

### Customizing Drupal Form Markup with Twig

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/3.advanced-topics/60.drupal-forms.md

Example of how to theme Drupal form elements using Twig templates in a custom Drupal theme. This allows for semantic output and easier CSS targeting.

```twig
{# themes/custom/mytheme/templates/form--node-form.html.twig #}
<form{{ attributes }}>
  {{ children }}
  <div class="form-actions">
    <button type="submit"{{ submit_attributes.addClass('button--primary') }}>{{ button_label }}</button>
  </div>
</form>

```

--------------------------------

### Example Lookup Process for Default Components

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/32.default-components.md

Illustrates the fallback mechanism for finding a default Vue component when a specific custom element component is not found. The process progressively removes segments from the custom element name and appends '--default'.

```text
x node-custom-view.vue
x node-custom-view--default.vue
x node-custom--default.vue
✓ node--default.vue
```

--------------------------------

### JSON Redirect Response Example

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/2.guide/65.redirects.md

This JSON structure represents a redirect response from Drupal's page API. It specifies whether the redirect is external, the target URL, and the HTTP status code. The frontend consumes this to generate the appropriate redirect.

```json
{
      "redirect": {
            "external": false,
            "url": "/new-path",
            "statusCode": 301
      },
      "messages": [ ]
}
```

--------------------------------

### Define Vue Component Props from Custom Element Attributes

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/30.render-custom-elements.md

This snippet demonstrates how to define props for a Vue component, allowing attributes from a custom element to be passed as named props. It uses the `<script setup>` syntax for defining props.

```vue
<template>
  <div class="node">
    <h2 v-if="title">Node: {{ title }}</h2>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title?: string;
}>()
</script>
```

--------------------------------

### Initialize Nuxt Project

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/30.create-new-project.md

Commands to initialize a new Nuxt project using nuxi, with options for npx and pnpm.

```bash
npx nuxi@latest init <project-name>
```

```bash
pnpm dlx nuxi@latest init <project-name>
```

--------------------------------

### Create Drupal Project with Composer

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/30.create-new-project.md

Commands to create a new Drupal project using Composer and navigate into the project directory.

```bash
composer create-project drupal/recommended-project drupal-project
cd drupal-project
```

--------------------------------

### Inspecting Drupal API Output

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/40.first-steps.md

Explains how to view the API output for content in Drupal and how to switch between markup and JSON serialization formats.

```text
2. Access API output via the 'API output' option in the backend.
3. Append `?_content_format=markup` or `?_content_format=json` to change serialization format.
```

--------------------------------

### Drupal Content Creation and Editing

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/40.first-steps.md

Provides instructions for creating a new article in Drupal's backend, saving it, and then editing its URL alias and menu item settings on the frontend.

```text
1. Navigate to `/node/add/article` to create content.
5. Change URL alias to `/example-path` and enable menu item.
```

--------------------------------

### Configure Ddev Frontend Repository

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/30.create-new-project.md

Command to update the ddev configuration to use a different frontend repository, specifying the repository URL.

```bash
# Configure a different frontend repository.
ddev config --web-environment-add="FRONTEND_REPOSITORY=https://github.com/drunomics/lupus-decoupled-nuxt3-demo"
```

--------------------------------

### Add Lupus Decoupled Drupal Module

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/30.create-new-project.md

Commands to add the Lupus Decoupled Drupal module and its dependencies using Composer, and then enable it using Drush.

```bash
composer require drupal/lupus_decoupled
drush en lupus_decoupled -y
drush user-login
```

--------------------------------

### Drupal User Login and Logout

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/40.first-steps.md

Details the process for logging into the Drupal frontend using provided credentials and how to log out.

```text
3. Login at `/user/login?destination=/` with credentials `admin`/`lupus123`.
7. Log out by visiting `/user/logout`.
```

--------------------------------

### Configure Drupal Frontend URL via Drush

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/30.create-new-project.md

Sets the base URL for the decoupled frontend within the Drupal backend using the Drush command-line tool. This ensures proper communication between Drupal and the Nuxt application.

```bash
drush config:set lupus_decoupled_ce_api.settings frontend_base_url http://localhost:3000 -y
```

--------------------------------

### Creating Button Links with Icons and External Links

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Demonstrates how to use the `<ButtonLink />` component to create clickable buttons that link to external resources. It shows how to specify the button text, an icon, the URL, and whether to open the link in a new tab.

```markdown
:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}
```

--------------------------------

### Displaying Alerts with Different Types

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Demonstrates how to use the `<Alert />` component to display messages with different types such as info, success, warning, and danger. It shows the basic structure and how to include text content within the alert.

```markdown
::alert{type="info"}
Check out an **info** alert with `code` and a [link](/).
::

::alert{type="success"}
Check out a **success** alert with `code` and a [link](/).
::

::alert{type="warning"}
Check out a **warning** alert with `code` and a [link](/).
::

::alert{type="danger"}
Check out a **danger** alert with `code` and a [link](/).
::
```

--------------------------------

### Using Callout Component for Important Notes

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Illustrates the usage of the `<Callout />` component to highlight important information. It supports different types like the Alert component and allows for a summary and detailed content within the callout.

```markdown
::callout
#summary
This is a callout! Click me to open.

#content
This is the content of the callout.
::

::callout{type="warning"}
#summary
This is a callout! Click me to open.

#content
This is the content of the callout.
::
```

--------------------------------

### Displaying Content in Card Format

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Shows how to use the `<Card />` component to present information in a structured card layout. It includes an optional icon, a title, and a description, with support for line breaks.

```markdown
::card{icon="logos:nuxt-icon"}
#title
Nuxt Architecture.
#description
Based on **Nuxt 3** and **Nuxt Content**. :br
Use Nuxt to build a static site, or a serverless app.
::
```

--------------------------------

### Using Badge Component with Different Types

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

Illustrates the usage of the `<Badge />` component, which supports the same types as the `<Alert />` component. It shows how to display version numbers, deprecated status, or error messages using badges.

```markdown
:badge[v1.2]

:badge[Deprecated]{type="warning"}

::badge{type="danger"}
Not found!
::
```

--------------------------------

### useDrupalCe Composable Utilities

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/35.composables.md

This composable provides utilities for page handling, menu handling, custom component rendering, message retrieval, and API interaction.

```APIDOC
## useDrupalCe

### Description
This composable exports a collection of utilities to handle Drupal content and functionality.

### Page Handling
- `fetchPage(path: string, query?: Object, errorHandler?: Function, skipProxy?: boolean)` - Fetches a page by path
- `getPage()` - Returns the current page state
- `usePageHead(page: Ref<any>, include?: Array<'title' | 'meta' | 'link' | 'jsonld'>)` - Sets page head metadata from Drupal data
- `getPageLayout(page?: Ref<any>)` - Gets current page layout name (defaults to 'default')

### Menu Handling
- `fetchMenu(name: string, options?: Object, errorHandler?: Function, skipProxy?: boolean)` - Fetches a menu by name

### Component Rendering
- `renderCustomElements(elements: string | object | Array)` - Renders one or multiple custom elements from JSON data
- `resolveCustomElement(element: string)` - Resolves a custom element name to a Vue component

### Messages
- `getMessages()` - Returns Drupal messages of the current page

### API Utilities
- `$ceApi(options?: Object, skipProxy?: boolean)` - Creates a configured fetch instance
- `useCeApi(path: string, options?: Object, passThroughHeaders?: boolean, skipProxy?: boolean)` - Fetches data from Drupal CE API endpoint
- `getCeApiEndpoint(localize?: boolean)` - Gets API endpoint with optional localization
- `getDrupalBaseUrl()` - Gets configured Drupal base URL
- `getMenuBaseUrl()` - Gets configured menu base URL

### Example Usage
```javascript
<script setup>
  const { fetchPage } = useDrupalCe()
  const page = await fetchPage(useRoute().path)
</script>
```
```

--------------------------------

### Controller for Custom Element Listing

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/30.routes.md

This PHP controller code demonstrates how to build a list of custom elements (e.g., 'article-teaser') and group them within a parent custom element (e.g., 'teaser-listing'). It utilizes the CustomElement::create() method to define element types and attributes.

```php
<?php
   class NewsController extends ControllerBase {
    public function buildNewsListing() {

      $articles[] = CustomElement::create('article-teaser')
        ->setAttribute('href', 'https://example.com/news/1')
        ->setAttribute('excerpt', 'The excerpt of the news entry.');

      $articles[] = CustomElement::create('article-teaser')
        ->setAttribute('href', 'https://example.com/news/2')
        ->setAttribute('excerpt', 'The excerpt of another news entry.');

      return CustomElement::create('teaser-listing')
        ->setSlotFromNestedElements('default', $articles);
    }
   }
```

--------------------------------

### Display Terminal Command (Nuxt)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

This snippet shows how to use the Terminal component to display a Nuxt build command. It utilizes Nuxt's content module syntax for rendering.

```markdown
::div
  :terminal{content="nuxi build"}
::
```

--------------------------------

### API Response for News Listing (JSON and Markup)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/30.routes.md

These JSON snippets illustrate the API responses for a news listing route, formatted as both JSON and markup. The JSON output includes structured data for the elements, while the markup output provides the corresponding HTML for rendering.

```json
{

      "title": "News Listing",
      "content_format": "json",
      "content": {
            "element": "teaser-listing",
            "title": "Latest news",
            "icon": "news",
            "content": [
                  {
                        "element": "article-teaser",
                        "href": "https://example.com/news/1",
                        "excerpt": "The excerpt of the news entry."
                  },
                  {
                        "element": "article-teaser",
                        "href": "https://example.com/news/2",
                        "excerpt": "The excerpt of another news entry."
                  }
            ]
      }
}
```

```json
{
      "title": "News Listing",
      "content_format": "markup",
      "content": "
        <teaser-listing title=\"Latest news\" icon=\"news\">
          <article-teaser to=\"https://example.com/news/1\" excerpt=\"The excerpt of the news entry.\" slot=\"default\"></article-teaser>
          <article-teaser to=\"https://example.com/news/2\" excerpt=\"The excerpt of another news entry.\" slot=\"default\"></article-teaser>
        </teaser-listing>",
  }
```

--------------------------------

### PHP Block Providing Custom Element Render Array

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/40.providing-blocks.md

Demonstrates how to create a Drupal block that returns a custom element as a render array. This block utilizes helper methods to construct and configure custom elements for rendering within the Layout Builder. Dependencies include the Drupal BlockBase class and a CustomElement utility.

```php
/**
 * Provides an example news listing block.
 *
 * @Block(
 *   id = "lupus_decoupled_drupal_example_news_listing",
 *   admin_label = @Translation("Example news listing"),
 *   category = @Translation("Custom")
 * )
 */
class ExampleNewsListingBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $articles[] = CustomElement::create('article-teaser')
      ->setAttribute('href', 'https://example.com/news/1')
      ->setAttribute('excerpt', 'The excerpt of the news entry.');
    $articles[] = CustomElement::create('article-teaser')
      ->setAttribute('href', 'https://example.com/news/2')
      ->setAttribute('excerpt', 'The excerpt of another news entry.');

    $teaser_listing = CustomElement::create('teaser-listing')
      ->setAttribute('title', 'Latest news')
      ->setAttribute('icon', 'news')
      ->setSlotFromNestedElements('default', $articles);

    // Return the custom element as render array to fulfill the interface.
    return $teaser_listing->toRenderArray();
  }

}
```

--------------------------------

### News Listing API

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/30.routes.md

This endpoint retrieves a news listing, which can be rendered as either JSON or HTML markup.

```APIDOC
## GET /ce-api/news

### Description
Retrieves a news listing.

### Method
GET

### Endpoint
/ce-api/news

#### Query Parameters
- **_content_format** (string) - Optional - Specifies the desired content format. Can be 'json' or 'markup'.

### Response
#### Success Response (200)
- **title** (string) - The title of the news listing.
- **content_format** (string) - The format of the returned content ('json' or 'markup').
- **content** (object|string) - The rendered content, either as a JSON object or an HTML string.

#### Response Example (JSON)
```json
{
    "title": "News Listing",
    "content_format": "json",
    "content": {
        "element": "teaser-listing",
        "title": "Latest news",
        "icon": "news",
        "content": [
            {
                "element": "article-teaser",
                "href": "https://example.com/news/1",
                "excerpt": "The excerpt of the news entry."
            },
            {
                "element": "article-teaser",
                "href": "https://example.com/news/2",
                "excerpt": "The excerpt of another news entry."
            }
        ]
    }
}
```

#### Response Example (Markup)
```json
{
    "title": "News Listing",
    "content_format": "markup",
    "content": "
      <teaser-listing title=\"Latest news\" icon=\"news\">
        <article-teaser to=\"https://example.com/news/1\" excerpt=\"The excerpt of the news entry.\" slot=\"default\"></article-teaser>
        <article-teaser to=\"https://example.com/news/2\" excerpt=\"The excerpt of another news entry.\" slot=\"default\"></article-teaser>
      </teaser-listing>",
}
```

--------------------------------

### Fetch Navigation Menus via API - Drupal

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/2.guide/20.site-layout-menus.md

Demonstrates how to fetch navigation menu items from Drupal using the Rest menu items module. The API endpoint provides menu items based on the specified menu name.

```bash
https://yourdrupalsite.com/ce-api/api/menu_items/{menu_name}
```

--------------------------------

### Create a Basic Nuxt Layout Component

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/50.page-layouts.md

This Vue.js snippet demonstrates the basic structure of a Nuxt layout component. It includes a template with a heading and a slot for content, utilizing the Vue.js Composition API.

```vue
<template>
  <div>
    <h1>Blog layout</h1>
    <slot />
  </div>
</template>
```

--------------------------------

### Embed YouTube Video (Nuxt)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/99.docus-components.md

This snippet demonstrates how to embed a YouTube video using the VideoPlayer component. It requires the video source URL as a prop.

```markdown
::div
  :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
::
```

--------------------------------

### Vue Component for Article Teaser

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/10.how-it-works.md

Defines a Vue.js Single-File Component (SFC) to render an article teaser. It accepts 'href' and 'excerpt' props and displays them within an anchor tag.

```vue
<template>
  <article>
    <a :href="href">{{  excerpt }}</a>
  </article>
</template>

<script setup lang="ts">
  defineProps({
    href: String,
    excerpt: String
  });
</script>

```

--------------------------------

### Custom Elements API Response (Markup)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/10.how-it-works.md

Illustrates the markup output from the '/ce-api/news?_content_format=markup' endpoint. This format directly provides HTML strings for rendering within the frontend.

```json
{
      "title": "News Listing",
      "content_format": "markup",
      "content": ",
        <teaser-listing title=\"Latest news\" icon=\"news\">
          <article-teaser to=\"https://example.com/news/1\" excerpt=\"The excerpt of the news entry.\" slot=\"default\"></article-teaser>
          <article-teaser to=\"https://example.com/news/2\" excerpt=\"The excerpt of another news entry.\" slot=\"default\"></article-teaser>
        </teaser-listing>",
      "messages": [ ],
      "breadcrumbs": [ ],
      "metatags": {
        "meta": [
          {
            "name": "title",
            "content": "Drupal powered metatags"
          }
        ],
        "link": [
          {
            "rel": "canonical",
            "href": "https://example.com/"
          }
        ]
      }
  }
```

--------------------------------

### Enable REST Log Module

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/3.advanced-topics/80.debugging.md

Enables the REST Log module and its related components using Drush. This command activates the logging functionality within Drupal.

```bash
drush en lupus_decoupled_api_log
```

--------------------------------

### Vue Component for Teaser Listing with Custom Element Rendering

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/10.how-it-works.md

A Vue.js SFC that renders a list of teasers. It includes a title and a slot for rendering custom elements, utilizing the `useDrupalCe().renderCustomElements()` utility for dynamic content rendering.

```vue
<template>
  <div class="teaser-listing">
    <h2>Title: {{ title }}</h2>
    <slot>
      <component :is="useDrupalCe().renderCustomElements(content)" />
    </slot>
  </div>
</template>

<script setup lang="ts">
  defineSlots({
    default(): any;
  });
  defineProps({
    title: String,
    content: Object
  });
</script>

```

--------------------------------

### Navigation Menus API

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/2.guide/20.site-layout-menus.md

This section describes how to fetch navigation menu items from Drupal using the Rest menu items module integration. The API endpoint allows retrieval of menu items based on the menu name.

```APIDOC
## GET /ce-api/api/menu_items/{menu_name}

### Description
Fetches navigation menu items for a specified menu.

### Method
GET

### Endpoint
/ce-api/api/menu_items/{menu_name}

### Parameters
#### Path Parameters
- **menu_name** (string) - Required - The name of the menu to fetch items from (e.g., 'main', 'footer').

### Request Example
```
GET /ce-api/api/menu_items/main HTTP/1.1
Host: yourdrupalsite.com
Accept: application/json
```

### Response
#### Success Response (200)
- **items** (array) - An array of menu item objects, each containing properties like 'title', 'url', and 'children'.

#### Response Example
```json
{
  "items": [
    {
      "title": "Home",
      "url": "/",
      "children": []
    },
    {
      "title": "About Us",
      "url": "/about",
      "children": [
        {
          "title": "Our Mission",
          "url": "/about/mission",
          "children": []
        }
      ]
    }
  ]
}
```
```

--------------------------------

### Custom Elements Page-API (Markup Output)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/10.how-it-works.md

Fetches page data from a Drupal route as an HTML string representing custom elements.

```APIDOC
## GET /ce-api/{route}?_content_format=markup

### Description
This endpoint renders a regular Drupal request into a custom-elements API response with the content formatted as HTML markup. It serializes page content into a string of custom elements.

### Method
GET

### Endpoint
`/ce-api/<route>`

### Query Parameters
- **_content_format** (string) - Required - Specifies the desired output format. Set to 'markup' for HTML output.

### Response
#### Success Response (200)
- **title** (string) - The title of the page.
- **content_format** (string) - The format of the content ('markup').
- **content** (string) - The page content as an HTML string composed of custom elements.
- **messages** (array) - An array of messages related to the response.
- **breadcrumbs** (array) - An array of breadcrumb navigation items.
- **metatags** (object) - An object containing meta information for the page, including meta tags and links.

#### Response Example (Markup)
```json
{
  "title": "News Listing",
  "content_format": "markup",
  "content": "<teaser-listing title=\"Latest news\" icon=\"news\">
    <article-teaser to=\"https://example.com/news/1\" excerpt=\"The excerpt of the news entry.\" slot=\"default\"></article-teaser>
    <article-teaser to=\"https://example.com/news/2\" excerpt=\"The excerpt of another news entry.\" slot=\"default\"></article-teaser>
  </teaser-listing>",
  "messages": [],
  "breadcrumbs": [],
  "metatags": {
    "meta": [
      {
        "name": "title",
        "content": "Drupal powered metatags"
      }
    ],
    "link": [
      {
        "rel": "canonical",
        "href": "https://example.com/"
      }
    ]
  }
}
```
```

--------------------------------

### Create Custom Elements in PHP

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/20.custom-elements.md

Demonstrates creating a tree of custom elements in PHP, specifically a news listing with article teasers. It utilizes the `CustomElement` class to define elements and set attributes.

```php
<?php
   use \Drupal\custom_elements\CustomElement;

   class NewsController extends ControllerBase {
    public function buildNewsListing() {

      $articles[] = CustomElement::create('article-teaser')
        ->setAttribute('href', 'https://example.com/news/1')
        ->setAttribute('excerpt', 'The excerpt of the news entry.');

      $articles[] = CustomElement::create('article-teaser')
        ->setAttribute('href', 'https://example.com/news/2')
        ->setAttribute('excerpt', 'The excerpt of another news entry.');

      return CustomElement::create('teaser-listing')
        ->setSlotFromNestedElements('default', $articles);
      }
    }
  
```

--------------------------------

### Debug API Request with Curl and Xdebug

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/3.advanced-topics/80.debugging.md

Demonstrates how to make a curl request to a Drupal API endpoint while triggering Xdebug. This includes passing session cookies for authentication and the XDEBUG_SESSION cookie to initiate debugging.

```bash
curl -k -i -H 'Cookie: SSESS<session-name>=<session-cookie-value>;XDEBUG_SESSION=XDEBUG_ECLIPSE;' https://<domain>/<API-endpoint>
```

--------------------------------

### Custom Elements Page-API (JSON Output)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/1.get-started/10.how-it-works.md

Fetches page data from a Drupal route as a JSON object representing custom elements.

```APIDOC
## GET /ce-api/{route}

### Description
This endpoint renders a regular Drupal request into a custom-elements API response in JSON format. It serializes page content into a structure of custom elements.

### Method
GET

### Endpoint
`/ce-api/<route>`

### Query Parameters
- **_content_format** (string) - Optional - Specifies the desired output format. Defaults to 'json'. Use 'markup' for HTML output.

### Response
#### Success Response (200)
- **title** (string) - The title of the page.
- **content_format** (string) - The format of the content ('json' or 'markup').
- **content** (object or string) - The page content, structured as custom elements (JSON) or as an HTML string (markup).
- **messages** (array) - An array of messages related to the response.
- **breadcrumbs** (array) - An array of breadcrumb navigation items.
- **metatags** (object) - An object containing meta information for the page, including meta tags and links.

#### Response Example (JSON)
```json
{
  "title": "News Listing",
  "content_format": "json",
  "content": {
    "element": "teaser-listing",
    "title": "Latest news",
    "icon": "news",
    "content": [
      {
        "element": "article-teaser",
        "href": "https://example.com/news/1",
        "excerpt": "The excerpt of the news entry."
      },
      {
        "element": "article-teaser",
        "href": "https://example.com/news/2",
        "excerpt": "The excerpt of another news entry."
      }
    ]
  },
  "messages": [],
  "breadcrumbs": [],
  "metatags": {
    "meta": [
      {
        "name": "title",
        "content": "Drupal powered metatags"
      }
    ],
    "link": [
      {
        "rel": "canonical",
        "href": "https://example.com/"
      }
    ]
  }
}
```
```

--------------------------------

### Nuxt Wildcard Route for Drupal Fallback

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/5.nuxt/40.custom-routes.md

This snippet represents the Nuxt wildcard route (`pages/[...slug].vue`) which acts as a fallback for routes not handled by Nuxt's predefined pages. It forwards requests to Drupal for processing.

```vue
<template>
  <NuxtPage />
</template>

<script setup>
// Nuxt handles routing based on file structure in pages directory
// If no Nuxt route matches, it falls back to this catch-all page
</script>

<style scoped>
/* Add any necessary styling */
</style>
```

--------------------------------

### Serialize Custom Element Tree to Markup

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/20.custom-elements.md

Explains how to render a tree of custom elements into HTML markup by converting it to a render array and using Drupal's traditional render API.

```php
  <?php
    $render = $custom_element->toRenderArray();
    $renderer = \Drupal::service('renderer');
    $markup = $renderer->renderRoot($customElement);
  ?>
```

--------------------------------

### Accessing Custom Elements API for Views

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/3.advanced-topics/10.listings-views.md

Demonstrates how to access the Custom Elements API for a configured Drupal view. The API endpoint is derived from the view's path, and the custom element name is provided.

```bash
# Access the Custom Elements API at /ce-api/<view-path>
# The custom element name will be drupal-view-{ID}
```

--------------------------------

### Configure Custom Elements Markup Style (Drush)

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/20.custom-elements.md

This Drush command allows setting the markup style for custom elements. It can be configured to use 'vue-3' syntax for compatibility with Vue.js.

```bash
drush config:set custom_elements.settings  markup_style vue-3
```

--------------------------------

### Define Custom Element Route in Drupal

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/30.routes.md

This PHP code snippet shows how to define a Drupal route that specifies the '_format' requirement as 'custom_elements'. This allows the Lupus CE Renderer module to process and render content as custom elements.

```yaml
MODULE.listing:
    path: '/news'
    defaults:
      _title: 'News Listing'
      _controller: '\Drupal\MODULE\Controller\NewsController::buildNewsListing'
    requirements:
      _format: 'custom_elements'
      _permission: 'access content'
```

--------------------------------

### Create Custom Element Variants for Drupal Forms

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/30.routes.md

This PHP code snippet demonstrates how to create custom element variants for existing Drupal routes, such as user login or registration forms. It clones existing routes, sets the '_format' to 'custom_elements', and updates the controller to handle the custom element rendering.

```php
<?php

/**
 * Creates CE variants for user forms.
 */
class RouteSubscriber extends RouteSubscriberBase {

  /**
   * {@inheritdoc}
   */
  protected function alterRoutes(RouteCollection $collection) {
    // Provide CE variants for user forms.
    $form_route_ids = ['user.login', 'user.pass', 'user.register'];
    foreach ($form_route_ids as $form_route_id) {
      $route = $collection->get($form_route_id);
      $ce_route = clone $route;
      $ce_route->setRequirement('_format', 'custom_elements');
      // Then customize the new route as suiting:
      $form = $route->hasDefault('_entity_form') ? 'entity_form' : 'form';
      $ce_route->setDefault('_controller', "lupus_decoupled_form.controller.$form:getContentResult");
      // Add it to the route collection.
      $collection->add("lupus_decoupled.{$form_route_id}", $ce_route);
    }
  }

}
```

--------------------------------

### Process Items into Custom Element

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/4.drupal/20.custom-elements.md

Demonstrates using the custom element generator service to process items and populate a custom element. This involves automatic processing via custom element processors.

```php
<?php
    class SomeClass {
      use CustomElementGeneratorTrait;
      public function someMethod() {
        $element = CustomElement::create('some-element');
        $this->getCustomElementGenerator()
          ->process($items, $element, $view_mode);
      }
    }
  
```

--------------------------------

### Metatags API

Source: https://github.com/drunomics/lupus-decoupled-website/blob/main/content/2.guide/50.metatags-local-tasks.md

Access metatags (meta, link, jsonld) provided by the Drupal Metatags module.

```APIDOC
## GET /api/resource

### Description
Retrieves metatags associated with a resource, including meta tags, link relations, and JSON-LD structured data.

### Method
GET

### Endpoint
/api/resource

### Parameters
#### Query Parameters
- **resource_id** (string) - Required - The ID of the resource to retrieve metatags for.

### Request Example
```json
{
  "example": "GET /api/node/1"
}
```

### Response
#### Success Response (200)
- **metatags** (object) - Contains metatag groups.
  - **meta** (array) - Array of meta tags (e.g., title, description).
  - **link** (array) - Array of link relation tags (e.g., canonical).
  - **jsonld** (array) - Array of JSON-LD structured data.

#### Response Example
```json
{
  "metatags": {
    "meta": [
      {
        "name": "title",
        "content": "Lupus Decoupled Drupal"
      },
      {
        "name": "description",
        "content": "Lupus Decoupled Drupal"
      },
      {
        "property": "og:url",
        "content": "https://lupus-decoupled.org"
      }
    ],
    "link": [
      {
        "rel": "canonical",
        "href": "https://lupus-decoupled.org"
      }
    ],
    "jsonld": [
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "url": "https://lupus-decoupled.org",
        "name": "Lupus Decoupled Drupal"
      }
    ]
  }
}
```
```