DassHydro Website

This repository contains the entire source code for DassHydro's Website.
By reading this page and the linked websites, you should be able to manage this website with ease.

Table of Contents

1. General Information.
2. Repository organisation.
3. Install Hugo.
4. Start coding.
5. Use shortcodes.
6. Publish the website.
7. TODO.
8. More than useful webpages.

1. General information

This hugo website uses an existing hugo theme: hugo-theme-learn, with some additionnal shortcodes:

• button (added download and target attributes)
• center_align
• download
• form

Note: some other shortcodes or other files from hugo-theme-learn might have been modified.

Note: according to Hugo, Shortcodes are simple snippets inside your content files calling built-in or custom templates.

Note: for the theme colors (css file for the almost the whole site), we use a custom template that you can find in themes/hugo-theme-learn/static/css/theme-dasshydro.css. You can select another, see this page.

2. Repository organisation

• archetypes should remain unused.
• content is your main directory for updating the website, it contains all the different sections and pages:
• codes_presentation contains the presentation pages of every codes.
• doc contains the documentations for DassFlow, SMASH and HiVDI (everything is in the _index.md file).
• download contains the download page for githup repositories (DassFlow and SMASH) and a form to obtain HiVDI (yet to be completed before release; this page should probably be hidden before this moment, see XXXXX).
• examples contains all the test cases for DassHydro, DassFlow2d, SMASH and HiVDI-DassFlow1D.
• shortcuts contains useful pages that are not shown on the menu, like references, faq, how to cite... (see Front Matter, hidden: true).
• the_team contains the weppages for the MathHydroNum team.
• tools contains the external and embedded tools used by the different softwares.

• Note:_index.md is the first page of the section (for example, /content/_index.md refers to the website's homepage)

• public contains the entire website after using hugo -D to generate the html pages from the markdown.
• themes contains the hugo-theme-learn theme where you can add shortcodes, images, etc.
• hugo.toml is the default configuration file (to choose the URL, add or remove shortcuts, among other parameters).

3. Install Hugo

To install hugo, you can go directly on this webpage to get information for your own OS.

3.1 Install Hugo on Linux

In most cases, on Linux, you should be able to install hugo with the following command:

sudo apt install hugo

3.2 Install Hugo on macOS

On macOS, first install Homebrew using the following command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Then, you can install Hugo with:

brew install hugo

3.3 Install Hugo on Windows

You should have winget installed on your machin, which allows you to install Hugo with:

winget install Hugo.Hugo.Extended

Note: Only macOS installation has been tested yet.

4. Start coding

4.1 Clone the GitHub repository

In your desired repository, just enter the following command to clone this repository and fetch the website's files:

git clone https://github.com/DassHydro/dasshydro-website

Note: if you use different branches, just add -b to the above command.

4.2 Edit the webpages

4.2.1 Launch the localhost server

Once you have cloned the repository, go to the root of the rep and type hugo server -D to locally upload the website, for local changes and real-time updates.
The url should be http://localhost:1313 (it will be mentionned in the terminal).

4.2.2 Edit files

You can open the root directory in VS code or your prefered text editor, and start editing files (refer to Repository Organisation for more details on the structure).

Note: all -D options are used to also compile and show draft files (see Front Matter, draft: true).

4.3 Add images

To add images, you can use ![image_desc](image_url). For example, the "logo_list" image is displayed using ![List of Logos](/images/logo_list.png).
You can change parameters, like the width, on the url: e.g ![List of Logos](/images/logo_list.png?width=20pc).

Note: all images must be stored in /themes/hugo-theme-learn/static/images and accessed using the relative URL /images/img_name.png (static is a folder name that's implicitly added when you mention a folder).

4.4 Change the logo

You can change the logo *(on the top left of every webpage) in themes/hugo-theme-learn/layouts/partials/logo.html, either with an image or a svg (in html).
To change the icon of the tab (just like the cat for github), you can change the image /images/favicon.png, replace it with your own and name it favicon.png.

4.5 Change header, footer, menu, etc

You can change these directly in the themes/hugo-theme-learn/layouts/partials folder.

4.6 Create new files

You can create a new file with the following command, in your repository directory:

hugo new section/file_name.md

For example, the content/examples/ex_dassflow2d/ex_real-world_cases_dassflow2d.md was created with:

hugo new examples/ex_dassflow2d/ex_real-world_cases_dassflow2d.md

You can also create chapter pages with the following command:

hugo new --kind chapter section/_index.md

Note: there should be exactly one _index.md file (chapter page) in each section or subsection.

4.7 Front Matter

For more information on the Front Matter, refer to the theme documentation and other sections, or directly to the hugo website.

5. Use shortcodes

To use hugo shortcodes ( the {{% shortcode <parameters> %}}.Inner{{% /shortcode}} blocks), refer to the theme documentation.

5.1 button

The button shortcode was made by matcornic, but two attributes were added:

• download to make the button open a page or download it (default: false):
  You can make a button download a file by adding download="true" in the shortcode parameters.
• target to open a page in the same tab or a new one (default: _self = same tab):
  You can change the target attribute by adding target="_blank" or target="_self" to respectively open the page in a new or the same tab.

5.2 center_align

To align text to the center of a page (native in a chapter page, see Create new files), you can use the center_align shortcode with the following line: {{% center_align%}}centered_text{{% /center_align %}}

Note: you can easily create a right_align shortcode or any other kind with this simple template, to overpass Hugo / hugo-theme-learn styles.

5.3 download

To make a clickable text download a file, you can use the download shortcode:
{{% download fileName="page_name.files/file_name" %}}Text{{% /download %}}

Note: For example, on the documentation page, you can download the Former Documentation directly by clicking the text with the following:
{{% download fileName="_index.files/DassFlow2D_doc_2013.pdf" %}}Former documentation{{% /download %}}

5.4 form

The form shortcode is unique, and can be called for the HiVDI download using {{% form %}}.

6. Publish the website

To publish the website, enter the following command in your repository directory:

hugo -D

Then, just copy-paste the content of the public folder to the webserver. It should be all !

Note: some JS scripts or parameters are not loccaly visible and can only be observed / tested when online (for example, the HiVDI form, the visitor trakcer, etc).

7. TODO

For the TODO_list, check the Google Drive.

8. More than useful webpages

8.1 Hugo

To start coding with Hugo, you can visit their website with some interesting pages:

• Installation, to install hugo on different operating systems.
• Quick start,first steps into creating a hugo website.
• Front Matter, used in your templates (pages, sections, etc, the parameters at the top of your .md page).

8.2 Hugo theme learn

• The source code for the Hugo theme hugo-theme-learn can be found on GitHub.
• The theme documentation can be found online, built using the theme itself.

Note: For any other information, check on the internet. There are many useful threads on stackoverflow and other websites !