### Lume Server Event Listener Example

Source: https://lume.land/docs/core/server

This snippet shows how to attach an event listener to the Lume server. Specifically, it listens for the 'start' event and logs a confirmation message to the console once the server has successfully started.

```typescript
server.addEventListener("start", () => {
  console.log("Server started successfully");
});

```

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

### Basic Lume Server Initialization and Start

Source: https://lume.land/docs/core/server

This code snippet demonstrates the fundamental setup of a Lume server. It initializes the Server class, specifies the port and root directory for serving static files, and then starts the server. It's designed to serve files from the '_site' directory on port 8000.

```typescript
import Server from "lume/core/server.ts";

const server = new Server({
  port: 8000,
  root: `${Deno.cwd()}/_site`,
});

server.start();

console.log("Listening on http://localhost:8000");

```

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

### Initialize Lume Project

Source: https://lume.land/docs/overview/installation

Command to set up Lume in a project directory. This command initializes the project by creating necessary configuration files.

```shell
deno run -A https://lume.land/init.ts

```

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

### Initialize Lume Project

Source: https://context7.com/context7/lume_land/llms.txt

Installs Lume and sets up the basic project structure including configuration and Deno settings. Requires Deno to be installed.

```bash
# Install Deno first from https://deno.land
# Then run the Lume initializer
deno run -A https://lume.land/init.ts
```

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

### Deno Configuration (deno.json)

Source: https://lume.land/docs/overview/installation

Deno's configuration file for a Lume project. It includes import maps, tasks for running Lume, and compiler options for JSX and TypeScript.

```json
{
  "tasks": {
    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
    "build": "deno task lume",
    "serve": "deno task lume -s"
  },
  "imports": {
    "lume/": "https://deno.land/x/lume@v3.0.0/",
    "lume/jsx-runtime": "https://deno.land/x/ssx@v0.1.10/jsx-runtime.ts"
  },
  "unstable": ["temporal"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "lume",
    "types": [
      "lume/types.ts"
    ]
  },
  "lint": {
    "plugins": [
      "https://deno.land/x/lume@v3.0.0/lint.ts"
    ]
  }
}

```

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

### Compose Lume Plugins with Dependency and Hooks

Source: https://lume.land/docs/advanced/plugins

Illustrates how to combine multiple Lume plugins, including the `cssBanner` plugin and the `openSource` plugin, in the `_config.ts` file. This example shows the installation order and the effect of the hook invocation.

```typescript
import lume from "lume/mod.ts";
import cssBanner from "./my-plugins/css_banner.ts";
import openSource from "./my-plugins/open_source.ts";

const site = lume();

site.use(cssBanner({
  message: "© This code belongs to ACME inc.",
}));

site.use(openSource());

export default site;

```

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

### Nested Layout Example (Markdown/Vento)

Source: https://lume.land/docs/creating-pages/layouts

Demonstrates how one layout can wrap another. The `page.vto` layout uses `layouts/main.vto` as its wrapper, showcasing a nested layout structure.

```markdown
---
title: This is the front matter
layout: layouts/page.vto
---

# This is the page content
Here you can write Markdown content

```

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

### Lume Server with Expires Middleware

Source: https://lume.land/docs/core/server

This code demonstrates how to integrate a pre-built Lume middleware, specifically the 'expires' middleware, into the server setup. It imports the necessary Server class and the expires middleware, then applies it using server.use() before starting the server.

```typescript
import Server from "lume/core/server.ts";
import expires from "lume/middlewares/expires.ts";

const server = new Server();

server.use(expires());

server.start();

```

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

### Vercel Build Command for Deno Installation

Source: https://lume.land/docs/advanced/deployment

The Vercel build command to install Deno and then build the Lume site. This is necessary as Deno is not available by default on Vercel.

```bash
curl -fsSL https://deno.land/x/install/install.sh | sh && /vercel/.deno/bin/deno task build

```

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

### Enable Lume SVGO Plugin

Source: https://lume.land/docs/configuration/install-plugins

This code snippet demonstrates how to import and enable the `svgo` plugin in a Lume project's configuration file. It requires importing the plugin and then using the `site.use()` method. This setup allows for SVG file optimization.

```typescript
import lume from "lume/mod.ts";
import svgo from "lume/plugins/svgo.ts";

const site = lume();

site.use(svgo());

export default site;

```

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

### Configure Lume for Vendoring

Source: https://lume.land/docs/overview/installation

Modifies the Deno tasks in deno.json to use the DENO_DIR environment variable for vendoring dependencies. This downloads all remote Deno dependencies into a local folder, typically named '_vendor'.

```json
{
  "tasks": {
    "lume": "echo \"import 'lume/cli.ts'\" | DENO_DIR=_vendor deno run -A -",
    "build": "deno task lume",
    "serve": "deno task lume -s"
  }
}

```

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

### Render Build Command for Deno Installation

Source: https://lume.land/docs/advanced/deployment

The Render build command to install Deno and then build the Lume site. This is required for static site projects on Render when using Deno.

```bash
curl -fsSL https://deno.land/x/install/install.sh | sh && /opt/render/.deno/bin/deno task build

```

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

### Cloudflare Pages Build Command for Deno Installation

Source: https://lume.land/docs/advanced/deployment

The Cloudflare Pages build command to install Deno and then build the Lume site. This ensures Deno is available in the build environment.

```bash
curl -fsSL https://deno.land/x/install/install.sh | sh && /opt/buildhome/.deno/bin/deno task build

```

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

### JSX Syntax Example with SSX

Source: https://lume.land/docs/advanced/migrate-to-lume3

Example of using JSX syntax in TypeScript pages with SSX, defining properties and rendering child elements.

```typescript
interface Props {
  children: JSX.Children
}

export default function ({ children }: Props) {
  return <div>{ children }</div>
}
```

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

### Upgrade Lume Command

Source: https://lume.land/docs/overview/installation

Command to upgrade the Lume version in a project to the latest stable or development version. Useful for staying updated with new features and bug fixes.

```shell
deno task lume upgrade

```

```shell
deno task lume upgrade --dev

```

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

### Install Lume CLI

Source: https://lume.land/docs/overview/command-line

Installs the Lume CLI script globally, allowing you to use the 'lume' command directly instead of 'deno task lume'. This command requires permissions to run, access environment variables, and read files. It ensures the latest version is installed and reloads any existing installation.

```bash
deno install --allow-run --allow-env --allow-read --name lume --force --reload --global https://deno.land/x/lume_cli/mod.ts
```

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

### Basic Lume Layout Template (Vento)

Source: https://lume.land/docs/creating-pages/layouts

An example of a basic HTML layout template using the Vento template engine. It demonstrates how to insert dynamic content like the page's `title` and rendered `content`.

```html
<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>

  <body>
    <main>
      {{ content }}
    </main>
  </body>
</html>

```

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

### Lume Server Custom Middleware Implementation

Source: https://lume.land/docs/core/server

This example illustrates how to implement custom middleware for the Lume server. The middleware function receives a request, passes it to the next middleware in the chain, and can then modify the response before returning it. This allows for advanced request and response handling.

```typescript
server.use(async (request, next) => {
  // Here you can modify the request before being passed to next middlewares
  const response = await next(request);

  // Here you can modify the response before being returned to the previous middleware
  return response;
});

```

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

### Create Dynamic Pages with Lume Processors

Source: https://context7.com/context7/lume_land/llms.txt

Processors can dynamically create new pages. This example shows how to minify CSS and then create a corresponding source map page.

```typescript
import { Page } from "lume/core/file.ts";

site.process([".css"], (filteredPages, allPages) => {
  for (const page of filteredPages) {
    // Minify CSS
    const { code, map } = myCssMinifier(page.text);
    page.text = code;

    // Create source map page
    const pageMap = Page.create({
      url: page.data.url + ".map",
      content: map,
    });

    allPages.push(pageMap);
  }
});
```

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

### Lume: Event Listener Options (once)

Source: https://lume.land/docs/core/events

Example of using the `once: true` option to ensure an event listener is executed only a single time. This is useful for one-off setup tasks.

```javascript
site.addEventListener("afterUpdate", () => {
  console.log("This is the first update");
}, {
  once: true,
});
```

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

### Deno Deploy Entrypoint Server Script

Source: https://lume.land/docs/advanced/deployment

A serve.ts file acting as the entrypoint for Deno Deploy, which starts a server to serve static files from the '_site' directory. It listens on port 8000.

```typescript
import Server from "lume/core/server.ts";

const server = new Server({
  port: 8000,
  root: `${Deno.cwd()}/_site`,
});

server.start();

console.log("Listening on http://localhost:8000");


```

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

### Initialize Lume Project

Source: https://lume.land/docs/overview/command-line

Initializes a new Lume project in the current directory. This command runs a Deno script that sets up the necessary configuration files and directory structure for a Lume site. It can be executed using the Deno task or the installed Lume CLI.

```bash
deno task lume init
```

```bash
lume init
```

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

### Lume File Structure Example

Source: https://lume.land/docs/creating-pages/page-files

Demonstrates how Lume maps Markdown files in the root directory to generated HTML files, including the default pretty URL behavior.

```plaintext
├── index.md     => /index.html
├── about.md     => /about/index.html
└── contact.md   => /contact/index.html
```

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

### Layout with Data and Content Placeholder (Vento)

Source: https://lume.land/docs/creating-pages/layouts

A more complex layout example using Vento, which includes front matter variables like `language` and `title`, and a placeholder for the page's `content`. It also specifies `layouts/main.vto` as a wrapper.

```html
---
title: Default page title
language: en
layout: layouts/main.vto
---

<article lang="{{ language }}">
  <header>
    <h1>{{ title }}</h1>
  </header>

  {{ content }}
</article>

```

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

### Lume: Trigger afterStartServer Event

Source: https://lume.land/docs/core/events

This event is triggered after starting the local server using the `lume --server` command.

```javascript
site.addEventListener("afterStartServer", () => {
  console.log("Local server started successfully");
});
```

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

### Markdown Page with Front Matter

Source: https://context7.com/context7/lume_land/llms.txt

An example of a Markdown file used for a Lume page, including front matter for metadata like title, date, layout, tags, and draft status. Supports custom URLs.

```markdown
<!-- index.md -->
---
title: Welcome to my website
date: 2024-01-15
layout: layouts/main.vto
tags: [post, featured]
draft: false
url: /custom-url.html
---

# Welcome to my website

This is my first page using **Lume,** a static site generator for Deno.

I hope you enjoy it.
```

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

### Netlify TOML Configuration for Deno Build

Source: https://lume.land/docs/advanced/deployment

A netlify.toml file to configure Netlify to build and deploy a Lume site. It specifies the publish directory as '_site' and the build command as 'deno task build'. Includes a version for installing Deno if not already available.

```toml
[build]
  publish = "_site"
  command = "deno task build"


```

```toml
[build]
  publish = "_site"
  command = """
  curl -fsSL https://deno.land/install.sh | sh && \
  /opt/buildhome/.deno/bin/deno task build \
"""


```

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

### Add Copyright Banner to CSS Pages with Lume

Source: https://lume.land/docs/advanced/plugins

A basic example demonstrating how to add a copyright banner to all CSS files processed by Lume. This involves defining a function to prepend the banner and using the site.process method.

```typescript
// _config.ts

import lume from "lume/mod.ts";

const site = lume();

function addBanner(content: string): string {
  const banner = "/* © This code belongs to ACME inc. */";
  return banner + "\n" + content;
}

site.process([".css"], (pages) => {
  for (const page of pages) {
    page.text = addBanner(page.text);
  }
});

export default site;

```

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

### Preprocess Pages to Add Data in Lume

Source: https://context7.com/context7/lume_land/llms.txt

Use the `preprocess` hook to add data to pages before they are rendered. This example adds the source file path to the `filename` data property for all `.html` files.

```typescript
// Add data to pages before rendering
site.preprocess([".html"], (pages) => {
  for (const page of pages) {
    page.data.filename = page.sourcePath;
  }
});
```

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

### Combine Multiple Template Engines (VTO + Markdown)

Source: https://lume.land/docs/core/multiple-template-engines

This example demonstrates rendering a page using multiple template engines in a specific order. Here, Vento is used first for variable parsing and includes, followed by Markdown for the main content rendering. This allows for dynamic content within otherwise static Markdown files.

```markdown
---
title: My post
templateEngine: [vto, md]
---

# Hello, this is the post title {{ title }}

```

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

### Create a Vento Component (Button)

Source: https://lume.land/docs/core/components

Example of creating a simple button component using the Vento template engine. The component takes a `text` property to define the button's label.

```vento
<button class="button">{{ text }}</button>

```

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

### Lume Subdirectory File Structure Example

Source: https://lume.land/docs/creating-pages/page-files

Illustrates how Lume maintains the subdirectory structure from source files in the generated site, using pretty URLs by default.

```plaintext
├── index.md        => /index.html
└── documentation
    └── doc1.md     => /documentation/doc1/index.html
    └── doc2.md     => /documentation/doc2/index.html
```

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

### Markdown Page with Nested Layouts in Lume

Source: https://context7.com/context7/lume_land/llms.txt

Markdown files can specify a layout in their front matter, enabling nested layouts. This example shows a blog post using `layouts/post.vto`, which in turn uses `layouts/main.vto`.

```markdown
<!-- blog-post.md -->
---
title: My Blog Post
layout: layouts/post.vto
---

Post content here. This uses post.vto which uses main.vto.
```

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

### Create Basic File with JavaScript Archetype

Source: https://lume.land/docs/core/archetypes

This example demonstrates a basic JavaScript archetype that creates a new markdown file with specified path and content. The archetype is stored in the `_archetypes` directory and exported as a default function.

```javascript
// _archetypes/example.js

export default function () {
  return {
    path: "/pages/example.md",
    content: "Content of the file",
  };
}
```

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

### Lume Pretty URLs Disabled Example

Source: https://lume.land/docs/creating-pages/page-files

Shows the output file structure when the 'prettyUrls' option is set to 'false' in the Lume configuration, resulting in '.html' extensions.

```plaintext
.
├── index.md        => /index.html
└── documentation
    └── doc1.md     => /documentation/doc1.html
    └── doc2.md     => /documentation/doc2.html
```

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

### Lume: Trigger beforeBuild Event

Source: https://lume.land/docs/core/events

This event is triggered just before the site build starts. It's executed once before the initial build when using `lume --serve`. If the listener returns `false`, the build process is stopped.

```javascript
site.addEventListener("beforeBuild", () => {
  console.log("The build is about to start");
});
```

```javascript
site.addEventListener("beforeBuild", () => {
  return false; // Stop the build
});
```

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

### Remove Pages Dynamically with Lume Processors

Source: https://context7.com/context7/lume_land/llms.txt

Processors can be used to remove pages from the build. This example removes all `.html` pages where the language data property is set to 'en'.

```typescript
site.process([".html"], (filteredPages, allPages) => {
  for (const page of filteredPages) {
    if (page.data.lang === "en") {
      allPages.splice(allPages.indexOf(page), 1);
    }
  }
});
```

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

### Override Template Engine for a Single File (VTO)

Source: https://lume.land/docs/core/multiple-template-engines

This example shows how to render an `.md` file using the Vento template engine instead of the default Markdown engine. It's useful for situations where you want to leverage Vento's features like variable insertion within a Markdown file. No external dependencies are required beyond Lume itself.

```markdown
---
title: My post
templateEngine: vto
---

# Hello world

```

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

### Deno Configuration for Lume 3

Source: https://lume.land/docs/advanced/migrate-to-lume3

Example deno.json configuration file after upgrading to Lume 3. It shows updated import maps, compiler options, and tasks. This configuration is crucial for Lume 3's functionality, especially with JSX transformations.

```json
{
  "imports": {
    "lume/": "https://deno.land/x/lume@v3.0.1/",
    "lume/jsx-runtime": "https://deno.land/x/ssx@v0.1.10/jsx-runtime.ts"
  },
  "unstable": ["temporal"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "lume",
    "types": [
      "lume/types.ts"
    ]
  },
  "tasks": {
    "build": "deno task lume",
    "serve": "deno task lume -s",
    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -"
  },
  "lint": {
    "plugins": [
      "https://deno.land/x/lume@v3.0.1/lint.ts"
    ]
  }
}
```

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

### Serve Lume Site (Deno Task)

Source: https://lume.land/docs/getting-started/your-first-page

This command is used to build and serve a Lume static site locally. It utilizes Deno's task runner to execute build and server commands, enabling live-reloading for development.

```shell
deno task serve
```

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

### Create Pages with JavaScript - Lume

Source: https://lume.land/docs/getting-started/page-formats

This example shows how to create a page using JavaScript in Lume. It exports page variables as named ES modules and uses a default export function to return the page's HTML content. This allows for complex page logic before rendering.

```JavaScript
export const title = "Welcome to my page";
export const layout = "layout.vto";
export const links = [
  {
    text: "My Twitter",
    url: "https://twitter.com/misteroom",
  },
  {
    text: "My GitHub profile",
    url: "https://github.com/oscarotero",
  },
];

export default function ({ title, links }) {
  return `
  <article>
    <header>
      <h1>${title}</h1>
    </header>

    <ul>
      ${
    links.map((link) => `<li><a href="${link.url}">${link.text}</a></li>`).join(
      "",
    )
  }
    </ul>
  </article>`;
}


```

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

### TSX Page with Lume Data and Helpers

Source: https://lume.land/docs/configuration/using-typescript

An example of a TSX page component that utilizes the global `Lume.Data` and `Lume.Helpers` interfaces to access page data and formatting functions. This demonstrates basic usage within a Lume project.

```tsx
export default (data: Lume.Data, filters: Lume.Helpers) => {
  const { title, date } = data;

  return (
    <header>
      <h1>{title}</h1>
      <time>{filters.date(date)}</time>
    </header>
  );
};
```

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

### AWS Amplify Deployment Configuration (amplify.yml)

Source: https://lume.land/docs/advanced/deployment

Configuration file for deploying a Lume site using AWS Amplify. It specifies build commands, including Deno installation and execution, and the base directory for site artifacts. Ensure to ignore this file in your Lume config if not managed directly in the repository.

```yaml
version: 1
frontend:
  phases:
    build:
      commands:
        - curl -fsSL https://deno.land/x/install/install.sh | sh
        - /root/.deno/bin/deno task build
  artifacts:
    baseDirectory: /_site
    files:
      - "**/*"
  cache:
    paths: []

```

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

### Serve Site Locally on Custom Port

Source: https://lume.land/docs/overview/command-line

Starts a local web server on a specified port to preview the static site. This command allows customization of the default port (3000) for the development server, which also includes live-reloading capabilities. Useful for avoiding port conflicts or testing on specific network configurations.

```bash
deno task lume -s --port=8000
```

```bash
lume -s --port=8000
```

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

### Manual Deployment Command using Deno Task

Source: https://context7.com/context7/lume_land/llms.txt

Executes the 'deploy' task defined in the Deno configuration, which builds the site and deploys it using rsync.

```bash
deno task deploy
```

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

### Serve Site Locally with Live Reload

Source: https://lume.land/docs/overview/command-line

Starts a local web server to preview the static site and automatically reloads the browser when changes are detected. This is useful for development, allowing you to see updates in real-time. The server defaults to port 3000, but can be configured using the --port argument. Aliased by the 'serve' task.

```bash
deno task lume -s
```

```bash
lume -s
```

```bash
deno task serve
```

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

### Build and Serve Lume Site

Source: https://context7.com/context7/lume_land/llms.txt

Commands to build the static site, serve it locally with live reloading, and manage Lume upgrades. These commands leverage Deno tasks defined in deno.json.

```bash
# Build the site (outputs to _site/)
denotask build

# Build with local server and live reload on port 3000
denotask serve

# Custom port
denotask lume -s --port=8000

# Watch for changes without server
denotask lume --watch

# Upgrade Lume to latest version
denotask lume upgrade
```

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

### Create Open Source Plugin for Lume

Source: https://lume.land/docs/advanced/plugins

An example of a Lume plugin (`openSource`) that depends on another plugin (`cssBanner`) and invokes its hook (`changeCssBanner`) to set an 'open source' message. It includes error handling if the dependency is not met.

```typescript
// my-plugins/open_source.ts

export default function () {
  return (site: Site) => {
    if (!site.hooks.changeCssBanner) {
      throw new Error("This plugin requires css_banner to be installed before");
    }

    site.hooks.changeCssBanner("This code is open source");
  };
}

```

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

### Add Files and Directories (Lume)

Source: https://lume.land/docs/configuration/add-files

Add files and directories to your Lume site. Paths are relative to the source directory. You can rename files or directories using the second argument. Files starting with `_` or `.` are ignored by default unless added explicitly.

```javascript
// Add all files in the "img" directory
site.add("img");

// Add the favicon file
site.add("favicon.ico");

// Add the "img" directory and rename it to "images"
site.add("img", "images");

// Add the "static-files/favicons/favicon.ico" renamed to "favicon.ico"
site.add("static-files/favicons/favicon.ico", "favicon.ico");

// Add content of "assets" directory to the root of your site
site.add("assets", ".");

// Ignore a subfolder
site.ignore("/files/pictures/");

// Add the /files/ folder.
// The subfolder /files/pictures/ is ignored,
// in addition to all files starting with . and _
site.add("/files/");

// Add an underscored file
site.add("_headers");
```

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

### Lume Instantiation with Configuration Options

Source: https://lume.land/docs/advanced/cheatsheet

Demonstrates how to instantiate a Lume site with various configuration options. This includes source and destination paths, build settings, server configurations, watcher options, component settings, and plugin configurations. These options control the fundamental behavior of the Lume build process.

```javascript
const site = lume(
  {
    /** Where the site's source is stored */
    src: "./",

    /** Where the built site will go */
    dest: "./_site",

    /** Whether the destination folder (defined in `dest`) should be emptied before the build */
    emptyDest: true,

    /** The default includes path, relative to the `src` folder */
    includes: "_includes",

    /** The site location (used to generate final urls) */
    location: new URL("http://localhost"),

    /** Set true to generate pretty urls (`/about-me/`) */
    prettyUrls: true,

    /** Local server options(when using `lume --serve`) */
    server: {
      /** The port to listen on */
      port: 3000,

      /** Open the server in a browser after starting the server */
      open: false,

      /** The file to serve when getting a 404 error */
      page404: "/404.html",

      /** Optional middleware for the server */
      middlewares: [];
    },

    /** Local file watcher options */
    watcher: {
      /** Paths to ignore */
      ignore: [
        "/.git",
        (path) => path.endsWith("/.DS_Store"),
      ],

      /** The interval in milliseconds to check for changes */
      debounce: 100,
    },

    /** Component options */
    components: {
      /** The name of the file to save component css code to */
      cssFile: "/style.css",

      /** The name of the file to save component javascript code to */
      jsFile: "/script.js",

      /** Placeholder used to replace with the final content */
      placeholder: ""
    }
  },
  {
    /** Options for the url plugin, which is loaded by default */
    url: undefined,

    /** Options for the json plugin, which is loaded by default */
    json: undefined,

    /** Options for the markdown plugin, which is loaded by default */
    markdown: undefined,

    /** Options for the modules plugin, which is loaded by default */
    modules: undefined,

    /** Options for the nunjucks plugin, which is loaded by default */
    nunjucks: undefined,

    /** Options for the search plugin, which is loaded by default */
    search: undefined,

    /** Options for the paginate plugin, which is loaded by default */
    paginate: undefined,

    /** Options for the yaml plugin, which is loaded by default */
    yaml: undefined,
  }
)
```

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

### Deno Task Configuration for Building and Deploying

Source: https://context7.com/context7/lume_land/llms.txt

Configuration for Lume's build, serve, and deploy tasks using Deno. The 'deploy' task combines building the site and using rsync for manual deployment.

```json
{
  "tasks": {
    "build": "deno task lume",
    "serve": "deno task lume -s",
    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
    "deploy": "deno task build && rsync -r _site/ user@my-site.com:~/www"
  }
}
```

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

### Create Basic Markdown Page (Lume)

Source: https://lume.land/docs/getting-started/your-first-page

This snippet demonstrates the content of a simple markdown file used with Lume. It includes basic markdown formatting and is intended to be placed in an `index.md` file within a Lume project.

```markdown
# Welcome to my website

This is my first page using **Lume,** a static site generator for Deno.

I hope you enjoy it.

```

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

### Configure Vercel Deployment for Lume

Source: https://context7.com/context7/lume_land/llms.txt

This Bash snippet provides the necessary commands for deploying a Lume site to Vercel. It includes instructions for setting the build command and output directory within the Vercel dashboard.

```bash
# Build command in Vercel dashboard:
curl -fsSL https://deno.land/x/install/install.sh | sh && /vercel/.deno/bin/deno task build

# Output directory: _site

```

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

### Modify HTML Content with DOM API in Lume

Source: https://lume.land/docs/advanced/the-data-model

This example demonstrates using the DOM API within Lume's processing stage to modify HTML content. It targets all anchor tags starting with 'http' and sets their 'target' attribute to '_blank', making them open in a new tab. This requires the page content to be parsed as a DOM document.

```javascript
site.process([".html"], (page) => {
  // Get the DOM
  const document = page.document;

  // Modify the content
  document.querySelectorAll('a[href^="http"]').forEach((link) => {
    link.setAttribute("target", "_blank");
  });
});

```

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

### Configure GitHub Actions for Lume Deployment

Source: https://context7.com/context7/lume_land/llms.txt

This YAML configuration sets up a GitHub Actions workflow to automatically build and deploy a Lume static site to GitHub Pages upon pushing to the `main` branch. It includes steps for checking out code, setting up Deno, building the site, and uploading artifacts.

```yaml
# .github/workflows/publish.yml
name: Publish on GitHub Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Clone repository
        uses: actions/checkout@v4

      - name: Setup Deno environment
        uses: denoland/setup-deno@v2
        with:
          cache: true

      - name: Build site
        run: deno task build

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: "_site"

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

```

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

### Generate Pages with Layouts (JavaScript)

Source: https://lume.land/docs/core/multiple-pages

This example demonstrates generating pages that utilize a specified layout. Each yielded page object includes a 'layout' property along with other data like 'title' and 'body' to be used within the layout. This approach simplifies content structure when multiple pages share the same template.

```javascript
export default function* () {
  yield {
    url: "/page-1/",
    layout: "layouts/article.vto",
    title: "Article 1",
    body: "Welcome to the article 1",
  };
  yield {
    url: "/page-2/",
    layout: "layouts/article.vto",
    title: "Article 2",
    body: "Welcome to the article 2",
  };
  yield {
    url: "/page-3/",
    layout: "layouts/article.vto",
    title: "Article 3",
    body: "Welcome to the article 3",
  };
}
```

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

### Configure Netlify Deployment for Lume

Source: https://context7.com/context7/lume_land/llms.txt

This TOML configuration file specifies the build settings for deploying a Lume site to Netlify. It defines the output directory (`publish`) and the build command (`command`).

```toml
# netlify.toml
[build]
  publish = "_site"
  command = "deno task build"

```

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

### Accessing Shared Data in JSX Template

Source: https://lume.land/docs/creating-pages/shared-data

Example of how to map over and display shared data (documents) within a JSX template (`.jsx`).

```jsx
export default function ({ documents }) {
  return (
    <>
      <h2>Documents</h2>

      <ul>
        {documents.map((doc) => <li>{doc.title}</li>)}
      </ul>
    </>
  );
}

```

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

### Create a Server for Deno Deploy with Lume

Source: https://context7.com/context7/lume_land/llms.txt

This TypeScript code sets up a basic HTTP server using Lume's `Server` class, configured to serve static files from the `_site` directory. This is suitable for deployment on platforms like Deno Deploy.

```typescript
// serve.ts
import Server from "lume/core/server.ts";

const server = new Server({
  port: 8000,
  root: `${Deno.cwd()}/_site`,
});

server.start();

console.log("Listening on http://localhost:8000");

```

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

### Accessing Shared Data in Nunjucks Template

Source: https://lume.land/docs/creating-pages/shared-data

Example of how to iterate over and display shared data (documents) within a Nunjucks template (`.vto`).

```nunjucks
<h2>Documents</h2>

<ul>
{{ for doc of documents }}
  <li>
    {{ doc.title }}
  </li>
{{ /for }}
</ul>

```

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

### Create a Title Component (TSX)

Source: https://lume.land/docs/core/components

An example of a simple title component written in TSX. It accepts `children` and renders them within an `<h1>` tag.

```tsx
// _components/title.tsx

export default function title({ children }) {
  return <h1>{children}</h1>;
}

```

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

### Static Data in _data.json

Source: https://lume.land/docs/creating-pages/shared-data

Example of defining static shared data using a JSON file. This data is directly embedded and accessible by pages.

```json
{
  "people": [
    {
      "name": "Oscar Otero",
      "color": "black"
    },
    {
      "name": "Laura Rubio",
      "color": "blue"
    }
  ]
}
```

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

### Automated Deployment to Deno Deploy using GitHub Actions

Source: https://context7.com/context7/lume_land/llms.txt

This workflow automates the build and deployment of a Lume site to Deno Deploy on every push to the main branch. It requires Deno and DeployCTL to be set up.

```yaml
name: Publish on Deno Deploy

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read

    steps:
      - name: Clone repository
        uses: actions/checkout@v4

      - name: Setup Deno environment
        uses: denoland/setup-deno@v2

      - name: Build site
        run: deno task build

      - name: Deploy to Deno Deploy
        uses: denoland/deployctl@v1
        with:
          project: project-name
          import-map: "./deno.json"
          entrypoint: serve.ts
```

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

### Lume: Event Listener Options (signal)

Source: https://lume.land/docs/core/events

Example of using an `AbortSignal` to control the lifecycle of an event listener. The listener is removed automatically when the `AbortController` signals it.

```javascript
const controller = new AbortController();
let times = 0;

site.addEventListener("afterUpdate", () => {
  times++;

  // Remove the listener after 5 times
  if (times === 5) {
    controller.abort();
  }

  console.log(`This is the update ${times}`);
}, {
  signal: controller.signal,
});
```

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

### Static Data in _data.yml

Source: https://lume.land/docs/creating-pages/shared-data

Example of defining static shared data using a YAML file. YAML is often more human-readable for configuration and data structures.

```yaml
people:
  - name: Oscar Otero
    color: black

  - name: Laura Rubio
    color: blue

```

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

### Configure Asset File Loading in Lume

Source: https://lume.land/docs/core/concepts

Set up Lume to handle specific file extensions or directories as asset pages. Asset pages are processed and saved directly to the 'dest' folder without rendering. Use `site.add()` to specify which extensions or directories should be treated as assets.

```javascript
// Add .css files
site.add([".css"]);

// Add all files from the "/static/" directory
site.add("static");

```

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

### Create JSON File with JavaScript Archetype

Source: https://lume.land/docs/core/archetypes

This example demonstrates creating a JSON file. Lume automatically converts an object to a JSON string when the `path` has a `.json` extension.

```javascript
// Archetype/pages/example.json

export default function () {
  return {
    path: "/pages/example.json",
    content: {
      title: "Title content",
      content: "Page content",
    },
  };
}
```

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

### Show Lume CLI Help

Source: https://lume.land/docs/overview/command-line

Displays all available commands and options for the Lume CLI. This is a standard help command that provides an overview of the CLI's capabilities and usage. It's useful for discovering features or recalling specific command syntax.

```bash
deno task lume -h
```

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

### Dynamic Data in _data.ts

Source: https://lume.land/docs/creating-pages/shared-data

Example of defining dynamic shared data using a TypeScript file. This allows fetching data from external sources like databases or APIs.

```typescript
import { db } from "./database.ts";

const people = db.query("select name, color from people");

export { people };

```

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

### Disable Slugify URLs for Copied Files

Source: https://lume.land/docs/advanced/migrate-to-lume2

Modify the `slugify_urls` plugin to prevent it from slugifying files copied using `site.copy()`. This example shows how to limit slugification to HTML files.

```javascript
site.use(slugifyUrls({
  extensions: [".html"], // To slugify only HTML pages
}));
```

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

### Create Pages with Vento - Lume

Source: https://lume.land/docs/getting-started/page-formats

This snippet demonstrates creating a page using the Vento templating engine. It includes front matter for metadata and Vento syntax for dynamic content rendering. The rendered output is passed to a layout if specified.

```Vento
---
title: Welcome to my page
layout: layout.vto
links:
  - text: My Twitter
    url: https://twitter.com/misteroom
  - text: My GitHub profile
    url: https://github.com/oscarotero
---

<article>
  <header>
    <h1>{{ title }}</h1>
  </header>

  <ul>
    {{ for link of links }}
    <li>
      <a href="{{ link.url }}">
        {{ link.text }}
      </a>
    </li>
    {{ /for }}
  </ul>
</article>


```

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

### Create a Vento Layout for Lume

Source: https://lume.land/docs/getting-started/create-a-layout

This Vento template (`layout.vto`) defines the complete HTML structure for a web page. It includes essential tags and uses `{{ content }}` as a placeholder for page-specific content.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My first page</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>


```

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

### Initialize Lume Site Instance

Source: https://lume.land/docs/configuration/config-file

This snippet demonstrates the minimal required code to initialize a Lume site instance using the `lume()` function. It imports the necessary module and exports the created site object.

```typescript
import lume from "lume/mod.ts";

const site = lume();

export default site;

```

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

### Assign Layout to Markdown Page using Front Matter

Source: https://lume.land/docs/getting-started/create-a-layout

This Markdown file (`index.md`) demonstrates how to assign a layout using front matter. The `layout: layout.vto` directive tells Lume to use the specified Vento file for rendering.

```markdown
---
layout: layout.vto
---
# Welcome to my website

This is my first page using **Lume,**
a static site generator for Deno.

I hope you enjoy it.


```

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

### Second Page Front Matter (with shared data)

Source: https://lume.land/docs/getting-started/shared-data

Example of a second page's front matter. Similar to the index page, the `layout` variable is automatically applied due to the `_data.yml` file.

```markdown
---
title: My second page
---
# Another page

My second page in **Lume**.

This is getting better!

```

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

### Index Page Front Matter (with shared data)

Source: https://lume.land/docs/getting-started/shared-data

Example of an index page's front matter. With `_data.yml` in place, the `layout` variable doesn't need to be explicitly defined here, as it's inherited.

```markdown
---
title: This is my website
---
# Welcome to my website

This is my first page using **Lume,**
a static site generator for Deno.

I hope you enjoy it.

```

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

### Run Lume Scripts from CLI

Source: https://context7.com/context7/lume_land/llms.txt

This Bash snippet shows how to execute custom Lume task runners directly from the command line using `deno task lume run` followed by the script name.

```bash
# From CLI
den
o task lume run deploy
den
o task lume run save-site

```

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

### Add Hook to Change CSS Banner Message in Lume Plugin

Source: https://lume.land/docs/advanced/plugins

Extends the CSS banner plugin to include a hook (`changeCssBanner`) that allows modifying the banner message after the plugin has been installed. This enables dynamic customization.

```typescript
// my-plugins/css_banner.ts

interface Options {
  message: string;
}

export default function (options: Options) {
  function addBanner(content: string): string {
    const banner = `/* ${options.message} */`;
    return banner + "\n" + content;
  }

  return (site: Site) => {
    // Add a hook to change the message
    site.hooks.changeCssBanner = (message: string) => {
      options.message = message;
    };

    site.process([".css"], (pages) => {
      for (const page of pages) {
        page.text = addBanner(page.text);
      }
    });
  };
}

```

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

### Nest Components in Vento (Practical Method)

Source: https://lume.land/docs/core/components

Shows the practical way to nest components in Vento using the `comp` special tag, similar to JSX syntax, allowing for cleaner nesting of child content.

```vento
{{ comp container }}
  Content of the Container component

  {{ comp button }}
    This is a button inside the Container component
  {{ /comp }}
{{ /comp }}

```

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

### Apply Global Processors to All Pages in Lume

Source: https://context7.com/context7/lume_land/llms.txt

Processors can be configured to run on all pages, regardless of their file extension, by using a wildcard character '*' or by omitting the file extension argument.

```typescript
// Process all pages regardless of extension
site.process("*", processAllPages);

// Alternative syntax
site.process(processAllPages);
```

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

### Define Lume Script with Custom JavaScript Function

Source: https://lume.land/docs/core/scripts

This example demonstrates how to use a custom JavaScript function as a Lume script. The function is executed directly when the script is run, allowing for programmatic control over file operations and other logic.

```javascript
site.script("add-date-published", () => {
  Deno.writeTextFileSync(
    site.dest("published.txt"),
    `Site published at: ${Date.now()}`,
  );
});
```

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

### Deno Task for Manual rsync Deployment

Source: https://lume.land/docs/advanced/deployment

Defines a 'deploy' task in deno.json for building a Lume site and deploying it using rsync. Assumes a local build output in the '_site' directory.

```json
{
  "importMap": "import_map.json",
  "tasks": {
    "build": "deno task lume",
    "serve": "deno task lume -s",
    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
    "deploy": "deno task build && rsync -r _site/ user@my-site.com:~/www"
  }
}

```

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

### Importing Lume Utilities (Lume Specifier)

Source: https://lume.land/docs/advanced/plugins

This code snippet shows the recommended way to import Lume utilities using the 'lume/' specifier. This approach helps avoid loading multiple versions of Lume by leveraging configured import maps.

```typescript
import { merge } from "lume/core/utils/object.ts";
```

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

### Enable Auto Open Browser

Source: https://lume.land/docs/configuration/config-file

Automatically opens the generated site in the default web browser once the local server starts. This can also be controlled via CLI flags `--open` or `-o`.

```typescript
const site = lume({
  server: {
    open: true,
  },
});

```