update website as a new project overall page

docs/2fa.md

@@ -0,0 +1,147 @@
+<details><summary>Introduction to 2-Factor Authentication</summary>
+
+<!-- First Block: Introduction -->
+<h2 style="text-align:center"><strong>Introduction</strong></h2>
+<div style="display: flex; align-items: flex-start; gap: 20px;">
+  <div>
+    <img src="../images/2fa/jupyter-jsc_2fa_img01.png" alt="2-factor-authentication" style="width: 320px; max-width: 1600px">
+  </div>
+  <div>
+    <p>
+      2-Factor Authentication (2FA), sometimes referred to as two-factor verification, is a security method in which you provide <strong>two different authentication factors</strong> to identify yourself at login. This process is <strong>performed to better protect</strong> both your credentials and the resources that you can access.
+    </p>
+    <p>
+      In the <strong>first login step</strong>, you start with the usual entry of a good password. The service then confirms the correctness of the password entered. This does not, however, lead directly to the desired entrance - but to a further barrier.
+    </p>
+    <p>
+      The <strong>second login step</strong> prevents unauthorized third parties from gaining access to your account just because they might have stolen your password. A quite common 2nd-factor is a <strong>One-Time Password (OTP)</strong> generated by a so-called <strong>OTP-App</strong> you install and initialize once on one of your personal devices. This <em>OTP-app</em> then provides (in our case every 30 seconds) a new <em>one-time password</em> that needs to be entered on the login page.
+    </p>
+  </div>
+</div>
+<br><br>
+
+<!-- Second Block: Basic Principle -->
+<h2 style="text-align:center"><strong>Basic Principle</strong></h2>
+<div style="display: flex; align-items: flex-start; gap: 20px;">
+  <div>
+    <p>
+      These two factors for authentication combine the building blocks <strong>knowledge</strong> and <strong>possession</strong> in the login procedure.
+    </p>
+    <ul>
+      <li><strong>Knowledge</strong> - The secret knowledge is the password you enter.</li>
+      <li><strong>Possession</strong> - With the <em>one-time password</em> you show that you are in possession of a certain device (e.g., your smartphone), because only the <em>OTP-App</em>, installed on that device, can generate it.</li>
+    </ul>
+  </div>
+  <div>
+    <video controls src="https://multimedia.gsb.bund.de/BSI/Video/2-Faktor-Authentisierung_SD.conv.mp4" style="float:right; width: 480px; max-width: 1600px"></video>
+    <p>Source: Bundesamt für Sicherheit in der Informationstechnik</p>
+  </div>
+</div>
+<br><br>
+
+<!-- Third Block: Algorithm -->
+<h2 style="text-align:center"><strong>Algorithm</strong></h2>
+<div style="display: flex; align-items: flex-start; gap: 20px;">
+  <div>
+    <img src="../images/2fa/jupyter-jsc_2fa_img02.png" title="2-factor-authentication" style="width: 320px; max-width: 1600px;">
+  </div>
+  <div>
+    <p>
+      The <strong>OTP-App</strong> can calculate personal one-time passwords completely autonomously from the outside world using a standardized and open algorithm for the generation of <strong>Time-based One-Time Passwords (TOTP)</strong>.
+    </p>
+    <p>
+      The <em>TOTP algorithm</em> was published in 2011 by the <a href="https://www.ietf.com">Internet Engineering Task Force (IETF)</a> as <a href="https://tools.ietf.org/html/rfc6238">RFC 6238</a>. The <em>TOTP algorithm</em> is a hash function in which a secret code is hashed together with the current time.
+    </p>
+    <p>
+      Behind the hash function is the HMAC-based One-time Password Algorithm according to <a href="https://tools.ietf.org/html/rfc4226">RFC 4226</a> - in simple terms nothing more than a standard that forms a hash in a certain way.
+    </p>
+    <p>
+      The calculation includes both a <strong>"secret initialization code"</strong>, that is known to both the server and the client, and the <strong>current time</strong>. The final <em>one-time password</em> is generated from these two inputs and is valid for a certain period of time (in our case for <strong>30 seconds</strong>). The procedure can be implemented in such a way that slight differences in time between client and server are accepted.
+    </p>
+    <p>
+      Hence, any <em>one-time password</em> is time-based, calculated locally, and always unique.
+    </p>
+  </div>
+</div>
+
+</details>
+
+
+>Two-factor authentication is not implemented by Jupyter4NFDI or JSC-Login. Instead, you need to enable it in **JuDoor** (if you are logging in with a JSC account) or through the **Helmholtz AAI**. Below, we will outline the activation process for both services.
+
+## Setup
+
+2-Factor Authentication (2FA) better protects both your user credentials and the resources that you can access. **JuDoor** and **Helmholtz AAI** both use the time-based One-Time Password (OTP) generated by an OTP-App as a 2nd factor.
+
+### Install an OTP-App
+On one of your personal devices (e.g., your smartphone), install an OTP-App:  
+- [**FreeOTP**](https://freeotp.github.io) (iOS, Android)  
+- [**KeeWeb**](https://keeweb.info) (Linux, macOS, Windows, Online)  
+<details><summary>More Apps. Free, but closed source:</summary>
+<ul>
+  <li>Authy (iOS, Android, Windows, macOS, Linux)</li>
+  <li>Protectimus Smart OTP (iOS, Android)</li>
+  <li>Google Authenticator (iOS, Android )</li>
+  <li>Microsoft Authenticator (iOS, Android, Windows 10 Mobile)</li>
+</ul>
+</details>
+
+### Option A: JuDoor
+1. Visit <a target=_blank href="https://judoor.fz-juelich.de">JuDoor</a> and sign-in using your JSC account.
+2. In the top right corner, open the dropdown menu and click on **Account Security**.
+  <div>
+    <img src="../images/2fa/judoor_01.png" title="2-factor-authentication" style="width: 920px; max-width: 1600px;">
+  </div>
+3. Click on **Start MFA Setup...**
+4. Scan the QR Code (for OTP-App on phones), or enter the Secret into your installed **OTP-App**.
+5. Enter your current **JSC account password** into _Current password for account1_.
+6. Enter the current **One-Time-Password** (generated by your OTP-App) into the field below.
+7. **DOWNLOAD AND PRINT THE SHOWN RESET CODES**
+
+### Option B: Helmholtz AAI
+1. Visit <a target=_blank href="https://login.helmholtz.de/home/">Helmholtz AAI</a> and sign-in using your home IdP.
+2. Select Credentials in the left sidebar.
+  <div>
+    <img src="../images/2fa/hdfaai_01.png" title="2-factor-authentication" style="width: 920px; max-width: 1600px;">
+  </div>
+3. Activate _Enable two-step authentication if possible_
+  <div>
+    <img src="../images/2fa/hdfaai_02.png" title="2-factor-authentication" style="width: 920px; max-width: 1600px;">
+  </div>
+4. Click _Setup_ for _One time password for second factor authentication_
+  <div>
+    <img src="../images/2fa/hdfaai_03.png" title="2-factor-authentication" style="width: 920px; max-width: 1600px;">
+  </div>
+5. Scan the QR Code (for OTP-App on phones), or click _Can't scan the code_ and enter the secret into your installed **OTP-App**.
+6. Enter the current **One-Time-Password** (generated by your OTP-App) and click on the checkmark.
+  <div>
+    <img src="../images/2fa/hdfaai_04.png" title="2-factor-authentication" style="width: 920px; max-width: 1600px;">
+  </div>
+
+
+## Disable 2-Factor authentication
+
+To disable 2FA you have to disable it at **JuDoor** / **Helmholtz AAI**.
+
+### JuDoor
+1. Visit <a target=_blank href="https://judoor.fz-juelich.de">JuDoor</a> and sign-in using your JSC account.
+2. In the top right corner, open the dropdown menu and click on **Account Security**.
+  <div>
+    <img src="../images/2fa/judoor_01.png" title="2-factor-authentication" style="width: 920px; max-width: 1600px;">
+  </div>
+3. Click on **Disable MFA...**
+4. Option A: _Use second factor_ - requires your OTP-App.  
+   Option B: _Use reset code_ - requires your reset codes.
+
+### Helmholtz AAI
+1. Visit <a target=_blank href="https://login.helmholtz.de/home/">Helmholtz AAI</a> and sign-in using your home IdP.
+2. Select Credentials in the left sidebar.
+  <div>
+    <img src="../images/2fa/hdfaai_01.png" title="2-factor-authentication" style="width: 920px; max-width: 1600px;">
+  </div>
+3. **Disable**  _Enable two-step authentication if possible_
+  <div>
+    <img src="../images/2fa/hdfaai_02.png" title="2-factor-authentication" style="width: 920px; max-width: 1600px;">
+  </div>
+
+> You can disable 2FA on Helmholtz AAI, but you cannot delete the secret yourself. For assistance with removal, please contact their support team ( support at hifis.net ).

docs/authentication.md

@@ -0,0 +1,70 @@
+# Jupyter4NFDI Login
+
+Jupyter4NFDI relies on the **Helmholtz AAI** system for user authentication.
+
+This federated login provides a wide selection of identity providers (IdPs), allowing users to log in with institutional credentials or social IdPs, like GitHub, Google or ORCID.
+> A complete list of connected organizations is available [here](https://hifis.net/doc/helmholtz-aai/list-of-connected-organisations/#edugain).
+
+> Once [IAM4NFDI](https://base4nfdi.de/projects/iam4nfdi) is implemented, Jupyter4NFDI will switch to this as AAI solution.
+
+## 1. Visit the Jupyter4NFDI Login Page
+Go to [hub.nfdi-jupyter.de](https://hub.nfdi-jupyter.de) and click the **Sign In** button.
+
+> The web pages displayed during your initial registration may differ from the screenshots in this documentation. The registration process is handled by Helmholtz AAI or the connected identity providers, so updates may change the appearance of these pages.
+
+<div style="text-align: center;">
+  <img src="../images/nfdi_login_01.png" alt="Click Login" style="width: 70%;">
+</div>
+
+## 2. Sign via Home IdP or Social IdP
+
+Choose the Identity Provider (IdP) you would like to use. Use the search field to find your provider and login using the credentials of your provider.
+> If you encounter an error message after this step, it means that your Identity Provider (IdP) has not provided the necessary attributes to the Helmholtz AAI. In this case, reach out to your IdP to request that they address the issue. If they need further assistance, they can contact the Helmholtz AAI administrators directly.
+
+<div style="text-align: center;">
+  <img src="../images/login_03.png" alt="Login Helmholtz AAI" style="width: 70%;">
+</div>
+
+##### Register at Helmholtz AAI
+
+<details>
+  <summary>If you're a first-time user of Helmholtz AAI, you'll be prompted to register. Click to expand for more information.</summary>
+
+<div style="text-align: center;">
+  <img src="../images/login_04.png" alt="Register Helmholtz AAI" style="width: 70%;">
+</div>
+
+Depending on the attributes sent by your Identity Provider to Helmholtz AAI, you may need to provide additional information, such as your email address. You will also need to read and accept the Acceptable Use Policy.
+
+<div style="text-align: center;">
+  <img src="../images/login_05.png" alt="Register Helmholtz AAI" style="width: 70%;">
+</div>
+
+Your registration request has been submitted. You will receive an email with a link that you need to click to confirm your email address.
+
+<div style="text-align: center;">
+  <img src="../images/login_06.png" alt="Register Helmholtz AAI 2" style="text-align: middle; width: 40%;">
+</div>
+
+After your account registration was successful you have to [login](#1-visit-the-Jupyter4NFDI-login-page) once more.
+
+</details>
+
+## 3. Consent confirmation
+
+You need to confirm that you agree to allow the Helmholtz AAI service to use the information provided by the Identity Provider.
+
+> The information displayed on this page is what Jupyter4NFDI will receive from the AAI. This data is used to determine your access to specific resources. If you need additional attributes to be sent to Jupyter4NFDI, please request your Identity Provider to follow the [AARC-G002](https://aarc-community.org/guidelines/aarc-g002/) guidelines and include the necessary information in the _eduPersonEntitlement_ attribute.
+
+<div style="text-align: center;">
+  <img src="../images/login_07.png" alt="Consent" style="text-align: middle; width: 40%;">
+</div>
+
+
+## FAQ
+
+### Why can't I change the account in Helmholtz AAI
+When you click on Logout in Jupyter4NFDI, you will be logged out from Jupyter4NFDI, but you will remain logged into the Helmholtz AAI service. To log out from Helmholtz AAI, please visit the Helmholtz AAI [website](https://login.helmholtz.de/home) and click on Logout. Afterward, you will have the option to choose a different provider during the login process.
+
+### How do I get access to a system
+More information about access to the systems is documented [here](features.md#1-systems-available).

docs/css/style.css

@@ -0,0 +1,26 @@
+[data-md-color-scheme="fzj"] {
+  --md-primary-fg-color:        #023d6b;
+  --md-primary-fg-color--light: #ECB7B7;
+  --md-primary-fg-color--dark:  #272727;
+}
+:root {
+  --md-primary-fg-color: #023d6b;
+}
+
+/* Logo styling */
+.md-sidebar--primary .md-logo {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+}
+
+/* Optional: Customize logo size */
+.md-logo img {
+  max-width: 80%;
+  height: auto;
+}
+
+/* Hide the logo in the header */
+.md-header .md-logo {
+  display: none;
+}

docs/custom/404.html

@@ -0,0 +1,9 @@
+ {% extends "main.html" %} 
+
+ <!-- Content --> 
+ {% block content %} 
+    <h1>404 - Not Found</h1>
+    <p>Looking for a specific notebook? Maybe you'll find it in this repository: 
+        <a href="https://github.com/FZJ-JSC/jupyter-jsc-notebooks">Previous Jupyter Documentation</a>
+    </p>
+ {% endblock %} 

docs/features.md

@@ -0,0 +1,39 @@
+# Available Resources and Tools
+
+Jupyter4NFDI provides a variety of options and features to enhance your interactive computing experience. Here’s an overview of what you can expect:
+
+## 1. Systems Available
+
+### Cloud
+
+**JSC-Cloud** is accessible to everyone, providing flexible cloud resources. For users utilizing JSC-Cloud, we offer several resource configurations, including:
+
+- **2GB RAM, 1 CPU** for **7 days**
+- **4GB RAM, 1 CPU** for **2 days**
+- **8GB RAM, 2 CPUs** for **10 hours**
+
+Please note that these flavors may change in the future and are dependent on the available resources.
+
+With JSC-Cloud, each user enjoys **25GB** of **persistent storage**, allowing you to keep your important work safe and accessible. This feature is available not only in the **default JupyterLab versions** but also when using **custom Docker images**. Whether you're developing in a standard environment or tailoring your setup with your own images, you can rest assured that your data is securely stored and easily retrievable.
+
+> We will add more systems to Jupyter4NFDI in the future. 
+
+## 2. Different JupyterLab Versions
+
+Jupyter4NFDI supports multiple versions of **JupyterLab**, allowing users to select the environment that best suits their needs. This flexibility ensures compatibility with various extensions and workflows.
+
+Currently available JupyterLab versions:
+
+ - **JupyterLab 4.2** - A default setup of useful kernels, extensions and more. More details [here](https://github.com/easybuilders/JSC/blob/2024/Golden_Repo/j/Jupyter-bundle/Jupyter-bundle-20240520-GCCcore-12.3.0.eb).
+> your persistent storage is mounted to `/home/jovyan`. Everything outside of this directory will be lost after a restart.
+ - **JupyterLab 3.6** - the previous default version. No longer actively supported. More details [here](https://github.com/easybuilders/JSC/blob/2023/Golden_Repo/j/JupyterLabCollection/JupyterLabCollection-2023.3.6-GCCcore-11.3.0.eb).
+> your persistent storage is mounted to `/home/jovyan`. Everything outside of this directory will be lost after a restart.
+ - **Custom Docker Image** - Use your own docker image. More details in [Custom Docker Images](users/jupyterlab/customdockerimage/index.md).
+> The mount path for your persistent storage is configurable. This flexibility ensures that the storage location does not interfere with the specific requirements of the Docker image you provide. You can easily adapt the mounting path to suit your environment, allowing for a seamless integration of your custom setup.
+ - **Repo2Docker ( Binder )** - Build docker images directly from GitHub, GitLab, Zenodo or other sources. More details in [Repo2docker Integration](users/jupyterlab/repo2docker/index.md).
+
+
+---
+
+Explore these options to make the most out of your experience with Jupyter4NFDI, whether you are conducting research, teaching, or learning!
+

docs/hubs/index.md

@@ -0,0 +1,15 @@
+---
+hide: [toc]
+---
+# Jupyter Services Overview
+
+
+This site provides an overview of avaiable Jupyter Services for researchers in within Germany and within the NFDI. 
+
+> Please be aware that we do not offer support or have detailed information about the JupyterHub or Binder services listed. Access to these services may be restricted, and their environments are tailored to specific use cases. **If you're unsure which JupyterHub to select, the [Jupyter4NFDI](details/jupyter4nfdi.md) instance serves as an excellent starting point**.
+
+<!-- You can filter the Services with the facets on the right. -->
+If **your** instance is missing, have a look at our [contribution page](template.md). If you are interessted in current statistics, have a look [here](stats.md).
+
+[cards cols=2 (docs/hubs/plugins/data/cardinfo.yaml)]
+

docs/hubs/plugins/data/cardinfo.yaml

@@ -0,0 +1,20 @@
+- title: Jupyter4NFDI
+  content: |
+    Provider: *Juelich Supercomputing Centre*
+    <p class="nt-card-text">Target Group: Users within NFDI</p>
+
+    <div class="nfdi-card-link">[:octicons-arrow-right-24: Service Details](details/jupyter4nfdi.md)
+
+    [:material-lock: Login](https://hub.nfdi-jupyter.de){.md-button .md-button--primary}</div>
+  image: assets/default-logo.png
+  icon: ":octicons-arrow-right-24:"
+- title: Jupyter-JSC
+  content: |
+    Provider: *Juelich Supercomputing Centre*
+    <p class="nt-card-text">Target Group: HPC users of JSC. Helmholtz users in general</p>
+
+    <div class="nfdi-card-link">[:octicons-arrow-right-24: Service Details](details/jupyter-jsc.fz-juelich.de.md)
+
+    [:material-lock: Login](https://jupyter.jsc.fz-juelich.de){.md-button .md-button--primary}</div>
+  image: assets/jupyter-jsc.fz-juelich.de.png
+  icon: ":octicons-arrow-right-24:"