diff --git a/readme.md b/readme.md index 84e37ed..004c7d7 100755 --- a/readme.md +++ b/readme.md @@ -18,7 +18,23 @@ Production site: ve ℹ 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. -## Usage / Update Content +## Table of Contents + +- [Usage / Update Content](#usage--update-content) + - [Editing Content](#editing-content) + - [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) +- [Deployment](#deployment) +- [Development](#development) + +## Usage / Update Content [⬆](#table-of-contents) 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. @@ -32,7 +48,7 @@ git remote add origin https://code.verua.online/rabeweb/verua.ch_src.git git push -u origin main ``` -### Editing Content +### Editing Content [⬆](#table-of-contents) 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. @@ -45,52 +61,19 @@ 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 [⬆](#table-of-contents) 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 +### Shortcodes [⬆](#table-of-contents) 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. -## 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: - -```bash -# Install dependencies -npm install - -# Start the development server -npm run dev -``` - -The site will be available at `http://localhost:8080`. - -## Custom Shortcodes exclusively for VeruA.ch +## Custom Shortcodes exclusively for VeruA.ch [⬆](#table-of-contents) /themes/hugoplate/layouts/shortcodes/ @@ -101,7 +84,7 @@ The site will be available at `http://localhost:8080`. - **Icons**: Use icons from the Font Awesome library to add icons to your website. - **Sections**: Create sections with custom content and images. -### Alert +### Alert [⬆](#table-of-contents) The alert shortcode is used to create alerts with custom text and styles. @@ -113,7 +96,7 @@ Content `{{% /alert %}}` -### Aligncenter +### Aligncenter [⬆](#table-of-contents) The aligncenter shortcode is used to center content horizontally. @@ -125,7 +108,7 @@ Content `{{% /aligncenter %}}` -### Card +### Card [⬆](#table-of-contents) The card shortcode is used to create beautiful cards with custom content and images. @@ -151,7 +134,7 @@ Kann ein `Title` - Attribut haben: ` -### Columns +### Columns [⬆](#table-of-contents) **Pfad:** themes/hugoplate/layouts/shortcodes/columns.html @@ -171,7 +154,7 @@ Content `{{% /columns %}}` -## Font-Awesome Icon +## Font-Awesome Icon [⬆](#table-of-contents) `{{% icon name="user" color="black" size="5xl" %}}` @@ -184,7 +167,7 @@ text-gray-50 -> color="gray-50" text-5xl -> size="5xl" -### Section +### Section [⬆](#table-of-contents) It is a good idea to use the section shortcode to separate your content into sections and keep consistent margins and page widths. @@ -199,3 +182,36 @@ Content Kann ein `Background` - Attribut haben: `{{% section background="images/startseite-slide.jpg" %}}` + +## Deployment [⬆](#table-of-contents) + +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 [⬆](#table-of-contents) + +To run the site locally, you can use the following commands: + +```bash +# Install dependencies +npm install + +# Start the development server +npm run dev +``` + +The site will be available at `http://localhost:8080`.