diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 644de38bc1d615c698ce5b5637d9b856875c4221..f52645ca84e8b2ed8952848cd09d8228b12345c6 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,4 +1,4 @@
-image: ruby:2.7
+image: ruby:3.0
stages:
- build
@@ -117,18 +117,6 @@ build:latest:
image: ruby:latest
allow_failure: true
-# Job runs jekyll build latest dependencies,
-# puts everything in a sub-directory while specifying baseurl.
-build:production:subpath:
- <<: *builds
- <<: *production_before_script
- image: ruby:latest
- variables:
- <<: *common_variables
- SUBPATH: /$CI_PROJECT_NAME
- extends:
- - .artifacts_extension
-
# Job runs jekyll build with production dependencies,
# puts everything in a sub-directory as required for review apps.
build:production:review-apps:
@@ -158,8 +146,8 @@ test:htmlproofer:
test:htmlproofer:subpath:
<<: *tests
dependencies:
- - build:production:subpath
- needs: ["build:production:subpath"]
+ - build:production:review-apps
+ needs: ["build:production:review-apps"]
# Job tests external links in addition to test:htmlproofer job.
test:htmlproofer:external_links:
@@ -176,6 +164,7 @@ test:htmlproofer:external_links:
- if: '$CI_PIPELINE_SOURCE == "schedule"'
tags:
- internal
+ allow_failure: true
review:
stage: review
@@ -215,20 +204,3 @@ include:
- template: 'Workflows/MergeRequest-Pipelines.gitlab-ci.yml'
- template: 'Verify/Accessibility.gitlab-ci.yml'
- local: '/.gitlab/ci/a11y.gitlab-ci.yml'
-
-pages:
- image: alpine:latest
- stage: deploy
- variables:
- GIT_STRATEGY: none
- script:
- - mv public/$CI_PROJECT_NAME/* public/.
- - rmdir public/$CI_PROJECT_NAME
- dependencies:
- - build:production:subpath
- needs: ["build:production:subpath"]
- artifacts:
- paths:
- - public
- rules:
- - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
diff --git a/_events/2021/06/2021-06-02-helmholtz-hacky-hour-29.md b/_events/2021/06/2021-06-02-helmholtz-hacky-hour-29.md
index 43bcd2e75457031b75db3609a039734e42013705..398c5a6a039defd4002107806b24231896d0c6b5 100644
--- a/_events/2021/06/2021-06-02-helmholtz-hacky-hour-29.md
+++ b/_events/2021/06/2021-06-02-helmholtz-hacky-hour-29.md
@@ -12,11 +12,14 @@ end:
location:
campus: "Online"
room: "<a href=https://meet.gwdg.de/b/max-93j-2ef><i class=\"fas fa-external-link-alt\"></i> meet.gwdg.de</a>"
-excerpt: "<strong>Time & quality - a wicked problem</strong> How to decide when enough is enough"
+excerpt: "<strong>What is it like to be an RSE?</strong>"
---
-## Time and quality in research software development - a toxic relationship
+## What is it like to be an RSE?
The Hacky Hour is intended to discuss and learn about different topics in the context of research software development. During the session, you will meet Helmholtz researchers from different fields and have the opportunity to present your favorite tools and techniques. If you want to join, share your experience or have any question on the topic, let us and others know about it in [the meta pad](https://pad.gwdg.de/0HczFKgqS_C9L1QGzfpbJA#).
-In research software development quality is fundamental to produce valid and reliable results. On the other hand, we are struggling with limited time resources. Together we would like to discuss strategies of how to find the best tradeoff between high quality research software and meeting submission deadlines.
+The development and use of software has become fundamental to a growing number of research fields.
+Often the lack of expertise, time, support or professional recognition makes the development and maintenance of high-quality software quite difficult.
+Research software engineers (RSEs) are trying to improve this situation by promoting best practices, raising awareness for the need of structural change, and offering practical support such as trainings and consulting.
+In the next session, the HIFIS Software team will share their experience and invite you to discuss on what it is like to be an RSE.
We are looking forward to seeing you!
diff --git a/_events/2021/06/2021-06-11-git-and-gitlab.md b/_events/2021/06/2021-06-11-git-and-gitlab.md
index 3d7d26d2c7169caa8462c91fc6e52d3fe2a75b72..fed19027478fd695b6b24866d5b71fd9c7581706 100644
--- a/_events/2021/06/2021-06-11-git-and-gitlab.md
+++ b/_events/2021/06/2021-06-11-git-and-gitlab.md
@@ -4,13 +4,14 @@ layout: event
organizers:
- erxleben
lecturers:
- - TBA
+ - Helene Hoffmann
+ - Lokamani
type: workshop
start:
date: "2021-06-11"
end:
date: "2021-06-14"
-registration_link:
+registration_link: "https://events.hifis.net/event/123/"
location:
campus: Online
fully_booked_out: false
diff --git a/_includes/cards/post_card.html b/_includes/cards/post_card.html
index a0d6cc9f4d689b4cba6faf794e449eb4620d67e6..80c0083b343c7a663b8dfba710dca4b77de4fa4c 100644
--- a/_includes/cards/post_card.html
+++ b/_includes/cards/post_card.html
@@ -25,6 +25,10 @@ post: The post which sould be displayed on the card
<i class="fas fa-calendar-day" aria-hidden="true"></i>
{{ include.post.date | date: "%d. %b. %y" }}
</span>
+ <span class="badge badge-dark">
+ <i class="fas fa-tag" aria-hidden="true"></i>
+ {{ include.post.categories.first | capitalize }}
+ </span>
</div>
<div class="card-text">
<a href="{{ include.post.url | relative_url }}" class="stretched-link">
diff --git a/_posts/2021/06/2021-06-02-easy-diagram-creation-in-gitlab.md b/_posts/2021/06/2021-06-02-easy-diagram-creation-in-gitlab.md
new file mode 100644
index 0000000000000000000000000000000000000000..44094dc8150bbfdbe1a4ca95e480abdbe90d455e
--- /dev/null
+++ b/_posts/2021/06/2021-06-02-easy-diagram-creation-in-gitlab.md
@@ -0,0 +1,645 @@
+---
+title: "Easy Diagram creation in Gitlab"
+title_image: clark-tibbs-oqStl2L5oxI-unsplash.jpg
+date: 2021-06-02
+authors:
+ - huste
+ - jandt
+layout: blogpost
+categories:
+ - tutorial
+redirect_from:
+ - tutorials/2021/06/02/easy-diagram-creation-in-gitlab.html
+excerpt: >
+ Recently, the Helmholtz-wide software development platform (<a href="https://gitlab.hzdr.de">Gitlab</a>) has been extended
+ with the ability to create diagrams from textual descriptions.
+ This post will help you getting started with this new feature.
+
+---
+
+{{ page.excerpt }}
+
+## What is it about and where can it be applied?
+Gitlab is perfect for colloborative work on codes, scripts and other shared files.
+Now you can also create virtually all sorts of diagrams and sketches directly in Gitlab,
+both allowing to **quickly create plots**, as well as
+collaboratively build and maintain **complex graphs**.
+
+All graphs are built from simple scripts directly in Gitlab using a plugin named [Kroki](https://kroki.io/).
+Such scripts can be used in any place on the [Helmholtz-wide Gitlab](https://gitlab.hzdr.de)
+where Markdown is supported:
+ * Markdown documents inside repositories
+ * Comments
+ * Issues
+ * Merge requests
+ * Milestones
+ * Snippets (the snippet must be named with a `.md` extension)
+ * Wiki pages
+
+<a href="https://gitlab.hzdr.de/examples/kroki"
+ class="btn btn-outline-secondary"
+ title="Link to examples in Gitlab">
+ <i class="fas fa-lightbulb"></i> Click here for examples in Gitlab!</a>
+
+## Quick-Start Example
+Let us jump right in with an example by creating a sequence diagram, using the common Unified Modeling Language (UML).
+
+Put this content describing the diagram in any of the items
+listed above.
+
+ ```plantuml
+ @startuml
+ participant User
+
+ User -> A: DoWork
+ activate A
+
+ A -> B: << createRequest >>
+ activate B
+
+ B -> C: DoWork
+ activate C
+ C --> B: WorkDone
+ destroy C
+
+ B --> A: RequestCreated
+ deactivate B
+
+ A -> User: Done
+ deactivate A
+ @enduml
+ ```
+
+This description is then converted into this sequence diagram.
+
+
+
+## How Does That Work?
+In the background a tool called [Kroki](https://kroki.io) is doing the magic.
+It takes the textual description and converts it into an image.
+The example shown above is using [PlantUML](https://plantuml.com/) to create
+the diagram of our choice (see line 1).
+
+So all you need to do is to create the textual description of your diagram and
+put it into GitLab Markdown.
+When viewing the content, in the background we will make sure that you are
+presented an image of your diagram description.
+
+## Step-By-Step Guide
+In this example our goal is to create a visual representation of JSON data.
+Let's take this example JSON data.
+
+<details>
+ <summary>Show JSON data</summary>
+ <div markdown=1>
+```json
+{
+ "firstName": "John",
+ "lastName": "Smith",
+ "age": 28,
+ "address": {
+ "streetAddress": "Bautzner Landstr. 400",
+ "city": "Dresden",
+ "state": "Saxony",
+ "postalCode": "01328"
+ },
+ "offices": [
+ {
+ "building": 512,
+ "room": 1234
+ },
+ {
+ "building": 312,
+ "room": 3
+ }
+ ],
+ "departments": []
+}
+```
+ </div>
+</details>
+
+We will use PlantUML to [display the JSON data](https://plantuml.com/json).
+
+At first, we need to tell GitLab that we want to create a diagram using
+PlantUML.
+This is why we create a Markdown code block using PlantUML for syntax highlighting.
+
+ ```plantuml
+
+ ```
+
+The [PlantUML documentation](https://plantuml.com/json) tells us how such a
+visual representation can be created.
+In this case you need to embed the JSON data into a block starting with
+`@startjson` and ending with `@endjson`.
+
+ ```plantuml
+ @startjson
+ {
+ "firstName": "John",
+ "lastName": "Smith",
+ "age": 28,
+ "address": {
+ "streetAddress": "Bautzner Landstr. 400",
+ "city": "Dresden",
+ "state": "Saxony",
+ "postalCode": "01328"
+ },
+ "offices": [
+ {
+ "building": 512,
+ "room": 1234
+ },
+ {
+ "building": 312,
+ "room": 3
+ }
+ ],
+ "departments": []
+ }
+ @endjson
+ ```
+
+You will be presented an image as shown below.
+
+
+
+
+
+### Gantt Diagram
+PlantUML also supports Gantt diagrams:
+<details>
+ <summary>Show code</summary>
+ <div markdown=1>
+ ```plantuml
+ @startgantt
+ printscale weekly
+
+ Project starts the 1st of July 2021
+ [Literature Review] lasts 4 weeks
+ [Literature Review] is 100% completed
+ then [Run Experiments] lasts 12 weeks
+ [Run Experiments] is 70% completed
+ -- Phase Two --
+ then [Data Analysis] lasts 8 weeks
+ [Data Analysis] is 0% completed
+ then [Write Publication] lasts 6 weeks
+ [Write Publication] is 0% completed
+ @endgantt
+ ```
+ </div>
+</details>
+
+
+
+More in-depth information on the Gantt diagram syntax is available in the
+official [PlantUML documentation](https://plantuml.com/de/gantt-diagram).
+
+## What Else Can Be Done?
+The new feature is not limited to using PlantUML.
+The new integration gives you access to more than that.
+It supports, among others, [Vega](https://github.com/vega/vega),
+[C4 with PlantUML](https://github.com/RicardoNiepel/C4-PlantUML),
+[GraphViz](https://www.graphviz.org/) or
+[BlockDiag](https://github.com/blockdiag/blockdiag).
+For a complete list please refer to the official
+[list of supported diagram types and formats](https://kroki.io/#support).
+
+
+### Vega
+#### Word Cloud
+The following wordcloud is generated from the
+[mission statement of the Helmholtz Association](https://www.helmholtz.de/en/about-us/the-association/mission/)
+using [Vega](https://vega.github.io/vega/).
+
+<details>
+ <summary>Show code</summary>
+ <div markdown=1>
+ ```vega
+ {
+ "$schema": "https://vega.github.io/schema/vega/v5.json",
+ "description": "A word cloud visualization depicting the mission statement of Helmholtz.",
+ "width": 800,
+ "height": 400,
+ "padding": 0,
+
+ "data": [
+ {
+ "name": "table",
+ "values": [
+ "We contribute to solving the major challenges facing society, science and the economy by conducting top-level research in strategic programmes within our six research fields: Energy, Earth & Environment, Health, Aeronautics, Space and Transport, Matter, and Information. We research highly complex systems using our large-scale devices and infrastructure, cooperating closely with national and international partners. We contribute to shaping our future by combining research and technology development with perspectives for innovative application and provisions in tomorrow's world. We attract and promote the best young talents, offering a unique research environment and general support throughout all career stages.",
+ "The Helmholtz Association performs cutting-edge research which contributes substantially to solving the grand challenges of science, society and industry. Helmholtz Association scientists focus on researching the highly-complex systems which determine human life and the environment, for example: ensuring that society remains mobile, ensuring that society has a reliable energy supply, ensuring that future generations live in a secure ecosystem, and developing treatments for previously incurable diseases.",
+ "The Helmholtz Association performs cutting-edge research which contributes substantially to solving the grand challenges of science, society and industry. Helmholtz Association scientists focus on researching the highly-complex systems which determine human life and the environment, for example: ensuring that society remains mobile, ensuring that society has a reliable energy supply, ensuring that future generations live in a secure ecosystem, and developing treatments for previously incurable diseases.",
+ "The activities of the Helmholtz Association focus on securing the long-term foundations of human life and on creating the technological basis for a competitive economy. Our potential, as an Association, to achieve these goals is due to the outstanding scientists working at our 18 major research centres, a high-performance infrastructure and modern research management.",
+ "Our scientists develop national research programmes for each of these fields and international experts review these programmes. These expert evaluations form the basis of the programme-oriented funding (POF) which finances to Helmholtz Association research.",
+ "Within the six research fields, Helmholtz scientists cooperate with each other and with external partners - working across disciplines, organisations and national borders. Indeed, the being part of the Helmholtz Association means making concerted research effort in which networks form the key to inquiring thought and action. Concerted research is efficient and flexible. The Helmholtz Association uses this research to create an effective basis for shaping the future."
+ ],
+ "transform": [
+ {
+ "type": "countpattern",
+ "field": "data",
+ "case": "upper",
+ "pattern": "[\\w']{3,}",
+ "stopwords": "(i|me|my|myself|we|us|our|ours|ourselves|you|your|yours|yourself|yourselves|he|him|his|himself|she|her|hers|herself|it|its|itself|they|them|their|theirs|themselves|what|which|who|whom|whose|this|that|these|those|am|is|are|was|were|be|been|being|have|has|had|having|do|does|did|doing|will|would|should|can|could|ought|i'm|you're|he's|she's|it's|we're|they're|i've|you've|we've|they've|i'd|you'd|he'd|she'd|we'd|they'd|i'll|you'll|he'll|she'll|we'll|they'll|isn't|aren't|wasn't|weren't|hasn't|haven't|hadn't|doesn't|don't|didn't|won't|wouldn't|shan't|shouldn't|can't|cannot|couldn't|mustn't|let's|that's|who's|what's|here's|there's|when's|where's|why's|how's|a|an|the|and|but|if|or|because|as|until|while|of|at|by|for|with|about|against|between|into|through|during|before|after|above|below|to|from|up|upon|down|in|out|on|off|over|under|again|further|then|once|here|there|when|where|why|how|all|any|both|each|few|more|most|other|some|such|no|nor|not|only|own|same|so|than|too|very|say|says|said|shall)"
+ },
+ {
+ "type": "formula", "as": "angle",
+ "expr": "[-45, 0, 45][~~(random() * 3)]"
+ },
+ {
+ "type": "formula", "as": "weight",
+ "expr": "if(datum.text=='VEGA', 600, 300)"
+ }
+ ]
+ }
+ ],
+
+ "scales": [
+ {
+ "name": "color",
+ "type": "ordinal",
+ "domain": {"data": "table", "field": "text"},
+ "range": ["#005aa0", "#8cb423", "#5a696e"]
+ }
+ ],
+
+ "marks": [
+ {
+ "type": "text",
+ "from": {"data": "table"},
+ "encode": {
+ "enter": {
+ "text": {"field": "text"},
+ "align": {"value": "center"},
+ "baseline": {"value": "alphabetic"},
+ "fill": {"scale": "color", "field": "text"}
+ },
+ "update": {
+ "fillOpacity": {"value": 1}
+ },
+ "hover": {
+ "fillOpacity": {"value": 0.5}
+ }
+ },
+ "transform": [
+ {
+ "type": "wordcloud",
+ "size": [800, 400],
+ "text": {"field": "text"},
+ "rotate": {"field": "datum.angle"},
+ "font": "Helvetica Neue, Arial",
+ "fontSize": {"field": "datum.count"},
+ "fontWeight": {"field": "datum.weight"},
+ "fontSizeRange": [12, 56],
+ "padding": 2
+ }
+ ]
+ }
+ ]
+ }
+ ```
+ </div>
+</details>
+
+<details open="true">
+ <summary>Show rendered plot</summary>
+ <div markdown=1>
+ 
+ </div>
+</details>
+
+#### Bar Chart
+<details>
+ <summary>Show code</summary>
+ <div markdown="1">
+ ```vega
+ {
+ "$schema": "https://vega.github.io/schema/vega/v5.json",
+ "description": "A nested bar chart example, with bars grouped by category.",
+ "width": 300,
+ "padding": 5,
+ "autosize": "pad",
+
+ "signals": [
+ {
+ "name": "rangeStep", "value": 20,
+ "bind": {"input": "range", "min": 5, "max": 50, "step": 1}
+ },
+ {
+ "name": "innerPadding", "value": 0.1,
+ "bind": {"input": "range", "min": 0, "max": 0.7, "step": 0.01}
+ },
+ {
+ "name": "outerPadding", "value": 0.2,
+ "bind": {"input": "range", "min": 0, "max": 0.4, "step": 0.01}
+ },
+ {
+ "name": "height",
+ "update": "trellisExtent[1]"
+ }
+ ],
+
+ "data": [
+ {
+ "name": "tuples",
+ "values": [
+ {"a": 0, "b": "a", "c": 6.3},
+ {"a": 0, "b": "a", "c": 4.2},
+ {"a": 0, "b": "b", "c": 6.8},
+ {"a": 0, "b": "c", "c": 5.1},
+ {"a": 1, "b": "b", "c": 4.4},
+ {"a": 2, "b": "b", "c": 3.5},
+ {"a": 2, "b": "c", "c": 6.2}
+ ],
+ "transform": [
+ {
+ "type": "aggregate",
+ "groupby": ["a", "b"],
+ "fields": ["c"],
+ "ops": ["average"],
+ "as": ["c"]
+ }
+ ]
+ },
+ {
+ "name": "trellis",
+ "source": "tuples",
+ "transform": [
+ {
+ "type": "aggregate",
+ "groupby": ["a"]
+ },
+ {
+ "type": "formula", "as": "span",
+ "expr": "rangeStep * bandspace(datum.count, innerPadding, outerPadding)"
+ },
+ {
+ "type": "stack",
+ "field": "span"
+ },
+ {
+ "type": "extent",
+ "field": "y1",
+ "signal": "trellisExtent"
+ }
+ ]
+ }
+ ],
+
+ "scales": [
+ {
+ "name": "xscale",
+ "domain": {"data": "tuples", "field": "c"},
+ "nice": true,
+ "zero": true,
+ "round": true,
+ "range": "width"
+ },
+ {
+ "name": "color",
+ "type": "ordinal",
+ "range": "category",
+ "domain": {"data": "trellis", "field": "a"}
+ }
+ ],
+
+ "axes": [
+ { "orient": "bottom", "scale": "xscale", "domain": true }
+ ],
+
+ "marks": [
+ {
+ "type": "group",
+
+ "from": {
+ "data": "trellis",
+ "facet": {
+ "name": "faceted_tuples",
+ "data": "tuples",
+ "groupby": "a"
+ }
+ },
+
+ "encode": {
+ "enter": {
+ "x": {"value": 0},
+ "width": {"signal": "width"}
+ },
+ "update": {
+ "y": {"field": "y0"},
+ "y2": {"field": "y1"}
+ }
+ },
+
+ "scales": [
+ {
+ "name": "yscale",
+ "type": "band",
+ "paddingInner": {"signal": "innerPadding"},
+ "paddingOuter": {"signal": "outerPadding"},
+ "round": true,
+ "domain": {"data": "faceted_tuples", "field": "b"},
+ "range": {"step": {"signal": "rangeStep"}}
+ }
+ ],
+
+ "axes": [
+ { "orient": "left", "scale": "yscale",
+ "ticks": false, "domain": false, "labelPadding": 4 }
+ ],
+
+ "marks": [
+ {
+ "type": "rect",
+ "from": {"data": "faceted_tuples"},
+ "encode": {
+ "enter": {
+ "x": {"value": 0},
+ "x2": {"scale": "xscale", "field": "c"},
+ "fill": {"scale": "color", "field": "a"},
+ "strokeWidth": {"value": 2}
+ },
+ "update": {
+ "y": {"scale": "yscale", "field": "b"},
+ "height": {"scale": "yscale", "band": 1},
+ "stroke": {"value": null},
+ "zindex": {"value": 0}
+ },
+ "hover": {
+ "stroke": {"value": "firebrick"},
+ "zindex": {"value": 1}
+ }
+ }
+ }
+ ]
+ }
+ ]
+ }
+ ```
+ </div>
+</details>
+
+<details open="true">
+ <summary>Show rendered plot</summary>
+ <div markdown=1>
+ 
+ </div>
+</details>
+
+Taken from <https://vega.github.io/vega/examples/nested-bar-chart/>.
+
+### C4 with PlantUML
+
+<details>
+ <summary>Show code</summary>
+ <div markdown="1">
+ ```plantuml
+ @startuml "techtribesjs"
+ !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+ ' uncomment the following line and comment the first to use locally
+ ' !include C4_Container.puml
+
+ LAYOUT_TOP_DOWN()
+ 'LAYOUT_AS_SKETCH()
+ LAYOUT_WITH_LEGEND()
+
+
+ Person_Ext(anonymous_user, "Anonymous User")
+ Person(aggregated_user, "Aggregated User")
+ Person(administration_user, "Administration User")
+
+ System_Boundary(c1, "techtribes.js"){
+
+ Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", "Allows users to view people, tribes, content, events, jobs, etc. from the local tech, digital and IT sector")
+
+ ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.")
+
+ Container(filesystem, "File System", "FAT32", "Stores search indexes")
+
+ ContainerDb(nosql, "NoSQL Data Store", "MongoDB 2.2.x", "Stores from RSS/Atom feeds (blog posts) and tweets")
+
+ Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis")
+ }
+
+ System_Ext(twitter, "Twitter")
+ System_Ext(github, "GitHub")
+ System_Ext(blogs, "Blogs")
+
+
+ Rel(anonymous_user, web_app, "Uses", "HTTPS")
+ Rel(aggregated_user, web_app, "Uses", "HTTPS")
+ Rel(administration_user, web_app, "Uses", "HTTPS")
+
+ Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306")
+ Rel(web_app, filesystem, "Reads from")
+ Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017")
+
+ Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306")
+ Rel_U(updater, filesystem, "Writes to")
+ Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017")
+
+ Rel(updater, twitter, "Gets profile information and tweets from", "HTTPS")
+ Rel(updater, github, "Gets information about public code repositories from", "HTTPS")
+ Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP")
+
+ Lay_R(rel_db, filesystem)
+
+ @enduml
+ ```
+ </div>
+</details>
+
+<details open="true">
+ <summary>Show rendered plot</summary>
+ <div markdown=1>
+ 
+ </div>
+</details>
+
+Taken from <https://github.com/plantuml-stdlib/C4-PlantUML>.
+
+### GraphViz
+
+<details>
+ <summary>Show code</summary>
+ <div markdown="1">
+ {% raw %}
+ ```graphviz
+ digraph G {
+ concentrate=True;
+ rankdir=TB;
+ node [shape=record];
+ 140087530674552 [label="title: InputLayer\n|{input:|output:}|{{[(?, ?)]}|{[(? , ?)]}}"];
+ 140087537895856 [label="body: InputLayer\n|{input:|output:}|{{[(?, ?)]}|{[(?, ?)]}}"];
+ 140087531105640 [label="embedding_2: Embedding\n|{input:|output:}|{{(?, ?)}|{ (?, ?, 64)}}"];
+ 140087530711024 [label="embedding_3: Embedding\n|{input:|output:}|{{(?, ?)}|{ (?, ?, 64)}}"];
+ 140087537980360 [label="lstm_2: LSTM\n|{input:|output:}|{{(?, ?, 64)}|{(?, 128)}}"];
+ 140087531256464 [label="lstm_3: LSTM\n|{input:|output:}|{{(?, ?, 64)}|{(?, 32) }}"];
+ 140087531106200 [label="tags: InputLayer\n|{input:|output:}|{{[(?, 12)]}|{[(? , 12)]}}"];
+ 140087530348048 [label="concatenate_1: Concatenate\n|{input:|output:}|{{[(?, 128), (?, 32), (?, 12)]}|{(?, 172)}}"];
+ 140087530347992 [label="priority: Dense\n|{input:|output:}|{{(?, 172)}|{(?, 1) }}"];
+ 140087530711304 [label="department: Dense\n|{input:|output:}|{{(?, 172)}|{(?, 4)}}"];
+ 140087530674552 -> 140087531105640;
+ 140087537895856 -> 140087530711024;
+ 140087531105640 -> 140087537980360;
+ 140087530711024 -> 140087531256464;
+ 140087537980360 -> 140087530348048;
+ 140087531256464 -> 140087530348048;
+ 140087531106200 -> 140087530348048;
+ 140087530348048 -> 140087530347992;
+ 140087530348048 -> 140087530711304;
+ }
+ ```
+ {%endraw%}
+ </div>
+</details>
+
+<details open="true">
+ <summary>Show rendered plot</summary>
+ <div markdown=1>
+ 
+ </div>
+</details>
+
+Taken from <https://graphviz.org/Gallery/directed/neural-network.html>.
+
+### BlockDiag
+
+<details>
+ <summary>Show code</summary>
+ <div markdown="1">
+ ```blockdiag
+ blockdiag {
+ A -> B -> C -> D;
+ A -> E -> F -> G;
+ }
+ ```
+ </div>
+</details>
+
+<details open="true">
+ <summary>Show rendered plot</summary>
+ <div markdown=1>
+ 
+ </div>
+</details>
+
+Taken from <http://blockdiag.com/en/blockdiag/examples.html>.
+
+## Deployment
+The service is provided by HIFIS Software and is hosted entirely on HZDR
+servers.
+It does not share any data with external providers.
+As usual, the deployment can be reproduced via the corresponding
+[project](https://gitlab.hzdr.de/hifis-software-deployment/kroki) -
+only accessible for employees within Helmholtz.
+
+## Comments and Suggestions
+
+If you have suggestions, questions, or queries, please don't hesitate to write us.
+
+<a href="{% link contact.md %}"
+ class="btn btn-outline-secondary"
+ title="HIFIS Helpdesk">
+ Contact us! <i class="fas fa-envelope"></i></a>
diff --git a/_sass/common/_general.scss b/_sass/common/_general.scss
index ed47892cf23a86fde30ca38f83a4414b9dd1ef84..c27d8ff261dab522bb495ce46d7a89c53f5c8f6e 100644
--- a/_sass/common/_general.scss
+++ b/_sass/common/_general.scss
@@ -95,3 +95,25 @@ h2 {
width: 100%;
}
}
+
+// Replace the HTML details triangle with Fontawesome icons
+summary {
+ list-style: none;
+
+ &::-webkit-details-marker {
+ display: none;
+ }
+}
+details {
+ summary::before {
+ content: "\f138"; // fas fa-chevron-circle-right
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+
+ margin-right: 0.25rem;
+ }
+
+ &[open] summary::before {
+ content: "\f13a"; // fas fa-chevron-circle-down
+ }
+}
diff --git a/assets/css/frontpage.scss b/assets/css/frontpage.scss
index 7640df10dcbbdcc30b8703c1e0a18e3b8a8b86d2..d695bf29b61833ba2f3ac313885fd2faf0fe74c4 100644
--- a/assets/css/frontpage.scss
+++ b/assets/css/frontpage.scss
@@ -145,3 +145,7 @@
margin: 0.5rem;
}
+
+.flex-cards {
+ justify-content: center;
+}
diff --git a/services/overall/tutorials.md b/services/overall/tutorials.md
new file mode 100644
index 0000000000000000000000000000000000000000..c42a5697cb73ac935a5c44e9a4eb42a2c310b71d
--- /dev/null
+++ b/services/overall/tutorials.md
@@ -0,0 +1,20 @@
+---
+title: Tutorials
+title_image: mountains-nature-arrow-guide-66100.jpg
+layout: services/default
+author: none
+additional_css:
+ - title/service-title-buttons.css
+excerpt:
+ "We provide tutorials to let you know how to best make use of our services
+ and how to boost your research software engineering practices."
+---
+
+{{ page.excerpt }}
+
+<div class="flex-cards">
+{%- assign posts = site.categories['tutorial'] | where: "lang", "en" -%}
+{% for post in posts -%}
+{% include cards/post_card_image.html post=post %}
+{% endfor -%}
+</div>