diff --git a/.vscode/settings.json b/.vscode/settings.json index 972819d29020..8509a5e937ac 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { "files.associations": { - "**/content/**/*.{html,js}": "liquid", + "**/content/**/*.{html,liquid}": "liquid", } } diff --git a/content/_data/site-constants.yml b/content/_data/site-constants.yml index f69808419725..e74b51fc82c2 100644 --- a/content/_data/site-constants.yml +++ b/content/_data/site-constants.yml @@ -1,7 +1,58 @@ title: FiQCI author: The FiQCI Consortium +feedback_email: fiqci-feedback@postit.csc.fi + +hero: + tagline: Making the power of quantum computing accessible + subtitle: FiQCI – Finnish quantum-computing infrastructure + announcement: + text: Open call for pilot access to Helmi quantum computer now open! + link: + title: How to access Helmi, instructions + href: FIXME + buttons: + - title: How to get access + href: "#get-access" + - title: Blogs and instructions + href: /publications + - title: About FiQCI + href: "#about-fiqci" + +access-cards: + - title: LUMI + href: FIXME + teaser: /assets/images/FiQCI-banner.jpg + description: |- + The backbone of the classical HPC resources in FiQCI, and the portal for quantum computing resources, is the pan-European EuroHPC LUMI supercomputer. LUMI is the fastest and greenest supercomputer in Europe, hosted by CSC in Kajaani, Finland. + links: + - title: Getting started with Lumi + href: https://www.lumi-supercomputer.eu/get-started/ + - title: Helmi - VTT Q5 + href: FIXME + teaser: /assets/images/vtt-images/VTT_lab-2.jpg + description: |- + Helmi, the first Finnish quantum computer, co-developed by VTT and IQM Quantum Computers, is operated by VTT in Espoo, Finland. Helmi is based on superconducting technology, and presently provides five qubits. Upgrades to 20, then 50 qubits is planned for the near future. + links: + - title: How to access Helmi, instructions + href: FIXME + - title: Read more about Helmi + href: FIXME + - title: Kvasi + href: FIXME + teaser: /assets/images/FiQCI-banner.jpg + description: |- + Kvasi, the Atos Quantum Learning Machine or Qaptiva is a quantum computing simulator with which you can learn to use and develop new quantum algorithms. Kvasi provides a platform for developing and simulating quantum algorithms in both ideal and realistic, noisy conditions. Kvasi is capable of simulating algorithms for quantum computers of 30+ qubits. + links: + - title: How to access Kvasi, instructions + href: FIXME + - title: Read more about Kvasi + href: FIXME + logo: assets/images/FiQCI-logo.png favicon: assets/images/favicon.png +footer-icons: assets/footer-icons +funder-logos: assets/images/funders description: >- Web presence of the Finnish Quantum-Computing Infrastructure. We provide state-of-the-art quantum-computing services to Finnish RDI communities. excerpt_max_length: 250 +title_separator: " – " diff --git a/content/_includes/external/font.html b/content/_includes/external/font.html new file mode 100644 index 000000000000..ac83c2d2aede --- /dev/null +++ b/content/_includes/external/font.html @@ -0,0 +1,2 @@ + + diff --git a/content/_includes/head.html b/content/_includes/head.html index 0aad975304ba..f14931f1e4f5 100644 --- a/content/_includes/head.html +++ b/content/_includes/head.html @@ -1,27 +1,20 @@ {% assign constants = site.data.site-constants %} + {{ page.title }}{{ constants.title_separator }}{{ constants.title }} - - - {%- include external/mathjax.html -%} - - - - {% assign react_source_files = include.react_source_files %} - {% unless layout.react_source_files == empty %} - {% for src in layout.react_source_files %} - {% assign react_source_files = react_source_files | push: src %} - {% endfor %} - {% endunless %} - {% unless page.react_source_files == empty %} - {% for src in page.react_source_files %} - {% assign react_source_files = react_source_files | push: src %} - {% endfor %} - {% endunless %} - {%- unless react_source_files == empty %} - {%- include react/sources.html sources=react_source_files -%} - {%- endunless -%} + + + + {% include external/mathjax.html -%} + {% include external/font.html %} + + {% if page.react %} + {%- assign react_source = page.name | append: ".js" -%} + {% else %} + {%- assign react_source = "default.js" -%} + {% endif %} + diff --git a/content/_includes/header.html b/content/_includes/header.html deleted file mode 100644 index ff75b2a78048..000000000000 --- a/content/_includes/header.html +++ /dev/null @@ -1 +0,0 @@ -{%- include react/root.html id='navigation-header' -%} diff --git a/content/_includes/post-list.html b/content/_includes/post-list.html index 5b40aa5a9024..41c3a4283541 100644 --- a/content/_includes/post-list.html +++ b/content/_includes/post-list.html @@ -7,7 +7,7 @@ {%- assign date_format = constants.date_format | default: "%b %-d, %Y" -%} {{ post.date | date: date_format }}
- + {{ post.title | escape }}
diff --git a/content/_includes/react/section-root.html b/content/_includes/react/section-root.html new file mode 100644 index 000000000000..74dfd1e8e5ef --- /dev/null +++ b/content/_includes/react/section-root.html @@ -0,0 +1,6 @@ +
+
+

{{ include.heading }}

+
+
+
diff --git a/content/_includes/react/sources.html b/content/_includes/react/sources.html deleted file mode 100644 index 320c780d2241..000000000000 --- a/content/_includes/react/sources.html +++ /dev/null @@ -1,4 +0,0 @@ -{% assign react_source_files = include.sources | uniq %} -{%- for src in react_source_files -%} - -{%- endfor -%} diff --git a/content/_layouts/base.html b/content/_layouts/base.html index 759ffc98ac9b..64410e29ac36 100644 --- a/content/_layouts/base.html +++ b/content/_layouts/base.html @@ -1,25 +1,16 @@ ---- -base_react_sources: - - navigation.js - - footer.js ---- - {% assign base_react_sources = layout.base_react_sources %} - {% for src in layout.react_source_files %} - {% assign base_react_sources = base_react_sources | push: src %} - {% endfor %} - {%- include head.html react_source_files=base_react_sources -%} + {%- include head.html -%} + {%- include react/root.html id='react-root' -%} + -
- {%- include react/root.html id='navigation-header' -%} -
- {{ content }} + {{ content }}
- {%- include react/root.html id='footer' -%} + + diff --git a/content/_layouts/home.html b/content/_layouts/home.html index e768d7af8d6c..1ea67f4e3660 100644 --- a/content/_layouts/home.html +++ b/content/_layouts/home.html @@ -1,15 +1,11 @@ --- layout: base react_source_files: - - home.js - - aboutFiqci.js + - home.html.js --- -{%- include react/root.html id='home' -%} +{%- include react/root.html id='hero' -%} -
+{{ content }} - {{ content }} - -
-{%- include react/root.html id='about-fiqci' -%} \ No newline at end of file +{%- include react/root.html id='about-fiqci' -%} diff --git a/content/_layouts/page.html b/content/_layouts/page.html index fe4813c591e1..5466cbbc8a25 100644 --- a/content/_layouts/page.html +++ b/content/_layouts/page.html @@ -2,6 +2,8 @@ layout: base --- +{%- include react/root.html id='banner' -%} +
diff --git a/content/_layouts/post.html b/content/_layouts/post.html index 1c7a96dcd7cf..82f158fcabd1 100644 --- a/content/_layouts/post.html +++ b/content/_layouts/post.html @@ -2,9 +2,9 @@ layout: base --- {% assign constants = site.data.site-constants %} -
+
-
+

{{ page.title | escape }}

{{ page.title | escape }}

-
+
{{ content }}
diff --git a/content/index.md b/content/index.md index fcb55f7a7a72..7ae62a9cdca9 100644 --- a/content/index.md +++ b/content/index.md @@ -1,12 +1,11 @@ --- +title: Welcome layout: home -react_source_files: - - accessCards.js - - blogCards.js - - eventCards.js - - aboutFiqci.js - +react: true --- -{%- include react/root.html id='access-cards' -%} -{%- include react/root.html id='blog-cards' -%} -{%- include react/root.html id='event-cards' -%} + +{% include react/section-root.html id='access-cards' heading='Get access' %} + +{% include react/section-root.html id='blog-cards' heading='Blogs and instructions' %} + +{% include react/section-root.html id='event-cards' heading='Events' %} diff --git a/content/pages/events.md b/content/pages/events.md index 7fbf46c5fe2d..8552ec3e9a67 100644 --- a/content/pages/events.md +++ b/content/pages/events.md @@ -2,8 +2,7 @@ layout: page title: Events subtitle: Upcoming and past events with connection to FiQCI -react_source_files: - - events.js +react: true --- {%- include react/root.html id='events' -%} diff --git a/content/pages/publications.md b/content/pages/publications.md index b016fb3b9441..f3b6c80117a1 100644 --- a/content/pages/publications.md +++ b/content/pages/publications.md @@ -1,9 +1,8 @@ --- -layout: page -title: Posts and publications +title: Blogs and instructions subtitle: Blog posts, publications, and other material of interest -react_source_files: - - blogs.js +layout: page +react: true --- {%- include react/root.html id='blogs' -%} diff --git a/content/pages/search.md b/content/pages/search.md index e1fe74b1f6ee..d0bb72ad623a 100644 --- a/content/pages/search.md +++ b/content/pages/search.md @@ -1,8 +1,8 @@ --- -layout: page +layout: base title: Search Results -react_source_files: - - searchPage.js +react: true --- - -{%- include react/root.html id='search-page' -%} \ No newline at end of file + + +{%- include react/root.html id='site-search' -%} diff --git a/content/pages/status.md b/content/pages/status.md index 6079f878ac96..3606e39390d4 100644 --- a/content/pages/status.md +++ b/content/pages/status.md @@ -1,9 +1,8 @@ --- -layout: page title: Status subtitle: View the status of the Quantum Connections -react_source_files: - - status.js +layout: page +react: true --- {%- include react/root.html id='service-status' -%} diff --git a/content/properties.css.liquid b/content/properties.css.liquid new file mode 100644 index 000000000000..6ca655ab6011 --- /dev/null +++ b/content/properties.css.liquid @@ -0,0 +1,9 @@ +--- +permalink: properties.css +--- + +@layer components { + :root { + --fiqci-banner-image: url({{ '/assets/images/FiQCI-banner.jpg' | absolute_url }}); + } +} diff --git a/content/site.js b/content/site.js.liquid similarity index 72% rename from content/site.js rename to content/site.js.liquid index 9a6a2fe57d21..ebdccf3bdabd 100644 --- a/content/site.js +++ b/content/site.js.liquid @@ -1,22 +1,26 @@ --- +permalink: site.js --- + {%- assign values = site.data.site-constants -%} +{%- assign deployment = site-%} {%- capture constants -%} { - "logo": "{{ values.logo | relative_url }}", "baseUrl": "{{ site.baseurl }}", + "feedbackEmail": "{{ values.feedback_email }}", + "images": { + "logo": "{{ values.logo | absolute_url }}", + "funderLogosPath": "{{ values.funder-logos | absolute_url }}", + "footerIconsPath": "{{ values.footer-icons | absolute_url }}" + }, "topNav": [ { "title": "Home", "href": "{{ site.baseurl }}", "key": 0 }, - { "title": "Blogs and instructions", "href": "{{ '/publications' | relative_url }}", "key": 1 }, - { "title": "Status", "href": "{{ '/status' | relative_url }}", "key": 2 }, - { "title": "Events", "href": "{{ '/events' | relative_url }}", "key": 3 }, - { "title": "Search", "href": "{{ '/search' | relative_url }}", "key": 4 } - ], - "cardNav": [ - { "title": "How to get access", "href": "{{ '/access' | relative_url }}", "key": 5 }, - { "title": "Blogs and instructions", "href": "{{ '/publications' | relative_url }}", "key": 6 }, - { "title": "About FiQCI", "href": "{{ '/about' | relative_url }}", "key": 7 } + { "title": "Get access", "href": "{{ '/access' | absolute_url }}", "key": 1 }, + { "title": "Blogs and instructions", "href": "{{ '/publications' | absolute_url }}", "key": 2 }, + { "title": "Status", "href": "{{ '/status' | absolute_url }}", "key": 3 }, + { "title": "Events", "href": "{{ '/events' | absolute_url }}", "key": 4 }, + { "title": "Search", "href": "{{ '/search' | absolute_url }}", "key": 5 } ] } {%- endcapture -%} @@ -28,9 +32,9 @@ "key": "{{ forloop.index }}", "type": "{{ publication.type | default: 'News' }}", "title": "{{ publication.title }}", - "url": "{{ publication.url | relative_url }}", + "url": "{{ publication.url | absolute_url }}", "date": "{{ publication.date | date: '%-d.%-m.%Y' }}", - "teaser": "{{publication.header.teaser | relative_url}}", + "teaser": "{{ publication.header.teaser | absolute_url }}", "filters": { {%- for category in publication.filters %} {%- if category[0] == "Theme" -%} @@ -57,7 +61,7 @@ "key": "{{ forloop.index }}", "type": "Event", "title": "{{ event_post.title }}", - "url": "{{ event_post.link | relative_url }}", + "url": "{{ event_post.link | uri_escape }}", "date": "{{ event_post.date | date: '%-d.%-m.%Y' }}", "content": {{ event_post.content | strip_html | strip_newlines | jsonify }}, "filters": { @@ -80,6 +84,7 @@ {%- endcapture -%} const SITE = { + deployment: { baseURL: "{{ site.baseurl }}" }, constants: JSON.parse(String.raw`{{- constants -}}`), publications: JSON.parse(String.raw`{{- publications -}}`), events: JSON.parse(String.raw`{{- events -}}`), diff --git a/content/site.json.liquid b/content/site.json.liquid new file mode 100644 index 000000000000..292d9fbfa011 --- /dev/null +++ b/content/site.json.liquid @@ -0,0 +1,5 @@ +--- +permalink: api/site.json +--- + +{{ site.data.site-constants | jsonify }} diff --git a/content/store.js b/content/store.js.liquid similarity index 98% rename from content/store.js rename to content/store.js.liquid index b516c5834cb6..eb158d051588 100644 --- a/content/store.js +++ b/content/store.js.liquid @@ -1,4 +1,5 @@ --- +permalink: store.js --- {%- capture blogs -%} diff --git a/package.json b/package.json index e404c228060d..acdff23819ea 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ }, "webpack": { "outputDir": "./dist", - "reactRootsDir": "./src/roots" + "reactPagesDir": "./src/pages" }, "tailwindcss": { "inputDir": "./src/stylesheets" @@ -25,7 +25,7 @@ "jekyll:serve": "npm run-script jekyll -- serve --config ${npm_package_config_jekyll_configFilename},${npm_package_config_jekyll_webpackConfigFilename}", "jekyll:build": "npm run-script jekyll -- build --config ${npm_package_config_jekyll_configFilename},${npm_package_config_jekyll_webpackConfigFilename}", "clean": "npm run-script jekyll -- clean --config ${npm_package_config_jekyll_configFilename},${npm_package_config_jekyll_webpackConfigFilename} && rm ${npm_package_config_jekyll_webpackConfigFilename}", - "watch": "npx concurrently --kill-others --prefix-colors ${npm_package_config_conc_colors} --passthrough-arguments 'npm:tailwindcss -- {1}' 'npm:webpack -- --mode=development {1}' 'npm:jekyll:serve -- --livereload' -- --watch", + "watch": "npx concurrently --kill-others --prefix-colors ${npm_package_config_conc_colors} --passthrough-arguments 'npm:tailwindcss -- {1}' 'npm:webpack -- --mode=development {1}' 'npm:jekyll:serve -- --livereload --baseurl /dev/' -- --watch", "build": "npm run-script tailwindcss && npm run-script webpack -- --mode=production && npm run-script jekyll:build", "start": "npm run-script tailwindcss && npm run-script webpack -- --mode=development && npm run-script jekyll:serve" }, diff --git a/src/components/AboutFiqci.jsx b/src/components/AboutFiqci.jsx index 5981910627a6..8cd5bb60de29 100644 --- a/src/components/AboutFiqci.jsx +++ b/src/components/AboutFiqci.jsx @@ -9,7 +9,7 @@ export const AboutFiqci = () => {
-

About Fiqci

+

About FiQCI

diff --git a/src/components/AccessCards.jsx b/src/components/AccessCards.jsx index 8ab23f4b5c5d..5edf92e05661 100644 --- a/src/components/AccessCards.jsx +++ b/src/components/AccessCards.jsx @@ -2,100 +2,56 @@ import React from 'react'; import '@cscfi/csc-ui-react/css/theme.css'; import { CCard, CIcon, CCardContent } from '@cscfi/csc-ui-react'; import { mdiArrowRight, mdiOpenInNew } from '@mdi/js'; +import { prependBaseURL, isExternal } from '../utils/url'; -const AccessCardComponent = ({ title, teaser, description, links }) => { - return ( - +import { useConstants } from '../hooks/useConstants'; + +const AccessCardComponent = ({ title, href, teaser, description, links }) => + teaser - - {title} - - -

{description}
- -
- {links.map((link, index) => ( - - {link.title} - - ))} -
- - - ); - }; - + + {title} + -export const AccessCard = () => { - return ( -
-
-

Get access

-
+
{description}
-
- - - +
+ {links.map((link, index) => ( + + {link.title} + + ))}
-
+ + + + +export const AccessCards = () => { + const siteConstants = useConstants("api/site.json") + const cards = siteConstants["access-cards"] + const accessCardComponents = + cards?.map(card => ()) + + return <> +
+ {accessCardComponents} +
+
Other quantum resources will continuously be added to the FiQCI infrastructure.
- - -
-
Service status
- -
- -
+ href="#" + className="text-sky-800 hover:underline font-bold" + > +
+
Service status
+ +
+
- ); + }; diff --git a/src/components/BlogCards.jsx b/src/components/BlogCards.jsx index fde951a7491e..9292a32e371b 100644 --- a/src/components/BlogCards.jsx +++ b/src/components/BlogCards.jsx @@ -3,7 +3,7 @@ import '@cscfi/csc-ui-react/css/theme.css'; import { CCard, CIcon, CCardContent } from '@cscfi/csc-ui-react'; import { mdiArrowRight } from '@mdi/js'; -const BlogCardComponent = props => { +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 */} @@ -25,15 +25,9 @@ const BlogCardComponent = props => { ); }; - - -const BlogCard = () => { +export const BlogCards = () => { return ( -
-
-

Blogs and instructions

-
- + <>
{ SITE.publications.slice(-5).reverse().map(blog => ) }
@@ -48,8 +42,6 @@ const BlogCard = () => {
-
+ ); }; - -export { BlogCard, BlogCardComponent } \ No newline at end of file diff --git a/src/components/EventCards.jsx b/src/components/EventCards.jsx index 574cee3b4c4d..2f3d0ba802f6 100644 --- a/src/components/EventCards.jsx +++ b/src/components/EventCards.jsx @@ -3,8 +3,7 @@ import '@cscfi/csc-ui-react/css/theme.css'; import { CCard, CIcon, CCardContent } from '@cscfi/csc-ui-react'; import { mdiArrowRight, mdiOpenInNew } from '@mdi/js'; - -const EventCardComponent = props => { +export const EventCardComponent = props => { return ( {/* Adjusted card width */} @@ -32,13 +31,9 @@ const EventCardComponent = props => { -const EventCard = () => { +export const EventCards = () => { return ( -
-
-

Events

-
- + <>
{ SITE.events.slice(-4).reverse().map(event => ) }
@@ -46,15 +41,13 @@ const EventCard = () => { + >
All events
-
+ ); }; - -export { EventCard, EventCardComponent } \ No newline at end of file diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 1f7a4adce8f0..221be2c7c649 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,32 +1,41 @@ import React from 'react'; export const Footer = () => { + const { + baseUrl, + feedbackEmail, + images: { + footerIconsPath, + funderLogosPath + } + } = SITE.constants + return ( -
- + ); }; diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx new file mode 100644 index 000000000000..dace0e47006a --- /dev/null +++ b/src/components/Hero.jsx @@ -0,0 +1,69 @@ +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 { prependBaseURL, isExternal, isAnchor } from '../utils/url'; + + +const style = { + "--_c-button-font-size": 16, + "--_c-button-min-width": 0, + "--_c-button-height": "45px", + "--_c-icon-color": "white" +}; + +const getIconPath = href => isExternal(href) + ? mdiOpenInNew + : isAnchor(href) + ? mdiArrowDown + : mdiArrowRight + +const ContentButton = props => + (window.location.href = prependBaseURL(props.href))} + > +

{props.title}

+ + + +const Announcement = props => +
+

{props.text}

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

+ {props.tagline || ''} +

+

{props.subtitle || ''}

+
+
+ +
+ {announcementComponent} +
+ {contentButtons} +
+
+
+
+} diff --git a/src/components/Home.jsx b/src/components/Home.jsx deleted file mode 100644 index ad647dd753de..000000000000 --- a/src/components/Home.jsx +++ /dev/null @@ -1,72 +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'; - -const style = { - "--_c-button-font-size": 16, - "--_c-button-min-width": 0, - "--_c-button-height": "45px", - "--_c-icon-color": "white" -}; - -const ContentButton = props => { - const isActive = window.location.pathname === props.href; - - var styleClass = "text-white text-md py-3" - if (isActive) { - styleClass = styleClass - } - - return ( - (window.location.href = props.href)} - > -

{props.title}

- - - ); -}; - -export const Home = () => { - const test_lg = 500; - const test = 'flex flex-col justify-evenly z-2 bg-orange-200 min-h-[100px] pl-[30px]' - 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]) => ) - - return ( -
-
- -
- -
-
-

- Making the power of quantum computing accessible -

-

FiQCI - Finnish quantum-computing infrastructure

-
-
- -
-
-

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

- How to access Helmi, instructions -
-
- { contentButtons } -
-
-
-
- ) -} \ No newline at end of file diff --git a/src/components/NavigationHeader.jsx b/src/components/NavigationHeader.jsx index bb4669ad6229..2ad45f4c130c 100644 --- a/src/components/NavigationHeader.jsx +++ b/src/components/NavigationHeader.jsx @@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react'; import '@cscfi/csc-ui-react/css/theme.css'; import { CButton, CIcon } from '@cscfi/csc-ui-react'; import { mdiMagnify, mdiMenu } from '@mdi/js'; +import { prependBaseURL } from '../utils/url'; const style = { "--_c-button-font-size": 12, @@ -85,9 +86,9 @@ export const NavigationHeader = () => {
- + Logo diff --git a/src/components/SearchPage.jsx b/src/components/SiteSearch.jsx similarity index 99% rename from src/components/SearchPage.jsx rename to src/components/SiteSearch.jsx index b34e5b66eb23..a085e5a66b13 100644 --- a/src/components/SearchPage.jsx +++ b/src/components/SiteSearch.jsx @@ -7,7 +7,6 @@ import { } from '@cscfi/csc-ui-react'; import { Breadcrumbs } from './Breadcrumbs'; -import { use } from 'react'; const style = { "--_c-button-font-size": 14, @@ -218,7 +217,7 @@ const FilterModal = ({ isModalOpen, setIsModalOpen, filters, handleCheckboxChang ) }; -export const SearchPage = () => { +export const SiteSearch = () => { const [isModalOpen, setIsModalOpen] = useState(false); //modal control const [results, setResults] = useState({ general: [], blogs: [], events: [] }); diff --git a/src/components/layouts/base.html.jsx b/src/components/layouts/base.html.jsx new file mode 100644 index 000000000000..24abe14fdd15 --- /dev/null +++ b/src/components/layouts/base.html.jsx @@ -0,0 +1,30 @@ +import React from 'react' +import { createPortal } from 'react-dom' + +import { NavigationHeader } from '../NavigationHeader' +import { Footer } from '../Footer' + +import { useMatomo } from '../../hooks/useMatomo' + + +const Analytics = () => { + const url = process.env.MATOMO_URL + const id = process.env.MATOMO_TAG_MANAGER_CONTAINER + + useMatomo(url, id) + + return <> +} + +export const BaseLayout = props => + <> + + {createPortal( + , + document.getElementById('navigation-header') + )} + {createPortal( +