From 0a5e24f6cd09de138fcc870332f45c8103287444 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 28 Feb 2025 16:57:19 +0200 Subject: [PATCH 01/52] initial test --- content/_includes/react/root.html | 2 +- content/_layouts/post.html | 22 +++++++------------- src/components/BlogView.jsx | 34 +++++++++++++++++++++++++++++++ src/roots/blogView.jsx | 16 +++++++++++++++ 4 files changed, 58 insertions(+), 16 deletions(-) create mode 100644 src/components/BlogView.jsx create mode 100644 src/roots/blogView.jsx diff --git a/content/_includes/react/root.html b/content/_includes/react/root.html index 5ffebb03f347..3132e0260177 100644 --- a/content/_includes/react/root.html +++ b/content/_includes/react/root.html @@ -1 +1 @@ -
+
\ No newline at end of file diff --git a/content/_layouts/post.html b/content/_layouts/post.html index 1c7a96dcd7cf..6fc58853e801 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -1,24 +1,16 @@ --- layout: base +react_source_files: + - blogView.js --- {% assign constants = site.data.site-constants %}
-
-

{{ page.title | escape }}

-

- - {%- if page.author -%} - • - {%- endif -%} -

-
+
+ + +{%- include react/root.html id='blog-view' -%} + -
- {{ content }} -
diff --git a/src/components/BlogView.jsx b/src/components/BlogView.jsx new file mode 100644 index 000000000000..76725a5156ad --- /dev/null +++ b/src/components/BlogView.jsx @@ -0,0 +1,34 @@ +import React, { useState, useEffect, useCallback } from 'react'; + +const BlogsBanner = () => ( +
+
+
+
+

Blogs and instructions

+
+
+
+
+); + +export const BlogView = ({ content }) => { + console.log(content) + return ( +
+ +
+
+ +
+
+

{content}

+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/roots/blogView.jsx b/src/roots/blogView.jsx new file mode 100644 index 000000000000..7bf46d65e5d6 --- /dev/null +++ b/src/roots/blogView.jsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { BlogView } from '../components/BlogView'; +import { injectComponent } from '../utils/root'; + +document.addEventListener('DOMContentLoaded', () => { + const rootElement = document.getElementById('blog-view'); + if (!rootElement) { + console.error('Root element not found'); + return; + } + const content = rootElement.getAttribute('data-content') || ''; + console.log(content) + const component = ; + injectComponent(component, 'blog-view'); + }); + From f727ba76feb84d5cd2ee0e90adc5cc9e461a0419 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 7 Mar 2025 10:10:00 +0200 Subject: [PATCH 02/52] fetch blog content to react component --- content/_layouts/post.html | 11 ++- package-lock.json | 150 +++++++++++++++++++++++++++++++++++- package.json | 3 + src/components/BlogView.jsx | 51 ++++++------ 4 files changed, 185 insertions(+), 30 deletions(-) diff --git a/content/_layouts/post.html b/content/_layouts/post.html index 6fc58853e801..b662cd00c79b 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -3,14 +3,13 @@ react_source_files: - blogView.js --- -{% assign constants = site.data.site-constants %} -
- -
+{% assign constants = site.data.site-constants %} -{%- include react/root.html id='blog-view' -%} - +
+ {%- include react/root.html id='blog-view' -%} +
+
diff --git a/package-lock.json b/package-lock.json index 5d5801674850..11878a9fe9df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "dependencies": { "@cscfi/csc-ui": "^2.3.0", "@cscfi/csc-ui-react": "^2.3.0", + "dompurify": "^3.2.4", + "front-matter": "^4.0.2", + "gray-matter": "^4.0.3", "lunr": "^2.3.9" }, "devDependencies": { @@ -2026,6 +2029,13 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "license": "MIT", + "optional": true + }, "node_modules/@webassemblyjs/ast": { "version": "1.12.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", @@ -3158,6 +3168,15 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dompurify": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.4.tgz", + "integrity": "sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==", + "license": "(MPL-2.0 OR Apache-2.0)", + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } + }, "node_modules/domutils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", @@ -3283,6 +3302,19 @@ "node": ">=8.0.0" } }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "license": "BSD-2-Clause", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/esrecurse": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", @@ -3336,6 +3368,18 @@ "node": ">=0.8.x" } }, + "node_modules/extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==", + "license": "MIT", + "dependencies": { + "is-extendable": "^0.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -3579,6 +3623,37 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/front-matter": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz", + "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==", + "license": "MIT", + "dependencies": { + "js-yaml": "^3.13.1" + } + }, + "node_modules/front-matter/node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "license": "MIT", + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, + "node_modules/front-matter/node_modules/js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "license": "MIT", + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -3657,6 +3732,43 @@ "dev": true, "license": "ISC" }, + "node_modules/gray-matter": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz", + "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==", + "license": "MIT", + "dependencies": { + "js-yaml": "^3.13.1", + "kind-of": "^6.0.2", + "section-matter": "^1.0.0", + "strip-bom-string": "^1.0.0" + }, + "engines": { + "node": ">=6.0" + } + }, + "node_modules/gray-matter/node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "license": "MIT", + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, + "node_modules/gray-matter/node_modules/js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "license": "MIT", + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -3842,6 +3954,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-extendable": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", + "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -4016,7 +4137,6 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -5136,6 +5256,19 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/section-matter": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", + "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==", + "license": "MIT", + "dependencies": { + "extend-shallow": "^2.0.1", + "kind-of": "^6.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -5249,6 +5382,12 @@ "source-map": "^0.6.0" } }, + "node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", + "license": "BSD-3-Clause" + }, "node_modules/ssr-window": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", @@ -5368,6 +5507,15 @@ "node": ">=8" } }, + "node_modules/strip-bom-string": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz", + "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/style-loader": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz", diff --git a/package.json b/package.json index e404c228060d..e8bc60f1b91f 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,9 @@ "dependencies": { "@cscfi/csc-ui": "^2.3.0", "@cscfi/csc-ui-react": "^2.3.0", + "dompurify": "^3.2.4", + "front-matter": "^4.0.2", + "gray-matter": "^4.0.3", "lunr": "^2.3.9" }, "private": "true" diff --git a/src/components/BlogView.jsx b/src/components/BlogView.jsx index 76725a5156ad..ad5f72805029 100644 --- a/src/components/BlogView.jsx +++ b/src/components/BlogView.jsx @@ -1,32 +1,37 @@ import React, { useState, useEffect, useCallback } from 'react'; +import DOMPurify from 'dompurify' -const BlogsBanner = () => ( -
-
-
-
-

Blogs and instructions

-
-
-
-
-); +const createMarkup = (htmlString) => { + const safeHTML = DOMPurify.sanitize(htmlString); + return { __html: safeHTML }; +}; -export const BlogView = ({ content }) => { - console.log(content) - return ( -
- -
-
+export const BlogView = () => { -
-
-

{content}

-
-
+ const [content, setContent] = useState(''); + const [metadata, setMetadata] = useState({}); + + useEffect(() => { + // Get content from data attribute + const contentDiv = document.getElementById('blog-content'); + if (contentDiv) { + setContent(contentDiv.getAttribute('data-content')); + } + // Get metadata from JSON script + const metadataDiv = document.getElementById('blog-title'); + if (metadataDiv) { + setMetadata(metadataDiv.getAttribute('data-content')); + } + }, []); + console.log(metadata) + return ( +
+
+
+
+
From 51115a6ab33d2d50bcf1fbfb3309ca315e6ef68c Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 7 Mar 2025 10:11:52 +0200 Subject: [PATCH 03/52] all around styles iprovements --- src/components/AboutFiqci.jsx | 2 +- src/components/AccessCards.jsx | 180 ++++++++++++++-------------- src/components/Banner.jsx | 4 +- src/components/BlogCards.jsx | 2 +- src/components/Blogs.jsx | 2 +- src/components/EventCards.jsx | 2 +- src/components/Events.jsx | 2 +- src/components/Home.jsx | 22 ++-- src/components/NavigationHeader.jsx | 62 +++++----- src/components/SearchPage.jsx | 2 +- src/components/ServiceStatus.jsx | 2 +- src/roots/blogView.jsx | 22 ++-- src/stylesheets/main.css | 4 + 13 files changed, 158 insertions(+), 150 deletions(-) diff --git a/src/components/AboutFiqci.jsx b/src/components/AboutFiqci.jsx index 5981910627a6..8f00f104dcef 100644 --- a/src/components/AboutFiqci.jsx +++ b/src/components/AboutFiqci.jsx @@ -2,7 +2,7 @@ import React from "react"; export const AboutFiqci = () => { return ( -
+
diff --git a/src/components/AccessCards.jsx b/src/components/AccessCards.jsx index 8ab23f4b5c5d..f7db2d962dbd 100644 --- a/src/components/AccessCards.jsx +++ b/src/components/AccessCards.jsx @@ -4,98 +4,98 @@ import { CCard, CIcon, CCardContent } from '@cscfi/csc-ui-react'; import { mdiArrowRight, mdiOpenInNew } from '@mdi/js'; const AccessCardComponent = ({ title, teaser, description, links }) => { - return ( - - teaser - - - {title} - - -
{description}
- -
- {links.map((link, index) => ( - - {link.title} - - ))} -
- - - ); - }; - + return ( + + teaser + + + {title} + + +
{description}
+ +
+ {links.map((link, index) => ( + + {link.title} + + ))} +
+ + + ); +}; + export const AccessCard = () => { - return ( -
-
-

Get access

-
+ return ( +
+
+

Get access

+
-
- - - -
-
-
Other quantum resources will continuously be added to the FiQCI infrastructure.
- - +
+ + + +
+ -
- ); + +
+
Service status
+ +
+ +
+
+ ); }; diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx index 3f88188cf012..bd1da567179b 100644 --- a/src/components/Banner.jsx +++ b/src/components/Banner.jsx @@ -3,8 +3,8 @@ import React from 'react'; export const Banner = ({ title }) => { return (
-
-
+
+

{title}

diff --git a/src/components/BlogCards.jsx b/src/components/BlogCards.jsx index fde951a7491e..9856d96d127b 100644 --- a/src/components/BlogCards.jsx +++ b/src/components/BlogCards.jsx @@ -29,7 +29,7 @@ const BlogCardComponent = props => { const BlogCard = () => { return ( -
+

Blogs and instructions

diff --git a/src/components/Blogs.jsx b/src/components/Blogs.jsx index 7f79c12fabb8..12b8aec9718f 100644 --- a/src/components/Blogs.jsx +++ b/src/components/Blogs.jsx @@ -211,7 +211,7 @@ export const Blogs = () => { return (
-
+
diff --git a/src/components/EventCards.jsx b/src/components/EventCards.jsx index 574cee3b4c4d..1615a36e0407 100644 --- a/src/components/EventCards.jsx +++ b/src/components/EventCards.jsx @@ -34,7 +34,7 @@ const EventCardComponent = props => { const EventCard = () => { return ( -
+

Events

diff --git a/src/components/Events.jsx b/src/components/Events.jsx index 6acae7e39315..20db9915f88b 100644 --- a/src/components/Events.jsx +++ b/src/components/Events.jsx @@ -245,7 +245,7 @@ export const Events = () => { return (
-
+
diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 6eef2c89c1f6..436cfef3331b 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -4,9 +4,9 @@ import { CButton, CIcon } from '@cscfi/csc-ui-react'; import { mdiArrowRight, mdiArrowDown } from '@mdi/js'; const style = { - "--_c-button-font-size": 16, + "--_c-button-font-size": 25, "--_c-button-min-width": 0, - "--_c-button-height": "45px", + "--_c-button-height": "55px", "--_c-icon-color": "white" }; @@ -34,26 +34,26 @@ const ContentButton = ({ text, href, icon=mdiArrowDown }) => { export const Home = () => { return ( -
+
-
+
-
-
-

+
+
+

Making the power of quantum computing accessible

-

FiQCI - Finnish quantum-computing infrastructure

+

FiQCI - Finnish quantum-computing infrastructure

-
+
-

Open call for pilot access to Helmi quantum computer now open!

+

Open call for pilot access to Helmi quantum computer now open!

How to access Helmi, instructions
-
+
diff --git a/src/components/NavigationHeader.jsx b/src/components/NavigationHeader.jsx index 2a6a1a067491..da377df7bc76 100644 --- a/src/components/NavigationHeader.jsx +++ b/src/components/NavigationHeader.jsx @@ -4,7 +4,7 @@ import { CButton, CIcon } from '@cscfi/csc-ui-react'; import { mdiMagnify, mdiMenu } from '@mdi/js'; const style = { - "--_c-button-font-size": 12, + "--_c-button-font-size": 18, "--_c-button-min-width": 0, "--_c-button-height": "auto", "--_c-icon-color": "black" @@ -12,7 +12,8 @@ const style = { const NavButton = ({ text, href }) => { const isActive = window.location.pathname === href; - let styleClass = "text-black py-2"; + console.log(window.location.pathname) + let styleClass = "text-lg text-black py-2"; if (isActive) { styleClass += " underline underline-offset-8 decoration-2"; } @@ -30,20 +31,25 @@ const NavButton = ({ text, href }) => { }; const NavSearchButton = ({ text, href }) => { + const isActive = window.location.pathname === href; + let styleClass = "text-lg text-black py-2"; + if (isActive) { + styleClass += " underline underline-offset-8 decoration-2"; + } - return ( -
- (window.location.href = href)} - > -

{text}

- - -
- ); + return ( +
+ (window.location.href = href)} + > +

{text}

+ + +
+ ); }; export const NavigationHeader = () => { @@ -61,16 +67,16 @@ export const NavigationHeader = () => { } } if (isOpen) { //stop main content from scrolling when navigation menu open - document.body.style.overflow = 'hidden'; + document.body.style.overflow = 'hidden'; document.addEventListener("mousedown", handleClickOutside); document.addEventListener("touchstart", handleClickOutside); } - else{ - document.body.style.overflow = 'visible'; + else { + document.body.style.overflow = 'visible'; } // Clean up the listeners on unmount or when isOpen changes return () => { - document.body.style.overflow = 'visible'; + document.body.style.overflow = 'visible'; document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener("touchstart", handleClickOutside); }; @@ -85,7 +91,7 @@ export const NavigationHeader = () => { Logo
@@ -93,10 +99,10 @@ export const NavigationHeader = () => { {/* Desktop navigation */}
- - - - + + + +
{/* Mobile menu toggle */} @@ -109,10 +115,10 @@ export const NavigationHeader = () => { {isOpen && (
- - - - + + + +
)}
diff --git a/src/components/SearchPage.jsx b/src/components/SearchPage.jsx index b34e5b66eb23..50a5f23b09bf 100644 --- a/src/components/SearchPage.jsx +++ b/src/components/SearchPage.jsx @@ -331,7 +331,7 @@ export const SearchPage = () => { }; return ( -
+
diff --git a/src/components/ServiceStatus.jsx b/src/components/ServiceStatus.jsx index cf2270e57522..cdedd8864d32 100644 --- a/src/components/ServiceStatus.jsx +++ b/src/components/ServiceStatus.jsx @@ -8,7 +8,7 @@ export const ServiceStatus = () => { const status = useStatus('https://fiqci-backend-fiqci-workspace.2.rahtiapp.fi/healthcheck') return ( -
+
diff --git a/src/roots/blogView.jsx b/src/roots/blogView.jsx index 7bf46d65e5d6..15ed0031b2d3 100644 --- a/src/roots/blogView.jsx +++ b/src/roots/blogView.jsx @@ -1,16 +1,14 @@ import React from 'react'; import { BlogView } from '../components/BlogView'; +import { Banner } from '../components/Banner'; import { injectComponent } from '../utils/root'; -document.addEventListener('DOMContentLoaded', () => { - const rootElement = document.getElementById('blog-view'); - if (!rootElement) { - console.error('Root element not found'); - return; - } - const content = rootElement.getAttribute('data-content') || ''; - console.log(content) - const component = ; - injectComponent(component, 'blog-view'); - }); - + +const component = ( + <> + + + +) +injectComponent(component, 'blog-view'); + diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index b5c61c956711..59b12fffbcd3 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -1,3 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; + +.white-space-pre-line { + white-space: pre-line; +} \ No newline at end of file From 90dd4e3a00c18f7487c6923c1a95199143a4b0e0 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Wed, 12 Mar 2025 11:22:05 +0200 Subject: [PATCH 04/52] styke fixes --- src/components/AboutFiqci.jsx | 145 +++++++++++++++++---------------- src/components/AccessCards.jsx | 8 +- src/components/BlogCards.jsx | 4 +- src/components/EventCards.jsx | 4 +- src/components/Home.jsx | 12 +-- 5 files changed, 88 insertions(+), 85 deletions(-) diff --git a/src/components/AboutFiqci.jsx b/src/components/AboutFiqci.jsx index 8f00f104dcef..fa8e4c3cd28e 100644 --- a/src/components/AboutFiqci.jsx +++ b/src/components/AboutFiqci.jsx @@ -1,38 +1,17 @@ import React from "react"; export const AboutFiqci = () => { - return ( -
+ return ( +
-
-
-
+
+
+

About Fiqci

-
-
-

- The Finnish Quantum-Computing Infrastructure (FiQCI) was established - in 2020, when it became part of the Finnish Research Infrastructure - (FIRI) roadmap of significant national research infrastructures - within the Finnish research infrastructure ecosystem, maintained by - the Research Council of Finland. -

-

- The mission of FiQCI is to provide state-of-the-art quantum-computing - services such as computing time and training to the Finnish RDI - communities. This includes providing a hybrid high-performance - computing and quantum computing (HPC+QC) platform for developing, - testing, and exploiting quantum-accelerated computational workflows. -

-

- FiQCI is jointly maintained, operated, and developed by VTT, Aalto - University, and CSC – IT Center for Science. -

-
-
-
+
+

Through FiQCI, Finnish researchers have access to one of the most @@ -43,54 +22,78 @@ export const AboutFiqci = () => {

+
+
+
+

+ The Finnish Quantum-Computing Infrastructure (FiQCI) was established + in 2020, when it became part of the Finnish Research Infrastructure + (FIRI) roadmap of significant national research infrastructures + within the Finnish research infrastructure ecosystem, maintained by + the Research Council of Finland. +

+

+ The mission of FiQCI is to provide state-of-the-art quantum-computing + services such as computing time and training to the Finnish RDI + communities. This includes providing a hybrid high-performance + computing and quantum computing (HPC+QC) platform for developing, + testing, and exploiting quantum-accelerated computational workflows. +

+

+ FiQCI is jointly maintained, operated, and developed by VTT, Aalto + University, and CSC – IT Center for Science. +

+
+
+
-
-

- Scientific and Technical Advisory Group -

-
    -
  • - Dr. Alba Cervera Lierta, Barcelona Supercomputing Center, Spain -
    • -
  • Prof. Tommi Mikkonen, University of Jyväskylä, Finland
    • -
  • - Prof. Martin Schulz, Technical University of Munich, Germany -
    • -
  • - Prof. Göran Wendin, Chalmers University of Technology, Sweden -
    • -
-
+
+

+ Scientific and Technical Advisory Group +

+
    +
  • + Dr. Alba Cervera Lierta, Barcelona Supercomputing Center, Spain +
    • +
  • Prof. Tommi Mikkonen, University of Jyväskylä, Finland
    • +
  • + Prof. Martin Schulz, Technical University of Munich, Germany +
    • +
  • + Prof. Göran Wendin, Chalmers University of Technology, Sweden +
    • +
+
-
-

Management

-
    -
  • Prof. Mika Prunnila, VTT, FiQCI director
    • -
  • Dr. Mikael Johansson, CSC, FiQCI vice-director
    • -
  • Prof. Tapio Ala-Nissilä, Aalto University, FiQCI vice-director
    • -
-
+
+

Management

+
    +
  • Prof. Mika Prunnila, VTT, FiQCI director
    • +
  • Dr. Mikael Johansson, CSC, FiQCI vice-director
    • +
  • Prof. Tapio Ala-Nissilä, Aalto University, FiQCI vice-director
    • +
+
-
-

Acknowledgement

-

- When publishing the results that utilise the FiQCI infrastructure, - users should acknowledge the use of FiQCI, preferably in the format: - - {" "} - "These [results] have been acquired using the Finnish - Quantum-Computing Infrastructure (https://fiqci.fi)". - - - Additionally, users should also acknowledge using Helmi if - applicable. - -

-
+
+

Acknowledgement

+

+ When publishing the results that utilise the FiQCI infrastructure, + users should acknowledge the use of FiQCI, preferably in the format: + + {" "} + "These [results] have been acquired using the Finnish + Quantum-Computing Infrastructure (https://fiqci.fi)". + + + Additionally, users should also acknowledge using Helmi if + applicable. + +

+
-
- ); +
+ ); }; diff --git a/src/components/AccessCards.jsx b/src/components/AccessCards.jsx index f7db2d962dbd..b51d5c39cc8d 100644 --- a/src/components/AccessCards.jsx +++ b/src/components/AccessCards.jsx @@ -11,12 +11,12 @@ const AccessCardComponent = ({ title, teaser, description, links }) => { alt="teaser" className="w-full h-60 object-cover" /> - + {title} -
{description}
+
{description}
{links.map((link, index) => ( @@ -33,7 +33,7 @@ const AccessCardComponent = ({ title, teaser, description, links }) => { export const AccessCard = () => { return ( -
+

Get access

@@ -82,7 +82,7 @@ export const AccessCard = () => { } />
-
+
Other quantum resources will continuously be added to the FiQCI infrastructure.
{ const BlogCard = () => { return ( -
+

Blogs and instructions

@@ -42,7 +42,7 @@ const BlogCard = () => { href="#" className="text-sky-800 hover:underline font-bold" > -
+
All blogs and instructions
diff --git a/src/components/EventCards.jsx b/src/components/EventCards.jsx index 1615a36e0407..929bfc2e8100 100644 --- a/src/components/EventCards.jsx +++ b/src/components/EventCards.jsx @@ -34,7 +34,7 @@ const EventCardComponent = props => { const EventCard = () => { return ( -
+

Events

@@ -47,7 +47,7 @@ const EventCard = () => { href="#" className="text-sky-800 hover:underline font-bold" > -
+
All events
diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 436cfef3331b..11fa7de0c50c 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -34,10 +34,10 @@ const ContentButton = ({ text, href, icon=mdiArrowDown }) => { export const Home = () => { return ( -
+
-
+
@@ -49,11 +49,11 @@ export const Home = () => {
-
-

Open call for pilot access to Helmi quantum computer now open!

- How to access Helmi, instructions + -
+
From 4a68af46be1e405d852d8bd69d1672df90e7e240 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Wed, 12 Mar 2025 11:40:56 +0200 Subject: [PATCH 05/52] fix blog text not displaying --- src/components/BlogView.jsx | 10 ++++++++-- src/roots/blogView.jsx | 14 +++----------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/BlogView.jsx b/src/components/BlogView.jsx index ad5f72805029..7b499ee00a86 100644 --- a/src/components/BlogView.jsx +++ b/src/components/BlogView.jsx @@ -1,5 +1,6 @@ import React, { useState, useEffect, useCallback } from 'react'; import DOMPurify from 'dompurify' +import { meta } from '@eslint/js'; const createMarkup = (htmlString) => { const safeHTML = DOMPurify.sanitize(htmlString); @@ -9,7 +10,7 @@ const createMarkup = (htmlString) => { export const BlogView = () => { const [content, setContent] = useState(''); - const [metadata, setMetadata] = useState({}); + const [metadata, setMetadata] = useState(''); useEffect(() => { // Get content from data attribute @@ -17,20 +18,25 @@ export const BlogView = () => { if (contentDiv) { setContent(contentDiv.getAttribute('data-content')); } + console.log(contentDiv.getAttribute('data-content')) // Get metadata from JSON script const metadataDiv = document.getElementById('blog-title'); if (metadataDiv) { setMetadata(metadataDiv.getAttribute('data-content')); } + console.log(metadataDiv.getAttribute('data-content')) }, []); - console.log(metadata) + + console.log(content); + return (
+

{metadata}

diff --git a/src/roots/blogView.jsx b/src/roots/blogView.jsx index 7bf46d65e5d6..713549e8b0a1 100644 --- a/src/roots/blogView.jsx +++ b/src/roots/blogView.jsx @@ -2,15 +2,7 @@ import React from 'react'; import { BlogView } from '../components/BlogView'; import { injectComponent } from '../utils/root'; -document.addEventListener('DOMContentLoaded', () => { - const rootElement = document.getElementById('blog-view'); - if (!rootElement) { - console.error('Root element not found'); - return; - } - const content = rootElement.getAttribute('data-content') || ''; - console.log(content) - const component = ; - injectComponent(component, 'blog-view'); - }); + +const component = ; +injectComponent(component, 'blog-view'); From fc08afcffb4efbe39911383ec5e212f4ff0e4a40 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 14 Mar 2025 15:29:24 +0200 Subject: [PATCH 06/52] add get access page --- content/pages/access.md | 23 +------ src/components/GetAccess.jsx | 126 +++++++++++++++++++++++++++++++++++ src/roots/getAccess.jsx | 15 +++++ 3 files changed, 144 insertions(+), 20 deletions(-) create mode 100644 src/components/GetAccess.jsx create mode 100644 src/roots/getAccess.jsx diff --git a/content/pages/access.md b/content/pages/access.md index 1a0f5cb87714..77dda5a3a2dd 100644 --- a/content/pages/access.md +++ b/content/pages/access.md @@ -2,25 +2,8 @@ title: How to get access layout: page subtitle: Access to FiQCI is granted through the CSC supercomputing environment +react_source_files: + - getAccess.js --- -## Accessing the FiQCI infrastructure - -The main access portal to the real quantum computing resources is through the LUMI supercomputer environment. Kvasi, the Quantum Learning Machine can be accessed directly. - -### Access to Helmi - -The pilot phase for Helmi access is now running! [More details here](_posts/2022-11-01-Helmi-pilot/), with instructions on how to apply for a pilot project. - -Getting started [here](_posts/2024-08-23-Lumi_web_introduction/) with instructions how to interact with Helmi though LUMI web interface. - -### Access to Kvasi - -See the [Kvasi documentation](https://docs.csc.fi/computing/quantum-computing/overview/#kvasi) for details on how to connect to Kvasi. - -### Access to LUMI - -See the [LUMI webpage](https://www.lumi-supercomputer.eu/get-started-2021/users-in-finland/) for details on how to get access to the LUMI environment. - - - +{%- include react/root.html id='access' -%} \ No newline at end of file diff --git a/src/components/GetAccess.jsx b/src/components/GetAccess.jsx new file mode 100644 index 000000000000..69a62328c86e --- /dev/null +++ b/src/components/GetAccess.jsx @@ -0,0 +1,126 @@ +import React from "react"; +import { useEffect } from "react"; +import { Breadcrumbs } from "./Breadcrumbs"; +import { mdiArrowRight, mdiOpenInNew } from '@mdi/js'; + +const ResourceCard = ({ resource }) => { + return ( +
+
+ +
+ +
+

{resource.name}

+

{resource.desc.trim()}

+
+ {resource.links.map((link, index) => ( + + {link.teaser} + + ))} +
+
+
+ + + ); +}; + +const ResourceList = ({ id, title, resources }) => { + return ( +
+

{title}

+
+ {resources.map((resource, index) => ( + + ))} +
+
+ ) +} + +const quantum_resources = [ + { + name: "Helmi", + desc: `Helmi (VTT Q5), the Finnish quantum computer operated by VTT, co-developed with IQM. + Helmi is based on superconducting technology, and presently provides five qubits. Upgrades to + 20, then 50 qubits is planned for the near future. Helmi is accessible through the + LUMI supercomputer environment. The pilot phase for Helmi access is now running!`, + image: "/assets/images/vtt-images/VTT_lab-2.jpg", + links: [ + { + link: "", + teaser: "How to access Helmi, instructions", + icon: mdiArrowRight, + }, + { + link: "", + teaser: "Read more about Helmi (VTT website)", + icon: mdiOpenInNew, + }, + ], + }, + { + name: "VTT Q50", + desc: `Lorem ipsum the Finnish quantum computer operated by VTT, co-developed with IQM. + Lorem ipsum is accessible through the LUMI supercomputer environment. The pilot phase for + VTT Q50 access is now running!`, + image: "/assets/images/vtt-images/VTT_lab-2.jpg", + links: [ + { + link: "", + teaser: "How to access VTT Q50, instructions", + icon: mdiArrowRight, + }, + { + link: "", + teaser: "Read more about VTT Q50 (VTT website)", + icon: mdiOpenInNew, + }, + ], + } +]; + +export const GetAccess = () => { + + useEffect(() => { + console.log(window.location.hash); + if (window.location.hash !== "") { + const hash = window.location.hash; + const element = document.getElementById(hash.substring(1)); + if (element) { + const elementPosition = element.getBoundingClientRect().top + window.pageYOffset; + const offsetPosition = elementPosition - 100; + + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } + } + }, []); + + return ( +
+
+
+ +
+
+
+

Please see status of services from Status -page

+ + + + + + +
+
+
+ ); +}; diff --git a/src/roots/getAccess.jsx b/src/roots/getAccess.jsx new file mode 100644 index 000000000000..146fb2e73941 --- /dev/null +++ b/src/roots/getAccess.jsx @@ -0,0 +1,15 @@ +import React from 'react' +import { GetAccess } from '../components/GetAccess' +import { Banner } from '../components/Banner' +import { injectComponent } from '../utils/root' + +const component = ( + <> + + + + ); + +const rootId = 'access' + +injectComponent(component, rootId) \ No newline at end of file From fa270dea75468da9137ce3e456a6e2afe453a50d Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 14 Mar 2025 15:29:46 +0200 Subject: [PATCH 07/52] add about fiqci page --- content/pages/about.md | 51 ++------------------------ src/components/AboutPage.jsx | 69 ++++++++++++++++++++++++++++++++++++ src/roots/aboutPage.jsx | 15 ++++++++ 3 files changed, 87 insertions(+), 48 deletions(-) create mode 100644 src/components/AboutPage.jsx create mode 100644 src/roots/aboutPage.jsx diff --git a/content/pages/about.md b/content/pages/about.md index 5c111746756c..651fb11be62f 100644 --- a/content/pages/about.md +++ b/content/pages/about.md @@ -2,55 +2,10 @@ layout: page title: About subtitle: The FiQCI consortium maintains, operates, and develops the infrastructure +react_source_files: + - aboutPage.js --- -## In Brief +{%- include react/root.html id='about' -%} -The Finnish Quantum-Computing Infrastructure (FiQCI) was established in 2020, when it became part of the Finnish Research Infrastructure (FIRI) roadmap of significant national research infrastructures within the Finnish research infrastructure ecosystem, maintained by the Research Council of Finland. -The mission of FiQCI is to provide state-of-the-art quantum-computing services such as computing time and training to the Finnish RDI communities. This includes providing a hybrid high-performance computing and quantum computing (HPC+QC) platform for developing, testing, and exploiting quantum-accelerated computational workflows. Through FiQCI, Finnish researchers have access to one of the most powerful hybrid HPC+nQC resources in the world, available for quantum accelerated research and development. The infrastructure also aims to offer possibilities to carry out experiments in quantum physics. - -FiQCI is jointly maintained, operated, and developed by **VTT**, **Aalto University**, and **CSC – IT Center for Science**. - -## Components - -### LUMI supercomputer - -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. For more information, see [https://www.lumi-supercomputer.eu/](https://www.lumi-supercomputer.eu/) - -### Helmi quantum computer - -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. - -### Kvasi quantum computer simulator - -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. For more information, see [https://research.csc.fi/-/kvasi](https://research.csc.fi/-/kvasi) - -### Other resources - -Other quantum resources will continuously be added to the FiQCI infrastructure. - -## Scientific and Technical Advisory Group - -The Scientific and Technical Advisory Group (STAG) provides input for the operation of the infrastructure. The current (2023) members of the STAG are: - -* Dr. Valeria Bartsch, Fraunhofer Institute for Industrial Mathematics, Germany -* Dr. Alba Cervera Lierta, Barcelona Supercomputing Center, Spain -* Prof. Tommi Mikkonen, University of Jyväskylä, Finland -* Prof. Martin Schulz, Technical University of Munich, Germany -* Prof. Göran Wendin, Chalmers University of Technology, Sweden - -## Management - -* Prof. Mika Prunnila, VTT, FiQCI director -* Dr. Mikael Johansson, CSC, FiQCI vice-director -* Prof. Tapio Ala-Nissilä, Aalto University, FiQCI vice-director - -## Acknowledgement - -When publishing the results that utilise the FiQCI infrastructure, users should acknowledge the use of FiQCI, preferably in the format: "These [results] have been acquired using the Finnish Quantum-Computing Infrastructure (https://fiqci.fi)". [Additionally, users should also acknowledge using Helmi if applicable](./posts/2022-11-01-Helmi-pilot.md#acknowledgement). - - -## Supported by - -TODO diff --git a/src/components/AboutPage.jsx b/src/components/AboutPage.jsx new file mode 100644 index 000000000000..103b6c268716 --- /dev/null +++ b/src/components/AboutPage.jsx @@ -0,0 +1,69 @@ +import React from "react"; +import { Breadcrumbs } from "./Breadcrumbs"; + +export const AboutPage = () => { + return ( +
+
+
+ +
+

About FiQCI

+
+

+ The Finnish Quantum-Computing Infrastructure (FiQCI) was established in 2020, when it became + part of the Finnish Research Infrastructure (FIRI) roadmap of significant national research + infrastructures within the Finnish research infrastructure ecosystem, maintained by the + Research Council of Finland. +

+

+

+ The mission of FiQCI is to provide state-of-the-art quantum-computing services such as + computing time and training to the Finnish RDI communities. This includes providing a + hybrid high-performance computing and quantum computing (HPC+QC) platform for developing, + testing, and exploiting quantum-accelerated computational workflows. Through FiQCI, Finnish + researchers have access to one of the most powerful hybrid HPC+nQC resources in the world, + available for quantum accelerated research and development. The infrastructure also aims to + offer possibilities to carry out experiments in quantum physics. +

+

+

+ FiQCI is jointly maintained, operated, and developed by VTT, Aalto University, and + CSC - IT Center for Science. +

+
+ +
+

Scientific and Technical Advisory Group

+

+ The Scientific and Technical Advisory Group (STAG) provides input for the operation + of the infrastructure. The current (2023) members of the STAG are: +

+
    +
  • Dr. Valeria Bartsch, Fraunhofer Institute for Industrial Mathematics, Germany
    • +
  • Dr. Alba Cervera Lierta, Barcelona Supercomputing Center, Spain
    • +
  • Prof. Tommi Mikkonen, University of Jyväskylä, Finland
    • +
  • Prof. Martin Schulz, Technical University of Munich, Germany
    • +
  • Prof. Göran Wendin, Chalmers University of Technology, Sweden
    • +
+ +

Management

+
    +
  • Prof. Mika Prunnila, VTT, FiQCI director
    • +
  • Dr. Mikael Johansson, CSC, FiQCI vice-director
    • +
  • Prof. Tapio Ala-Nissilä, Aalto University, FiQCI vice-director
    • +
+ +

Acknowledgement

+

+ When publishing the results that utilise the FiQCI infrastructure, users should acknowledge + the use of FiQCI, preferably in the format: "These results have been acquired using the + Finnish Quantum-Computing Infrastructure (https://fiqci.fi)". + Additionally, users should also acknowledge using Helmi if applicable +

+
+ +
+
+ ) +} \ No newline at end of file diff --git a/src/roots/aboutPage.jsx b/src/roots/aboutPage.jsx new file mode 100644 index 000000000000..1332b39373a1 --- /dev/null +++ b/src/roots/aboutPage.jsx @@ -0,0 +1,15 @@ +import React from 'react' +import { AboutPage } from '../components/AboutPage' +import { Banner } from '../components/Banner' +import { injectComponent } from '../utils/root' + +const component = ( + <> + + + + ); + +const rootId = 'about' + +injectComponent(component, rootId) \ No newline at end of file From c50c82b40ffcc97804333c1beaec5d64650a92ed Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 14 Mar 2025 15:30:18 +0200 Subject: [PATCH 08/52] improve styles, fix bugs, correct content --- src/components/AboutFiqci.jsx | 171 ++++++++++++++-------------- src/components/AccessCards.jsx | 37 +++--- src/components/BlogCards.jsx | 2 +- src/components/Blogs.jsx | 2 +- src/components/EventCards.jsx | 2 +- src/components/Events.jsx | 2 +- src/components/Footer.jsx | 87 +++++++------- src/components/Home.jsx | 34 ++++-- src/components/NavigationHeader.jsx | 23 ++-- src/components/SearchPage.jsx | 2 +- 10 files changed, 186 insertions(+), 176 deletions(-) diff --git a/src/components/AboutFiqci.jsx b/src/components/AboutFiqci.jsx index fa8e4c3cd28e..b29e8272c8c8 100644 --- a/src/components/AboutFiqci.jsx +++ b/src/components/AboutFiqci.jsx @@ -1,97 +1,98 @@ import React from "react"; +import { mdiArrowRight } from '@mdi/js'; +import { CIcon } from '@cscfi/csc-ui-react'; -export const AboutFiqci = () => { +const AboutHeader = () => { return ( -
+
+

FiQCI mission

+
+ ) +} -
-
-
-
-
-

About Fiqci

-
-
-
-

- Through FiQCI, Finnish researchers have access to one of the most - powerful hybrid HPC+nQC resources in the world. -

-

- Available for quantum-accelerated research and development. -

-
-
-
-
-
-

- The Finnish Quantum-Computing Infrastructure (FiQCI) was established - in 2020, when it became part of the Finnish Research Infrastructure - (FIRI) roadmap of significant national research infrastructures - within the Finnish research infrastructure ecosystem, maintained by - the Research Council of Finland. -

-

- The mission of FiQCI is to provide state-of-the-art quantum-computing - services such as computing time and training to the Finnish RDI - communities. This includes providing a hybrid high-performance - computing and quantum computing (HPC+QC) platform for developing, - testing, and exploiting quantum-accelerated computational workflows. -

-

- FiQCI is jointly maintained, operated, and developed by VTT, Aalto - University, and CSC – IT Center for Science. -

-
-
- +const BlueBox = () => { + return ( +
+
+

+ Through FiQCI, Finnish researchers have access to one of the most + powerful hybrid HPC+nQC resources in the world. +

+

+ Available for quantum-accelerated research and development. +

+
+
+ ) +} + +const TextContent = () => { + return ( +
+

+ The mission of FiQCI is to provide state-of-the-art quantum-computing + services such as computing time and training to the Finnish RDI communities. + This includes providing a hybrid high-performance computing and quantum computing + (HPC+QC) platform for developing, testing, and exploiting quantum-accelerated + computational workflows. Through FiQCI, Finnish researchers have access to one + of the most powerful hybrid HPC+nQC resources in the world, available for + quantum accelerated research and development. The infrastructure also aims + to offer possibilities to carry out experiments in quantum physics. +

+

+ FiQCI is jointly maintained, operated, and developed by VTT, Aalto + University, and CSC – IT Center for Science. +

+ + + +
-
-

- Scientific and Technical Advisory Group -

-
    -
  • - Dr. Alba Cervera Lierta, Barcelona Supercomputing Center, Spain -
    • -
  • Prof. Tommi Mikkonen, University of Jyväskylä, Finland
    • -
  • - Prof. Martin Schulz, Technical University of Munich, Germany -
    • -
  • - Prof. Göran Wendin, Chalmers University of Technology, Sweden -
    • -
-
+ ) +} -
-

Management

-
    -
  • Prof. Mika Prunnila, VTT, FiQCI director
    • -
  • Dr. Mikael Johansson, CSC, FiQCI vice-director
    • -
  • Prof. Tapio Ala-Nissilä, Aalto University, FiQCI vice-director
    • -
-
+export const AboutFiqci = () => { + return ( +
-
-

Acknowledgement

-

- When publishing the results that utilise the FiQCI infrastructure, - users should acknowledge the use of FiQCI, preferably in the format: - - {" "} - "These [results] have been acquired using the Finnish - Quantum-Computing Infrastructure (https://fiqci.fi)". - - - Additionally, users should also acknowledge using Helmi if - applicable. - -

-
+
+
+
+
+ + +
+ +
+ +
+
+ + + +
+
diff --git a/src/components/AccessCards.jsx b/src/components/AccessCards.jsx index b51d5c39cc8d..d784ad04b6e5 100644 --- a/src/components/AccessCards.jsx +++ b/src/components/AccessCards.jsx @@ -5,7 +5,7 @@ import { mdiArrowRight, mdiOpenInNew } from '@mdi/js'; const AccessCardComponent = ({ title, teaser, description, links }) => { return ( - + teaser { export const AccessCard = () => { return ( -
+
-

Get access

+

Resources

diff --git a/src/components/Blogs.jsx b/src/components/Blogs.jsx index 12b8aec9718f..ae2689e0d695 100644 --- a/src/components/Blogs.jsx +++ b/src/components/Blogs.jsx @@ -211,7 +211,7 @@ export const Blogs = () => { return (
-
+
diff --git a/src/components/EventCards.jsx b/src/components/EventCards.jsx index 929bfc2e8100..7fea786f43c7 100644 --- a/src/components/EventCards.jsx +++ b/src/components/EventCards.jsx @@ -44,7 +44,7 @@ const EventCard = () => {
diff --git a/src/components/Events.jsx b/src/components/Events.jsx index 20db9915f88b..798cc7b826ae 100644 --- a/src/components/Events.jsx +++ b/src/components/Events.jsx @@ -245,7 +245,7 @@ export const Events = () => { return (
-
+
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 1f7a4adce8f0..d229e1af3a10 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -3,53 +3,56 @@ import React from 'react'; export const Footer = () => { return (
-
-
-
-

Brought to you by:

-
- VTT - Aalto University - CSC -
-
+
+ - -
-
-

- © 2024 The FiQCI Consortium. Powered by{" "} - - Jekyll - {" "} - &{" "} - - Minimal Mistakes - . -

-
- - Cookies - - - Accessibility statements - +
+
+
+

+ © 2024 The FiQCI Consortium. Powered by{" "} + + Jekyll + {" "} + &{" "} + + Minimal Mistakes + . +

+
diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 11fa7de0c50c..35f4a17e43be 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -13,35 +13,45 @@ const style = { const ContentButton = ({ text, href, icon=mdiArrowDown }) => { const isActive = window.location.pathname === href; - var styleClass = "text-white text-md py-3" + var styleClass = "text-white text-sm sm:text-md py-3 break-words" if (isActive) { styleClass = styleClass } return ( +
(window.location.href = href)} >

{text}

 + (window.location.href = href)} + > +

{text}

+ + +
); }; export const Home = () => { return ( -
+
-
+
-
-

+
+

Making the power of quantum computing accessible

FiQCI - Finnish quantum-computing infrastructure

@@ -51,12 +61,12 @@ export const Home = () => {

Open call for pilot access to Helmi quantum computer now open!

- How to access Helmi, instructions + How to access Helmi, instructions
- - - + + +
diff --git a/src/components/NavigationHeader.jsx b/src/components/NavigationHeader.jsx index da377df7bc76..f89dd764c240 100644 --- a/src/components/NavigationHeader.jsx +++ b/src/components/NavigationHeader.jsx @@ -12,15 +12,14 @@ const style = { const NavButton = ({ text, href }) => { const isActive = window.location.pathname === href; - console.log(window.location.pathname) - let styleClass = "text-lg text-black py-2"; + let styleClass = "text-base text-black py-2"; if (isActive) { styleClass += " underline underline-offset-8 decoration-2"; } return ( (window.location.href = href)} @@ -32,7 +31,7 @@ const NavButton = ({ text, href }) => { const NavSearchButton = ({ text, href }) => { const isActive = window.location.pathname === href; - let styleClass = "text-lg text-black py-2"; + let styleClass = "text-base text-black text-left py-2"; if (isActive) { styleClass += " underline underline-offset-8 decoration-2"; } @@ -40,7 +39,7 @@ const NavSearchButton = ({ text, href }) => { return (
(window.location.href = href)} @@ -85,13 +84,13 @@ export const NavigationHeader = () => { return ( // Attach the ref here so clicks inside this container won't close the menu.
-
+
@@ -99,8 +98,10 @@ export const NavigationHeader = () => { {/* Desktop navigation */}
- + + +
@@ -113,10 +114,12 @@ export const NavigationHeader = () => { {/* Mobile navigation menu */} {isOpen && ( -
+
- + + +
diff --git a/src/components/SearchPage.jsx b/src/components/SearchPage.jsx index 50a5f23b09bf..88ec7ec6e429 100644 --- a/src/components/SearchPage.jsx +++ b/src/components/SearchPage.jsx @@ -331,7 +331,7 @@ export const SearchPage = () => { }; return ( -
+
From e61329321df861eef92e09c7e0177a08c31af4c0 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 14 Mar 2025 16:36:40 +0200 Subject: [PATCH 09/52] add new nav links --- content/site.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/content/site.js b/content/site.js index 9a6a2fe57d21..321c3e1f59d4 100644 --- a/content/site.js +++ b/content/site.js @@ -7,11 +7,13 @@ "logo": "{{ values.logo | relative_url }}", "baseUrl": "{{ site.baseurl }}", "topNav": [ - { "title": "Home", "href": "{{ site.baseurl }}", "key": 0 }, - { "title": "Blogs and instructions", "href": "{{ '/publications' | relative_url }}", "key": 1 }, + { "title": "Home", "href": "{{ '/' | relative_url }}", "key": 0 }, + { "title": "Get access", "href": "{{ '/access' | 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 } + { "title": "About FiQCI", "href": "{{ '/about' | relative_url }}", "key": 3 }, + { "title": "Blogs and instructions", "href": "{{ '/publications' | relative_url }}", "key": 4 }, + { "title": "Events", "href": "{{ '/events' | relative_url }}", "key": 5 }, + { "title": "Search", "href": "{{ '/search' | relative_url }}", "key": 6 } ], "cardNav": [ { "title": "How to get access", "href": "{{ '/access' | relative_url }}", "key": 5 }, From 49a39194e87bc68bbc6c4d5c84fb5094a069dd38 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 14 Mar 2025 16:36:55 +0200 Subject: [PATCH 10/52] fix links --- src/components/AccessCards.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/AccessCards.jsx b/src/components/AccessCards.jsx index d784ad04b6e5..3df747f2ebd7 100644 --- a/src/components/AccessCards.jsx +++ b/src/components/AccessCards.jsx @@ -32,6 +32,7 @@ const AccessCardComponent = ({ title, teaser, description, links }) => { export const AccessCard = () => { + const accessUrl = SITE.constants.topNav.find(elem => elem.title === "Get access").href return (
@@ -46,7 +47,7 @@ export const AccessCard = () => { links={ [ { - ref: "/access/#quantum", title: "Quantum computer resources", icon: mdiArrowRight + ref: accessUrl+"/#quantum", title: "Quantum computer resources", icon: mdiArrowRight } ] } @@ -58,7 +59,7 @@ export const AccessCard = () => { links={ [ { - ref: "/access/#super", title: "Supercomputer resources", icon: mdiArrowRight + ref: accessUrl+"/#super", title: "Supercomputer resources", icon: mdiArrowRight }, ] } @@ -70,7 +71,7 @@ export const AccessCard = () => { links={ [ { - ref: "/access/#emulation", title: "Emulation resources", icon: mdiArrowRight + ref: accessUrl+"/#emulation", title: "Emulation resources", icon: mdiArrowRight }, ] } From 097434a0e91f8f5716f2aaf9cb3224760dcf45db Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 14 Mar 2025 16:37:17 +0200 Subject: [PATCH 11/52] remove print --- src/components/GetAccess.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/GetAccess.jsx b/src/components/GetAccess.jsx index 69a62328c86e..fd4fac7c548a 100644 --- a/src/components/GetAccess.jsx +++ b/src/components/GetAccess.jsx @@ -88,7 +88,6 @@ const quantum_resources = [ export const GetAccess = () => { useEffect(() => { - console.log(window.location.hash); if (window.location.hash !== "") { const hash = window.location.hash; const element = document.getElementById(hash.substring(1)); From be49254cc4b39b84e6cf122f57f64418c4b1322c Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 14 Mar 2025 16:37:31 +0200 Subject: [PATCH 12/52] typo --- src/components/Home.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 2fdc3e72f42a..e6cf0a316709 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -52,7 +52,7 @@ export const Home = () => { .map(([page, icon]) => ) return ( -
+
From 1b76d087736e89ff1c44df4c7c9608ad1fb2ddb5 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 14 Mar 2025 18:36:09 +0200 Subject: [PATCH 13/52] add latex and code block support, define styles, references accordion --- content/_layouts/post.html | 2 +- package-lock.json | 38 +++++++++++++++- package.json | 5 ++- src/components/BlogView.jsx | 86 +++++++++++++++++++++++++++++-------- src/roots/blogView.jsx | 14 ++++-- src/stylesheets/main.css | 72 +++++++++++++++++++++++++++++++ 6 files changed, 193 insertions(+), 24 deletions(-) diff --git a/content/_layouts/post.html b/content/_layouts/post.html index b662cd00c79b..7b7bab3b9834 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -9,7 +9,7 @@
{%- include react/root.html id='blog-view' -%} -
+
diff --git a/package-lock.json b/package-lock.json index 11878a9fe9df..e777e8ea0edc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,9 @@ "dompurify": "^3.2.4", "front-matter": "^4.0.2", "gray-matter": "^4.0.3", - "lunr": "^2.3.9" + "katex": "^0.16.21", + "lunr": "^2.3.9", + "prismjs": "^1.30.0" }, "devDependencies": { "@babel/core": "^7.26.0", @@ -4133,6 +4135,31 @@ "node": ">=6" } }, + "node_modules/katex": { + "version": "0.16.21", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.21.tgz", + "integrity": "sha512-XvqR7FgOHtWupfMiigNzmh+MgUVmDGU2kXZm899ZkPfcuoPuFxyHmXsgATDpFZDAXCI8tvinaVcDo8PIIJSo4A==", + "funding": [ + "https://opencollective.com/katex", + "https://github.com/sponsors/katex" + ], + "license": "MIT", + "dependencies": { + "commander": "^8.3.0" + }, + "bin": { + "katex": "cli.js" + } + }, + "node_modules/katex/node_modules/commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "license": "MIT", + "engines": { + "node": ">= 12" + } + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -4921,6 +4948,15 @@ "dev": true, "license": "MIT" }, + "node_modules/prismjs": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", + "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index e8bc60f1b91f..2da7a02fb15d 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "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-dep": "npx concurrently --kill-others --prefix-colors ${npm_package_config_conc_colors} --passthrough-arguments 'npm:tailwindcss -- {1}' 'npm:webpack -- --mode=development {1}' 'bash -c \"JEKYLL_ENV=production npm run 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" }, @@ -55,7 +56,9 @@ "dompurify": "^3.2.4", "front-matter": "^4.0.2", "gray-matter": "^4.0.3", - "lunr": "^2.3.9" + "katex": "^0.16.21", + "lunr": "^2.3.9", + "prismjs": "^1.30.0" }, "private": "true" } diff --git a/src/components/BlogView.jsx b/src/components/BlogView.jsx index 7b499ee00a86..598f5c70161e 100644 --- a/src/components/BlogView.jsx +++ b/src/components/BlogView.jsx @@ -1,6 +1,11 @@ -import React, { useState, useEffect, useCallback } from 'react'; -import DOMPurify from 'dompurify' -import { meta } from '@eslint/js'; +import React, { useState, useEffect } from 'react'; +import DOMPurify from 'dompurify'; +import Prism from 'prismjs'; +import 'prismjs/themes/prism.css'; +import 'katex/dist/katex.min.css'; +import renderMathInElement from 'katex/contrib/auto-render/auto-render'; +import { Breadcrumbs } from './Breadcrumbs'; +import { CAccordion, CAccordionItem } from '@cscfi/csc-ui-react'; const createMarkup = (htmlString) => { const safeHTML = DOMPurify.sanitize(htmlString); @@ -8,38 +13,83 @@ const createMarkup = (htmlString) => { }; export const BlogView = () => { - const [content, setContent] = useState(''); const [metadata, setMetadata] = useState(''); + const [referencesContent, setReferencesContent] = useState(null); + + useEffect(() => { + // Use MutationObserver to wait for content to be fully loaded + const observer = new MutationObserver(() => { + var referencesHeader = document.getElementById('references-'); + if (!referencesHeader) { + referencesHeader = document.getElementById('references'); + } + if (referencesHeader) { + const referencesList = referencesHeader.nextElementSibling; + if (referencesList && referencesList.tagName === 'OL') { + setReferencesContent(referencesList.innerHTML); + // Remove the original OL element to prevent duplication + referencesList.remove(); + referencesHeader.remove(); + } + } + }); + + observer.observe(document.body, { + childList: true, + subtree: true, + }); + // Cleanup the observer when the component unmounts + return () => observer.disconnect(); + }, []); useEffect(() => { - // Get content from data attribute const contentDiv = document.getElementById('blog-content'); if (contentDiv) { setContent(contentDiv.getAttribute('data-content')); } - console.log(contentDiv.getAttribute('data-content')) - // Get metadata from JSON script const metadataDiv = document.getElementById('blog-title'); if (metadataDiv) { setMetadata(metadataDiv.getAttribute('data-content')); } - console.log(metadataDiv.getAttribute('data-content')) }, []); - console.log(content); + useEffect(() => { + if (content) { + requestAnimationFrame(() => { + Prism.highlightAll(); + renderMathInElement(document.getElementById('rendered-content'), { + delimiters: [ + { left: '$$', right: '$$', display: true }, + { left: '$', right: '$', display: false }, + { left: '\\[', right: '\\]', display: true }, + { left: '\\(', right: '\\)', display: false }, + ] + }); + }); + } + }, [content]); return ( -
-
-
- +
+
+
+ +
+
+
+

{metadata}

+
+ {referencesContent && ( + + +
    + + + )}
-

{metadata}

-
- - ) -} \ No newline at end of file + ); +}; diff --git a/src/roots/blogView.jsx b/src/roots/blogView.jsx index 713549e8b0a1..c0e3047f5622 100644 --- a/src/roots/blogView.jsx +++ b/src/roots/blogView.jsx @@ -1,8 +1,16 @@ import React from 'react'; import { BlogView } from '../components/BlogView'; import { injectComponent } from '../utils/root'; +import { Banner } from '../components/Banner' + + + +const component = ( + <> + + ; + +); - -const component = ; injectComponent(component, 'blog-view'); - + diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index b5c61c956711..95922fc22327 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -1,3 +1,75 @@ @tailwind base; @tailwind components; @tailwind utilities; + + +@layer components { + #blogView ul { + @apply pt-2 pl-5 space-y-2 list-disc list-inside; + } + + #blogView ol { + @apply pt-2 pl-5 space-y-2 list-decimal; + } + + #blogView table { + @apply w-full border-collapse my-6; + } + + #blogView th, + #blogView td { + @apply px-4 py-2 text-left border-b border-gray-200; + } + + #blogView th { + @apply text-sm font-semibold text-gray-700 bg-gray-100; + } + + #blogView tbody tr:hover { + @apply bg-gray-50; + } + + #blogView tbody tr:nth-child(odd) { + @apply bg-white; + } + + #blogView tbody tr:nth-child(even) { + @apply bg-gray-50; + } + + #blogView td { + @apply text-sm text-gray-700; + } + + #blogView thread { + @apply inline-block bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full mt-1; + } + + #blogView h1 { + @apply text-4xl font-bold text-gray-900 mt-8 mb-4; + } + + #blogView h2 { + @apply text-3xl font-semibold text-gray-800 mt-6 mb-3; + } + + #blogView h3 { + @apply text-2xl font-semibold text-gray-800 mt-4 mb-2; + } + + #blogView hr { + @apply my-6; + } + + #blogView p { + @apply mb-3; + } + + #blogView a { + @apply text-sky-800 font-bold + } + + #blogView a:hover { + @apply underline + } +} \ No newline at end of file From 64d3196fc252d67d08b7482c26efcda3bc65adea Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 17 Mar 2025 18:30:34 +0200 Subject: [PATCH 14/52] small alignement fixes --- src/components/AboutFiqci.jsx | 2 +- src/components/Home.jsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/AboutFiqci.jsx b/src/components/AboutFiqci.jsx index b29e8272c8c8..9cad8f0a7f1f 100644 --- a/src/components/AboutFiqci.jsx +++ b/src/components/AboutFiqci.jsx @@ -74,7 +74,7 @@ const TextContent = () => { export const AboutFiqci = () => { return ( -
+
diff --git a/src/components/Home.jsx b/src/components/Home.jsx index e6cf0a316709..37fecc642d2b 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -58,16 +58,16 @@ export const Home = () => {
-
-

+
+

Making the power of quantum computing accessible

-

FiQCI - Finnish quantum-computing infrastructure

+

FiQCI - Finnish quantum-computing infrastructure

-
+

Open call for pilot access to Helmi quantum computer now open!

How to access Helmi, instructions
From 6323faa34f851e87168a78c178524d9c4cf30c3a Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 28 Apr 2025 17:15:52 +0300 Subject: [PATCH 15/52] fix responsiveness --- src/components/Breadcrumbs.jsx | 39 +++++++++++++++++----------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/src/components/Breadcrumbs.jsx b/src/components/Breadcrumbs.jsx index 69f30704bb24..b2d83721c59e 100644 --- a/src/components/Breadcrumbs.jsx +++ b/src/components/Breadcrumbs.jsx @@ -2,23 +2,24 @@ import React from 'react'; export const Breadcrumbs = ({ breadcrumbs }) => { - const entries = Object.entries(breadcrumbs); - return ( -
- {entries.map(([label, href], index) => { - const isLast = index === entries.length - 1; - return ( - - {isLast ? ( -

{label}

- ) : ( - - {label}  >  - - )} - - ); - })} -
- ); + const entries = Object.entries(breadcrumbs); + return ( +
+ {entries.map(([label, href], index) => { + label = label.length > 25 ? label.slice(0, 20) + '...' : label; + const isLast = index === entries.length - 1; + return ( + + {isLast ? ( +

{label}

+ ) : ( + +

{label} >

+ + )} + + ); + })} +
+ ); } \ No newline at end of file From 59bbf2a57fff4cdd577bcd5ca252ff0324a95056 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 28 Apr 2025 17:16:03 +0300 Subject: [PATCH 16/52] add authors.yml --- content/_data/authors.yml | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 content/_data/authors.yml diff --git a/content/_data/authors.yml b/content/_data/authors.yml new file mode 100644 index 000000000000..f15b60bdb399 --- /dev/null +++ b/content/_data/authors.yml @@ -0,0 +1,29 @@ +Olli Mukkula: + name : "Olli Mukkula" + bio : "Application Specialist at CSC, Quantum Technologies" + avatar : "/assets/images/authors/Olli_Mukkula.png" + +Joonas Nivala: + name : "Joonas Nivala" + bio : "Quantum Computing trainee at CSC, Quantum Technologies" + avatar : "/assets/images/authors/Joonas_Nivala.jpg" + +Nikolas Klemola Tango: + name : "Nikolas Klemola Tango" + bio : "Junior Application Specialist at CSC, Quantum Technologies" + avatar : "/assets/images/authors/Nikolas_Klemola_Tango.jpg" + +Huyen Do: + name : "Huyen Do" + bio : "Quantum Computing trainee at CSC, Quantum Technologies" + avatar : "/assets/images/authors/Huyen_Do.jpg" + +Meeri Makitalo: + name : "Meeri Mäkitalo" + bio : "Quantum Computing trainee at CSC, Quantum Technologies" + avatar : "/assets/images/authors/Meeri_Makitalo.jpg" + +Michael Mucciardi: + name : "Michael Mucciardi" + bio : "Senior Systems Specialist at CSC, Quantum Technologies" + avatar : "/assets/images/authors/Michael_Mucciardi.jpg" \ No newline at end of file From aca8ece40ea5bc36e1270468a4889bdcde1801e8 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 28 Apr 2025 17:16:20 +0300 Subject: [PATCH 17/52] fix table issue --- src/stylesheets/main.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index 95922fc22327..9c8b4e1d7e57 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -13,12 +13,13 @@ } #blogView table { - @apply w-full border-collapse my-6; + @apply w-full overflow-x-auto; + @apply ml-0; /* Align table to the left */ } #blogView th, #blogView td { - @apply px-4 py-2 text-left border-b border-gray-200; + @apply text-left border-b border-gray-200; } #blogView th { From 0d7327dd547f511b6baa4c9ced108066eecbad5c Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 28 Apr 2025 17:16:39 +0300 Subject: [PATCH 18/52] pass more metadata --- content/_layouts/post.html | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/content/_layouts/post.html b/content/_layouts/post.html index 7b7bab3b9834..000969e9fe0a 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -6,10 +6,28 @@ {% assign constants = site.data.site-constants %} +{% assign author_info = site.data.authors[page.author] %} +
{%- include react/root.html id='blog-view' -%}
-
+
+ +
From b20846fa5c74a32bdacfe70ab848968977dfcaec Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 28 Apr 2025 17:16:57 +0300 Subject: [PATCH 19/52] add author and read next sidebars --- src/components/Author.jsx | 14 +++++++++++ src/components/BlogTags.jsx | 26 ++++++++++++++++++++ src/components/BlogView.jsx | 40 ++++++++++++++++++++++-------- src/components/ReadNext.jsx | 49 +++++++++++++++++++++++++++++++++++++ 4 files changed, 119 insertions(+), 10 deletions(-) create mode 100644 src/components/Author.jsx create mode 100644 src/components/BlogTags.jsx create mode 100644 src/components/ReadNext.jsx diff --git a/src/components/Author.jsx b/src/components/Author.jsx new file mode 100644 index 000000000000..98e85e48828c --- /dev/null +++ b/src/components/Author.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + + +export const Author = ({ author }) => { + return ( +
+ Author +
+

{author?.name}

+

{author?.bio}

+
+
+ ) +} \ No newline at end of file diff --git a/src/components/BlogTags.jsx b/src/components/BlogTags.jsx new file mode 100644 index 000000000000..98065cbd8925 --- /dev/null +++ b/src/components/BlogTags.jsx @@ -0,0 +1,26 @@ +import React, { useState, useEffect } from 'react'; +import { CTag, CTags } from '@cscfi/csc-ui-react'; + +export const BlogTags = ({ tags }) => { + const [activeTags, setActiveTags] = useState(new Array(tags.length).fill(false)); + return ( + + {tags.map((tag, index) => ( +
+ setActiveTags(prev => { + const newActiveTags = [...prev]; + newActiveTags[index] = !newActiveTags[index]; + return newActiveTags; + })} + key={index} + className={`blog-tag ${activeTags[index] ? 'active' : ''}`} + active={activeTags[index]} + > + {tag} + +
+ ))} + + ); +} \ No newline at end of file diff --git a/src/components/BlogView.jsx b/src/components/BlogView.jsx index 598f5c70161e..eab7356577a4 100644 --- a/src/components/BlogView.jsx +++ b/src/components/BlogView.jsx @@ -5,16 +5,22 @@ import 'prismjs/themes/prism.css'; import 'katex/dist/katex.min.css'; import renderMathInElement from 'katex/contrib/auto-render/auto-render'; import { Breadcrumbs } from './Breadcrumbs'; +import { BlogTags } from './BlogTags'; +import { Author } from './Author'; +import { ReadNext } from './ReadNext'; import { CAccordion, CAccordionItem } from '@cscfi/csc-ui-react'; + const createMarkup = (htmlString) => { const safeHTML = DOMPurify.sanitize(htmlString); return { __html: safeHTML }; }; export const BlogView = () => { - const [content, setContent] = useState(''); - const [metadata, setMetadata] = useState(''); + const [metadata, setMetadata] = useState({}); + const [title, setTitle] = useState(""); + const [content, setContent] = useState("null"); + const [tags, setTags] = useState([]); const [referencesContent, setReferencesContent] = useState(null); useEffect(() => { @@ -44,15 +50,22 @@ export const BlogView = () => { }, []); useEffect(() => { + + const blogData = document.getElementById('blog-data'); + + if (blogData) { + const metadata = JSON.parse(blogData.getAttribute('data-content')); + setMetadata(metadata); + setTitle(metadata.title); + metadata.tags.push(metadata.theme) + setTags(metadata.tags); + } + const contentDiv = document.getElementById('blog-content'); if (contentDiv) { setContent(contentDiv.getAttribute('data-content')); } - const metadataDiv = document.getElementById('blog-title'); - if (metadataDiv) { - setMetadata(metadataDiv.getAttribute('data-content')); - } }, []); useEffect(() => { @@ -73,13 +86,17 @@ export const BlogView = () => { return (
-
+
- + +
+
+
-
-

{metadata}

+ +

{metadata.type} | {metadata.date?.split(" ")[0]}

+

{title}

{referencesContent && ( @@ -89,6 +106,9 @@ export const BlogView = () => { )}
+
+ +
); diff --git a/src/components/ReadNext.jsx b/src/components/ReadNext.jsx new file mode 100644 index 000000000000..0e5d4da83bfa --- /dev/null +++ b/src/components/ReadNext.jsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { CAccordion, CAccordionItem, CIcon } from '@cscfi/csc-ui-react'; +import { mdiArrowRight } from '@mdi/js'; +import { BlogCardComponent } from './BlogCards'; + + +export const ReadNext = ({ title }) => { + return ( + <> +
+
+ + +
+ {SITE.publications.filter((blog) => blog.title !== title).slice(-5).reverse().map(blog => )} +
+ + +
+
+
+

Read next:

+ {SITE.publications.filter((blog) => blog.title !== title).slice(-5).map((blog, index) => ( + + ))} + + + +
+ + ) +} \ No newline at end of file From 2ce158f97939f800afe8af28ba3bde4a26cb1312 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Wed, 7 May 2025 15:24:23 +0300 Subject: [PATCH 20/52] fix issues from merge --- content/_data/site-constants.yml | 2 + content/pages/about.md | 3 +- content/pages/access.md | 3 +- src/components/AboutFiqci.jsx | 2 +- src/components/BlogCards.jsx | 2 +- src/components/EventCards.jsx | 2 +- src/components/Hero.jsx | 85 ++++++++++++++++++++------------ src/components/Home.jsx | 45 ++++++++++------- src/pages/about.md.jsx | 28 +++++++++++ src/pages/access.md.jsx | 28 +++++++++++ 10 files changed, 144 insertions(+), 56 deletions(-) create mode 100644 src/pages/about.md.jsx create mode 100644 src/pages/access.md.jsx diff --git a/content/_data/site-constants.yml b/content/_data/site-constants.yml index fe7331496057..96dcf363fc4c 100644 --- a/content/_data/site-constants.yml +++ b/content/_data/site-constants.yml @@ -6,6 +6,8 @@ feedback_email: fiqci-feedback@postit.csc.fi header_nav: - title: Home page: index.md + - title: About FiQCI + page: pages/about.md - title: Get access page: pages/access.md - title: Blogs and instructions diff --git a/content/pages/about.md b/content/pages/about.md index 651fb11be62f..62e2e6754d2f 100644 --- a/content/pages/about.md +++ b/content/pages/about.md @@ -2,8 +2,7 @@ layout: page title: About subtitle: The FiQCI consortium maintains, operates, and develops the infrastructure -react_source_files: - - aboutPage.js +react: true --- {%- include react/root.html id='about' -%} diff --git a/content/pages/access.md b/content/pages/access.md index 77dda5a3a2dd..d6478f139ca5 100644 --- a/content/pages/access.md +++ b/content/pages/access.md @@ -2,8 +2,7 @@ title: How to get access layout: page subtitle: Access to FiQCI is granted through the CSC supercomputing environment -react_source_files: - - getAccess.js +react: true --- {%- include react/root.html id='access' -%} \ No newline at end of file diff --git a/src/components/AboutFiqci.jsx b/src/components/AboutFiqci.jsx index 71cddf582822..86f13e29b5b4 100644 --- a/src/components/AboutFiqci.jsx +++ b/src/components/AboutFiqci.jsx @@ -41,7 +41,7 @@ const TextContent = () => {

FiQCI is jointly maintained, operated, and developed by VTT, Aalto - University, and CSC – IT Center for Science. + University, and CSC - IT Center for Science.

diff --git a/src/components/BlogCards.jsx b/src/components/BlogCards.jsx index 04282de6bda1..c704adbf976d 100644 --- a/src/components/BlogCards.jsx +++ b/src/components/BlogCards.jsx @@ -46,6 +46,6 @@ export const BlogCards = () => {
- +
); }; diff --git a/src/components/EventCards.jsx b/src/components/EventCards.jsx index c68d520da3ce..15e2c7ab4028 100644 --- a/src/components/EventCards.jsx +++ b/src/components/EventCards.jsx @@ -52,6 +52,6 @@ export const EventCards = () => {
- +
); }; diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index dace0e47006a..df5532218bb3 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -1,14 +1,13 @@ import React from 'react'; import '@cscfi/csc-ui-react/css/theme.css'; import { CButton, CIcon } from '@cscfi/csc-ui-react'; -import { mdiArrowRight, mdiArrowDown, mdiOpenInNew } from '@mdi/js'; +import { mdiArrowRight, mdiArrowDown } from '@mdi/js'; import { prependBaseURL, isExternal, isAnchor } from '../utils/url'; - const style = { - "--_c-button-font-size": 16, + "--_c-button-font-size": 25, "--_c-button-min-width": 0, - "--_c-button-height": "45px", + "--_c-button-height": "55px", "--_c-icon-color": "white" }; @@ -18,20 +17,40 @@ const getIconPath = href => isExternal(href) ? mdiArrowDown : mdiArrowRight -const ContentButton = props => - (window.location.href = prependBaseURL(props.href))} - > -

{props.title}

- - +const ContentButton = props => { + const isActive = window.location.pathname === props.href; + + var styleClass = "text-white text-sm sm:text-md py-3 break-words" + if (isActive) { + styleClass = styleClass + } + + return ( +
+ (window.location.href = prependBaseURL(props.href))} + > +

{props.title}

+ + + (window.location.href = prependBaseURL(props.href))} + > +

{props.title}

+ + +
+ ); +}; const Announcement = props => -
+

{props.text}

{props.link.title}
@@ -44,26 +63,28 @@ export const Hero = props => { ? : <> - return
-
+ return ( +
+
-
+
-
-
-

- {props.tagline || ''} -

-

{props.subtitle || ''}

+
+
+

+ {props.tagline || ''} +

+

{props.subtitle || ''}

+
-
-
- {announcementComponent} -
- {contentButtons} +
+ {announcementComponent} +
+ { contentButtons } +
-
-} + ) +} \ No newline at end of file diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 37fecc642d2b..c68c48436350 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -2,6 +2,7 @@ import React from 'react'; import '@cscfi/csc-ui-react/css/theme.css'; import { CButton, CIcon } from '@cscfi/csc-ui-react'; import { mdiArrowRight, mdiArrowDown } from '@mdi/js'; +import { prependBaseURL, isExternal, isAnchor } from '../utils/url'; const style = { "--_c-button-font-size": 25, @@ -10,6 +11,12 @@ const style = { "--_c-icon-color": "white" }; +const getIconPath = href => isExternal(href) + ? mdiOpenInNew + : isAnchor(href) + ? mdiArrowDown + : mdiArrowRight + const ContentButton = props => { const isActive = window.location.pathname === props.href; @@ -24,7 +31,8 @@ const ContentButton = props => { className='hidden sm:block w-min ml-0 mt-[10px] md:ml-0 mr-[20px] sm:ml-0 bg-[#0D2B53] hover:bg-blue-600' no-radius size="large" - onClick={() => (window.location.href = props.href)} + style={style} + onClick={() => (window.location.href = prependBaseURL(props.href))} >

{props.title}

@@ -33,23 +41,29 @@ const ContentButton = props => { className='flex flex-1 sm:hidden w-min ml-0 mt-[10px] mr-2 md:ml-0 bg-[#0D2B53] hover:bg-blue-600' no-radius size="default" - onClick={() => (window.location.href = props.href)} + style={style} + onClick={() => (window.location.href = prependBaseURL(props.href))} >

{props.title}

- +
); }; -export const Home = () => { - const nav = SITE.constants.cardNav - const contentButtons = [ - ["How to get access", mdiArrowDown], - ["Blogs and instructions", mdiArrowRight], - ["About FiQCI", mdiArrowRight], - ].map(([title, icon]) => [nav.find(page => page.title === title), icon]) - .map(([page, icon]) => ) +const Announcement = props => +
+

{props.text}

+ {props.link.title} +
+ +export const Home = props => { + const contentButtons = + props.buttons?.map(button => ) + + const announcementComponent = typeof props.announcement !== 'undefined' + ? + : <> return (
@@ -60,17 +74,14 @@ export const Home = () => {

- Making the power of quantum computing accessible + {props.tagline || ''}

-

FiQCI - Finnish quantum-computing infrastructure

+

{props.subtitle || ''}

-
-

Open call for pilot access to Helmi quantum computer now open!

- How to access Helmi, instructions -
+ {announcementComponent}
{ contentButtons }
diff --git a/src/pages/about.md.jsx b/src/pages/about.md.jsx new file mode 100644 index 000000000000..6fabb61067a4 --- /dev/null +++ b/src/pages/about.md.jsx @@ -0,0 +1,28 @@ +import React from 'react' +import { createRoot } from 'react-dom/client' +import { createPortal } from 'react-dom' + +import { AboutFiqci } from '../components/AboutFiqci' + +import { PageLayout } from '../components/layouts/page.html' + +import { useJsonApi } from '../hooks/useJsonApi' + + +const AboutPage = () => { + const siteConstants = useJsonApi('api/site/constants.json') + + return <> + + {createPortal( + , + document.getElementById('about') + )} + +} + +document.addEventListener('DOMContentLoaded', () => { + const root = createRoot(document.getElementById('react-root')) + + root.render() +}) diff --git a/src/pages/access.md.jsx b/src/pages/access.md.jsx new file mode 100644 index 000000000000..1fff6c9db246 --- /dev/null +++ b/src/pages/access.md.jsx @@ -0,0 +1,28 @@ +import React from 'react' +import { createRoot } from 'react-dom/client' +import { createPortal } from 'react-dom' + +import { GetAccess } from '../components/GetAccess' + +import { PageLayout } from '../components/layouts/page.html' + +import { useJsonApi } from '../hooks/useJsonApi' + + +const AccessPage = () => { + const siteConstants = useJsonApi('api/site/constants.json') + + return <> + + {createPortal( + , + document.getElementById('access') + )} + +} + +document.addEventListener('DOMContentLoaded', () => { + const root = createRoot(document.getElementById('react-root')) + + root.render() +}) From 8c7c6ec4bf99a05e9f13d6af1802b3171ddc34c9 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Wed, 7 May 2025 15:41:24 +0300 Subject: [PATCH 21/52] style fixes --- content/_includes/react/section-root.html | 2 +- content/index.md | 2 +- src/components/AccessCards.jsx | 2 +- src/components/BlogCards.jsx | 5 +---- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/content/_includes/react/section-root.html b/content/_includes/react/section-root.html index 74dfd1e8e5ef..2f8e3a989c3a 100644 --- a/content/_includes/react/section-root.html +++ b/content/_includes/react/section-root.html @@ -1,4 +1,4 @@ -
+

{{ include.heading }}

diff --git a/content/index.md b/content/index.md index 7ae62a9cdca9..ae3305782019 100644 --- a/content/index.md +++ b/content/index.md @@ -8,4 +8,4 @@ react: true {% include react/section-root.html id='blog-cards' heading='Blogs and instructions' %} -{% include react/section-root.html id='event-cards' heading='Events' %} +{% include react/section-root.html id='event-cards' heading='Events' %} \ No newline at end of file diff --git a/src/components/AccessCards.jsx b/src/components/AccessCards.jsx index 820d0a33db58..4b7dc4b0e2ae 100644 --- a/src/components/AccessCards.jsx +++ b/src/components/AccessCards.jsx @@ -41,7 +41,7 @@ export const AccessCards = () => { cards?.map(card => ()) return <> -
+
{accessCardComponents}
diff --git a/src/components/BlogCards.jsx b/src/components/BlogCards.jsx index c704adbf976d..01107c91ac84 100644 --- a/src/components/BlogCards.jsx +++ b/src/components/BlogCards.jsx @@ -28,10 +28,7 @@ export const BlogCardComponent = props => { export const BlogCards = () => { return (
-
-

Blogs and instructions

-
- +
{ SITE.publications.slice(-5).reverse().map(blog => ) }
From e8bded9265e537c80684c00d59a7f7220a6ef1b4 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Wed, 7 May 2025 15:47:25 +0300 Subject: [PATCH 22/52] style fixes --- src/components/AccessCards.jsx | 4 ++-- src/components/BlogCards.jsx | 2 +- src/components/EventCards.jsx | 5 +---- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/AccessCards.jsx b/src/components/AccessCards.jsx index 4b7dc4b0e2ae..bf8ee7a59551 100644 --- a/src/components/AccessCards.jsx +++ b/src/components/AccessCards.jsx @@ -1,7 +1,7 @@ import React from 'react'; import '@cscfi/csc-ui-react/css/theme.css'; import { CCard, CIcon, CCardContent } from '@cscfi/csc-ui-react'; -import { mdiArrowRight, mdiKeyLink, mdiOpenInNew } from '@mdi/js'; +import { mdiArrowRight, mdiOpenInNew } from '@mdi/js'; import { prependBaseURL, isExternal } from '../utils/url'; import { useJsonApi } from '../hooks/useJsonApi'; @@ -41,7 +41,7 @@ export const AccessCards = () => { cards?.map(card => ()) return <> -
+
{accessCardComponents}
diff --git a/src/components/BlogCards.jsx b/src/components/BlogCards.jsx index 01107c91ac84..2405a0be6a0d 100644 --- a/src/components/BlogCards.jsx +++ b/src/components/BlogCards.jsx @@ -27,7 +27,7 @@ export const BlogCardComponent = props => { export const BlogCards = () => { return ( -
+
{ SITE.publications.slice(-5).reverse().map(blog => ) } diff --git a/src/components/EventCards.jsx b/src/components/EventCards.jsx index 15e2c7ab4028..93dc5be9976d 100644 --- a/src/components/EventCards.jsx +++ b/src/components/EventCards.jsx @@ -33,10 +33,7 @@ export const EventCardComponent = props => { export const EventCards = () => { return ( -
-
-

Events

-
+
{ SITE.events.slice(-4).reverse().map(event => ) } From dc531a930842ff2a45308092821e2ec5f223475a Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Wed, 7 May 2025 16:06:48 +0300 Subject: [PATCH 23/52] move quantum resource to constants --- content/_data/site-constants.yml | 30 +++++++++++++++++++ src/components/GetAccess.jsx | 51 ++++---------------------------- 2 files changed, 36 insertions(+), 45 deletions(-) diff --git a/content/_data/site-constants.yml b/content/_data/site-constants.yml index 96dcf363fc4c..df23061719c8 100644 --- a/content/_data/site-constants.yml +++ b/content/_data/site-constants.yml @@ -65,6 +65,36 @@ access_cards: - title: Read more about Kvasi href: FIXME +quantum_resources: + - name: Helmi + desc: |- + Helmi (VTT Q5), the Finnish quantum computer operated by VTT, co-developed with IQM. + Helmi is based on superconducting technology, and presently provides five qubits. + Upgrades to 20, then 50 qubits is planned for the near future. Helmi is accessible + through the LUMI supercomputer environment. The pilot phase for Helmi access is now running! + image: "/assets/images/vtt-images/VTT_lab-2.jpg" + links: + - link: "" + teaser: "How to access Helmi, instructions" + icon: mdiArrowRight + - link: "" + teaser: "Read more about Helmi (VTT website)" + icon: mdiOpenInNew + + - name: VTT Q50 + desc: |- + Lorem ipsum the Finnish quantum computer operated by VTT, co-developed with IQM. + Lorem ipsum is accessible through the LUMI supercomputer environment. The pilot phase + for VTT Q50 access is now running! + image: "/assets/images/vtt-images/VTT_lab-2.jpg" + links: + - link: "" + teaser: "How to access VTT Q50, instructions" + icon: mdiArrowRight + - link: "" + teaser: "Read more about VTT Q50 (VTT website)" + icon: mdiOpenInNew + logo: assets/images/FiQCI-logo.png favicon: assets/images/favicon.png footer_icons: assets/footer-icons diff --git a/src/components/GetAccess.jsx b/src/components/GetAccess.jsx index fd4fac7c548a..06db40907caa 100644 --- a/src/components/GetAccess.jsx +++ b/src/components/GetAccess.jsx @@ -2,6 +2,8 @@ import React from "react"; import { useEffect } from "react"; import { Breadcrumbs } from "./Breadcrumbs"; import { mdiArrowRight, mdiOpenInNew } from '@mdi/js'; +import { prependBaseURL } from '../utils/url'; +import { useJsonApi } from '../hooks/useJsonApi'; const ResourceCard = ({ resource }) => { return ( @@ -9,7 +11,7 @@ const ResourceCard = ({ resource }) => {
@@ -35,7 +37,7 @@ const ResourceList = ({ id, title, resources }) => {

{title}

- {resources.map((resource, index) => ( + {resources?.map((resource, index) => ( ))}
@@ -43,50 +45,9 @@ const ResourceList = ({ id, title, resources }) => { ) } -const quantum_resources = [ - { - name: "Helmi", - desc: `Helmi (VTT Q5), the Finnish quantum computer operated by VTT, co-developed with IQM. - Helmi is based on superconducting technology, and presently provides five qubits. Upgrades to - 20, then 50 qubits is planned for the near future. Helmi is accessible through the - LUMI supercomputer environment. The pilot phase for Helmi access is now running!`, - image: "/assets/images/vtt-images/VTT_lab-2.jpg", - links: [ - { - link: "", - teaser: "How to access Helmi, instructions", - icon: mdiArrowRight, - }, - { - link: "", - teaser: "Read more about Helmi (VTT website)", - icon: mdiOpenInNew, - }, - ], - }, - { - name: "VTT Q50", - desc: `Lorem ipsum the Finnish quantum computer operated by VTT, co-developed with IQM. - Lorem ipsum is accessible through the LUMI supercomputer environment. The pilot phase for - VTT Q50 access is now running!`, - image: "/assets/images/vtt-images/VTT_lab-2.jpg", - links: [ - { - link: "", - teaser: "How to access VTT Q50, instructions", - icon: mdiArrowRight, - }, - { - link: "", - teaser: "Read more about VTT Q50 (VTT website)", - icon: mdiOpenInNew, - }, - ], - } -]; - export const GetAccess = () => { - + const constants = useJsonApi("api/site/constants.json") + const quantum_resources = constants?.quantum_resources useEffect(() => { if (window.location.hash !== "") { const hash = window.location.hash; From 559ababb4215c5c122bf68890b4682cd22644384 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Thu, 8 May 2025 13:44:40 +0300 Subject: [PATCH 24/52] testing --- content/_layouts/base.html | 2 +- content/_layouts/home.html | 2 -- content/_layouts/post.html | 9 +-------- src/components/layouts/post.html.jsx | 20 ++++++++++++++++++++ src/pages/post.md.jsx | 26 ++++++++++++++++++++++++++ 5 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 src/components/layouts/post.html.jsx create mode 100644 src/pages/post.md.jsx diff --git a/content/_layouts/base.html b/content/_layouts/base.html index 64410e29ac36..a3c68b364570 100644 --- a/content/_layouts/base.html +++ b/content/_layouts/base.html @@ -5,7 +5,7 @@ {%- include react/root.html id='react-root' -%} - +
{{ content }}
diff --git a/content/_layouts/home.html b/content/_layouts/home.html index 1ea67f4e3660..1a046ddf1e06 100644 --- a/content/_layouts/home.html +++ b/content/_layouts/home.html @@ -1,7 +1,5 @@ --- layout: base -react_source_files: - - home.html.js --- {%- include react/root.html id='hero' -%} diff --git a/content/_layouts/post.html b/content/_layouts/post.html index 000969e9fe0a..46d4658f987b 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -1,13 +1,7 @@ --- -layout: base -react_source_files: - - blogView.js +layout: page --- -{% assign constants = site.data.site-constants %} - -{% assign author_info = site.data.authors[page.author] %} -
{%- include react/root.html id='blog-view' -%} @@ -29,5 +23,4 @@ }' >
-

diff --git a/src/components/layouts/post.html.jsx b/src/components/layouts/post.html.jsx new file mode 100644 index 000000000000..1c74ea6e8086 --- /dev/null +++ b/src/components/layouts/post.html.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import { createPortal } from 'react-dom' + +import { Banner } from '../Banner' + +import { BaseLayout } from './base.html' + +export const PostLayout = props => { + const title = props.title_separator + ? document.title.split(props.title_separator, 1)[0] + : "Loading..." + return <> + moi + + {createPortal( + , + document.getElementById('banner') + )} + +} diff --git a/src/pages/post.md.jsx b/src/pages/post.md.jsx new file mode 100644 index 000000000000..2d2a2c12d897 --- /dev/null +++ b/src/pages/post.md.jsx @@ -0,0 +1,26 @@ +import React from 'react' +import { createRoot } from 'react-dom/client' +import { createPortal } from 'react-dom' + +import { PostLayout } from '../components/layouts/post.html' + +import { useJsonApi } from '../hooks/useJsonApi' + + +const BlogViewPage = () => { + const siteConstants = useJsonApi('api/site/constants.json') + + return <> + + {createPortal( + , + document.getElementById('blog-view') + )} + +} + +document.addEventListener('DOMContentLoaded', () => { + const root = createRoot(document.getElementById('react-root')) + + root.render() +}) From e1025881c8844fd70bc5d09055388bf89e261e2c Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Thu, 8 May 2025 15:19:11 +0300 Subject: [PATCH 25/52] testing --- content/_layouts/post.html | 40 ++++++++++++++++++-------------------- src/pages/about.md.jsx | 8 ++++---- src/pages/default.jsx | 25 +++++++++++++++++++----- 3 files changed, 43 insertions(+), 30 deletions(-) diff --git a/content/_layouts/post.html b/content/_layouts/post.html index 46d4658f987b..edf7c06ebfb3 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -1,26 +1,24 @@ --- -layout: page +layout: base --- +{% assign constants = site.data.constants %} +
-
- {%- include react/root.html id='blog-view' -%} +
+

{{ page.title | escape }}

+

+ + {%- if page.author -%} + • + {%- endif -%} +

+
-
+
+ {{ content }} +
-
- -
+
\ No newline at end of file diff --git a/src/pages/about.md.jsx b/src/pages/about.md.jsx index 6fabb61067a4..22178098f1b4 100644 --- a/src/pages/about.md.jsx +++ b/src/pages/about.md.jsx @@ -2,20 +2,20 @@ import React from 'react' import { createRoot } from 'react-dom/client' import { createPortal } from 'react-dom' -import { AboutFiqci } from '../components/AboutFiqci' +import { AboutPage } from '../components/AboutPage' import { PageLayout } from '../components/layouts/page.html' import { useJsonApi } from '../hooks/useJsonApi' -const AboutPage = () => { +const AboutPageView = () => { const siteConstants = useJsonApi('api/site/constants.json') return <> {createPortal( - , + , document.getElementById('about') )} @@ -24,5 +24,5 @@ const AboutPage = () => { document.addEventListener('DOMContentLoaded', () => { const root = createRoot(document.getElementById('react-root')) - root.render() + root.render() }) diff --git a/src/pages/default.jsx b/src/pages/default.jsx index 31bd0193d4ee..bb1eb2bd25d9 100644 --- a/src/pages/default.jsx +++ b/src/pages/default.jsx @@ -1,21 +1,36 @@ import React from 'react' +import { createPortal } from 'react-dom' + import { createRoot } from 'react-dom/client' +import { PostLayout } from '../components/layouts/post.html' + import { BaseLayout } from '../components/layouts/base.html' import { useJsonApi } from '../hooks/useJsonApi' +import { BlogView } from '../components/BlogView' -const DefaultPage = () => { + +const BlogViewPage = () => { const siteConstants = useJsonApi('api/site/constants.json') - return <> - - + if (!document.getElementById('blog-view')) { + return <> + + + } + + return ( + <> + + {createPortal(, document.getElementById('blog-view'))} + + ) } document.addEventListener('DOMContentLoaded', () => { const root = createRoot(document.getElementById('react-root')) - root.render() + root.render() }) From 3874d648f6f7e5a6b7e569674cee121a97b25098 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Thu, 8 May 2025 16:37:02 +0300 Subject: [PATCH 26/52] add functioning blog view --- content/_layouts/post.html | 55 +++++++++++------- src/components/ReferencesAccordion.jsx | 50 +++++++++++++++++ src/components/layouts/post.html.jsx | 39 ++++++++++++- src/pages/default.jsx | 6 +- src/pages/post.md.jsx | 29 ++++++++++ src/stylesheets/main.css | 78 +------------------------- 6 files changed, 155 insertions(+), 102 deletions(-) create mode 100644 src/components/ReferencesAccordion.jsx diff --git a/content/_layouts/post.html b/content/_layouts/post.html index edf7c06ebfb3..269adc404fac 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -1,24 +1,41 @@ --- -layout: base +layout: page --- -{% assign constants = site.data.constants %} -
- -
-

{{ page.title | escape }}

-

- - {%- if page.author -%} - • - {%- endif -%} -

-
-
- {{ content }} -
+{% assign constants = site.data.constants %} +{% assign author_info = site.data.authors[page.author] %} +{%- include react/root.html id='banner' -%} +
+
+
+
+ {%- include react/root.html id='breadcrumbs' -%} +
+
+ {%- include react/root.html id='author' -%} +
+
+ {%- include react/root.html id='tags' -%} + +

{{page.title}}

+
+ {{ content }} +
+
+ {%- include react/root.html id='references-accordion' -%} +
+
+
+ {%- include react/root.html id='read-next' -%} +
+
+
\ No newline at end of file diff --git a/src/components/ReferencesAccordion.jsx b/src/components/ReferencesAccordion.jsx new file mode 100644 index 000000000000..a97962bac786 --- /dev/null +++ b/src/components/ReferencesAccordion.jsx @@ -0,0 +1,50 @@ +import React, { useEffect, useState } from 'react'; +import { CAccordion, CAccordionItem } from '@cscfi/csc-ui-react'; + +export const ReferencesAccordion = () => { + const [references, setReferences] = useState([]); + + useEffect(() => { + const observer = new MutationObserver(() => { + const header = document.getElementById('references-') || document.getElementById('references'); + if (header) { + const list = header.nextElementSibling; + if (list && list.tagName === 'OL') { + const rawHTML = list.innerHTML; + // Split and clean list items + const rawItems = rawHTML.split(/<\/li>/i) + .map(item => item.replace(/]*>/i, '').trim()) + .filter(item => item.length > 0); + + setReferences(rawItems); + + list.remove(); + header.remove(); + } + } + }); + + observer.observe(document.body, { + childList: true, + subtree: true, + }); + + return () => observer.disconnect(); + }, []); + + if (references.length === 0) return null; + + return ( + + +
    + {references.map((ref, idx) => ( +
  1. + [{idx + 1}] +
    2. + ))} +
+ + + ); +}; diff --git a/src/components/layouts/post.html.jsx b/src/components/layouts/post.html.jsx index 1c74ea6e8086..ca1a78323561 100644 --- a/src/components/layouts/post.html.jsx +++ b/src/components/layouts/post.html.jsx @@ -3,18 +3,55 @@ import { createPortal } from 'react-dom' import { Banner } from '../Banner' +import { Breadcrumbs } from '../Breadcrumbs' + +import { ReadNext } from '../ReadNext' + +import { BlogTags } from '../BlogTags' + +import { Author } from '../Author' + +import { ReferencesAccordion } from '../ReferencesAccordion' + import { BaseLayout } from './base.html' export const PostLayout = props => { const title = props.title_separator ? document.title.split(props.title_separator, 1)[0] : "Loading..." + + const tagsData = document.getElementById('tags-data') + const tags = JSON.parse(tagsData.getAttribute('data-content')); + + const authorData = document.getElementById('author-data') + const author = JSON.parse(authorData.getAttribute('data-content')); + + console.log(author) return <> - moi {createPortal( , document.getElementById('banner') )} + {createPortal( + , + document.getElementById('breadcrumbs') + )} + {createPortal( + , + document.getElementById('read-next') + )} + {createPortal( + , + document.getElementById('tags') + )} + {createPortal( + , + document.getElementById('author') + )} + {createPortal( + , + document.getElementById('references-accordion') + )} } diff --git a/src/pages/default.jsx b/src/pages/default.jsx index bb1eb2bd25d9..154a43bae341 100644 --- a/src/pages/default.jsx +++ b/src/pages/default.jsx @@ -9,13 +9,10 @@ import { BaseLayout } from '../components/layouts/base.html' import { useJsonApi } from '../hooks/useJsonApi' -import { BlogView } from '../components/BlogView' - - const BlogViewPage = () => { const siteConstants = useJsonApi('api/site/constants.json') - if (!document.getElementById('blog-view')) { + if (!document.getElementById('blogView')) { return <> @@ -24,7 +21,6 @@ const BlogViewPage = () => { return ( <> - {createPortal(, document.getElementById('blog-view'))} ) } diff --git a/src/pages/post.md.jsx b/src/pages/post.md.jsx index 2d2a2c12d897..bafb86962f15 100644 --- a/src/pages/post.md.jsx +++ b/src/pages/post.md.jsx @@ -4,18 +4,47 @@ import { createPortal } from 'react-dom' import { PostLayout } from '../components/layouts/post.html' +import { ReadNext } from '../components/ReadNext' + +import { BlogTags } from '../components/BlogTags' + +import { Author } from '../components/Author' + +import { ReferencesAccordion } from '../components/ReferencesAccordion' + import { useJsonApi } from '../hooks/useJsonApi' const BlogViewPage = () => { const siteConstants = useJsonApi('api/site/constants.json') + const tagsData = document.getElementById('tags-data') + const tags = JSON.parse(tagsData.getAttribute('data-content')); + const authorData = document.getElementById('author-data') + const author = JSON.parse(authorData.getAttribute('data-content')); return <> {createPortal( , document.getElementById('blog-view') )} + {createPortal( + , + document.getElementById('read-next') + )} + {createPortal( + , + document.getElementById('blog-tags') + )} + {createPortal( + , + document.getElementById('author') + )} + {createPortal( + , + document.getElementById('references-accordion') + )} + } diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index 7217c0c4cba0..bd6213e1dfe6 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -1,79 +1,3 @@ @tailwind base; @tailwind components; -@tailwind utilities; - - -@layer components { - #blogView ul { - @apply pt-2 pl-5 space-y-2 list-disc list-inside; - } - - #blogView ol { - @apply pt-2 pl-5 space-y-2 list-decimal; - } - - #blogView table { - @apply w-full overflow-x-auto; - @apply ml-0; /* Align table to the left */ - } - - #blogView th, - #blogView td { - @apply text-left border-b border-gray-200; - } - - #blogView th { - @apply text-sm font-semibold text-gray-700 bg-gray-100; - } - - #blogView tbody tr:hover { - @apply bg-gray-50; - } - - #blogView tbody tr:nth-child(odd) { - @apply bg-white; - } - - #blogView tbody tr:nth-child(even) { - @apply bg-gray-50; - } - - #blogView td { - @apply text-sm text-gray-700; - } - - #blogView thread { - @apply inline-block bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full mt-1; - } - - #blogView h1 { - @apply text-4xl font-bold text-gray-900 mt-8 mb-4; - } - - #blogView h2 { - @apply text-3xl font-semibold text-gray-800 mt-6 mb-3; - } - - #blogView h3 { - @apply text-2xl font-semibold text-gray-800 mt-4 mb-2; - } - - #blogView hr { - @apply my-6; - } - - #blogView p { - @apply mb-3; - } - - #blogView a { - @apply text-sky-800 font-bold - } - - #blogView a:hover { - @apply underline - } -} -.white-space-pre-line { - white-space: pre-line; -} \ No newline at end of file +@tailwind utilities; \ No newline at end of file From b938a21caf831ce130dbe9390a78807ec94bfafa Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Thu, 8 May 2025 16:58:34 +0300 Subject: [PATCH 27/52] fix merge issues --- src/components/GetAccess.jsx | 2 +- src/layouts/post.html.jsx | 12 ++++---- src/pages/about.md.jsx | 6 ++-- src/pages/access.md.jsx | 6 ++-- src/pages/default.jsx | 3 +- src/pages/post.md.jsx | 55 ------------------------------------ 6 files changed, 14 insertions(+), 70 deletions(-) delete mode 100644 src/pages/post.md.jsx diff --git a/src/components/GetAccess.jsx b/src/components/GetAccess.jsx index 06db40907caa..7c48a1c57a99 100644 --- a/src/components/GetAccess.jsx +++ b/src/components/GetAccess.jsx @@ -46,7 +46,7 @@ const ResourceList = ({ id, title, resources }) => { } export const GetAccess = () => { - const constants = useJsonApi("api/site/constants.json") + const constants = useJsonApi("api/theme/constants.json") const quantum_resources = constants?.quantum_resources useEffect(() => { if (window.location.hash !== "") { diff --git a/src/layouts/post.html.jsx b/src/layouts/post.html.jsx index ca1a78323561..0dad79ec5fd3 100644 --- a/src/layouts/post.html.jsx +++ b/src/layouts/post.html.jsx @@ -1,17 +1,17 @@ import React from 'react' import { createPortal } from 'react-dom' -import { Banner } from '../Banner' +import { Banner } from '../components/Banner' -import { Breadcrumbs } from '../Breadcrumbs' +import { Breadcrumbs } from '../components/Breadcrumbs' -import { ReadNext } from '../ReadNext' +import { ReadNext } from '../components/ReadNext' -import { BlogTags } from '../BlogTags' +import { BlogTags } from '../components/BlogTags' -import { Author } from '../Author' +import { Author } from '../components/Author' -import { ReferencesAccordion } from '../ReferencesAccordion' +import { ReferencesAccordion } from '../components/ReferencesAccordion' import { BaseLayout } from './base.html' diff --git a/src/pages/about.md.jsx b/src/pages/about.md.jsx index 22178098f1b4..dc6eda242920 100644 --- a/src/pages/about.md.jsx +++ b/src/pages/about.md.jsx @@ -4,16 +4,16 @@ import { createPortal } from 'react-dom' import { AboutPage } from '../components/AboutPage' -import { PageLayout } from '../components/layouts/page.html' +import { PageLayout } from '../layouts/page.html' import { useJsonApi } from '../hooks/useJsonApi' const AboutPageView = () => { - const siteConstants = useJsonApi('api/site/constants.json') + const themeConstants = useJsonApi('api/theme/constants.json') return <> - + {createPortal( , document.getElementById('about') diff --git a/src/pages/access.md.jsx b/src/pages/access.md.jsx index 1fff6c9db246..6a0bf1882b3c 100644 --- a/src/pages/access.md.jsx +++ b/src/pages/access.md.jsx @@ -4,16 +4,16 @@ import { createPortal } from 'react-dom' import { GetAccess } from '../components/GetAccess' -import { PageLayout } from '../components/layouts/page.html' +import { PageLayout } from '../layouts/page.html' import { useJsonApi } from '../hooks/useJsonApi' const AccessPage = () => { - const siteConstants = useJsonApi('api/site/constants.json') + const themeConstants = useJsonApi('api/theme/constants.json') return <> - + {createPortal( , document.getElementById('access') diff --git a/src/pages/default.jsx b/src/pages/default.jsx index 6dd3d3df6a51..a947fe544153 100644 --- a/src/pages/default.jsx +++ b/src/pages/default.jsx @@ -1,9 +1,8 @@ import React from 'react' -import { createPortal } from 'react-dom' import { createRoot } from 'react-dom/client' -import { PostLayout } from '../components/layouts/post.html' +import { PostLayout } from '../layouts/post.html' import { BaseLayout } from '../layouts/base.html' diff --git a/src/pages/post.md.jsx b/src/pages/post.md.jsx deleted file mode 100644 index bafb86962f15..000000000000 --- a/src/pages/post.md.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react' -import { createRoot } from 'react-dom/client' -import { createPortal } from 'react-dom' - -import { PostLayout } from '../components/layouts/post.html' - -import { ReadNext } from '../components/ReadNext' - -import { BlogTags } from '../components/BlogTags' - -import { Author } from '../components/Author' - -import { ReferencesAccordion } from '../components/ReferencesAccordion' - -import { useJsonApi } from '../hooks/useJsonApi' - - -const BlogViewPage = () => { - const siteConstants = useJsonApi('api/site/constants.json') - const tagsData = document.getElementById('tags-data') - const tags = JSON.parse(tagsData.getAttribute('data-content')); - - const authorData = document.getElementById('author-data') - const author = JSON.parse(authorData.getAttribute('data-content')); - return <> - - {createPortal( - , - document.getElementById('blog-view') - )} - {createPortal( - , - document.getElementById('read-next') - )} - {createPortal( - , - document.getElementById('blog-tags') - )} - {createPortal( - , - document.getElementById('author') - )} - {createPortal( - , - document.getElementById('references-accordion') - )} - - -} - -document.addEventListener('DOMContentLoaded', () => { - const root = createRoot(document.getElementById('react-root')) - - root.render() -}) From 653b4b2efa47e077fdeeb7298a6be4528aa3852d Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Thu, 8 May 2025 16:59:19 +0300 Subject: [PATCH 28/52] remove unused BlogView --- src/components/BlogView.jsx | 115 ------------------------------------ 1 file changed, 115 deletions(-) delete mode 100644 src/components/BlogView.jsx diff --git a/src/components/BlogView.jsx b/src/components/BlogView.jsx deleted file mode 100644 index eab7356577a4..000000000000 --- a/src/components/BlogView.jsx +++ /dev/null @@ -1,115 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import DOMPurify from 'dompurify'; -import Prism from 'prismjs'; -import 'prismjs/themes/prism.css'; -import 'katex/dist/katex.min.css'; -import renderMathInElement from 'katex/contrib/auto-render/auto-render'; -import { Breadcrumbs } from './Breadcrumbs'; -import { BlogTags } from './BlogTags'; -import { Author } from './Author'; -import { ReadNext } from './ReadNext'; -import { CAccordion, CAccordionItem } from '@cscfi/csc-ui-react'; - - -const createMarkup = (htmlString) => { - const safeHTML = DOMPurify.sanitize(htmlString); - return { __html: safeHTML }; -}; - -export const BlogView = () => { - const [metadata, setMetadata] = useState({}); - const [title, setTitle] = useState(""); - const [content, setContent] = useState("null"); - const [tags, setTags] = useState([]); - const [referencesContent, setReferencesContent] = useState(null); - - useEffect(() => { - // Use MutationObserver to wait for content to be fully loaded - const observer = new MutationObserver(() => { - var referencesHeader = document.getElementById('references-'); - if (!referencesHeader) { - referencesHeader = document.getElementById('references'); - } - if (referencesHeader) { - const referencesList = referencesHeader.nextElementSibling; - if (referencesList && referencesList.tagName === 'OL') { - setReferencesContent(referencesList.innerHTML); - // Remove the original OL element to prevent duplication - referencesList.remove(); - referencesHeader.remove(); - } - } - }); - - observer.observe(document.body, { - childList: true, - subtree: true, - }); - // Cleanup the observer when the component unmounts - return () => observer.disconnect(); - }, []); - - useEffect(() => { - - const blogData = document.getElementById('blog-data'); - - if (blogData) { - const metadata = JSON.parse(blogData.getAttribute('data-content')); - setMetadata(metadata); - setTitle(metadata.title); - metadata.tags.push(metadata.theme) - setTags(metadata.tags); - } - - const contentDiv = document.getElementById('blog-content'); - if (contentDiv) { - setContent(contentDiv.getAttribute('data-content')); - } - - }, []); - - useEffect(() => { - if (content) { - requestAnimationFrame(() => { - Prism.highlightAll(); - renderMathInElement(document.getElementById('rendered-content'), { - delimiters: [ - { left: '$$', right: '$$', display: true }, - { left: '$', right: '$', display: false }, - { left: '\\[', right: '\\]', display: true }, - { left: '\\(', right: '\\)', display: false }, - ] - }); - }); - } - }, [content]); - - return ( -
-
-
- -
-
- -
-
- -

{metadata.type} | {metadata.date?.split(" ")[0]}

-

{title}

-
- {referencesContent && ( - - -
    - - - )} -
-
- -
-
-
- ); -}; From 4a35498eee66893923517bedbe71e3d001724185 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Thu, 8 May 2025 17:12:35 +0300 Subject: [PATCH 29/52] add gap --- src/components/Author.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Author.jsx b/src/components/Author.jsx index 98e85e48828c..164fbaa90e66 100644 --- a/src/components/Author.jsx +++ b/src/components/Author.jsx @@ -5,7 +5,7 @@ export const Author = ({ author }) => { return (
Author -
+

{author?.name}

{author?.bio}

From c27e8bade4818157fbdf03f62828dce0c5c79695 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Thu, 8 May 2025 17:18:22 +0300 Subject: [PATCH 30/52] remove extra call to json api --- src/components/GetAccess.jsx | 5 ++--- src/pages/access.md.jsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/GetAccess.jsx b/src/components/GetAccess.jsx index 7c48a1c57a99..562862e0115d 100644 --- a/src/components/GetAccess.jsx +++ b/src/components/GetAccess.jsx @@ -45,9 +45,8 @@ const ResourceList = ({ id, title, resources }) => { ) } -export const GetAccess = () => { - const constants = useJsonApi("api/theme/constants.json") - const quantum_resources = constants?.quantum_resources +export const GetAccess = props => { + const quantum_resources = props?.quantum_resources useEffect(() => { if (window.location.hash !== "") { const hash = window.location.hash; diff --git a/src/pages/access.md.jsx b/src/pages/access.md.jsx index 6a0bf1882b3c..2570af21aded 100644 --- a/src/pages/access.md.jsx +++ b/src/pages/access.md.jsx @@ -15,7 +15,7 @@ const AccessPage = () => { return <> {createPortal( - , + , document.getElementById('access') )} From 6e837c2c05efbb7903bb29291fd6154d3ad545ae Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Thu, 8 May 2025 17:18:31 +0300 Subject: [PATCH 31/52] remove console log --- src/layouts/post.html.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/layouts/post.html.jsx b/src/layouts/post.html.jsx index 0dad79ec5fd3..33f9944158d6 100644 --- a/src/layouts/post.html.jsx +++ b/src/layouts/post.html.jsx @@ -26,7 +26,6 @@ export const PostLayout = props => { const authorData = document.getElementById('author-data') const author = JSON.parse(authorData.getAttribute('data-content')); - console.log(author) return <> {createPortal( From 6a320fa21da13e6d637fed1deb310de70d9c3612 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 9 May 2025 09:54:57 +0300 Subject: [PATCH 32/52] remove overflow --- src/components/SiteSearch.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SiteSearch.jsx b/src/components/SiteSearch.jsx index 9b88e7f3b794..332c48b6e7d2 100644 --- a/src/components/SiteSearch.jsx +++ b/src/components/SiteSearch.jsx @@ -199,7 +199,7 @@ const FilterModal = ({ isModalOpen, setIsModalOpen, filters, handleCheckboxChang return ( setIsModalOpen(event.detail)} From 3b7039010712f9409ad91dcc2f546782b7d481fc Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 9 May 2025 11:44:02 +0300 Subject: [PATCH 33/52] fix stre generation --- content/store.js.liquid | 41 +++++++++++++++++++---------------------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/content/store.js.liquid b/content/store.js.liquid index eb158d051588..41826370d212 100644 --- a/content/store.js.liquid +++ b/content/store.js.liquid @@ -37,30 +37,27 @@ permalink: store.js {%- capture pages -%} [ - {% assign first_item = true %} - {% for page in site.pages %} - {% unless page.path contains '.js' %} - {% if first_item %} - {% assign first_item = false %} - {% else %} - , - {% endif %} - { - "key": "{{ page.url | slugify }}", - "title": "{{ page.title | xml_escape }}", - "content": {{ page.content | strip_html | strip_newlines | jsonify }}, - "url": "{{ page.url | xml_escape }}", - "tags": [], - "type": "page" - } - {% endunless %} - {% endfor %} + {%- assign filtered_pages = site.pages | where_exp: "page", "page.url contains '/'" -%} + {%- assign filtered_pages = filtered_pages | reject: "url", "/404.html" -%} + {%- assign filtered_pages = filtered_pages | reject: "url", "/api/" -%} + {%- for page in filtered_pages -%} + {%- unless page.url contains '.json' or page.url contains '.css' or page.url contains '.js' or page.path contains '/api/' -%} + { + "key": "{{ page.url | slugify }}", + "title": {{ page.title | default: "" | jsonify }}, + "content": {{ page.content | default: "" | strip_html | strip_newlines | jsonify }}, + "url": {{ page.url | jsonify }}, + "tags": [], + "type": "page" + }{% unless forloop.last %},{% endunless %} + {%- endunless -%} + {%- endfor -%} ] {%- endcapture -%} const STORE = { - blogs: JSON.parse(String.raw`{{- blogs -}}`), - events: JSON.parse(String.raw`{{- events -}}`), - pages: JSON.parse(String.raw`{{- pages -}}`), -} + blogs: {{blogs}}, + events: {{events}}, + pages: {{pages}} +}; From b9b6f00df9376e250e07748fd4c820f8ce30d114 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 9 May 2025 12:07:00 +0300 Subject: [PATCH 34/52] fix search --- src/components/SiteSearch.jsx | 49 ++++++++++++++++++++++++++--------- 1 file changed, 37 insertions(+), 12 deletions(-) diff --git a/src/components/SiteSearch.jsx b/src/components/SiteSearch.jsx index 332c48b6e7d2..00e9fe74473f 100644 --- a/src/components/SiteSearch.jsx +++ b/src/components/SiteSearch.jsx @@ -22,21 +22,26 @@ const styleArrow = { "--_c-icon-color": "#004E84" }; -function searchContent(query, store) { - if (query.endsWith('*')) { - query = query; - } +function normalizeQuery(query) { + query = query.toLowerCase() + if (!query.trim()) return ''; // empty or whitespace-only + if (query.endsWith('*')) return query; + + // Optionally boost exact matches + const exactMatch = `${query}^10`; // high boost for exact match + const wildcardMatch = `${query}*`; // normal wildcard match + return `${exactMatch} ${wildcardMatch}`; +} - else { - query = query + '*'; - }; +function searchContent(query, store) { + const queryStr = normalizeQuery(query); const idx = lunr(function () { this.ref('key'); - this.field('title'); - this.field('content'); - this.field('type'); - this.field('tags'); + this.field('title', { boost: 10 }); + this.field('content', { boost: 2 }); + this.field('type', { boost: 5 }); + this.field('tags', { boost: 5 }); this.field('date'); this.field('link'); @@ -47,7 +52,7 @@ function searchContent(query, store) { }); }); - const results = idx.search(query); + const results = idx.search(queryStr); const categorizedResults = { general: [], @@ -55,6 +60,25 @@ function searchContent(query, store) { events: [] }; + if (results.length === 0) { + for (const key of ['blogs', 'events', 'pages']) { + for (const item of store[key]) { + if (item.title.toLowerCase().includes(query.toLowerCase())) { + categorizedResults.general.push({ + title: item.title, + url: item.url, + excerpt: item.content.substring(0, 200) + '...', + type: item.type, + tags: item.tags, + date: item.date, + link: item?.link + }); + } + } + } + } + + results.forEach(result => { const item = findItemByRef(result.ref, store); if (item) { @@ -78,6 +102,7 @@ function searchContent(query, store) { } }); + return categorizedResults; } From 6f5fe9a9af65f6d9cdff996c74873c5e0383e3fc Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 9 May 2025 12:15:59 +0300 Subject: [PATCH 35/52] add placeholder resources --- content/_data/constants.yml | 24 ++++++++++++++++++++++++ src/components/GetAccess.jsx | 6 ++++-- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/content/_data/constants.yml b/content/_data/constants.yml index 2552dd9f78c0..8a585ed78df4 100644 --- a/content/_data/constants.yml +++ b/content/_data/constants.yml @@ -95,6 +95,30 @@ quantum_resources: teaser: "Read more about VTT Q50 (VTT website)" icon: mdiOpenInNew +supercomputer_resources: + - name: LUMI + desc: |- + 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. + image: "/assets/images/FiQCI-banner.jpg" + links: + - link: "" + teaser: "How to access Lumi" + icon: mdiArrowRight + - link: "" + teaser: "Read more about LUMI (LUMI website)" + icon: mdiOpenInNew + +emulation_resources: + - name: Quantum emuation with LUMI + desc: |- + With the LUMI supercomputer it is possible to emulate quantum computer with upto 40+ qubits. + image: "/assets/images/FiQCI-banner.jpg" + links: + - link: "" + teaser: "Quantum emulation dosumentation" + icon: mdiArrowRight + + logo: assets/images/FiQCI-logo.png favicon: assets/images/favicon.png footer_icons: assets/footer-icons diff --git a/src/components/GetAccess.jsx b/src/components/GetAccess.jsx index 562862e0115d..cc164e8e988f 100644 --- a/src/components/GetAccess.jsx +++ b/src/components/GetAccess.jsx @@ -47,6 +47,8 @@ const ResourceList = ({ id, title, resources }) => { export const GetAccess = props => { const quantum_resources = props?.quantum_resources + const supercomputer_resources = props?.supercomputer_resources + const emulation_resources = props?.emulation_resources useEffect(() => { if (window.location.hash !== "") { const hash = window.location.hash; @@ -74,9 +76,9 @@ export const GetAccess = props => {

Please see status of services from Status -page

- + - +
From 92ed84fdb7b1a77c9f6a1e6566db4f7508bae93b Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 13:23:05 +0300 Subject: [PATCH 36/52] layout back to base --- content/_layouts/post.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/content/_layouts/post.html b/content/_layouts/post.html index 269adc404fac..fb721d891eaa 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -1,5 +1,5 @@ --- -layout: page +layout: base --- {% assign constants = site.data.constants %} @@ -17,7 +17,13 @@ "bio": {{author_info.bio | strip_newlines | escape | jsonify}}, "url": {{author_info.avatar | strip_newlines | escape | jsonify}} }'> - {%- include react/root.html id='author' -%} +
+ Author +
+

{{author_info.name}}

+

{{author_info.bio}}

+
+
{%- include react/root.html id='tags' -%} From 2047a28d848c29bfad760eb5ab1d331f95e27734 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 13:23:15 +0300 Subject: [PATCH 37/52] move breadcrumbs here --- content/_layouts/page.html | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/content/_layouts/page.html b/content/_layouts/page.html index 5466cbbc8a25..eec81fffd5ac 100644 --- a/content/_layouts/page.html +++ b/content/_layouts/page.html @@ -4,10 +4,12 @@ {%- include react/root.html id='banner' -%} -
- -
+
+
+
+ {%- include react/root.html id='breadcrumbs' -%} +
+ {{ content }}
- -
+
From 3e0af4a51ffa185692ddadf66148b8a52593f997 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 13:24:32 +0300 Subject: [PATCH 38/52] move react content to page source --- content/pages/about.md | 55 ++++++++++++++++++++++++++-- src/components/AboutPage.jsx | 69 ------------------------------------ src/components/Author.jsx | 14 -------- src/layouts/post.html.jsx | 6 ---- src/pages/about.md.jsx | 6 ---- 5 files changed, 53 insertions(+), 97 deletions(-) delete mode 100644 src/components/AboutPage.jsx delete mode 100644 src/components/Author.jsx diff --git a/content/pages/about.md b/content/pages/about.md index 62e2e6754d2f..95fb878a4df9 100644 --- a/content/pages/about.md +++ b/content/pages/about.md @@ -4,7 +4,58 @@ title: About subtitle: The FiQCI consortium maintains, operates, and develops the infrastructure react: true --- +
+

About FiQCI

+
+

+ The Finnish Quantum-Computing Infrastructure (FiQCI) was established in 2020, when it became + part of the Finnish Research Infrastructure (FIRI) roadmap of significant national research + infrastructures within the Finnish research infrastructure ecosystem, maintained by the + Research Council of Finland. +

+
+

+ The mission of FiQCI is to provide state-of-the-art quantum-computing services such as + computing time and training to the Finnish RDI communities. This includes providing a + hybrid high-performance computing and quantum computing (HPC+QC) platform for developing, + testing, and exploiting quantum-accelerated computational workflows. Through FiQCI, Finnish + researchers have access to one of the most powerful hybrid HPC+nQC resources in the world, + available for quantum accelerated research and development. The infrastructure also aims to + offer possibilities to carry out experiments in quantum physics. +

+
+

+ FiQCI is jointly maintained, operated, and developed by VTT, Aalto University, and + CSC - IT Center for Science. +

+
+
+

Scientific and Technical Advisory Group

+

+ The Scientific and Technical Advisory Group (STAG) provides input for the operation + of the infrastructure. The current (2023) members of the STAG are: +

+
    +
  • Dr. Valeria Bartsch, Fraunhofer Institute for Industrial Mathematics, Germany
    • +
  • Dr. Alba Cervera Lierta, Barcelona Supercomputing Center, Spain
    • +
  • Prof. Tommi Mikkonen, University of Jyväskylä, Finland
    • +
  • Prof. Martin Schulz, Technical University of Munich, Germany
    • +
  • Prof. Göran Wendin, Chalmers University of Technology, Sweden
    • +
-{%- include react/root.html id='about' -%} - +

Management

+
    +
  • Prof. Mika Prunnila, VTT, FiQCI director
    • +
  • Dr. Mikael Johansson, CSC, FiQCI vice-director
    • +
  • Prof. Tapio Ala-Nissilä, Aalto University, FiQCI vice-director
    • +
+

Acknowledgement

+

+ When publishing the results that utilise the FiQCI infrastructure, users should acknowledge + the use of FiQCI, preferably in the format: "These results have been acquired using the + Finnish Quantum-Computing Infrastructure (https://fiqci.fi)". + Additionally, users should also acknowledge using Helmi if applicable +

+
+
\ No newline at end of file diff --git a/src/components/AboutPage.jsx b/src/components/AboutPage.jsx deleted file mode 100644 index 103b6c268716..000000000000 --- a/src/components/AboutPage.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from "react"; -import { Breadcrumbs } from "./Breadcrumbs"; - -export const AboutPage = () => { - return ( -
-
-
- -
-

About FiQCI

-
-

- The Finnish Quantum-Computing Infrastructure (FiQCI) was established in 2020, when it became - part of the Finnish Research Infrastructure (FIRI) roadmap of significant national research - infrastructures within the Finnish research infrastructure ecosystem, maintained by the - Research Council of Finland. -

-

-

- The mission of FiQCI is to provide state-of-the-art quantum-computing services such as - computing time and training to the Finnish RDI communities. This includes providing a - hybrid high-performance computing and quantum computing (HPC+QC) platform for developing, - testing, and exploiting quantum-accelerated computational workflows. Through FiQCI, Finnish - researchers have access to one of the most powerful hybrid HPC+nQC resources in the world, - available for quantum accelerated research and development. The infrastructure also aims to - offer possibilities to carry out experiments in quantum physics. -

-

-

- FiQCI is jointly maintained, operated, and developed by VTT, Aalto University, and - CSC - IT Center for Science. -

-
- -
-

Scientific and Technical Advisory Group

-

- The Scientific and Technical Advisory Group (STAG) provides input for the operation - of the infrastructure. The current (2023) members of the STAG are: -

-
    -
  • Dr. Valeria Bartsch, Fraunhofer Institute for Industrial Mathematics, Germany
    • -
  • Dr. Alba Cervera Lierta, Barcelona Supercomputing Center, Spain
    • -
  • Prof. Tommi Mikkonen, University of Jyväskylä, Finland
    • -
  • Prof. Martin Schulz, Technical University of Munich, Germany
    • -
  • Prof. Göran Wendin, Chalmers University of Technology, Sweden
    • -
- -

Management

-
    -
  • Prof. Mika Prunnila, VTT, FiQCI director
    • -
  • Dr. Mikael Johansson, CSC, FiQCI vice-director
    • -
  • Prof. Tapio Ala-Nissilä, Aalto University, FiQCI vice-director
    • -
- -

Acknowledgement

-

- When publishing the results that utilise the FiQCI infrastructure, users should acknowledge - the use of FiQCI, preferably in the format: "These results have been acquired using the - Finnish Quantum-Computing Infrastructure (https://fiqci.fi)". - Additionally, users should also acknowledge using Helmi if applicable -

-
- -
-
- ) -} \ No newline at end of file diff --git a/src/components/Author.jsx b/src/components/Author.jsx deleted file mode 100644 index 164fbaa90e66..000000000000 --- a/src/components/Author.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - - -export const Author = ({ author }) => { - return ( -
- Author -
-

{author?.name}

-

{author?.bio}

-
-
- ) -} \ No newline at end of file diff --git a/src/layouts/post.html.jsx b/src/layouts/post.html.jsx index 33f9944158d6..bb0c876bfb8e 100644 --- a/src/layouts/post.html.jsx +++ b/src/layouts/post.html.jsx @@ -9,8 +9,6 @@ import { ReadNext } from '../components/ReadNext' import { BlogTags } from '../components/BlogTags' -import { Author } from '../components/Author' - import { ReferencesAccordion } from '../components/ReferencesAccordion' import { BaseLayout } from './base.html' @@ -44,10 +42,6 @@ export const PostLayout = props => { , document.getElementById('tags') )} - {createPortal( - , - document.getElementById('author') - )} {createPortal( , document.getElementById('references-accordion') diff --git a/src/pages/about.md.jsx b/src/pages/about.md.jsx index dc6eda242920..84683344360d 100644 --- a/src/pages/about.md.jsx +++ b/src/pages/about.md.jsx @@ -2,8 +2,6 @@ import React from 'react' import { createRoot } from 'react-dom/client' import { createPortal } from 'react-dom' -import { AboutPage } from '../components/AboutPage' - import { PageLayout } from '../layouts/page.html' import { useJsonApi } from '../hooks/useJsonApi' @@ -14,10 +12,6 @@ const AboutPageView = () => { return <> - {createPortal( - , - document.getElementById('about') - )} } From 5f5d5f3bcdc3084690abdd95ea43d4192863efa2 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 13:24:39 +0300 Subject: [PATCH 39/52] old file --- src/components/Home.jsx | 92 ----------------------------------------- 1 file changed, 92 deletions(-) delete mode 100644 src/components/Home.jsx diff --git a/src/components/Home.jsx b/src/components/Home.jsx deleted file mode 100644 index c68c48436350..000000000000 --- a/src/components/Home.jsx +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; -import '@cscfi/csc-ui-react/css/theme.css'; -import { CButton, CIcon } from '@cscfi/csc-ui-react'; -import { mdiArrowRight, mdiArrowDown } from '@mdi/js'; -import { prependBaseURL, isExternal, isAnchor } from '../utils/url'; - -const style = { - "--_c-button-font-size": 25, - "--_c-button-min-width": 0, - "--_c-button-height": "55px", - "--_c-icon-color": "white" -}; - -const getIconPath = href => isExternal(href) - ? mdiOpenInNew - : isAnchor(href) - ? mdiArrowDown - : mdiArrowRight - -const ContentButton = props => { - const isActive = window.location.pathname === props.href; - - var styleClass = "text-white text-sm sm:text-md py-3 break-words" - if (isActive) { - styleClass = styleClass - } - - return ( -
- (window.location.href = prependBaseURL(props.href))} - > -

{props.title}

- - - (window.location.href = prependBaseURL(props.href))} - > -

{props.title}

- - -
- ); -}; - -const Announcement = props => -
-

{props.text}

- {props.link.title} -
- -export const Home = props => { - const contentButtons = - props.buttons?.map(button => ) - - const announcementComponent = typeof props.announcement !== 'undefined' - ? - : <> - - return ( -
-
- -
- -
-
-

- {props.tagline || ''} -

-

{props.subtitle || ''}

-
-
- -
- {announcementComponent} -
- { contentButtons } -
-
-
-
- ) -} \ No newline at end of file From f46d19f4b70d97a564cbd4067e8d00d98e00331b Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 13:24:54 +0300 Subject: [PATCH 40/52] move breadcrumbs to layout --- src/components/Blogs.jsx | 31 +++++++++------------ src/components/Events.jsx | 46 +++++++++++++++----------------- src/components/GetAccess.jsx | 44 ++++++++++++++---------------- src/components/ServiceStatus.jsx | 5 ---- src/components/SiteSearch.jsx | 3 --- src/layouts/page.html.jsx | 6 +++++ 6 files changed, 61 insertions(+), 74 deletions(-) diff --git a/src/components/Blogs.jsx b/src/components/Blogs.jsx index ae2689e0d695..db2b597e699e 100644 --- a/src/components/Blogs.jsx +++ b/src/components/Blogs.jsx @@ -210,24 +210,19 @@ export const Blogs = () => { }; return ( -
-
-
- -
-
- -
-
- -
+
+
+ +
+
+
{ }; return ( -
-
-
- -
-
- -
-
- - -
+ +
+
+ +
+
+ +
{ handleFilterChange={handleFilterChange} />
+ + ); }; diff --git a/src/components/GetAccess.jsx b/src/components/GetAccess.jsx index cc164e8e988f..c868e8d8a393 100644 --- a/src/components/GetAccess.jsx +++ b/src/components/GetAccess.jsx @@ -51,36 +51,32 @@ export const GetAccess = props => { const emulation_resources = props?.emulation_resources useEffect(() => { if (window.location.hash !== "") { - const hash = window.location.hash; - const element = document.getElementById(hash.substring(1)); - if (element) { - const elementPosition = element.getBoundingClientRect().top + window.pageYOffset; - const offsetPosition = elementPosition - 100; - - window.scrollTo({ - top: offsetPosition, - behavior: 'smooth' - }); - } + const hash = window.location.hash; + const element = document.getElementById(hash.substring(1)); + if (element) { + const elementPosition = element.getBoundingClientRect().top + window.pageYOffset; + const offsetPosition = elementPosition - 100; + + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } } - }, []); + }, []); return ( -
-
-
- -
-
-
-

Please see status of services from Status -page

- - +
+
+
+

Please see status of services from Status -page

+ - + + + -
); diff --git a/src/components/ServiceStatus.jsx b/src/components/ServiceStatus.jsx index cdedd8864d32..669e66187679 100644 --- a/src/components/ServiceStatus.jsx +++ b/src/components/ServiceStatus.jsx @@ -8,10 +8,6 @@ export const ServiceStatus = () => { const status = useStatus('https://fiqci-backend-fiqci-workspace.2.rahtiapp.fi/healthcheck') return ( -
-
- -

@@ -59,7 +55,6 @@ export const ServiceStatus = () => {

-
); }; diff --git a/src/components/SiteSearch.jsx b/src/components/SiteSearch.jsx index 00e9fe74473f..dc0634b42206 100644 --- a/src/components/SiteSearch.jsx +++ b/src/components/SiteSearch.jsx @@ -356,9 +356,6 @@ export const SiteSearch = () => { return (
-
- -
diff --git a/src/layouts/page.html.jsx b/src/layouts/page.html.jsx index e425a6bedbcb..283cb80a79ab 100644 --- a/src/layouts/page.html.jsx +++ b/src/layouts/page.html.jsx @@ -3,6 +3,8 @@ import { createPortal } from 'react-dom' import { Banner } from '../components/Banner' +import { Breadcrumbs } from '../components/Breadcrumbs' + import { BaseLayout } from './base.html' @@ -16,5 +18,9 @@ export const PageLayout = props => { , document.getElementById('banner') )} + {createPortal( + , + document.getElementById('breadcrumbs') + )} } From 7be69612e90982e4f186db1b52b5e89355d7674b Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 13:51:23 +0300 Subject: [PATCH 41/52] move AboutFiqci to home source --- content/_layouts/home.html | 124 +++++++++++++++++++++++++++++++++- src/components/AboutFiqci.jsx | 100 --------------------------- src/layouts/home.html.jsx | 5 -- 3 files changed, 123 insertions(+), 106 deletions(-) delete mode 100644 src/components/AboutFiqci.jsx diff --git a/content/_layouts/home.html b/content/_layouts/home.html index 1a046ddf1e06..c357fc304e83 100644 --- a/content/_layouts/home.html +++ b/content/_layouts/home.html @@ -6,4 +6,126 @@ {{ content }} -{%- include react/root.html id='about-fiqci' -%} +
+
+
+ + +
+
+
+

FiQCI mission

+
+
+
+

+ Through FiQCI, Finnish researchers have access to one of the most + powerful hybrid HPC+nQC resources in the world. +

+

+ Available for quantum-accelerated research and development. +

+
+
+
+

+ The mission of FiQCI is to provide state-of-the-art quantum-computing + services such as computing time and training to the Finnish RDI communities. + This includes providing a hybrid high-performance computing and quantum computing + (HPC+QC) platform for developing, testing, and exploiting quantum-accelerated + computational workflows. Through FiQCI, Finnish researchers have access to one + of the most powerful hybrid HPC+nQC resources in the world, available for + quantum accelerated research and development. The infrastructure also aims + to offer possibilities to carry out experiments in quantum physics. +

+

+ FiQCI is jointly maintained, operated, and developed by VTT, Aalto + University, and CSC - IT Center for Science. +

+ +
+ +
+
Read more about FiQCI
+ +
+ +
+ +
+ +
+
How to get access
+ +
+ +
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/components/AboutFiqci.jsx b/src/components/AboutFiqci.jsx deleted file mode 100644 index 86f13e29b5b4..000000000000 --- a/src/components/AboutFiqci.jsx +++ /dev/null @@ -1,100 +0,0 @@ -import React from "react"; -import { mdiArrowRight } from '@mdi/js'; -import { CIcon } from '@cscfi/csc-ui-react'; - -const AboutHeader = () => { - return ( -
-

FiQCI mission

-
- ) -} - -const BlueBox = () => { - return ( -
-
-

- Through FiQCI, Finnish researchers have access to one of the most - powerful hybrid HPC+nQC resources in the world. -

-

- Available for quantum-accelerated research and development. -

-
-
- ) -} - -const TextContent = () => { - return ( -
-

- The mission of FiQCI is to provide state-of-the-art quantum-computing - services such as computing time and training to the Finnish RDI communities. - This includes providing a hybrid high-performance computing and quantum computing - (HPC+QC) platform for developing, testing, and exploiting quantum-accelerated - computational workflows. Through FiQCI, Finnish researchers have access to one - of the most powerful hybrid HPC+nQC resources in the world, available for - quantum accelerated research and development. The infrastructure also aims - to offer possibilities to carry out experiments in quantum physics. -

-

- FiQCI is jointly maintained, operated, and developed by VTT, Aalto - University, and CSC - IT Center for Science. -

- - - - -
- - ) -} - -export const AboutFiqci = () => { - return ( -
- -
-
-
-
- - -
- -
- -
-
- - - -
-
-
-
-
- ); -}; diff --git a/src/layouts/home.html.jsx b/src/layouts/home.html.jsx index d411371ae571..ab509254459b 100644 --- a/src/layouts/home.html.jsx +++ b/src/layouts/home.html.jsx @@ -2,7 +2,6 @@ import React from 'react' import { createPortal } from 'react-dom' import { Hero } from '../components/Hero' -import { AboutFiqci } from '../components/AboutFiqci' import { BaseLayout } from './base.html' @@ -16,9 +15,5 @@ export const HomeLayout = props => { , document.getElementById('hero') )} - {createPortal( - , - document.getElementById('about-fiqci') - )} } From 8163ca7ca54066bc482cf7d2624da107e6691afb Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 13:55:59 +0300 Subject: [PATCH 42/52] remove unused imports --- src/components/BlogTags.jsx | 2 +- src/components/Blogs.jsx | 1 - src/components/Events.jsx | 1 - src/components/GetAccess.jsx | 3 --- src/components/ServiceStatus.jsx | 1 - src/components/SiteSearch.jsx | 1 - 6 files changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/BlogTags.jsx b/src/components/BlogTags.jsx index 98065cbd8925..028f79eba562 100644 --- a/src/components/BlogTags.jsx +++ b/src/components/BlogTags.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { CTag, CTags } from '@cscfi/csc-ui-react'; export const BlogTags = ({ tags }) => { diff --git a/src/components/Blogs.jsx b/src/components/Blogs.jsx index db2b597e699e..0b82fee80f43 100644 --- a/src/components/Blogs.jsx +++ b/src/components/Blogs.jsx @@ -5,7 +5,6 @@ import { CCardTitle, CCardContent, CCardActions } from '@cscfi/csc-ui-react'; import { BlogCardComponent } from './BlogCards'; -import { Breadcrumbs } from './Breadcrumbs'; const BlogFilters = ({ filters, handleFilterChange }) => { const handleCheckboxChange = useCallback((category, option) => { diff --git a/src/components/Events.jsx b/src/components/Events.jsx index 9ab5951ff8a2..6161dbe070a4 100644 --- a/src/components/Events.jsx +++ b/src/components/Events.jsx @@ -5,7 +5,6 @@ import { CCardTitle, CCardContent, CCardActions } from '@cscfi/csc-ui-react'; import { EventCardComponent } from './EventCards'; -import { Breadcrumbs } from './Breadcrumbs'; //Split events to past and upcoming ones const SplitEvents = () => { diff --git a/src/components/GetAccess.jsx b/src/components/GetAccess.jsx index c868e8d8a393..9fecf4b3839d 100644 --- a/src/components/GetAccess.jsx +++ b/src/components/GetAccess.jsx @@ -1,9 +1,6 @@ import React from "react"; import { useEffect } from "react"; -import { Breadcrumbs } from "./Breadcrumbs"; -import { mdiArrowRight, mdiOpenInNew } from '@mdi/js'; import { prependBaseURL } from '../utils/url'; -import { useJsonApi } from '../hooks/useJsonApi'; const ResourceCard = ({ resource }) => { return ( diff --git a/src/components/ServiceStatus.jsx b/src/components/ServiceStatus.jsx index 669e66187679..65e7b7e9e71e 100644 --- a/src/components/ServiceStatus.jsx +++ b/src/components/ServiceStatus.jsx @@ -1,7 +1,6 @@ import React from 'react' import { useStatus } from '../hooks/useStatus' -import { Breadcrumbs } from './Breadcrumbs'; // import { StatusIndicator } from './StatusIndicator' export const ServiceStatus = () => { diff --git a/src/components/SiteSearch.jsx b/src/components/SiteSearch.jsx index dc0634b42206..15eb91fd205b 100644 --- a/src/components/SiteSearch.jsx +++ b/src/components/SiteSearch.jsx @@ -6,7 +6,6 @@ import { CCardTitle, CCardContent, CCardActions } from '@cscfi/csc-ui-react'; -import { Breadcrumbs } from './Breadcrumbs'; const style = { "--_c-button-font-size": 14, From 709ceaccc0b13a884c720c30808204baf5c01498 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 14:51:38 +0300 Subject: [PATCH 43/52] remove unused data-content --- content/_layouts/post.html | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/content/_layouts/post.html b/content/_layouts/post.html index fb721d891eaa..2c107154ae54 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -12,13 +12,9 @@
{%- include react/root.html id='breadcrumbs' -%}
-
+
- Author + Author

{{author_info.name}}

{{author_info.bio}}

From b3b2705b6e7df594f90983018b82df19fefd5010 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 15:20:17 +0300 Subject: [PATCH 44/52] move static text to constants --- content/_data/constants.yml | 69 ++++++++++++++++++++++++++++++ content/_layouts/home.html | 26 +++--------- content/_layouts/page.html | 2 +- content/pages/about.md | 84 ++++++++++++++----------------------- 4 files changed, 108 insertions(+), 73 deletions(-) diff --git a/content/_data/constants.yml b/content/_data/constants.yml index 8a585ed78df4..779bbbc5e7a0 100644 --- a/content/_data/constants.yml +++ b/content/_data/constants.yml @@ -118,6 +118,75 @@ emulation_resources: teaser: "Quantum emulation dosumentation" icon: mdiArrowRight +about: + desc: |- + The Finnish Quantum-Computing Infrastructure (FiQCI) was established in 2020, when it became + part of the Finnish Research Infrastructure (FIRI) roadmap of significant national research + infrastructures within the Finnish research infrastructure ecosystem, maintained by the + Research Council of Finland. + + mission: |- + The mission of FiQCI is to provide state-of-the-art quantum-computing services such as + computing time and training to the Finnish RDI communities. This includes providing a + hybrid high-performance computing and quantum computing (HPC+QC) platform for developing, + testing, and exploiting quantum-accelerated computational workflows. Through FiQCI, Finnish + researchers have access to one of the most powerful hybrid HPC+nQC resources in the world, + available for quantum accelerated research and development. The infrastructure also aims to + offer possibilities to carry out experiments in quantum physics. + + maintain: |- + FiQCI is jointly maintained, operated, and developed by VTT, Aalto University, and + CSC - IT Center for Science. + + advisory-group: + desc: |- + The Scientific and Technical Advisory Group (STAG) provides input for the operation + of the infrastructure. The current (2023) members of the STAG are: + people: + - name: Dr. Valeria Bartsch + institution: Fraunhofer Institute for Industrial Mathematics + country: Germany + + - name: Dr. Alba Cervera Lierta + institution: Barcelona Supercomputing Center + country: Spain + + - name: Prof. Tommi Mikkonen + institution: University of Jyväskylä + country: Finland + + - name: Prof. Martin Schulz + institution: Technical University of Munich + country: Germany + + - name: Prof. Göran Wendin + institution: Chalmers University of Technology + country: Sweden + + management: + people: + - name: Prof. Mika Prunnila + institution: VTT + title: FiQCI director + + - name: Dr. Mikael Johansson + institution: CSC + title: FiQCI vice-director + + - name: Prof. Tapio Ala-Nissilä + institution: Aalto University + title: FiQCI vice-director + + acknowledgement: + desc: |- + When publishing the results that utilise the FiQCI infrastructure, users should acknowledge + the use of FiQCI, preferably in the format: "These results have been acquired using the + Finnish Quantum-Computing Infrastructure + + helmi-link-url: /publications/2022-11-01-Helmi_pilot + helmi-link-text: Additionally, users should also acknowledge using Helmi if applicable + + logo: assets/images/FiQCI-logo.png favicon: assets/images/favicon.png diff --git a/content/_layouts/home.html b/content/_layouts/home.html index c357fc304e83..32e0efdbd57c 100644 --- a/content/_layouts/home.html +++ b/content/_layouts/home.html @@ -2,6 +2,8 @@ layout: base --- +{% assign about_data = site.data.constants.about %} + {%- include react/root.html id='hero' -%} {{ content }} @@ -16,18 +18,10 @@

FiQCI mission

- The mission of FiQCI is to provide state-of-the-art quantum-computing - services such as computing time and training to the Finnish RDI communities. - This includes providing a hybrid high-performance computing and quantum computing - (HPC+QC) platform for developing, testing, and exploiting quantum-accelerated - computational workflows. Through FiQCI, Finnish researchers have access to one - of the most powerful hybrid HPC+nQC resources in the world, available for - quantum accelerated research and development. The infrastructure also aims - to offer possibilities to carry out experiments in quantum physics. + {{ about_data.mission }}

- FiQCI is jointly maintained, operated, and developed by VTT, Aalto - University, and CSC - IT Center for Science. + {{ about_data.maintain }}

@@ -86,18 +80,10 @@

FiQCI mission

- The mission of FiQCI is to provide state-of-the-art quantum-computing - services such as computing time and training to the Finnish RDI communities. - This includes providing a hybrid high-performance computing and quantum computing - (HPC+QC) platform for developing, testing, and exploiting quantum-accelerated - computational workflows. Through FiQCI, Finnish researchers have access to one - of the most powerful hybrid HPC+nQC resources in the world, available for - quantum accelerated research and development. The infrastructure also aims - to offer possibilities to carry out experiments in quantum physics. + {{ about_data.mission }}

- FiQCI is jointly maintained, operated, and developed by VTT, Aalto - University, and CSC - IT Center for Science. + {{ about_data.maintain }}

diff --git a/content/_layouts/page.html b/content/_layouts/page.html index eec81fffd5ac..a089e4d84f42 100644 --- a/content/_layouts/page.html +++ b/content/_layouts/page.html @@ -6,7 +6,7 @@
-
+
{%- include react/root.html id='breadcrumbs' -%}
diff --git a/content/pages/about.md b/content/pages/about.md index 95fb878a4df9..4865a5eb8d81 100644 --- a/content/pages/about.md +++ b/content/pages/about.md @@ -4,58 +4,38 @@ title: About subtitle: The FiQCI consortium maintains, operates, and develops the infrastructure react: true --- + +{% assign about_data = site.data.constants.about %} +
-

About FiQCI

-
-

- The Finnish Quantum-Computing Infrastructure (FiQCI) was established in 2020, when it became - part of the Finnish Research Infrastructure (FIRI) roadmap of significant national research - infrastructures within the Finnish research infrastructure ecosystem, maintained by the - Research Council of Finland. -

-
-

- The mission of FiQCI is to provide state-of-the-art quantum-computing services such as - computing time and training to the Finnish RDI communities. This includes providing a - hybrid high-performance computing and quantum computing (HPC+QC) platform for developing, - testing, and exploiting quantum-accelerated computational workflows. Through FiQCI, Finnish - researchers have access to one of the most powerful hybrid HPC+nQC resources in the world, - available for quantum accelerated research and development. The infrastructure also aims to - offer possibilities to carry out experiments in quantum physics. -

-
-

- FiQCI is jointly maintained, operated, and developed by VTT, Aalto University, and - CSC - IT Center for Science. -

-
-
-

Scientific and Technical Advisory Group

-

- The Scientific and Technical Advisory Group (STAG) provides input for the operation - of the infrastructure. The current (2023) members of the STAG are: -

-
    -
  • Dr. Valeria Bartsch, Fraunhofer Institute for Industrial Mathematics, Germany
    • -
  • Dr. Alba Cervera Lierta, Barcelona Supercomputing Center, Spain
    • -
  • Prof. Tommi Mikkonen, University of Jyväskylä, Finland
    • -
  • Prof. Martin Schulz, Technical University of Munich, Germany
    • -
  • Prof. Göran Wendin, Chalmers University of Technology, Sweden
    • -
+

About FiQCI

+
+

{{ about_data.desc }}

+
+

{{ about_data.mission }}

+
+

{{ about_data.maintain }}

+
+
+

Scientific and Technical Advisory Group

+

{{ about_data.advisory-group.desc }}

+
    + {% for member in about_data.advisory-group.people %} +
  • {{ member.name }}, {{ member.institution }}, {{ member.country }}
    • + {% endfor %} +
-

Management

-
    -
  • Prof. Mika Prunnila, VTT, FiQCI director
    • -
  • Dr. Mikael Johansson, CSC, FiQCI vice-director
    • -
  • Prof. Tapio Ala-Nissilä, Aalto University, FiQCI vice-director
    • -
+

Management

+
    + {% for mgr in about_data.advisory-group.management.people %} +
  • {{ mgr.name }}, {{ mgr.institution }}, {{ mgr.title }}
    • + {% endfor %} +
-

Acknowledgement

-

- When publishing the results that utilise the FiQCI infrastructure, users should acknowledge - the use of FiQCI, preferably in the format: "These results have been acquired using the - Finnish Quantum-Computing Infrastructure (https://fiqci.fi)". - Additionally, users should also acknowledge using Helmi if applicable -

-
-
\ No newline at end of file +

Acknowledgement

+

{{ about_data.advisory-group.acknowledgement.desc }} "Finnish Quantum-Computing Infrastructure (https://fiqci.fi)". + + {{ about_data.advisory-group.acknowledgement.helmi-link-text }} +

+
+
From 7b1a6a49cf9cd8895cb62c5a284d0ae5c1df03cc Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 15:20:21 +0300 Subject: [PATCH 45/52] move static text to constants --- content/_data/constants.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/content/_data/constants.yml b/content/_data/constants.yml index 779bbbc5e7a0..a280af669d6a 100644 --- a/content/_data/constants.yml +++ b/content/_data/constants.yml @@ -184,9 +184,7 @@ about: Finnish Quantum-Computing Infrastructure helmi-link-url: /publications/2022-11-01-Helmi_pilot - helmi-link-text: Additionally, users should also acknowledge using Helmi if applicable - - + helmi-link-text: Additionally, users should also acknowledge using Helmi if applicable logo: assets/images/FiQCI-logo.png favicon: assets/images/favicon.png From 884a18b3a645e759cadc1e53ebc5ab1351853461 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 15:22:21 +0300 Subject: [PATCH 46/52] formatting --- content/_data/constants.yml | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/content/_data/constants.yml b/content/_data/constants.yml index a280af669d6a..61842a6233c6 100644 --- a/content/_data/constants.yml +++ b/content/_data/constants.yml @@ -40,7 +40,9 @@ access_cards: 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. + 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/ @@ -48,7 +50,9 @@ access_cards: 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. + 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 @@ -58,7 +62,10 @@ access_cards: 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. + 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 @@ -98,7 +105,9 @@ quantum_resources: supercomputer_resources: - name: LUMI desc: |- - 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. + 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. image: "/assets/images/FiQCI-banner.jpg" links: - link: "" @@ -191,6 +200,7 @@ 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. + 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: " – " From 160770f00bf03d014010a93263dd24a69aef3db4 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 26 May 2025 15:23:49 +0300 Subject: [PATCH 47/52] remove random comment --- src/components/BlogCards.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BlogCards.jsx b/src/components/BlogCards.jsx index 2405a0be6a0d..8813763c8ed2 100644 --- a/src/components/BlogCards.jsx +++ b/src/components/BlogCards.jsx @@ -7,7 +7,7 @@ export const BlogCardComponent = props => { const type = props?.filters?.Type ? Object.entries(props?.filters?.Type)?.filter(field => field[1])[0][0] : "News"; return ( {/* Adjusted card width */} - Logo {/* Reduced image height */} + Logo
Date: Wed, 28 May 2025 14:29:53 +0300 Subject: [PATCH 48/52] move post away from default.jsx --- content/_includes/head.html | 4 +++- content/_layouts/post.html | 2 ++ src/pages/default.jsx | 20 +++++--------------- src/pages/post.jsx | 22 ++++++++++++++++++++++ 4 files changed, 32 insertions(+), 16 deletions(-) create mode 100644 src/pages/post.jsx diff --git a/content/_includes/head.html b/content/_includes/head.html index 8c94b778f109..c93218937e32 100644 --- a/content/_includes/head.html +++ b/content/_includes/head.html @@ -11,7 +11,9 @@ {% include external/mathjax.html -%} {% include external/font.html %} - {% if page.react %} + {% if page.collection == "publications" %} + {%- assign react_source = "post.js" -%} + {% elsif page.react %} {%- assign react_source = page.name | append: ".js" -%} {% else %} {%- assign react_source = "default.js" -%} diff --git a/content/_layouts/post.html b/content/_layouts/post.html index 2c107154ae54..9ae6d505a855 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -1,11 +1,13 @@ --- layout: base +react: true --- {% assign constants = site.data.constants %} {% assign author_info = site.data.authors[page.author] %} {%- include react/root.html id='banner' -%} +
diff --git a/src/pages/default.jsx b/src/pages/default.jsx index a947fe544153..59ce2ff293de 100644 --- a/src/pages/default.jsx +++ b/src/pages/default.jsx @@ -2,30 +2,20 @@ import React from 'react' import { createRoot } from 'react-dom/client' -import { PostLayout } from '../layouts/post.html' - import { BaseLayout } from '../layouts/base.html' import { useJsonApi } from '../hooks/useJsonApi' -const BlogViewPage = () => { +const DefaultPage = () => { const themeConstants = useJsonApi('api/theme/constants.json') - if (!document.getElementById('blogView')) { - return <> - - - } - - return ( - <> - - - ) + return <> + + } document.addEventListener('DOMContentLoaded', () => { const root = createRoot(document.getElementById('react-root')) - root.render() + root.render() }) diff --git a/src/pages/post.jsx b/src/pages/post.jsx new file mode 100644 index 000000000000..c5de5bf38fee --- /dev/null +++ b/src/pages/post.jsx @@ -0,0 +1,22 @@ +import React from 'react' + +import { createRoot } from 'react-dom/client' + +import { PostLayout } from '../layouts/post.html' + +import { useJsonApi } from '../hooks/useJsonApi' + +const BlogViewPage = () => { + const themeConstants = useJsonApi('api/theme/constants.json') + return ( + <> + + + ) +} + +document.addEventListener('DOMContentLoaded', () => { + const root = createRoot(document.getElementById('react-root')) + + root.render() +}) From 416446598b20832d7974d9a34834455824c992c6 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 30 May 2025 11:42:37 +0300 Subject: [PATCH 49/52] move post to src/views --- src/{pages => views}/post.jsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{pages => views}/post.jsx (100%) diff --git a/src/pages/post.jsx b/src/views/post.jsx similarity index 100% rename from src/pages/post.jsx rename to src/views/post.jsx From e45df1aa3b3a03f052b9c2a753034187f8ba5430 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 30 May 2025 11:43:37 +0300 Subject: [PATCH 50/52] refactor away hardcoded post.js --- content/_includes/head.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/_includes/head.html b/content/_includes/head.html index c93218937e32..604e7601edd4 100644 --- a/content/_includes/head.html +++ b/content/_includes/head.html @@ -11,10 +11,10 @@ {% include external/mathjax.html -%} {% include external/font.html %} - {% if page.collection == "publications" %} - {%- assign react_source = "post.js" -%} - {% elsif page.react %} + {% if page.react and (site.pages | where: "name" page.name) %} {%- assign react_source = page.name | append: ".js" -%} + {% elsif (site.collections | where: "label" page.collection) %} + {%- assign react_source = page.layout | append: ".js" %} {% else %} {%- assign react_source = "default.js" -%} {% endif %} From 46a89b7b9e0821fb0b405488dd8426af893bec7e Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 30 May 2025 11:43:54 +0300 Subject: [PATCH 51/52] add src/views to reactPagesDir --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fde1d7c9207e..eb6036cb4cd5 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ }, "webpack": { "outputDir": "./dist", - "reactPagesDir": "./src/pages" + "reactPagesDir": "./src/pages, ./src/views" }, "tailwindcss": { "inputDir": "./src/stylesheets" From b9b301f242bf5883259707cf64e5f6d7dd18778e Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Fri, 30 May 2025 11:44:12 +0300 Subject: [PATCH 52/52] add support for a list of sources in reactPagesDir --- webpack.config.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 433c3a078534..35a7b5d2af7d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,17 +12,24 @@ const JEKYLL_CONFIG_FNAME = process.env.npm_package_config_jekyll_webpackConfigFilename; const OUTPUT_DIR = process.env.npm_package_config_webpack_outputDir; +const reactPageSources = REACT_PAGES_DIR.split(",").map((dir) => path.resolve(__dirname, dir.trim())); const stylesheetsDirpath = path.resolve(__dirname, TAILWINDCSS_INPUT_DIR); -const reactPageSources = path.resolve(__dirname, REACT_PAGES_DIR); const outputDirpath = path.resolve(__dirname, OUTPUT_DIR); const jekyllConfigFilepath = path.resolve(__dirname, JEKYLL_CONFIG_FNAME); + const entryFiles = {}; -fs.readdirSync(reactPageSources).forEach((file) => { - if (file.endsWith(".jsx")) { - const name = path.parse(file).name; // Use the file name (without extension) as the entry name - entryFiles[name] = path.resolve(__dirname, REACT_PAGES_DIR, file); - } + +reactPageSources.forEach((dir) => { + const absReactDir = path.resolve(__dirname, dir); + if (!fs.existsSync(absReactDir)) return; + + fs.readdirSync(absReactDir).forEach((file) => { + if (file.endsWith(".jsx")) { + const name = path.parse(file).name; // Use the file name (without extension) as the entry name + entryFiles[name] = path.resolve(__dirname, absReactDir, file); + } + }); }); const cssFilenames = fs