Update Home Page

Folder Structure
├── data
│   └── en
│       └── home
│           ├── bento.yaml
│           ├── card-grid.yaml
│           └── hero.yaml
└── content
│   └── en
│       └── home
│           └── showcase
│               └── index.md
│── hugo.yaml
└── themes
    └── E25DX

Hero Block

Update Hero Block

Copy theme/E25DX/data/en/home/hero.yaml to data/en/home/hero.yaml and update accordingly.

badge: Documentation · Blog · Search

svg: hero.svg

title: No need Hundreds of NPM Packages <br/> & Thousands of CSS Classes

description: For A Modern And Modular Technical Documentation & Blog Setup

btn_primary:
  label: Get Started
  url: /docs

btn_secondary:
  label: Contribute
  url: https://github.com/dumindu/e25dx

Bento Block

Remove Bento Block

Folder Structure
├── themes
│   └── E25DX
│       └── layouts
│           └── home.html
└── layouts
    └── home.html

Copy themes/E25DX/layouts/home.html to layouts/home.html and remove following lines.

Inside <main>
- {{ partial "sections/bento.html" (index site.Data site.Language.Lang "home" "bento") }}
Inside <head>
- (resources.Get "css/sections/bento.css")

Update Bento Block

Copy theme/E25DX/data/en/home/bento.yaml to data/en/home/bento.yaml and update accordingly.

items:
  - col: col-5
    icon: bento/rocket_launch
    title: Built for Performance
    description: Powered by GoHugo, the world's fastest static site framework; With a premium search experience with Pagefind that aims to perform well on large sites. No external CSS, JS, icon, font frameworks.
    badges: [ ]

  - col: col-7
    icon: bento/extension
    title: Extensible Architecture
    description: Enjoy a modular, themeable layout and partials designed specifically for technical wizards and creators. Manage your composable CSS and partials with a YAML data-driven approach, side-by-side using pure Markdown files.
    badges: [ Multiple Documentation Sets, Blog, Search, Other Pages ]

  - col: col-7
    icon: bento/shield
    title: Zero Bloat and Secure
    description: Build your site without dragging along hundreds of npm packages or thousands of CSS classes. We leverage native Hugo features to keep your project clean, secure, and incredibly easy to maintain.
    badges: [No NPM Dependencies, Even No Need To Install Node ]

  - col: col-5
    icon: bento/palette
    title: Fully Themeable
    description: Take total control of your design system. Effortlessly customize layouts, components, partials and color modes using isolated CSS, JavaScript, and data-driven template configurations. Take full advantage of native Hugo pipes for asset minification, custom markdown render hooks for styled blocks.
    badges: [ ]

Update/ add new icons.
Folder Structure
```
├── themes
│   └── E25DX
└── assets
    └── icons
        └── bento
            └── palette.svg
```
- Create a new folder assets/icons/bento to save new SVG files.
- Currently, we use Google’s Material Symbols; Fill-“Enable”, Optical Size-“20px” and Style-“Material symbols”, “Rounded”
- Make sure set height="36px" width="36px" and remove fill="" on SVG to support theme colors.

Card Grid Block

Remove Card Grid Block

Folder Structure
├── themes
│   └── E25DX
│       └── layouts
│           └── home.html
└── layouts
    └── home.html

Copy themes/E25DX/layouts/home.html to layouts/home.html and remove following lines.

Inside <main>
- {{ partial "sections/card-grid.html" (index site.Data site.Language.Lang "home" "card-grid") }}
Inside <head>
- (resources.Get "css/sections/card-grid.css")

Update Card Grid Block

Copy theme/E25DX/data/en/home/card-grid.yaml to data/en/home/card-grid.yaml and update accordingly.

header:
  title: Contribution
  description: Without them, we couldn't build this technical documentation & blog without a single npm package

items:
  - icon: build/gohugo
    title: GoHugo
    description: The world’s fastest framework for building websites.
    link:
      label: Contribute
      url: "https://gohugo.io/"

  - icon: build/pagefind
    title: Pagefind
    description: Fully static search library that aims to perform well on large sites.
    link:
      label: Contribute
      url: "https://pagefind.app/"

  - icon: build/terminal
    title: e25DX
    description: Modern & modular technical documentation and blog setup.
    link:
      label: Contribute
      url: "https://github.com/dumindu/e25dx"

  - icon: build/web
    title: Documentation
    description: Help us to improve the documentation.
    link:
      label: Contribute
      url: "https://github.com/dumindu/E25DX/tree/gh-pages/example"

Update/ add new icons.
Folder Structure
```
├── themes
│   └── E25DX
└── assets
    └── icons
        └── card-grid
            └── gohugo.svg
```
- Create a new folder assets/icons/card-grid to save new SVG files.
- Make sure to use width="32" height="32" on SVG.
- Currently, for some icons we use Google’s Material Symbols: Optical Size-“20px”, Style: “Material symbols”, “Rounded”
  - Make sure to set height="32" width="32" and remove fill="" on SVG to support theme colors.

Showcase Block

Remove Showcase Block

You do not need to do anything here. It’s disabled by default, till you add content/en/home/showcase/index.md.

Update Showcase Block

Add content/en/home/showcase/index.md similar to this and update accordingly.

---
headless: true

title: See it in action
description: Let's explore the features of the project.
---

{{< accordion-vertical-tabs count="3" tabHeight="3.75rem" label="Select feature" >}}
{{< tab label="Feature 01" >}}

Feature 01 Markdown

```rust {title="Rust"}
fn main() {
    println!("Hello, world!");
}
```

{{< /tab >}}
{{< tab label="Feature 02" >}}

Feature 02 Markdown

```rust {title="Rust"}
fn main() {
    println!("Hello, world!");
}
```

{{< /tab >}}
{{< tab label="Feature 03" >}}

Feature 03 Markdown

```rust {title="Rust"}
fn main() {
    println!("Hello, world!");
}
```

{{< /tab >}}
{{< /accordion-vertical-tabs >}}