diff --git a/content/index.md b/content/index.md
index 0b0e1d8b873f..7ae62a9cdca9 100644
--- a/content/index.md
+++ b/content/index.md
@@ -1,7 +1,7 @@
---
+title: Welcome
layout: home
-react_source_files:
- - index.md.js
+react: true
---
{% include react/section-root.html id='access-cards' heading='Get access' %}
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 f0915f156c34..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' -%}
+{%- 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/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/AccessCards.jsx b/src/components/AccessCards.jsx
index d21d8e67d7b5..5edf92e05661 100644
--- a/src/components/AccessCards.jsx
+++ b/src/components/AccessCards.jsx
@@ -4,6 +4,8 @@ import { CCard, CIcon, CCardContent } from '@cscfi/csc-ui-react';
import { mdiArrowRight, mdiOpenInNew } from '@mdi/js';
import { prependBaseURL, isExternal } from '../utils/url';
+import { useConstants } from '../hooks/useConstants';
+
const AccessCardComponent = ({ title, href, teaser, description, links }) =>
-export const AccessCards = props => {
+export const AccessCards = () => {
+ const siteConstants = useConstants("api/site.json")
+ const cards = siteConstants["access-cards"]
const accessCardComponents =
- props.cards?.map(card => (
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 6f86766f1b08..dace0e47006a 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -4,6 +4,7 @@ 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,
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(
+
,
+ document.getElementById('footer')
+ )}
+ >
diff --git a/src/components/layouts/home.html.jsx b/src/components/layouts/home.html.jsx
new file mode 100644
index 000000000000..7b2c560cbdcc
--- /dev/null
+++ b/src/components/layouts/home.html.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { createPortal } from 'react-dom'
+
+import { Hero } from '../Hero'
+import { AboutFiqci } from '../AboutFiqci'
+
+import { BaseLayout } from './base.html'
+
+
+export const HomeLayout = props => {
+ const heroConstants = props.hero
+
+ return <>
+
+ {createPortal(
+
,
+ document.getElementById('hero')
+ )}
+ {createPortal(
+
,
+ document.getElementById('about-fiqci')
+ )}
+ >
+}
diff --git a/src/components/layouts/page.html.jsx b/src/components/layouts/page.html.jsx
new file mode 100644
index 000000000000..e72b907be484
--- /dev/null
+++ b/src/components/layouts/page.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 PageLayout = props => {
+ const title = props.title_separator
+ ? document.title.split(props.title_separator, 1)[0]
+ : "Loading..."
+ return <>
+
+ {createPortal(
+
,
+ document.getElementById('banner')
+ )}
+ >
+}
diff --git a/src/pages/default.jsx b/src/pages/default.jsx
new file mode 100644
index 000000000000..c6bd55f96fd4
--- /dev/null
+++ b/src/pages/default.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { BaseLayout } from '../components/layouts/base.html'
+
+import { useConstants } from '../hooks/useConstants'
+
+
+const DefaultPage = () => {
+ const siteConstants = useConstants('api/site.json')
+
+ return <>
+
+ >
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ const root = createRoot(document.getElementById('react-root'))
+
+ root.render(
)
+})
diff --git a/src/pages/events.md.jsx b/src/pages/events.md.jsx
new file mode 100644
index 000000000000..89e4ba33caaa
--- /dev/null
+++ b/src/pages/events.md.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { createPortal } from 'react-dom'
+
+import { Events } from '../components/Events'
+
+import { PageLayout } from '../components/layouts/page.html'
+
+import { useConstants } from '../hooks/useConstants'
+
+
+const EventsPage = () => {
+ const siteConstants = useConstants('api/site.json')
+
+ return <>
+
+ {createPortal(
+
,
+ document.getElementById('events')
+ )}
+ >
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ const root = createRoot(document.getElementById('react-root'))
+
+ root.render(
)
+})
diff --git a/src/pages/index.md.jsx b/src/pages/index.md.jsx
new file mode 100644
index 000000000000..2dba711618de
--- /dev/null
+++ b/src/pages/index.md.jsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { createPortal } from 'react-dom'
+
+import { AccessCards } from '../components/AccessCards'
+import { BlogCards } from '../components/BlogCards'
+import { EventCards } from '../components/EventCards'
+
+import { HomeLayout } from '../components/layouts/home.html'
+
+import { useConstants } from '../hooks/useConstants'
+
+
+const HomePage = () => {
+ const siteConstants = useConstants('api/site.json')
+ const accessConstants = siteConstants['access-cards']
+
+ return <>
+
+ {createPortal(
+
,
+ document.getElementById('access-cards')
+ )}
+ {createPortal(
+
,
+ document.getElementById('blog-cards')
+ )}
+ {createPortal(
+
,
+ document.getElementById('event-cards')
+ )}
+ >
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ const root = createRoot(document.getElementById('react-root'))
+
+ root.render(
)
+})
diff --git a/src/pages/publications.md.jsx b/src/pages/publications.md.jsx
new file mode 100644
index 000000000000..8d5ed9d2c90f
--- /dev/null
+++ b/src/pages/publications.md.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { createPortal } from 'react-dom'
+
+import { Blogs } from '../components/Blogs'
+
+import { PageLayout } from '../components/layouts/page.html'
+
+import { useConstants } from '../hooks/useConstants'
+
+
+const BlogsPage = () => {
+ const siteConstants = useConstants('api/site.json')
+
+ return <>
+
+ {createPortal(
+
,
+ document.getElementById('blogs')
+ )}
+ >
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ const root = createRoot(document.getElementById('react-root'))
+
+ root.render(
)
+})
diff --git a/src/pages/search.md.jsx b/src/pages/search.md.jsx
new file mode 100644
index 000000000000..4a62c563245b
--- /dev/null
+++ b/src/pages/search.md.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { createPortal } from 'react-dom'
+
+import { SiteSearch } from '../components/SiteSearch'
+
+import { BaseLayout } from '../components/layouts/base.html'
+
+import { useConstants } from '../hooks/useConstants'
+
+
+const SearchPage = () => {
+ const siteConstants = useConstants('api/site.json')
+
+ return <>
+
+ {createPortal(
+
,
+ document.getElementById('site-search')
+ )}
+ >
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ const root = createRoot(document.getElementById('react-root'))
+
+ root.render(
)
+})
diff --git a/src/pages/status.md.jsx b/src/pages/status.md.jsx
new file mode 100644
index 000000000000..c3fd60a35220
--- /dev/null
+++ b/src/pages/status.md.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { createPortal } from 'react-dom'
+
+import { ServiceStatus } from '../components/ServiceStatus'
+
+import { PageLayout } from '../components/layouts/page.html'
+
+import { useConstants } from '../hooks/useConstants'
+
+
+const StatusPage = () => {
+ const siteConstants = useConstants('api/site.json')
+
+ return <>
+
+ {createPortal(
+
,
+ document.getElementById('service-status')
+ )}
+ >
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ const root = createRoot(document.getElementById('react-root'))
+
+ root.render(
)
+})
diff --git a/src/roots/base.html.jsx b/src/roots/base.html.jsx
deleted file mode 100644
index 52671b80c2bd..000000000000
--- a/src/roots/base.html.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-
-import { NavigationHeader } from '../components/NavigationHeader'
-import { Footer } from '../components/Footer'
-
-import { useMatomo } from '../hooks/useMatomo'
-import { injectComponents } from '../utils/injector'
-
-
-const Analytics = () => {
- const url = process.env.MATOMO_URL
- const id = process.env.MATOMO_TAG_MANAGER_CONTAINER
-
- useMatomo(url, id)
-
- return <>>
-}
-
-const components = [
- { component:
, rootId: 'matomo-analytics' },
- { component:
, rootId: 'navigation-header' },
- { component:
, rootId: 'footer' }
-]
-
-injectComponents(components)
diff --git a/src/roots/blogs.jsx b/src/roots/blogs.jsx
deleted file mode 100644
index 86ab2982f8e3..000000000000
--- a/src/roots/blogs.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { Blogs } from '../components/Blogs'
-import { Banner } from '../components/Banner'
-import { injectComponent } from '../utils/root'
-
-const component = (
- <>
-
-
- >)
-const rootId = 'blogs'
-
-injectComponent(component, rootId)
diff --git a/src/roots/events.jsx b/src/roots/events.jsx
deleted file mode 100644
index 197e2dcad5fc..000000000000
--- a/src/roots/events.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import { Events } from '../components/Events'
-import { Banner } from '../components/Banner'
-import { injectComponent } from '../utils/root'
-
-const component = (
- <>
-
-
- >
- );
-
-const rootId = 'events'
-
-injectComponent(component, rootId)
diff --git a/src/roots/home.html.jsx b/src/roots/home.html.jsx
deleted file mode 100644
index 5eb8d39787de..000000000000
--- a/src/roots/home.html.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-
-import { Hero } from '../components/Hero'
-import { AboutFiqci } from '../components/AboutFiqci'
-
-import { useConstants } from '../hooks/useConstants'
-import { injectComponents } from '../utils/injector'
-
-const HeroComponent = () => {
- const siteConstants = useConstants('api/site.json')
- const heroValues = siteConstants.hero
-
- return
-}
-
-const components = [
- { component:
, rootId: 'hero' },
- { component:
, rootId: 'about-fiqci' }
-]
-
-injectComponents(components)
diff --git a/src/roots/index.md.jsx b/src/roots/index.md.jsx
deleted file mode 100644
index 3c1ceff3e3af..000000000000
--- a/src/roots/index.md.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-
-import { AccessCards as ACards } from '../components/AccessCards'
-import { BlogCards } from '../components/BlogCards'
-import { EventCards } from '../components/EventCards'
-
-import { useConstants } from '../hooks/useConstants'
-import { injectComponents } from '../utils/injector'
-
-const AccessCards = () => {
- const siteConstants = useConstants("api/site.json")
- const cards = siteConstants["access-cards"]
-
- return
-}
-
-const components = [
- { component:
, rootId: 'access-cards' },
- { component:
, rootId: 'blog-cards' },
- { component:
, rootId: 'event-cards' }
-]
-
-injectComponents(components)
diff --git a/src/roots/searchPage.jsx b/src/roots/searchPage.jsx
deleted file mode 100644
index 44ef6b51daa8..000000000000
--- a/src/roots/searchPage.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import { SearchPage } from '../components/SearchPage'
-import { injectComponent } from '../utils/root'
-
-const component =
-const rootId = 'search-page'
-
-injectComponent(component, rootId)
diff --git a/src/roots/status.jsx b/src/roots/status.jsx
deleted file mode 100644
index 86fc999108ba..000000000000
--- a/src/roots/status.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import { ServiceStatus } from '../components/ServiceStatus'
-import { Banner } from '../components/Banner'
-import { injectComponent } from '../utils/root'
-
-const component = (
- <>
-
-
- >
- );
-const rootId = 'service-status'
-
-injectComponent(component, rootId)
diff --git a/src/utils/injector.js b/src/utils/injector.js
deleted file mode 100644
index 2e66643c2cd5..000000000000
--- a/src/utils/injector.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createRoot } from 'react-dom/client'
-
-export const injectComponents = componentArray => {
- document.addEventListener('DOMContentLoaded', () => {
-
- componentArray.forEach(elem => {
- const { component, rootId } = elem
- const rootElement = document.getElementById(rootId)
-
- if (rootElement instanceof Element) {
- const root = createRoot(rootElement)
- root.render(component)
- }
- });
- })
-}
diff --git a/src/utils/root.js b/src/utils/root.js
deleted file mode 100644
index af3418fab950..000000000000
--- a/src/utils/root.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { createRoot } from 'react-dom/client'
-
-export const injectComponent = (component, rootId) => {
- document.addEventListener('DOMContentLoaded', () => {
- const rootElement = document.getElementById(rootId)
-
- if (rootElement instanceof Element) {
- const root = createRoot(rootElement)
- root.render(component)
- }
- })
-}
diff --git a/webpack.config.js b/webpack.config.js
index 6e290c4155e0..433c3a078534 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,22 +6,22 @@ const yaml = require("yaml");
const TAILWINDCSS_INPUT_DIR =
process.env.npm_package_config_tailwindcss_inputDir;
-const REACT_ROOTS_DIR = process.env.npm_package_config_webpack_reactRootsDir;
+const REACT_PAGES_DIR = process.env.npm_package_config_webpack_reactPagesDir;
const JEKYLL_SOURCE_DIR = process.env.npm_package_config_jekyll_source;
const JEKYLL_CONFIG_FNAME =
process.env.npm_package_config_jekyll_webpackConfigFilename;
const OUTPUT_DIR = process.env.npm_package_config_webpack_outputDir;
const stylesheetsDirpath = path.resolve(__dirname, TAILWINDCSS_INPUT_DIR);
-const reactRootsDirpath = path.resolve(__dirname, REACT_ROOTS_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(reactRootsDirpath).forEach((file) => {
+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_ROOTS_DIR, file);
+ entryFiles[name] = path.resolve(__dirname, REACT_PAGES_DIR, file);
}
});