### Install edge-markdown Plugin Source: https://edgejs.dev/docs/edge-markdown Install the edge-markdown plugin using npm. ```bash npm i edge-markdown ``` -------------------------------- ### Install Iconify JSON Bundle Source: https://edgejs.dev/docs/edge-iconify Install a specific Iconify icon bundle, such as heroicons, using npm. ```bash npm i @iconify-json/heroicons ``` -------------------------------- ### Basic Hello World in Edge Source: https://edgejs.dev/ A simple "Hello World" example demonstrating basic variable interpolation in Edge templates. ```edge Hello {{ user.username }}! ``` -------------------------------- ### Install Edge.js v6 Source: https://edgejs.dev/docs/changelog/upgrading-to-v6 Install the latest version of Edge.js, which is tagged with `@next`. ```bash npm i edge.js@next ``` -------------------------------- ### Install Edge.js Source: https://edgejs.dev/docs/getting_started Install the Edge.js package using npm. This is the first step to using Edge in your Node.js project. ```bash npm i edge.js ``` -------------------------------- ### Install edge-iconify Package Source: https://edgejs.dev/docs/edge-iconify Install the edge-iconify npm package to enable Iconify integration. ```bash npm i edge-iconify ``` -------------------------------- ### Project Structure Example Source: https://edgejs.dev/docs/getting_started A typical project structure for an Edge.js application, showing the placement of views and the main application file. ```treeview .\n\n├── views\n│ └── home.edge\n├── index.js\n└── package.json ``` -------------------------------- ### Using Edge Components Source: https://edgejs.dev/ An example showcasing Edge's component system, which allows for reusable markup with isolated state, using accordions as a demonstration. ```edge @accordion() @accordion.item({ title: 'What is Edge?' }) Edge is a template engine for Node.js @end @accordion.item({ title: 'Why should I use Edge?' }) Because you need a template engine 🤷🏻‍♂️ @end @accordion.item({ title: 'How can I support Edge?' }) By becoming a sponsor on Github @end @end ``` -------------------------------- ### Rendering a Map with Markers using Provide/Inject Source: https://edgejs.dev/docs/components/provide_inject This example demonstrates how to use the Provide/Inject API to render a map with multiple markers. The parent `map` component injects map data, and child `map.marker` components push marker information to the injected array. ```edge @map({ center: [-84, 35], zoom: 3 }) @!map.marker({ lat: 37.8225, lon: -122.0024, label: 'Edge Body Shaping' }) @!map.marker({ lat: 33.8981, lon: -118.4169, label: 'Edge Barbershop & Essentials' }) @!map.marker({ lat: 29.723, lon: -95.4189, label: 'Edge Waxing Studio' }) @!map.marker({ lat: 28.3378, lon: -81.3966, label: 'Edge 30 Nutritional Consultants' }) @!map.marker({ lat: 40.6483, lon: -74.0237, label: 'Edge Brands LLC' }) @end ``` -------------------------------- ### Configure Shiki Syntax Highlighting Source: https://edgejs.dev/docs/edge-markdown Customize Shiki syntax highlighting by providing a theme and specifying supported languages. Ensure Shiki is installed and configured in your project. ```javascript import { edgeMarkdown } from 'edge-markdown' edge.use(edgeMarkdown({ shiki: { theme: 'github-dark', langs: ['javascript', 'typescript', 'json'] } })) ``` -------------------------------- ### Access Global Configuration in HTML Source: https://edgejs.dev/docs/templates_state Access global properties directly within your HTML templates using dot notation. This example shows how to apply a global color scheme and iterate over menu items. ```html
@each(item in config.menu) @end
``` -------------------------------- ### Mount Default Disk for Templates Source: https://edgejs.dev/docs/getting_started Register the 'views' directory as the default disk for Edge.js to locate templates. This example shows how to mount a directory and then render templates from it. ```javascript const BASE_URL = new URL('./', import.meta.url)\n\n\n\nedge.mount(new URL('views', BASE_URL))\n\n\n\n/**\n * Render home.edge file from\n * {BASE_URL/views} directory\n */\nawait edge.render('home')\n\n\n\n/**\n * Render pages/posts/index.edge file from\n * {BASE_URL/views} directory\n */\nawait edge.render('pages/posts/index') ``` -------------------------------- ### Extend Layout and Render Slots Source: https://edgejs.dev/docs/components/layouts Extend a defined layout in a specific view file. This example shows how to pass a title, define content for the 'meta' slot, and provide content for the 'main' slot. ```edge @layout.app({ title: "Welcome page title" }) @slot('meta') @endslot @slot('main')

Hello world

@endslot @end ``` -------------------------------- ### Run Node.js server with inspect flag Source: https://edgejs.dev/docs/debugging To enable debugging with the `debugger` tag, run your Node.js server using the `--inspect` flag. This command starts the server and makes it available for debugging connections. ```bash node --inspect index.js ``` -------------------------------- ### Register edge-iconify Plugin Source: https://edgejs.dev/docs/edge-iconify Register the edge-iconify plugin with Edge.js after installation. ```javascript import edge from 'edge.js' import { edgeIconify } from 'edge-iconify' edge.use(edgeIconify) ``` -------------------------------- ### Call Global Async Function in Template Source: https://edgejs.dev/docs/templates_state Call globally defined asynchronous functions within your templates using the `@let` tag to assign the result to a variable. The example fetches a user and displays their username. ```edge @let(user = await findUser(1)) {{ user.username }} ``` -------------------------------- ### Define and Render Markdown Slots in Hero Component Source: https://edgejs.dev/docs/edge-markdown Use the `#` tag to define slots and `@markdownSlot` to render their content within an Edge component. This example shows a 'hero' component with a default slot and a named 'description' slot. ```edge ::hero Default slot text #description This will be rendered inside the `description` slot. :: ``` ```edge

@markdownSlot()

@markdownSlot('description')
``` -------------------------------- ### Register a Simple Custom Edge Tag Source: https://edgejs.dev/docs/creating-custom-tags Implement the TagContract interface to define a custom tag and register it using edge.registerTag. This example creates a 'reverse' tag that outputs static text. ```javascript import edge from 'edge.js' import { TagContract } from 'edge.js/types' /** * Defining a tag */ const reverse: TagContract = { block: false, seekable: true, tagName: 'reverse', compile(parser, buffer, token) { buffer.outputRaw('Hello from reverse tag') } } /** * Registering it with Edge */ edge.registerTag(reverse) /** * Using the tag */ const output = await edge.renderRaw('@reverse()') console.log(output) // I am the reverse tag ``` -------------------------------- ### Get Specific Props Source: https://edgejs.dev/docs/components/props Extract a subset of props based on a list of keys using `$props.only()` and then access a specific prop's value. ```edge {{ $props.only(['text', 'class']).get('text') }} ``` -------------------------------- ### Global Helper Changes Source: https://edgejs.dev/docs/changelog/upgrading-to-v6 Replaced global helpers with their respective module-specific functions. For example, `e` is replaced by `html.escape`, `stringify` by `js.stringify`, and `safe` by `html.safe`. ```edge {{ e(post.content) }} {{ html.escape(post.content) }} {{ stringify(someJSONObject) }} {{ js.stringify(someJSONObject) }} {{ safe(post.content) }} {{ html.safe(post.content) }} ``` -------------------------------- ### Accessing Shared State with $context Source: https://edgejs.dev/docs/components/provide_inject Child components can access state injected by their parent using the `$context` variable. This example shows how to inspect the entire context object. ```edge @map() {{ inspect($context) }} @end ``` -------------------------------- ### Render Components with @component Tag Source: https://edgejs.dev/docs/components/introduction Use the `@component` tag to render components, passing the template path and props. This example shows rendering a button component twice with different text and types. ```edge
@!component('components/button', { text: 'Login' }) @!component('components/button', { text: 'Cancel', type: 'reset' })
``` -------------------------------- ### Basic Hello World in Edge Source: https://edgejs.dev/docs/introduction A simple greeting template demonstrating basic Edge syntax. ```edge Hello {{ user.username }}! ``` -------------------------------- ### Initialize Edge with Iconify and Add Collection Source: https://edgejs.dev/docs/edge-iconify Initialize Edge.js, import necessary functions from edge-iconify, add an icon collection, and register the plugin. ```javascript import { Edge } from 'edge.js' import { edgeIconify, addCollection } from 'edge-iconify' import { icons as heroIcons } from '@iconify-json/heroicons' /** * Add heroIcons collection */ addCollection(heroIcons) const edge = Edge.create() /** * Register the plugin */ edge.use(edgeIconify) ``` -------------------------------- ### Get Prop Value Source: https://edgejs.dev/docs/components/props Retrieve the value of a specific prop using the `$props.get()` method. ```edge {{ $props.get('text') }} ``` -------------------------------- ### Render Input Component with Props Source: https://edgejs.dev/docs/components/props Demonstrates how to render the input component and pass specific props such as name and placeholder. ```edge @!input({ name: 'title', placeholder: 'Enter post title' }) @!input({ name: 'slug', placeholder: 'Enter post post slug' }) ``` -------------------------------- ### Configure Compatibility Plugin Source: https://edgejs.dev/docs/changelog/upgrading-to-v6 Use the `migrate` plugin to maintain compatibility with version 5 if your project is not yet ready for all breaking changes. ```javascript import edge from 'edge.js' import { migrate } from 'edge.js/plugins/migrate' edge.use(migrate) ``` -------------------------------- ### Pass Content to Component Slot Source: https://edgejs.dev/docs/components/introduction Content placed between the opening and closing `@component` tags is passed to the default slot. This example passes an icon and text to the button component. ```edge @component('components/button', { class: ['flex', 'align-center', 'space-x-4'] }) Login @end ``` -------------------------------- ### Basic Node.js HTTP Server with Edge.js Source: https://edgejs.dev/docs/getting_started Set up a basic Node.js HTTP server that renders an Edge.js template. Ensure your application uses ES modules. ```javascript import { Edge } from 'edge.js'\n\nimport { createServer } from 'node:http'\n\n\n\nconst edge = Edge.create()\nedge.mount(new URL('./views', import.meta.url))\n\n\n\nconst server = createServer(async (req, res) => {\n const data = { username: 'virk' }\n const html = await edge.render('home', data)\n\n res.setHeader('content-type', 'text/html')\n res.end(html)\n})\n\n\n\nserver.listen(3000) ``` -------------------------------- ### Merge Additional Classes to Input Source: https://edgejs.dev/docs/components/props Illustrates how to merge additional specific classes with the default 'input' class for more granular styling. ```edge @input({ type: 'text', name: 'title', id: 'title', class: [ 'input-medium', 'input-rounded' ] }) ``` -------------------------------- ### Looping Over Collections in Edge Source: https://edgejs.dev/ Demonstrates how to loop over arrays or objects using Edge's unified loop syntax, including rendering partials for each item. ```edge @each(comment in post.comments) @include('partials/comment') @end ``` -------------------------------- ### Example Usage of @notification Tag Source: https://edgejs.dev/docs/creating-custom-tags Demonstrates how to use the custom '@notification' tag in an Edge.js template. The tag conditionally renders its content based on the presence of a notification for a given type. ```edge @notification('success')

{{ notification.message }}

@end ``` -------------------------------- ### Merge Props with Default Values Source: https://edgejs.dev/docs/components/props Use `$props.merge()` to combine custom properties with existing props. Existing props take precedence. This example sets a default 'type' attribute. ```edge ``` -------------------------------- ### Mutate Inline Variable with `@assign` Source: https://edgejs.dev/docs/templates_state Re-assign new values to inline variables within a template using the `@assign` tag. This example demonstrates mutating a `total` variable inside an `each` loop. ```edge {{-- Define variable --}} @let(total = 0)