VeruA.ch Website

currently under development on: verua.dev-1.andreashnida.de 👀

Development site: preview.verua.info
Production site: verua.info

ℹ This site is based on Hugoplate Boilerplate Theme for Hugo. For specifics on how to use the theme, please refer to the README of the theme.

Table of Contents

• Usage / Update Content
  • Editing Content
  • Images
  • Shortcodes
• Custom Shortcodes exclusively for VeruA.ch
  • Alert
  • Aligncenter
  • Card
  • Columns
  • Font-Awesome Icon
  • Section
  • formEventDropdown
• Deployment
• Development

Usage / Update Content

To use the theme, and to update your content, you need to clone the repository, update your content in the content folder and push your changes to the main branch which will trigger a deployment.

# Clone the repository
git clone https://code.verua.online/rabeweb/verua.ch_src.git

# Change into the repository
cd verua.ch_src

# Add your changes

# Commit your changes
git commit -am "Update content"

# Push your changes
git push -u origin main

⬆

Editing Content

The content is written in the markdown format. You also use html tags to format your content but the ending still stays .md for markdown. These files are found in the content folder. For linking german and french content, you use the translation key syntax. This means that you put a key in the frontmatter of both files you want to link to.

---
title: "VeruA App"
translationKey: "a-page-about-cats"
---

For example, the german version of the VeruA.ch website is located in the content/german folder. The french version is located in the content/french folder. Both are linked by the translation key a-page-about-cats.

⬆

Images

Images are stored in the static/images folder. You can use the ![]() syntax to insert images into your markdown files.

Everything that is in the static/images folder will be copied to the public/images folder during the build process. This means that you can use relative paths to your images in your markdown files like this: ![](images/my-image.png).

⬆

Shortcodes

You can use shortcodes to add custom functionality to your markdown files. You can find a list of available shortcodes in the Hugoplate documentation.

There are some shortcodes that are specific to the VeruA.ch website. These Shortcodes are defined in the layouts/shortcodes folder. You can find a list of available exclusive shortcodes like columns and sections further down in this document.

⬆

Custom Shortcodes exclusively for VeruA.ch

/themes/hugoplate/layouts/shortcodes/

• Alerts: Create alerts with custom text and styles.
• Aligncenter: Center content horizontally.
• Cards: Create beautiful cards with custom content and images.
• Columns: Create responsive columns with custom content and images.
• Icons: Use icons from the Font Awesome library to add icons to your website.
• Sections: Create sections with custom content and images.

⬆

Alert

The alert shortcode is used to create alerts with custom text and styles.

Pfad: themes/hugoplate/layouts/shortcodes/alert.html

{{% alert background-color="slate-800" %}}

Content

{{% /alert %}}

⬆

Aligncenter

The aligncenter shortcode is used to center content horizontally.

Pfad: themes/hugoplate/layouts/shortcodes/aligncenter.html

{{% aligncenter %}}

Content

{{% /aligncenter %}}

⬆

Card

The card shortcode is used to create beautiful cards with custom content and images.

Pfad: themes/hugoplate/layouts/shortcodes/card.html

{{% card %}}

Content

{{% /card %}}

Kann ein Background - Attribut haben:

{{% card background="images/startseite-slide.jpg" %}}

Kann ein Light-Text - Attribut haben:

{{% card light-text="true" %}}

Kann ein Title - Attribut haben:

{{% card title="Card Title" %}}

⬆

Columns

Pfad: themes/hugoplate/layouts/shortcodes/columns.html

Columns are seperated by the '..column..' shortcode.

{{% columns %}}

Content

..column..

Content

..column..

Content

{{% /columns %}}

⬆

Font-Awesome Icon

Find all open source icons on Font Awesome

{{% icon name="user" color="black" size="5xl" %}}

Für "size" und "color" werden Tailwind CSS Klassen benutzt.

E.g. https://tailwindcss.com/docs/text-color

die Klassennamen jeweils OHNE "text-" einfügen: text-gray-50 -> color="gray-50"

text-5xl -> size="5xl"

⬆

Section

It is a good idea to use the section shortcode to separate your content into sections and keep consistent margins and page widths.

Pfad: themes/hugoplate/layouts/shortcodes/section.html

{{% section %}}

Content

{{% /section %}}

Kann ein Background - Attribut haben:

{{% section background="images/startseite-slide.jpg" %}}

⬆

formEventDropdown

Pfad: themes/hugoplate/layouts/shortcodes/formEventDropdown.html

{{< formEventDropdown >}}

Renders a dropdown form field with the available events. You set the events in the schulungstermine parameter in the frontmatter of the page.

⬆

Deployment

Deployment is done via Gitea Runners. The deployment is triggered by a push to the main branch. The deployment will automatically build the site and deploy it to the production or preview environment.

You can control where the site is deployed by setting the 'environment' variable in the hugo.toml file. The value should be either production or development.

This also controls the creation of the robots.txt file. If the value is development, the robots.txt file will be created with the following content:

User-agent: *
Disallow: /

Credentials and targets are stored as secrets in your Gitea instance.

You can also run the site locally. Please refer to the 'Development' section for more information.

ℹ You will find the workflow file in /.gitea/workflows/build-and-deploy-pipeline.yaml

⬆

Development

To run the site locally, you can use the following commands:

# Project setup
npm run project-setup

# Install dependencies
npm install

# Start the development server
npm run dev

The site will be available at http://localhost:8080.