website: improve widgets (#1816)

- docs: use pre-release theme - website: arbitrary number of widgets, move content up (fixes #1815)
TomographicImaging · Jun 11, 2024 · 5a99e80 · 5a99e80
1 parent ccf17f3
commit 5a99e80
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 7 deletions.
diff --git a/docs/docs_environment.yml b/docs/docs_environment.yml
@@ -36,4 +36,4 @@ dependencies:
   # TODO: remove after https://github.com/pydata/pydata-sphinx-theme/pull/1795 is released
   - pip
   - pip:
-    - git+https://github.com/TomographicImaging/pydata-sphinx-theme@fix-version-switcher-dirhtml#egg=pydata-sphinx-theme
+    - git+https://github.com/pydata/pydata-sphinx-theme
diff --git a/docs/pages/_layouts/frontpage.html b/docs/pages/_layouts/frontpage.html
@@ -0,0 +1,105 @@
+---
+layout: default
+format: frontpage
+---
+<!-- from https://github.com/Phlow/feeling-responsive/raw/gh-pages/_layouts/frontpage.html -->
+<div id="header-home">
+    <div class="row">
+        <div class="small-12 columns">
+        </div><!-- /.medium-4.columns -->
+    </div><!-- /.row -->
+</div><!-- /#header-home -->
+
+
+{% comment %}
+*
+* Main page content
+*
+{% endcomment %}
+<div class="row">
+    {{ content }}
+</div><!-- /.row -->
+
+
+{% comment %}
+*
+* Widgets (multi-column cards)
+*
+{% endcomment %}
+<div class="row t60">
+    {% if page.widgets %}
+    {% for widget in page.widgets %}
+        {% include _frontpage-widget.html widget=widget %}
+    {% endfor %}
+	{% endif %}
+</div><!-- /.row -->
+
+
+
+{% comment %}
+*
+* First check, if there is a call for action-button
+*
+{% endcomment %}
+{% if page.callforaction.url contains 'http' %}
+{% assign url = '' %}
+{% else %}
+{% capture url %}{{ site.url }}{{ site.baseurl }}{% endcapture %}
+{% endif %}
+{% if page.callforaction %}
+    <div class="row t60 b60">
+        <div class="small-12 text-center columns">
+            <a class="button large radius {{ page.callforaction.style }}" href="{{ url }}{{ page.callforaction.url }}"{% if page.callforaction.url contains 'http' %} target="_blank" {% endif %}>{{ page.callforaction.text }}</a>
+        </div><!-- /.small-12.columns -->
+    </div><!-- /.row -->
+{% endif %}
+
+
+
+{% comment %}
+*
+* First check, if there are any posts at all
+*
+{% endcomment %}
+
+{% unless site.posts == empty %}
+    <div class="row t30 b20 homepage">
+        <div class="small-12 columns">
+            {% for post in site.posts limit:1 %}
+            {% if post.image.homepage %}
+            <p>
+                <a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}" title="{{ post.title | escape_once }}"><img width="970" src="{{ site.urlimg }}{{ post.image.homepage }}" alt="{{ page.title | escape_once }}"></a>
+            </p>
+
+            {% if post.image.caption_url and post.image.caption %}
+            <p class="text-right caption">
+                <a href="{{ post.image.caption_url }}">{{ post.image.caption }}</a>
+            </p>
+            {% endif %}
+            {% else post.image.homepage == NULL %}
+            <h2>{{ site.data.language.new_blog_entries }}</h2>
+            {% endif %}
+            {% endfor %}
+        </div><!-- /.small-12.columns -->
+    </div><!-- /.row -->
+
+
+    <div class="row">
+        <div class="medium-6 columns">
+            {% for post in site.posts limit:1 %}
+            {% if post.subheadline %}<p class="subheadline">{{ post.subheadline }}</p>{% endif %}
+            <h2><a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h2>
+            <p>
+                {% if post.meta_description %}{{ post.meta_description | strip_html | escape }}{% else post.teaser %}{{ post.teaser | strip_html | escape }}{% endif %}
+                <a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}" title="Read {{ post.title | escape_once }}"><strong>{{ site.data.language.read_more }}</strong></a>
+            </p>
+            {% endfor %}
+        </div><!-- /.medium-5.columns -->
+
+
+        <div class="medium-6 columns">
+            <p><strong>{{ site.data.language.more_articles }}</strong></p>
+            {% include list-posts entries='3' offset='1' %}
+        </div><!-- /.medium-7.columns -->
+    </div><!-- /.row -->
+{% endunless %}
diff --git a/docs/pages/index.md b/docs/pages/index.md
@@ -4,24 +4,22 @@ layout: frontpage
 header:
   image_fullwidth: https://ccpi.ac.uk/wp-content/uploads/2022/08/front-page-1125x800.png # ideally 600x80 pixels
   title: '<img loading="lazy" src="https://ccpi.ac.uk/wp-content/uploads/2022/11/CIL-logo-RGB.svg" alt="CIL - Core Imaging Library">'
-widget1:
-  title: Examples
+widgets:
+- title: Examples
   url: 'https://mybinder.org/v2/gh/TomographicImaging/CIL-Demos/HEAD?urlpath=lab/tree/binder%2Findex.ipynb'
   image: https://ccpi.ac.uk/wp-content/uploads/2022/04/walnut_training.png
   text: >
     We have a repository with a <a href="https://github.com/TomographicImaging/CIL-Demos">large collection</a> of Jupyter Notebooks which cover a wide range of topics, from basic usage to advanced reconstructions with iterative methods.
     <br/>
     Some examples <em>without any local installation</em> are provided in <a href="https://mybinder.org">Binder</a>.
     Please click the button below to try them immediately in your browser.
-widget2:
-  title: CIL Documentation
+- title: CIL Documentation
   url: '/nightly/'
   image: https://ccpi.ac.uk/wp-content/uploads/2022/11/CIL-logo-RGB.svg
   text: >
     CIL has a live documentation which gets updated regularly and built nightly.
     We suggest to download and read the open access articles below, which provide very detailed information about CIL structure and usage.
-widget3:
-  title: Papers
+- title: Papers
   url: 'https://github.com/TomographicImaging/Paper-2021-RSTA-CIL-Part-II'
   image: https://ccpi.ac.uk/wp-content/uploads/2022/10/RSTA_cover.png
   text: >