FiQCI · joonas-somero · May 2, 2025 · Mar 7, 2025 · Mar 7, 2025 · Mar 7, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
     "files.associations": {
-        "**/content/**/*.{html,js}": "liquid",
+        "**/content/**/*.{html,liquid}": "liquid",
     }
 }
diff --git a/content/_data/site-constants.yml b/content/_data/site-constants.yml
@@ -1,7 +1,58 @@
 title: FiQCI
 author: The FiQCI Consortium
+feedback_email: fiqci-feedback@postit.csc.fi
+
+hero:
+  tagline: Making the power of quantum computing accessible
+  subtitle: FiQCI – Finnish quantum-computing infrastructure
+  announcement:
+    text: Open call for pilot access to Helmi quantum computer now open!
+    link:
+      title: How to access Helmi, instructions
+      href: FIXME
+  buttons:
+    - title: How to get access
+      href: "#get-access"
+    - title: Blogs and instructions
+      href: /publications
+    - title: About FiQCI
+      href: "#about-fiqci"
+
+access-cards:
+  - title: LUMI
+    href: FIXME
+    teaser: /assets/images/FiQCI-banner.jpg
+    description: |-
+      The backbone of the classical HPC resources in FiQCI, and the portal for quantum computing resources, is the pan-European EuroHPC LUMI supercomputer. LUMI is the fastest and greenest supercomputer in Europe, hosted by CSC in Kajaani, Finland.
+    links:
+      - title: Getting started with Lumi
+        href: https://www.lumi-supercomputer.eu/get-started/
+  - title: Helmi - VTT Q5
+    href: FIXME
+    teaser: /assets/images/vtt-images/VTT_lab-2.jpg
+    description: |-
+      Helmi, the first Finnish quantum computer, co-developed by VTT and IQM Quantum Computers, is operated by VTT in Espoo, Finland. Helmi is based on superconducting technology, and presently provides five qubits. Upgrades to 20, then 50 qubits is planned for the near future.
+    links:
+      - title: How to access Helmi, instructions
+        href: FIXME
+      - title: Read more about Helmi
+        href: FIXME
+  - title: Kvasi
+    href: FIXME
+    teaser: /assets/images/FiQCI-banner.jpg
+    description: |-
+      Kvasi, the Atos Quantum Learning Machine or Qaptiva is a quantum computing simulator with which you can learn to use and develop new quantum algorithms. Kvasi provides a platform for developing and simulating quantum algorithms in both ideal and realistic, noisy conditions. Kvasi is capable of simulating algorithms for quantum computers of 30+ qubits.
+    links:
+      - title: How to access Kvasi, instructions
+        href: FIXME
+      - title: Read more about Kvasi
+        href: FIXME
+
 logo: assets/images/FiQCI-logo.png
 favicon: assets/images/favicon.png
+footer-icons: assets/footer-icons
+funder-logos: assets/images/funders
 description: >-
   Web presence of the Finnish Quantum-Computing Infrastructure. We provide state-of-the-art quantum-computing services to Finnish RDI communities.
 excerpt_max_length: 250
+title_separator: " – "
diff --git a/content/_includes/external/font.html b/content/_includes/external/font.html
@@ -0,0 +1,2 @@
+<link rel="preconnect" href="https://rsms.me/">
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
diff --git a/content/_includes/head.html b/content/_includes/head.html
@@ -1,27 +1,20 @@
 {% assign constants = site.data.site-constants %}
 <head>
+  <title>{{ page.title }}{{ constants.title_separator }}{{ constants.title }}</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--{\%- seo -\%}-->
-  <link rel="icon" href="{{ constants.favicon | relative_url }}" />
-  <link rel="stylesheet" href="{{ 'main.css' | relative_url }}">
-  {%- include external/mathjax.html -%}
-
-  <script type="text/javascript" src="{{ "site.js" | relative_url }}" charset="utf-8"></script>
-
-  {% assign react_source_files = include.react_source_files %}
-  {% unless layout.react_source_files == empty %}
-    {% for src in layout.react_source_files %}
-      {% assign react_source_files = react_source_files | push: src %}
-    {% endfor %}
-  {% endunless %}
-  {% unless page.react_source_files == empty %}
-    {% for src in page.react_source_files %}
-      {% assign react_source_files = react_source_files | push: src %}
-    {% endfor %}
-  {% endunless %}
-  {%- unless react_source_files == empty %}
-    {%- include react/sources.html sources=react_source_files -%}
-  {%- endunless -%}
+  <link rel="icon" href="{{ constants.favicon | absolute_url }}" />
+  <link rel="stylesheet" href="{{ 'properties.css' | absolute_url }}" />
+  <link rel="stylesheet" href="{{ 'main.css' | absolute_url }}" />
+  {% include external/mathjax.html -%}
+  {% include external/font.html %}
+  <script type="text/javascript" src="{{ "site.js" | absolute_url }}" charset="utf-8"></script>
+  {% if page.react %}
+    {%- assign react_source = page.name | append: ".js" -%}
+  {% else %}
+    {%- assign react_source = "default.js" -%}
+  {% endif %}
+  <script type="text/javascript" src="{{ react_source | absolute_url }}" charset="utf-8"></script>
 </head>
diff --git a/content/_includes/header.html b/content/_includes/header.html
diff --git a/content/_includes/post-list.html b/content/_includes/post-list.html
@@ -7,7 +7,7 @@
     {%- assign date_format = constants.date_format | default: "%b %-d, %Y" -%}
     <span class="text-sm">{{ post.date | date: date_format }}</span>
     <div class="text-lg">
-      <a class="block font-medium" href="{{ post.url | relative_url }}">
+      <a class="block font-medium" href="{{ post.url | absolute_url }}">
         {{ post.title | escape }}
       </a>
     </div>

diff --git a/content/_includes/react/section-root.html b/content/_includes/react/section-root.html
@@ -0,0 +1,6 @@
+<section class="mx-8 lg:mx-[100px] py-6">
+  <div class="flex items-center justify-between mb-6">
+    <h2 class="text-3xl font-bold" id="{{ include.heading | slugify }}">{{ include.heading }}</h2>
+  </div>
+  <div id='{{ include.id }}' class="not-prose"></div>
+</section>
diff --git a/content/_includes/react/sources.html b/content/_includes/react/sources.html
diff --git a/content/_layouts/base.html b/content/_layouts/base.html
@@ -1,25 +1,16 @@
----
-base_react_sources:
-  - navigation.js
-  - footer.js
----
 <!DOCTYPE html>
   <html lang="{{ page.lang | default: site.lang | default: "en" }}">
-    {% assign base_react_sources = layout.base_react_sources %}
-    {% for src in layout.react_source_files %}
-      {% assign base_react_sources = base_react_sources | push: src %}
-    {% endfor %}
-    {%- include head.html react_source_files=base_react_sources -%}
+  {%- include head.html -%}
 
   <body class="flex flex-col min-h-screen">
+    {%- include react/root.html id='react-root' -%}
+    <header class="sticky top-0 bg-white z-40" id="navigation-header"></header>
 
-    <div class="sticky top-0 bg-white z-40">
-      {%- include react/root.html id='navigation-header' -%}
-    </div>
     <main class="block flex-[1_0]" aria-label="Content">
-        {{ content }}
+      {{ content }}
     </main>
-    {%- include react/root.html id='footer' -%}
+
+    <footer class="bg-gray-100 text-gray-700 text-sm" id="footer"></footer>
   </body>
 
 </html>
diff --git a/content/_layouts/home.html b/content/_layouts/home.html
@@ -1,15 +1,11 @@
 ---
 layout: base
 react_source_files:
-  - home.js
-  - aboutFiqci.js
+  - home.html.js
 ---
 
-{%- include react/root.html id='home' -%}
+{%- include react/root.html id='hero' -%}
 
-<div>
+{{ content }}
 
-  {{ content }}
-
-</div>
-{%- include react/root.html id='about-fiqci' -%}
+{%- include react/root.html id='about-fiqci' -%}
diff --git a/content/_layouts/page.html b/content/_layouts/page.html
@@ -2,6 +2,8 @@
 layout: base
 ---
 
+{%- include react/root.html id='banner' -%}
+
 <article class="">
 
   <div>

diff --git a/content/_layouts/post.html b/content/_layouts/post.html
@@ -2,9 +2,9 @@
 layout: base
 ---
 {% assign constants = site.data.site-constants %}
-<article itemscope itemtype="http://schema.org/BlogPosting">
+<article itemscope itemtype="http://schema.org/BlogPosting" class="mx-8 lg:mx-[100px] py-6">
 
-  <header class="prose">
+  <header class="prose m-auto">
     <h1 itemprop="name headline">{{ page.title | escape }}</h1>
     <p class="text-sm">
       <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
@@ -17,7 +17,7 @@ <h1 itemprop="name headline">{{ page.title | escape }}</h1>
     </p>
   </header>
 
-  <div class="prose" itemprop="articleBody">
+  <div class="prose m-auto" itemprop="articleBody">
     {{ content }}
   </div>
 

diff --git a/content/index.md b/content/index.md
@@ -1,12 +1,11 @@
 ---
+title: Welcome
 layout: home
-react_source_files:
-  - accessCards.js
-  - blogCards.js
-  - eventCards.js
-  - aboutFiqci.js
-
+react: true
 ---
-{%- include react/root.html id='access-cards' -%}
-{%- include react/root.html id='blog-cards' -%}
-{%- include react/root.html id='event-cards' -%}
+
+{% include react/section-root.html id='access-cards' heading='Get access' %}
+
+{% include react/section-root.html id='blog-cards' heading='Blogs and instructions' %}
+
+{% include react/section-root.html id='event-cards' heading='Events' %}
diff --git a/content/pages/events.md b/content/pages/events.md
@@ -2,8 +2,7 @@
 layout: page
 title: Events
 subtitle: Upcoming and past events with connection to FiQCI
-react_source_files:
-  - events.js
+react: true
 ---
 
 {%- include react/root.html id='events' -%}
diff --git a/content/pages/publications.md b/content/pages/publications.md
@@ -1,9 +1,8 @@
 ---
-layout: page
-title: Posts and publications
+title: Blogs and instructions
 subtitle: Blog posts, publications, and other material of interest
-react_source_files:
-  - blogs.js
+layout: page
+react: true
 ---
 
 {%- include react/root.html id='blogs' -%}
diff --git a/content/pages/search.md b/content/pages/search.md
@@ -1,8 +1,8 @@
 ---
-layout: page
+layout: base
 title: Search Results
-react_source_files:
-  - searchPage.js
+react: true
 ---
-<script type="text/javascript" src="{{ "store.js" | relative_url }}" charset="utf-8"></script>
-{%- include react/root.html id='search-page' -%}
+
+<script type="text/javascript" src="{{ "store.js" | absolute_url }}" charset="utf-8"></script>
+{%- include react/root.html id='site-search' -%}
diff --git a/content/pages/status.md b/content/pages/status.md
@@ -1,9 +1,8 @@
 ---
-layout: page
 title: Status
 subtitle: View the status of the Quantum Connections
-react_source_files:
-  - status.js
+layout: page
+react: true
 ---
 
 {%- include react/root.html id='service-status' -%}

diff --git a/content/properties.css.liquid b/content/properties.css.liquid
@@ -0,0 +1,9 @@
+---
+permalink: properties.css
+---
+
+@layer components {
+  :root {
+    --fiqci-banner-image: url({{ '/assets/images/FiQCI-banner.jpg' | absolute_url }});
+  }
+}
diff --git a/content/site.js → content/site.js.liquid b/content/site.js → content/site.js.liquid
@@ -1,22 +1,26 @@
 ---
+permalink: site.js
 ---
+
 {%- assign values = site.data.site-constants -%}
+{%- assign deployment = site-%}
 
 {%- capture constants -%}
 {
-  "logo": "{{ values.logo | relative_url }}",
   "baseUrl": "{{ site.baseurl }}",
+  "feedbackEmail": "{{ values.feedback_email }}",
+  "images": {
+    "logo": "{{ values.logo | absolute_url }}",
+    "funderLogosPath": "{{ values.funder-logos | absolute_url }}",
+    "footerIconsPath": "{{ values.footer-icons | absolute_url }}"
+  },
   "topNav": [
     { "title": "Home", "href": "{{ site.baseurl }}", "key": 0 },
-    { "title": "Blogs and instructions", "href": "{{ '/publications' | relative_url }}", "key": 1 },
-    { "title": "Status", "href": "{{ '/status' | relative_url }}", "key": 2 },
-    { "title": "Events", "href": "{{ '/events' | relative_url }}", "key": 3 },
-    { "title": "Search", "href": "{{ '/search' | relative_url }}", "key": 4 }
-  ],
-  "cardNav": [
-    { "title": "How to get access", "href": "{{ '/access' | relative_url }}", "key": 5 },
-    { "title": "Blogs and instructions", "href": "{{ '/publications' | relative_url }}", "key": 6 },
-    { "title": "About FiQCI", "href": "{{ '/about' | relative_url }}", "key": 7 }
+    { "title": "Get access", "href": "{{ '/access' | absolute_url }}", "key": 1 },
+    { "title": "Blogs and instructions", "href": "{{ '/publications' | absolute_url }}", "key": 2 },
+    { "title": "Status", "href": "{{ '/status' | absolute_url }}", "key": 3 },
+    { "title": "Events", "href": "{{ '/events' | absolute_url }}", "key": 4 },
+    { "title": "Search", "href": "{{ '/search' | absolute_url }}", "key": 5 }
   ]
 }
 {%- endcapture -%}
@@ -28,9 +32,9 @@
     "key": "{{ forloop.index }}",
     "type": "{{ publication.type | default: 'News' }}",
     "title": "{{ publication.title }}",
-    "url": "{{ publication.url | relative_url }}",
+    "url": "{{ publication.url | absolute_url }}",
     "date": "{{ publication.date | date: '%-d.%-m.%Y' }}",
-    "teaser": "{{publication.header.teaser | relative_url}}",
+    "teaser": "{{ publication.header.teaser | absolute_url }}",
     "filters": {
       {%- for category in publication.filters %}
         {%- if category[0] == "Theme" -%}
@@ -57,7 +61,7 @@
     "key": "{{ forloop.index }}",
     "type": "Event",
     "title": "{{ event_post.title }}",
-    "url": "{{ event_post.link | relative_url }}",
+    "url": "{{ event_post.link | uri_escape }}",
     "date": "{{ event_post.date | date: '%-d.%-m.%Y' }}",
     "content": {{ event_post.content | strip_html | strip_newlines | jsonify }},
     "filters": {
@@ -80,6 +84,7 @@
 {%- endcapture -%}
 
 const SITE = {
+  deployment: { baseURL: "{{ site.baseurl }}" },
   constants: JSON.parse(String.raw`{{- constants -}}`),
   publications: JSON.parse(String.raw`{{- publications -}}`),
   events: JSON.parse(String.raw`{{- events -}}`),

diff --git a/content/site.json.liquid b/content/site.json.liquid
@@ -0,0 +1,5 @@
+---
+permalink: api/site.json
+---
+
+{{ site.data.site-constants | jsonify }}
diff --git a/content/store.js → content/store.js.liquid b/content/store.js → content/store.js.liquid
@@ -1,4 +1,5 @@
 ---
+permalink: store.js
 ---
 
 {%- capture blogs -%}

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     },
     "webpack": {
       "outputDir": "./dist",
-      "reactRootsDir": "./src/roots"
+      "reactPagesDir": "./src/pages"
     },
     "tailwindcss": {
       "inputDir": "./src/stylesheets"
@@ -25,7 +25,7 @@
     "jekyll:serve": "npm run-script jekyll -- serve --config ${npm_package_config_jekyll_configFilename},${npm_package_config_jekyll_webpackConfigFilename}",
     "jekyll:build": "npm run-script jekyll -- build --config ${npm_package_config_jekyll_configFilename},${npm_package_config_jekyll_webpackConfigFilename}",
     "clean": "npm run-script jekyll -- clean --config ${npm_package_config_jekyll_configFilename},${npm_package_config_jekyll_webpackConfigFilename} && rm ${npm_package_config_jekyll_webpackConfigFilename}",
-    "watch": "npx concurrently --kill-others --prefix-colors ${npm_package_config_conc_colors} --passthrough-arguments 'npm:tailwindcss -- {1}' 'npm:webpack -- --mode=development {1}' 'npm:jekyll:serve -- --livereload' -- --watch",
+    "watch": "npx concurrently --kill-others --prefix-colors ${npm_package_config_conc_colors} --passthrough-arguments 'npm:tailwindcss -- {1}' 'npm:webpack -- --mode=development {1}' 'npm:jekyll:serve -- --livereload --baseurl /dev/' -- --watch",
     "build": "npm run-script tailwindcss && npm run-script webpack -- --mode=production && npm run-script jekyll:build",
     "start": "npm run-script tailwindcss && npm run-script webpack -- --mode=development && npm run-script jekyll:serve"
   },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<link rel="preconnect" href="https://rsms.me/">
		<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,8 @@ @@
     layout: base
     ---
+    {%- include react/root.html id='banner' -%}
     <article class="">
       <div>
@@ Expand Down @@