diff --git a/readme.md b/readme.md index 645cde0..1623a35 100755 --- a/readme.md +++ b/readme.md @@ -21,9 +21,9 @@ Production site: ve ## Table of Contents - [Usage / Update Content](#usage--update-content) - - [Editing Content](#editing-content) - - [Images](#images) - - [Shortcodes](#shortcodes) + - [Editing Content](#editing-content) + - [Images](#images) + - [Shortcodes](#shortcodes) - [Custom Shortcodes exclusively for VeruA.ch](#custom-shortcodes-exclusively-for-veruach) - [Alert](#alert) - [Aligncenter](#aligncenter) @@ -34,6 +34,7 @@ Production site: ve - [Deployment](#deployment) - [Development](#development) +[⬆](#table-of-contents) ## Usage / Update Content @@ -49,6 +50,8 @@ git remote add origin https://code.verua.online/rabeweb/verua.ch_src.git git push -u origin main ``` +[⬆](#table-of-contents) + ### 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. @@ -62,18 +65,24 @@ 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) + ### 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)`. +[⬆](#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 /themes/hugoplate/layouts/shortcodes/ @@ -85,6 +94,8 @@ There are some shortcodes that are specific to the VeruA.ch website. These Short - **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. @@ -97,6 +108,8 @@ Content `{{% /alert %}}` +[⬆](#table-of-contents) + ### Aligncenter The aligncenter shortcode is used to center content horizontally. @@ -109,6 +122,8 @@ Content `{{% /aligncenter %}}` +[⬆](#table-of-contents) + ### Card The card shortcode is used to create beautiful cards with custom content and images. @@ -135,6 +150,8 @@ Kann ein `Title` - Attribut haben: ` +[⬆](#table-of-contents) + ### Columns **Pfad:** themes/hugoplate/layouts/shortcodes/columns.html @@ -155,6 +172,8 @@ Content `{{% /columns %}}` +[⬆](#table-of-contents) + ## Font-Awesome Icon `{{% icon name="user" color="black" size="5xl" %}}` @@ -168,6 +187,8 @@ 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. @@ -184,6 +205,8 @@ Kann ein `Background` - Attribut haben: `{{% section background="images/startseite-slide.jpg" %}}` +[⬆](#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. @@ -203,6 +226,8 @@ You can also run the site locally. Please refer to the 'Development' section for ℹ 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: @@ -215,4 +240,4 @@ npm install npm run dev ``` -The site will be available at `http://localhost:8080`. \ No newline at end of file +The site will be available at `http://localhost:8080`.