ec style

.github/workflows/lint.yml

@@ -33,3 +33,7 @@ jobs:
           # Pylint is too picky about everything, not ready
           # for this yet here
           VALIDATE_PYTHON_PYLINT: false
+          # this messes with jinja templates
+          VALIDATE_HTML_PRETTIER: false
+          # We don't want to lint EC files
+          FILTER_REGEX_EXCLUDE: ".*/ecl-.*\\.(css|js)"

ec-templates/401.html

@@ -0,0 +1,33 @@
+<!-- htmlhint doctype-first:false -->
+{% extends "error.html" %}
+{% block main %}
+<div class="error">
+  <h1>Unauthorized!</h1>
+  <p>
+    You are trying to access a restricted instance of the EGI Notebooks service.
+  </p>
+  <p>
+    Access requires a valid
+    <a href="https://docs.egi.eu/users/check-in/signup">EGI account</a>
+    and membership of one of the supported VOs.
+  </p>
+  <p>
+    If you think you should be granted access already, please open an issue in
+    <a href="https://ggus.eu">GGUS</a>
+  </p>
+  <p>
+    See
+    <a
+      href="https://docs.egi.eu/users/dev-env/notebooks/#notebooks-for-researchers/"
+    >
+      Documentation related to EGI Notebooks</a
+    >
+    about granting access. You can also
+    <a href="https://marketplace.eosc-portal.eu/services/egi-notebooks"
+      >place an order in EOSC portal</a
+    >
+    for the Notebooks service if you are interested in your own community
+    deployment.
+  </p>
+</div>
+{% endblock %}

ec-templates/403.html

@@ -0,0 +1,34 @@
+<!-- htmlhint doctype-first:false -->
+{% extends "error.html" %}
+
+{% block main %}
+<div class="error">
+  <h1>Unauthorized!</h1>
+  <p>
+    You are trying to access a restricted instance of the EGI Notebooks service.
+  </p>
+  <p>
+    Access requires a valid
+    <a href="https://docs.egi.eu/users/check-in/signup">EGI account</a>
+    and membership of one of the supported VOs.
+  </p>
+  <p>
+    If you think you should be granted access already, please open an issue in
+    <a href="https://ggus.eu">GGUS</a>
+  </p>
+  <p>
+    See
+    <a
+      href="https://docs.egi.eu/users/dev-env/notebooks/#notebooks-for-researchers/"
+    >
+      Documentation related to EGI Notebooks</a
+    >
+    about granting access. You can also
+    <a href="https://marketplace.eosc-portal.eu/services/egi-notebooks"
+      >place an order in EOSC portal</a
+    >
+    for the Notebooks service if you are interested in your own community
+    deployment.
+  </p>
+</div>
+{% endblock %}

ec-templates/egi-login.html

@@ -0,0 +1,60 @@
+<!-- htmlhint doctype-first:false,id-class-value:false -->
+{% extends "page.html" %}
+{% if announcement_login %}
+  {% set announcement = announcement_login %}
+{% endif %}
+
+{% block main %}
+<div id="main-page-content" class="ecl-u-mb-l">
+  <article>
+    <div>
+      <div class="ecl-u-mb-2xl">
+        <div>
+          <section
+            class="ecl-banner ecl-banner--text-highlight ecl-banner--m ecl-banner--full-width"
+          >
+            <picture class="ecl-picture ecl-banner__picture"
+              ><img
+                class="ecl-banner__image"
+                src="https://open-science-cloud.ec.europa.eu/sites/default/files/styles/oe_theme_full_width/public/2024-04/EOSC-Visuals-Interactive-Notebooks-blue-2_0.jpg?itok=_FZmE9a9"
+                alt="Interactive notebooks"
+            /></picture>
+            <div class="ecl-container">
+              <div class="ecl-banner__container">
+                <div class="ecl-banner__content">
+                  <div class="ecl-banner__title">
+                    <span class="ecl-banner__title-text"
+                      >Interactive Notebooks</span
+                    >
+                  </div>
+                  <p class="ecl-banner__description">
+                    <span class="ecl-banner__description-text"
+                      >Create and share documents with real-time code
+                      execution.</span
+                    >
+                  </p>
+                  <div class="ecl-banner__cta">
+                    <a
+                      href="{{ authenticator_login_url }}"
+                      class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-banner__link-cta"
+                      ><span class="ecl-link__label">Get Started</span
+                      ><svg
+                        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon"
+                        focusable="false"
+                        aria-hidden="true"
+                      >
+                        <use
+                          xlink:href="{{ static_url('images/icons.svg#corner-arrow') }}"
+                        ></use></svg
+                    ></a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
+{% endblock main %}

ec-templates/home.html

@@ -0,0 +1,112 @@
+<!-- htmlhint doctype-first:false,id-class-value:false,spec-char-escape:false -->
+{% extends "page.html" %}
+{% if announcement_home is string %}
+  {% set announcement = announcement_home %}
+{% endif %}
+
+{% block main %}
+<div class="ecl-container ecl-u-mv-xl">
+  <h1 class="sr-only">JupyterHub home page</h1>
+  <div class="row">
+    <div class="text-center">
+      {% if default_server.active %}
+      <a id="stop" role="button" class="ecl-button ecl-button--cta"
+        >Stop My Server</a
+      >{% endif %}
+      <a
+        id="start"
+        role="button"
+        class="ecl-button ecl-button--primary"
+        href="{{ url }}"
+      >
+        {% if not default_server.active %}Start{% endif %} My Server
+      </a>
+    </div>
+  </div>
+  {% if allow_named_servers %}
+  <h2>Named Servers</h2>
+  <p>
+    In addition to your default server, you may have additional
+    {% if named_server_limit_per_user > 0 %}{{ named_server_limit_per_user }}{% endif %}
+    server(s) with names. This allows you to have more than one server
+    running at the same time.
+  </p>
+  {% set named_spawners = user.all_spawners(include_default=False)|list %}
+  <table class="server-table table table-striped">
+    <thead>
+      <tr>
+        <th>Server name</th>
+        <th>URL</th>
+        <th>Last activity</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="home-server-row add-server-row">
+        <td colspan="4">
+          <div class="input-group">
+            <input
+              class="new-server-name form-control"
+              aria-label="server name"
+              placeholder="name-your-server"
+            />
+            <button
+              role="button"
+              type="button"
+              class="new-server-btn btn btn-xs btn-primary"
+            >
+              Add New Server
+            </button>
+          </div>
+        </td>
+      </tr>
+      {% for spawner in named_spawners %}
+      <tr class="home-server-row" data-server-name="{{ spawner.name }}">
+        {# name #}
+        <td>{{ spawner.name }}</td>
+        {# url #}
+        <td>
+          <a
+            class="server-link {% if not spawner.ready %}hidden{% endif %}"
+            href="{{ user.server_url(spawner.name) }}"
+            >{{ user.server_url(spawner.name) }}</a
+          >
+        </td>
+        {# activity #}
+        <td class="time-col">
+          {% if spawner.last_activity %} {{ spawner.last_activity.isoformat() + 'Z' }} {% else %} Never {% endif %}
+        </td>
+        {# actions #}
+        <td>
+          <a
+            role="button"
+            class="stop-server btn btn-xs btn-danger{% if not spawner.active %} hidden{% endif %}"
+            id="stop-{{ spawner.name }}"
+            >stop</a
+          >
+          <a
+            role="button"
+            class="start-server btn btn-xs btn-primary {% if spawner.active %}hidden{% endif %}"
+            id="start-{{ spawner.name }}"
+            href="{{ base_url }}spawn/{{ user.name }}/{{ spawner.name }}"
+            >start</a
+          >
+          <button
+            role="button"
+            class="delete-server btn btn-xs btn-danger{% if spawner.active %} hidden{% endif %}"
+            id="delete-{{ spawner.name }}"
+          >
+            delete
+          </button>
+        </td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  {% endif %}
+</div>
+{% endblock main %} {% block script %} {{ super() }}
+<script type="text/javascript">
+  require(["home"]);
+</script>
+{% endblock script %}

ec-templates/login.html

@@ -0,0 +1,2 @@
+<!-- htmlhint doctype-first:false -->
+{% extends "egi-login.html" %}

ec-templates/logout.html

@@ -0,0 +1,14 @@
+<!-- htmlhint doctype-first:false -->
+{% extends "page.html" %}
+{% block meta %}
+<meta http-equiv="refresh" content="0; url=/" />
+{% endblock %}
+{% if announcement_logout %}
+  {% set announcement = announcement_logout %}
+{% endif %}
+
+{% block main %}
+<div id="logout-main" class="container">
+  <p>Successfully logged out.</p>
+</div>
+{% endblock %}