be7c461cbe
All checks were successful
Build and Deploy Hugo Site / buildAndDeploy (push) Successful in 58s
279 lines
7.9 KiB
Markdown
Executable file
279 lines
7.9 KiB
Markdown
Executable file
# Website verua.swiss
|
||
|
||
<a href="https://github.com/gohugoio/hugo/releases/tag/v0.124.1" alt="Contributors">
|
||
<img src="https://img.shields.io/static/v1?label=min-HUGO-version&message=0.121.2&color=f00&logo=hugo" />
|
||
</a>
|
||
<a href="https://go.dev" alt="Contributors">
|
||
<img src="https://img.shields.io/static/v1?label=min-go-version&message=1.20.5&color=f00&logo=go" />
|
||
</a>
|
||
<a href="https://go.dev" alt="Contributors">
|
||
<img src="https://img.shields.io/static/v1?label=min-node-version&message=20&color=f00&logo=npm" />
|
||
</a>
|
||
|
||
|
||
Development site: <a target="_blank" href="https://preview.verua.info/" rel="nofollow">preview.verua.info</a>
|
||
Production site: <a target="_blank" href="https://verua.swiss/" rel="nofollow">verua.swiss</a>
|
||
|
||
ℹ This site is based on <a href="https://github.com/zeon-studio/hugoplate">Hugoplate Boilerplate Theme for Hugo</a>. For specifics on how to use the theme, please refer to the <a href="https://github.com/zeon-studio/hugoplate/blob/main/README.md">README</a> of the theme.
|
||
|
||
## Table of Contents
|
||
|
||
- [Usage / Update Content](#usage--update-content)
|
||
- [Editing Menu](#editing-menu)
|
||
- [Editing Content](#editing-content)
|
||
- [Show ALERT-message on index-page](#show-alert-message-on-index-page)
|
||
- [Images](#images)
|
||
- [Shortcodes](#shortcodes)
|
||
- [Custom Shortcodes exclusively for VeruA.ch](#custom-shortcodes-exclusively-for-veruach)
|
||
- [Alert](#alert)
|
||
- [Aligncenter](#aligncenter)
|
||
- [Card](#card)
|
||
- [Columns](#columns)
|
||
- [Font-Awesome Icon](#font-awesome-icon)
|
||
- [Section](#section)
|
||
- [formEventDropdown](#formeventdropdown)
|
||
- [Deployment](#deployment)
|
||
- [Development](#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.
|
||
|
||
```bash
|
||
# 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
|
||
```
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
### Editing Menu
|
||
|
||
Edit **menu-entries** under
|
||
|
||
* config/_default/menus.de.toml and
|
||
* config/_default/menus.fr.toml
|
||
|
||
### Editing Content
|
||
|
||
The content is written in the [markdown](https://www.markdownguide.org/getting-started/) 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.
|
||
|
||
```yaml
|
||
---
|
||
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`.
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
|
||
### Show ALERT-message on index-page
|
||
|
||
For a important message on start-page use the text-part in hugoplate under **themes/hugoplate/layouts/index.html**
|
||
|
||
Remove start- and end-tag {{/* */}} for each language and edit the text.
|
||
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
### 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: ``.
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
### 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](https://github.com/zeon-studio/hugoplate/blob/main/README.md#shortcodes).
|
||
|
||
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.
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
## Custom Shortcodes exclusively for VeruA.ch
|
||
|
||
<small>/themes/hugoplate/layouts/shortcodes/</small>
|
||
|
||
- **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.
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
### 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 %}}`
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
### Aligncenter
|
||
|
||
The aligncenter shortcode is used to center content horizontally.
|
||
|
||
**Pfad:** themes/hugoplate/layouts/shortcodes/aligncenter.html
|
||
|
||
`{{% aligncenter %}}`
|
||
|
||
Content
|
||
|
||
`{{% /aligncenter %}}`
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
### 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" %}}`
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
### Columns
|
||
|
||
**Pfad:** themes/hugoplate/layouts/shortcodes/columns.html
|
||
|
||
Columns are seperated by the '..column..' shortcode.
|
||
|
||
`{{% columns %}}`
|
||
|
||
Content
|
||
|
||
`..column..`
|
||
|
||
Content
|
||
|
||
`..column..`
|
||
|
||
Content
|
||
|
||
`{{% /columns %}}`
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
### Font-Awesome Icon
|
||
|
||
Find all open source icons on [Font Awesome](https://fontawesome.com/search?m=free&o=r)
|
||
|
||
`{{% 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"
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
### 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" %}}`
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
### 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.
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
## 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:
|
||
|
||
```r
|
||
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`
|
||
|
||
[⬆](#table-of-contents)
|
||
|
||
## Development
|
||
|
||
To run the site locally, you can use the following commands:
|
||
|
||
```bash
|
||
|
||
# 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`.
|