Create wegpages with jekyll

.github/workflows/build.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Merge Conflict finder
         uses: olivernybroe/action-conflict-finder@v4.0
 
-  build:
+  build-panet:
     runs-on: ubuntu-latest
     container:
       image: gitlab.desy.de:5555/paul.millar/panet-build:v0.13
@@ -61,7 +61,7 @@ jobs:
     # From naming convention on above tag selection, tags
     # only trigger the workflow if they are releases.
     #if: ${{ github.ref_type == 'tag' }}
-    needs: build
+    needs: build-panet
 
     permissions:
       pages: write
@@ -75,3 +75,23 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         uses: actions/deploy-pages@v4
+
+  build-webpage:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./docs/
+          destination: ./docs/_site
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./docs/_site

.gitignore

@@ -3,3 +3,9 @@
 /widoco
 /site
 .DS_Store
+
+# ignore site built locally by jekyll
+docs/_site
+# ignore jekyll cache
+docs/.jekyll-cache
+

docs/DOCS.md

@@ -0,0 +1,148 @@
+# Guidlines for Creating and Reviewing the PaNET Webpages
+
+The PaNET webpages are supposed to give an overview of the scope and application of PaNET. 
+Additionally, it provides guidelines and instructions on how to handle different working aspects of PaNET. 
+
+The following sections include a guideline on how to handle the webpages.
+
+# 1. Creating and Updating the Webpage
+
+## 1.1. Installing jekyll
+
+Instructions taken from https://jekyllrb.com/.
+
+### 1.1.1. Install Ruby and other prerequisites
+
+```
+sudo apt-get install ruby-full build-essential zlib1g-dev
+```
+
+Avoid installing RubyGems packages (called gems) as the root user. Instead,
+set up a gem installation directory for your user account. The following
+commands will add environment variables to your ~/.bashrc file to configure
+the gem installation path:
+
+```
+echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
+echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
+echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
+source ~/.bashrc
+```
+
+### 1.1.2. Install jekyll and bundler gems
+
+```
+gem install jekyll bundler
+```
+
+### 1.1.3. Install Plugin Jekyll-data
+
+```
+bundle add jekyll-data
+```
+
+`jekyll-data` must be added as plugin to `_config.yml`.
+
+```
+plugins:
+  - jekyll-data
+```
+
+## 1.2. Create a new Webpage
+
+Create a Jekyll site at ./myblog and change into the folder
+
+```
+jekyll new myblog
+cd myblog
+
+```
+
+### 1.2.1. Build the site to make it available on a local server.
+
+```
+bundle exec jekyll serve
+```
+
+### 1.2.2. Browse the site
+
+```
+http://localhost:4000
+```
+
+### 1.2.3. Whenever updating config.yaml...
+
+... exit the serve with `ctrl+c` and re-execute it.
+
+## 1.3 Updating the site
+
+The content and design is separated in jekyll. It is easy to 
+
+- create pages with new content and same design,
+- update the design for all pages.
+
+### 1.3.1. Updating the Design
+
+The overall structure of a single page is described by the `html` files in the folder `_layouts`. 
+The detailed elements of the page components (e.g. header, footer) are collected in the folder `_includes`.
+
+### 1.3.2. Updating Content
+
+The content itself is managed in the `html` files directly in the `docs` folder. Jekyll only considers those html files that beginn with 
+
+```
+---
+---
+```
+
+Jekyll also offers the possibility to auto-generate pages based on yaml files. This is not implemented here.
+
+# 2. Reviewing the webpages
+
+Create preview on created webpage under "real conditions"
+
+> Currently, the link to Browse PaNET is not working within this review process. However, the final link should be. Improvements are in progress.
+
+## 2.1. Download artifact from last successful build-webpage job
+
+- Go to the "Actions" section of the repo.
+- Select the last commit in the "All Workflows" section.
+- Click on "build-webpage" (if if has a green checkmark, if not, go to another commit).
+- Click on "Upload artifact" to expand details.
+- Download the artifact by clicking the url in the last line.
+
+## 2.2 Create temprorary folder
+
+- Create a temporary folder in your local git repo and change into it.
+
+```
+mkdir vtmp
+cd vtmp/
+```
+
+## 2.3. Unzip the downloaded artifact
+
+The actual content is packed twice: as tar and zip.
+
+```
+unzip ~/Dowloads/github-pages.zip
+tar xf artifact.tar
+```
+
+## 2.4. Cosmetics
+
+In order to mimic the actual structure of the PaNET webpage documents, the tar itself must be deleted and an intermediate folder must be created.
+
+```
+rm artifact.tar
+mkdir ExPaNDS-experimental-techniques-ontology
+mv * ExPaNDS-experimental-techniques-ontology
+```
+
+## 2.5. Create a server and visit the webpage
+
+```
+python -m http.server
+```
+
+Go to `http://0.0.0.0:8000/`

docs/Gemfile

@@ -0,0 +1,13 @@
+source "https://rubygems.org"
+
+# add jekyll as a dependency
+gem "jekyll"
+
+# add dependencies for HTTP requests
+gem "httparty"
+gem 'persistent_httparty'
+
+# add dependencies to work with yaml and xml files
+gem "yaml"
+gem "nokogiri"
+

docs/Gemfile.lock

@@ -0,0 +1,105 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    base64 (0.2.0)
+    bigdecimal (3.1.9)
+    colorator (1.1.0)
+    concurrent-ruby (1.3.5)
+    csv (3.3.2)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.17.1)
+    forwardable-extended (2.6.0)
+    gene_pool (1.5.0)
+      concurrent-ruby (>= 1.0)
+    google-protobuf (4.29.3-x86_64-linux)
+      bigdecimal
+      rake (>= 13)
+    http_parser.rb (0.8.0)
+    httparty (0.22.0)
+      csv
+      mini_mime (>= 1.0.0)
+      multi_xml (>= 0.5.2)
+    i18n (1.14.7)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.4.1)
+      addressable (~> 2.4)
+      base64 (~> 0.2)
+      colorator (~> 1.0)
+      csv (~> 3.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      json (~> 2.6)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.3, >= 0.3.6)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-sass-converter (3.1.0)
+      sass-embedded (~> 1.75)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    json (2.10.1)
+    kramdown (2.5.1)
+      rexml (>= 3.3.9)
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    mini_mime (1.1.5)
+    mini_portile2 (2.8.8)
+    multi_xml (0.7.1)
+      bigdecimal (~> 3.1)
+    nokogiri (1.18.3)
+      mini_portile2 (~> 2.8.2)
+      racc (~> 1.4)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    persistent_http (1.0.6)
+      gene_pool (>= 1.3)
+    persistent_httparty (0.1.2)
+      httparty (~> 0.9)
+      persistent_http (< 2)
+    public_suffix (6.0.1)
+    racc (1.8.1)
+    rake (13.2.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    rexml (3.4.1)
+    rouge (4.5.1)
+    safe_yaml (1.0.5)
+    sass-embedded (1.85.0)
+      google-protobuf (~> 4.29)
+      rake (>= 13)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.6.0)
+    webrick (1.9.1)
+    yaml (0.4.0)
+
+PLATFORMS
+  x86_64-linux
+
+DEPENDENCIES
+  httparty
+  jekyll
+  nokogiri
+  persistent_httparty
+  yaml
+
+BUNDLED WITH
+   2.4.15

docs/_config.yml

@@ -0,0 +1,7 @@
+# set defaults for layouts (except the ones in _layouts)
+defaults:
+
+  - scope:
+      path: ""
+    values:
+      layout: "default"

docs/_includes/head.html

@@ -0,0 +1,12 @@
+<head>
+    <! -- metadata -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PANET: Photon and Neutron Experimental Techniques</title>
+
+    <! -- style -->
+    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/custom.css' | relative_url }}">
+
+    <! -- favicons et. al. courtesy of realfavicongenerator.net -->
+    <link rel="icon" href="{{ 'assets/images/favicon.svg' | realtive_url }}" type="image/svg">
+</head>

docs/_includes/header.html

@@ -0,0 +1,6 @@
+<header id="fixed-header">
+    <div class="header-content">
+        <img id="panet_logo" alt="PaNET Logo" src="{{ 'assets/images/panet_logo_bg.svg' | realtive_url }}" alt="PANET Logo" class="logo">
+        <h1 class="main-title">PANET: Photon and Neutron Experimental Techniques</h1>
+    </div>
+</header>

docs/_includes/navigation.html

@@ -0,0 +1,12 @@
+<nav id="navigation">
+    <h1>Documentation</h1>
+    <ul class="nav-list">
+        <li><a href="{{ 'index.html' | relative-url }}" class="nav-link" data-section="scope">Scope of PaNET</a></li>
+        <li><a href="https://pan-ontologies.github.io/PaNET/index-en.html" class="nav-link" data-section="scope">Browse PaNET</a></li>
+        <li><a href="{{ 'applications.html' | relative-url }}" class="nav-link" data-section="applications">Applications</a></li>
+        <li><a href="{{ 'workflow.html' | relative-url }}" class="nav-link" data-section="git-workflow">Git Workflow</a></li>
+        <li><a href="{{ 'std_op_proc.html' | relative-url }}" class="nav-link" data-section="procedures">Standard Operating Procedures</a></li>
+        <li><a href="{{ 'build.html' | relative-url }}" class="nav-link" data-section="environment">Build the Environment</a></li>
+        <li><a href="{{ 'release.html' | relative-url }}" class="nav-link" data-section="release">Make a Release</a></li>
+    </ul>
+</nav>

docs/_layouts/default.html

@@ -0,0 +1,21 @@
+---
+---
+<!DOCTYPE html>
+<html lang="en">
+    {% include head.html %}
+<body>
+    {% include header.html %}
+
+    <div id="wrapper">
+        <div id="content">
+            {% include navigation.html %}
+
+            <!-- Added scope sidebar that's visible by default alongside navigation -->
+            <aside id="scope-sidebar">
+                {{ content }}
+            </aside>
+        </div>
+    </div>
+</body>
+{% include footer.html %}
+</html>