--- /dev/null
+---
+title: "Components"
+description: "Advanced editing features, particularly the use of reusable components"
+---
+
+# Components
+
+This page describes the use of reusable components.
+
+There are predefined components that you can insert into your pages. They help maintain visual and functional consistency throughout the site.
+
+Here are the main components you can use:
+
+Click on the component image to see the full documentation.
+
+### [Section](components/section.md)
+
+Section are used to create distinct content sections with customizable styles and layouts.
+They are mandatory for every components or content blocks.
+
+[Section component](components/section.md)
+
+
+### [Media-block](components/media-block.md)
+
+[](components/media-block.md)
+[Media block component](components/media-block.md)
+
+### [Features List](components/feature-lists.md)
+
+[](components/feature-lists.md)
+[Features list component](components/feature-lists.md)
+
+### [Carousel](components/carousel.md)
+
+[](components/carousel.md)
+[Carousel component](components/carousel.md)
+
+### [Latest News](components/latest-news.md)
+
+[](components/latest-news.md)
+[Latest news component](components/latest-news.md)
+
+
+### [Vertical Lists](components/vertical-lists.md)
+
+[](components/vertical-lists.md)
+[Vertical lists component](components/vertical-lists.md)
+
# Carousel Component
-[](../images/carousel.png)
The carousel component allows you to display a rotating list of items in a slider format with navigation buttons.
+[](../images/carousel.png)
+
+
+- [Basic Usage](#basic-usage)
+- [With Custom Class](#with-custom-class)
+- [Structure of Project Items](#structure-of-project-items)
+- [HTML Structure](#html-structure)
+- [Features](#features)
+
## Basic Usage
The most common use case is to display all projects using the `getpages` shortcode:
-```html
+```markdown
{{<carousel>}}
{{<getpages "projects" "hidden">}}
{{</carousel>}}
You can add a custom class to the carousel container:
-```html
+```markdown
{{<carousel class="mg-t-lg">}}
{{<getpages "projects" "hidden">}}
{{</carousel>}}
The `features-list` component allows you to display a grid of features with icons, titles, and descriptions.
+- [Usage](#usage)
+- [Parameters](#parameters)
+ - [Shortcode Parameters](#shortcode-parameters)
+ - [Item Parameters](#item-parameters)
+- [Example](#example)
+- [Technical Notes](#technical-notes)
+
+
## Usage
To use this component in your Markdown pages, use the following shortcode syntax:
--- /dev/null
+---
+title: "Full Width Image Component"
+description: "Documentation for the full-width-image shortcode"
+date: 2023-12-11
+draft: false
+---
+
+# Full Width Image Component
+
+The full-width-image component is used to display images that span the full width of their container, with various styling options.
+
+## Usage
+
+Basic usage:
+
+```markdown
+{{</* full-width-image
+ src="/img/your-image.png"
+ alt="Image description"
+ title="Image title"
+*/>}}
+```
+
+## Parameters
+
+| Parameter | Description | Required | Default |
+| --------- | ----------------------- | -------- | ------------------ |
+| src | Image source URL | Yes | - |
+| alt | Alternative text | Yes | "Full width image" |
+| title | Image title | No | - |
+| class | Additional CSS classes | No | - |
+| imgClass | Classes for img element | No | - |
+
+## Examples
+
+### Basic Full Width Image
+
+```markdown
+{{</* full-width-image
+ src="/img/banner.jpg"
+ alt="Welcome banner"
+ title="Welcome to our site"
+*/>}}
+```
+
+### Rounded Corners Image
+
+```markdown
+{{</* full-width-image
+ src="/img/feature.jpg"
+ alt="Feature overview"
+ class="rounded-corners"
+*/>}}
+```
+
+### Image with Custom Classes
+
+```markdown
+{{</* full-width-image
+ src="/img/hero.jpg"
+ alt="Hero image"
+ class="shadow-lg"
+ imgClass="opacity-90"
+*/>}}
+```
+
+## Available Classes
+
+### Container Classes
+- `rounded-corners`: Adds rounded corners to the image container
+- `shadow-sm`: Adds small shadow
+- `shadow-lg`: Adds large shadow
+- `mg-t-sm`: Adds small top margin
+- `mg-b-sm`: Adds small bottom margin
+
+### Image Classes
+- `opacity-90`: Sets image opacity to 90%
+- `grayscale`: Converts image to grayscale
+- `blur-sm`: Adds slight blur effect
+
+## Best Practices
+
+1. Always provide descriptive alt text for accessibility
+2. Optimize images before uploading (compress, proper dimensions)
+3. Use appropriate image formats (JPEG for photos, PNG for graphics)
+4. Consider loading time when using large images
+5. Test how images appear on different screen sizes
\ No newline at end of file
# Latest News Component
+The Latest News component displays the most recent blog posts in a carousel format with navigation buttons. It automatically fetches and displays up to 10 latest posts from the blog section.
+
[](../images/latest-news.png)
-The Latest News component displays the most recent blog posts in a carousel format with navigation buttons. It automatically fetches and displays up to 10 latest posts from the blog section.
+- [Basic Usage](#basic-usage)
+- [Features](#features)
+
+
## Basic Usage
-# media-block
+---
+title: "Media Block Component"
+description: "Documentation for the media-block shortcode"
+date: 2023-12-11
+draft: false
+---
+
+# Media Block Component
+
+The media block component is used to create sections that combine media (images or videos) with text content. It's highly flexible and can be used for various layouts.
+
[](../images/media-block--left.png) [](../images/media-block--right.png)
+- [Usage](#usage)
+- [Parameters](#parameters)
+- [Examples](#examples)
+ - [Image with Right-aligned Media](#image-with-right-aligned-media)
+ - [Video Integration](#video-integration)
+- [Best Practices](#best-practices)
+
+
+
+## Usage
+
+Basic usage:
+
+```markdown
+{{</* media-block
+ title="Your Title"
+ media="/path/to/media"
+ alt="Media description"
+ animate="true"
+*/>}}
+Your content goes here
+{{</* /media-block */>}}
+```
+
+## Parameters
+
+| Parameter | Description | Required | Default |
+| ------------- | ------------------------------------- | -------- | ------- |
+| title | Block title | No | "" |
+| media | URL to media (image or video) | Yes | - |
+| alt | Alt text for media | Yes | - |
+| mediaPosition | Position of media ("left" or "right") | No | "left" |
+| animate | Enable animation | No | false |
+| titleLevel | Heading level (1-6) | No | 2 |
+| titleClass | Additional CSS classes for title | No | "" |
+| class | Additional CSS classes for block | No | "" |
+
+## Examples
+
+### Image with Right-aligned Media
-The `media-block` is a flexible component for displaying content with a media element (image, video, or other component).
```markdown
-{{<media-block
- title="**Discover** our *new* technology"
- media="/images/tech-demo.jpg"
+{{</* media-block
+ title="Feature Overview"
+ media="/img/feature.png"
+ alt="Feature illustration"
mediaPosition="right"
- mediaMobilePosition="top"
- imageAlt="Demonstration of our new technology"
- imageSize="600"
- label="NEW"
- titleLevel="2"
- titleClass="text-primary"
- class="bg-light border-rounded"
animate="true"
->}}
-{{<md>}}
- ## A remarkable innovation
-
- Our revolutionary new technology improves productivity by **50%**.
- Discover its main features:
-
- * Optimized performance
- * Intuitive interface
- * Maximum compatibility
-{{</md>}}
- <div class="mt-4">
- <a href="/demo" class="btn btn-primary">
- Request a demo <i class="fas fa-arrow-right"></i>
- </a>
- </div>
-{{</media-block>}}
+*/>}}
+This feature provides powerful capabilities for...
+{{</* /media-block */>}}
```
-| Parameter | Type | Default | Description |
-| --------------------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` | string | - | Block title. Supports markdown for bold (`**text**`) and italic (`*text*`) |
-| `media` | string | - | URL of image/video or shortcode of another component. Supports: images (png, jpg, jpeg, avif, webp, gif, svg), videos (mp4), YouTube, SlideShare and partial or HTML components |
-| `mediaPosition` | string | "left" | Position of media element: `"left"` or `"right"` |
-| `mobileMediaPosition` | string | "left" | Position of media element on mobile: `"top"` or `"bottom"` |
-| `imageAlt` | string | "Media image" | Alternative text for image |
-| `imageSize` | string | - | Image size (width in pixels) |
-| `label` | string | - | Optional label above title |
-| `titleLevel` | string | "2" | HTML title level (h1-h6) |
-| `titleClass` | string | - | Additional CSS classes for title |
-| `class` | string | - | Additional CSS classes for block |
-| `animate` | string | "false" | Activates block animation: `"true"` or `"false"` |
-
-The content between the shortcode tags can include Markdown and HTML.
-
-TODO: ajoute un paragraphe qui explique l'utilisation du tag md dans la partie texte du meidablock
\ No newline at end of file
+### Video Integration
+
+```markdown
+{{</* media-block
+ title="Tutorial Video"
+ media="https://www.youtube.com/embed/VIDEO_ID"
+ alt="Tutorial video"
+ mediaPosition="left"
+*/>}}
+Watch this tutorial to learn how to...
+{{</* /media-block */>}}
+```
+
+## Best Practices
+
+1. Always provide descriptive alt text
+2. Use animation sparingly
+3. Keep content concise and focused
+4. Test different media positions for optimal layout
+5. Ensure media files are optimized for web use
\ No newline at end of file
--- /dev/null
+---
+title: "Section Component"
+description: "Documentation for the section shortcode"
+date: 2023-12-11
+draft: false
+---
+
+# Section Component
+
+The section component is used to create distinct content sections with customizable styles and layouts.
+
+- [Usage](#usage)
+- [Available Classes](#available-classes)
+ - [Layout Classes](#layout-classes)
+ - [Style Classes](#style-classes)
+- [Examples](#examples)
+ - [Centered Content Section](#centered-content-section)
+ - [Feature Section](#feature-section)
+- [Best Practices](#best-practices)
+
+
+## Usage
+
+Basic usage:
+
+```markdown
+{{</* section */>}}
+Your content here
+{{</* /section */>}}
+```
+
+With classes:
+
+```markdown
+{{</* section class="section-square-primary txt-c" */>}}
+Your centered content here
+{{</* /section */>}}
+```
+
+## Available Classes
+
+### Layout Classes
+- `txt-c`: Center-align text
+- `txt-l`: Left-align text
+- `txt-r`: Right-align text
+
+### Style Classes
+- `section-square-primary`: Primary colored background with square corners
+- `section-rounded`: Rounded corners
+- `section-dark`: Dark background
+- `section-light`: Light background
+
+## Examples
+
+### Centered Content Section
+
+```markdown
+{{</* section class="section-square-primary txt-c" */>}}
+{{</* md */>}}
+## Join the **Community**
+
+Connect with other developers and share your experience.
+{{</* /md */>}}
+
+<p class="mg-t-md">
+ <a href="/community" class="btn btn-primary">
+ Join Now <i class="fas fa-arrow-right"></i>
+ </a>
+</p>
+{{</* /section */>}}
+```
+
+### Feature Section
+
+```markdown
+{{</* section class="section-light section-rounded" */>}}
+{{</* md */>}}
+## Key Features
+
+- Fast and efficient
+- Easy to use
+- Highly customizable
+{{</* /md */>}}
+{{</* /section */>}}
+```
+
+## Best Practices
+
+1. Use consistent styling across similar sections
+2. Combine with other components like `md` for rich content
+3. Keep sections focused on a single topic or purpose
+4. Use appropriate spacing between sections
+5. Choose colors and styles that match your site's theme
\ No newline at end of file
The `vertical-lists` component allows you to create columnar layouts with titled sections. Each section can contain text, links, or other content.
+- [Usage](#usage)
+- [Parameters](#parameters)
+- [List Item Properties](#list-item-properties)
+- [Examples](#examples)
+ - [Example with Mixed Title Formatting](#example-with-mixed-title-formatting)
+- [Styling](#styling)
+- [Best Practices](#best-practices)
+
+
## Usage
Basic structure:
--- /dev/null
+---
+title: "Hugo Website Tutorial"
+description: "A comprehensive guide for managing and editing the Xen Project website"
+date: 2023-12-11
+draft: false
+---
+
+# Hugo Website Tutorial
+
+This tutorial will guide you through the common tasks for managing and updating the Xen Project website. We'll cover everything from basic content updates to advanced component usage.
+
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [Basic Content Management](#basic-content-management)
+ - [Headers and Content](#headers-and-content)
+ - [Page Structure](#page-structure)
+- [Working with Images](#working-with-images)
+ - [Adding Images](#adding-images)
+ - [Image Sizing](#image-sizing)
+- [Page Components](#page-components)
+ - [Downloadable Content](#downloadable-content)
+- [Site Navigation](#site-navigation)
+ - [Adding New Pages](#adding-new-pages)
+ - [Header/Footer Modification](#headerfooter-modification)
+- [Best Practices](#best-practices)
+- [Component Reference](#component-reference)
+
+## Basic Content Management
+
+### Headers and Content
+
+Each page in the website starts with a YAML frontmatter section that defines its metadata:
+
+```yaml
+---
+title: "Your Page Title"
+description: "Page description for SEO"
+keywords: "keyword1, keyword2"
+date: 2024-01-14T07:07:07+01:00
+draft: false
+menus:
+ main:
+ parent: Resources
+ weight: 12
+---
+```
+
+### Page Structure
+
+Pages are structured using sections and components. Here's a basic example:
+
+```markdown
+{{</* section */>}}
+{{</* media-block
+ title="Section Title"
+ media="/path/to/media"
+ alt="Alt text"
+ animate="true"
+*/>}}
+Your content goes here
+{{</* /media-block */>}}
+{{</* /section */>}}
+```
+
+## Working with Images
+
+### Adding Images
+
+Images can be added using several methods:
+
+1. Placement
+
+All images should be placed in the `static/img` folder.
+
+Be mindful of image file sizes - they should be less than 150kb. It's recommended to convert images to the `webp` format.
+
+You can use the [Squoosh](https://squoosh.app/) tool to convert your images to webp format.
+
+You can view most of the images used on the website in the [Images Reference](images.md) page.
+
+
+2. Full-width images:
+```markdown
+{{</* full-width-image
+ src="/img/your-image.png"
+ alt="Image description"
+ title="Image title"
+ class="rounded-corners"
+*/>}}
+```
+
+3. Regular images in content markdown:
+```markdown
+
+```
+
+4. Regular images in content HTML :
+```html
+<img src="/img/your-image.png" alt="Image description" title="Image title" class="rounded-corners">
+```
+
+5. Full-width images in content markdown:
+
+While less commonly used, this method is available when needed.
+
+```markdown
+{{</* full-width-image
+ src="/img/your-image.png"
+ alt="Image description"
+ title="Image title"
+ class="rounded-corners"
+*/>}}
+```
+
+### Image Sizing
+
+Control image sizes using classes or direct HTML attributes:
+
+```markdown
+{{</* full-width-image
+ src="/img/your-image.png"
+ alt="Image description"
+ class="small-image"
+*/>}}
+```
+
+Available image classes:
+- `small-image`: 300px max width
+- `medium-image`: 500px max width
+- `large-image`: 800px max width
+- `rounded-corners`: Adds rounded corners
+
+## Page Components
+
+All page components are available in the [Components Guide](components.md)
+
+
+### Downloadable Content
+
+Add downloadable resources:
+
+```markdown
+{{</* get-downloads-links
+ title="Downloads"
+ category="resources"
+*/>}}
+```
+
+## Site Navigation
+
+### Adding New Pages
+
+1. Create a new `.md` file in the appropriate content directory
+2. Include proper frontmatter
+3. Add to menu structure if needed:
+
+```yaml
+menus:
+ main:
+ parent: Parent Section
+ weight: 10
+```
+
+### Header/Footer Modification
+
+Header and footer content can be modified in the theme configuration:
+
+1. Navigate to `themes/xen-project/layouts/partials/`
+2. Edit `header.html` or `footer.html`
+
+## Best Practices
+
+1. Always include descriptive alt text for images
+2. Use semantic heading structure (h1 > h2 > h3)
+3. Keep URLs and file paths lowercase and hyphen-separated
+4. Optimize images before uploading
+5. Test pages in both desktop and mobile views
+
+## Component Reference
+
+Common shortcodes available:
+
+- `section`: Create content sections
+- `media-block`: Text with media combinations
+- `full-width-image`: Full-width responsive images
+- `md`: Markdown content within other components
+- `get-downloads-links`: Resource downloads section
+
+For detailed component documentation, see the [Components Guide](components/)
\ No newline at end of file
+++ /dev/null
----
-title: "Components"
-description: "Advanced editing features, particularly the use of reusable components"
----
-
-# Components
-
-This page describes the use of reusable components.
-
-There are predefined components that you can insert into your pages. They help maintain visual and functional consistency throughout the site.
-
-Here are the main components you can use:
-
-Click on the component image to see the full documentation.
-
-### Media-block
-
-[](components/media-block.md)
-
-
-### Features List
-
-[](components/feature-lists.md)
-
-
-### Carousel
-
-[](components/carousel.md)
-
-
-### Latest News
-
-[](components/latest-news.md)
-
-
-### Vertical Lists
-
-[](components/vertical-lists.md)
-
-
.rounded-corners img {
border-radius: 16px;
}
+.small-image,
+.medium-image,
+.large-image {
+ max-width: 100%;
+}
+
+.small-image {
+ max-width: 300px;
+}
+
+.medium-image {
+ max-width: 500px;
+}
+
+.large-image {
+ max-width: 800px;
+}
.w-100 {
width: 100%;
projects / www-xenproject-org.git / commitdiff