GitHub Pages deployment

.github/workflows/deployment.yaml

@@ -8,11 +8,10 @@ on:
 
 jobs:
   build:
-    if: false
     runs-on: ubuntu-22.04
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v4.2.2
         with:
           ref: rewrite/main
 
@@ -25,17 +24,24 @@ jobs:
       - name: Install Node.js packages
         run: npm install
 
-      - name: Build site
-        run: npm run build
+      - name: Build stylesheets using Tailwind CSS
+        run: npm run-script tailwindcss -- --minify
+
+      - name: Build React components using Webpack
+        run: npm run-script webpack -- --mode=production
+
+      - name: Build site using Jekyll
+        env:
+          JEKYLL_ENV: production
+        run: npm run-script jekyll:build -- --baseurl ${{ github.event.repository.name }}
 
       - name: Upload artifact
         id: deployment
-        uses: actions/upload-pages-artifact@3
+        uses: actions/upload-pages-artifact@v3.0.1
         with:
           path: dist/
 
   deploy:
-    if: false
     runs-on: ubuntu-latest
     needs: build
 
@@ -50,4 +56,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@4
+        uses: actions/deploy-pages@v4.0.5

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
     "files.associations": {
-        "**/content/**/*.html": "liquid"
+        "**/content/**/*.{html,js}": "liquid",
     }
-}
+}

content/site.js

@@ -1,5 +1,25 @@
 ---
 ---
+{%- assign values = site.data.site-constants -%}
+
+{%- capture constants -%}
+{
+  "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": "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 }
+  ]
+}
+{%- endcapture -%}
 
 {%- capture publications -%}
 [
@@ -37,7 +57,7 @@
     "key": "{{ forloop.index }}",
     "type": "Event",
     "title": "{{ event_post.title }}",
-    "url": "{{ event_post.link }}",
+    "url": "{{ event_post.link | relative_url }}",
     "date": "{{ event_post.date | date: '%-d.%-m.%Y' }}",
     "content": {{ event_post.content | strip_html | strip_newlines | jsonify }},
     "filters": {
@@ -60,6 +80,7 @@
 {%- endcapture -%}
 
 const SITE = {
+  constants: JSON.parse(String.raw`{{- constants -}}`),
   publications: JSON.parse(String.raw`{{- publications -}}`),
   events: JSON.parse(String.raw`{{- events -}}`),
 }

src/components/Home.jsx

@@ -10,8 +10,8 @@ const style = {
     "--_c-icon-color": "white"
 };
 
-const ContentButton = ({ text, href, icon=mdiArrowDown }) => {
-    const isActive = window.location.pathname === href;
+const ContentButton = props => {
+    const isActive = window.location.pathname === props.href;
 
     var styleClass = "text-white text-md py-3"
     if (isActive) {
@@ -23,16 +23,25 @@ const ContentButton = ({ text, href, icon=mdiArrowDown }) => {
                 className='w-min ml-0 mt-[10px] md:ml-0 mr-[20px] sm:ml-0 bg-[#0D2B53] hover:bg-blue-600'
                 no-radius
                 style={style}
-
-                onClick={() => (window.location.href = href)}
+                onClick={() => (window.location.href = props.href)}
             >
-                <p className={styleClass}>{text}</p>
-                <CIcon path={icon}/>
+                <p className={styleClass}>{props.title}</p>
+                <CIcon path={props.icon}/>
             </CButton>
     );
 };
 
 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]) => <ContentButton {...page} icon={icon} />)
+
     return (
         <div className='mb-2 sm:mb-0 min-w-[320px] h-auto xl:h-[850px] 2xl:h-[950px]'>
             <div className='bg-fiqci bg-cover bg-center w-full min-h-[400px]'></div>
@@ -49,14 +58,12 @@ export const Home = () => {
                 </div>
 
                 <div className='-top-[280px] relative sm:relative sm:-top-[280px] md:relative md:w-full lg:top-0 grow gap-[17px] z-2 ml-[0px] flex flex-col justify-start'>
-                    <div className='flex flex-col justify-evenly z-2 bg-orange-500/75 min-h-[100px] pl-[30px]'>
+                    <div className='flex flex-col justify-evenly z-2 bg-[#FF9B66] min-h-[100px] pl-[30px]'>
                         <p className='font-bold'>Open call for pilot access to Helmi quantum computer now open!</p>
-                        <a href='' className='w-fit flex text-cyan-600 hover:underline' >How to access Helmi, instructions <CIcon path={mdiArrowRight}/> </a>
+                        <a href='' className='w-fit flex text-[#400001] hover:underline' >How to access Helmi, instructions <CIcon path={mdiArrowRight}/> </a>
                     </div>
                     <div className='flex ml-0 flex-col sm:flex-row sm:flex-wrap md:flex-row md:flex-wrap md:ml-0 sm:ml-0 lg:flex-row lg:flex-wrap lg:ml-[20px] xl:ml-[20px] xl:flex xl:flex-col '>
-                        <ContentButton text="How to get access" href="/"/>
-                        <ContentButton text="Blogs and instructions" href="/pages/publications.html" icon={mdiArrowRight}/>
-                        <ContentButton text="About FiQCI" href="/pages/about.html"/>
+                        { contentButtons }
                     </div>
                 </div>
             </div>

src/components/NavigationHeader.jsx

@@ -10,47 +10,51 @@ const style = {
   "--_c-icon-color": "black"
 };
 
-const NavButton = ({ text, href }) => {
-  const isActive = window.location.pathname === href;
-  let styleClass = "text-black py-2";
-  if (isActive) {
-    styleClass += " underline underline-offset-8 decoration-2";
-  }
+const NavButton = props => {
+    const isActive = window.location.pathname === props.href;
 
-  return (
-    <CButton
-      className="w-min"
-      text
-      style={style}
-      onClick={() => (window.location.href = href)}
-    >
-      <p className={styleClass}>{text}</p>
-    </CButton>
-  );
+    let styleClass = "text-black py-2"
+    if (isActive) {
+        styleClass = styleClass + " underline underline-offset-8 decoration-2"
+    }
+
+    return (
+            <CButton
+            className="w-min"
+                text
+                style={style}
+                onClick={() => (window.location.href = props.href)}
+            >
+                <p className={styleClass}>{props.title}</p>
+            </CButton>
+    );
 };
 
-const NavSearchButton = ({ text, href }) => {
+const NavSearchButton = props => {
 
     return (
-        <div>
             <CButton
-                className='w-min'
+                className="w-min"
                 text
                 style={style}
-                onClick={() => (window.location.href = href)}
+                onClick={() => (window.location.href = props.href)}
             >
-                <p className="text-black py-2">{text}</p>
+                <p className="text-black py-2">{props.title}</p>
                 <CIcon style={style} path={mdiMagnify} />
             </CButton>
-        </div>
     );
 };
 
 export const NavigationHeader = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const navRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const navRef = useRef(null);
+    const toggleMenu = () => setIsOpen((prev) => !prev);
 
-  const toggleMenu = () => setIsOpen((prev) => !prev);
+    const pageButtons = SITE.constants.topNav.map(
+        page => page.title != "Search"
+          && <NavButton {...page} />
+          || <NavSearchButton {...page} />
+    );
 
   // This effect adds event listeners when the menu is open.
   // It will close the menu if a click or touch happens outside the navbar.
@@ -61,7 +65,7 @@ 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);
     }
@@ -76,45 +80,33 @@ export const NavigationHeader = () => {
     };
   }, [isOpen]);
 
-  return (
-    // Attach the ref here so clicks inside this container won't close the menu.
-    <div ref={navRef} className="flex flex-col">
-      <div className="flex mx-5 items-center justify-between py-3">
-        <div className="flex items-center">
-          <a href="/">
-            <img
-              src="/assets/images/FiQCI-logo.png"
-              alt="Logo"
-              className="h-7"
-            />
-          </a>
-        </div>
-
-        {/* Desktop navigation */}
-        <div className="lg:flex flex-wrap justify-end hidden">
-          <NavButton text="Home" href="/" />
-          <NavButton text="Blogs and instructions" href="/publications" />
-          <NavButton text="Status" href="/status" />
-          <NavButton text="Events" href="/events" />
-          <NavSearchButton text="Search" href="/search" />
-        </div>
-
-        {/* Mobile menu toggle */}
-        <div className="flex lg:hidden h-max">
-          <CIcon onClick={toggleMenu} size={40} path={mdiMenu} />
-        </div>
-      </div>
 
-      {/* Mobile navigation menu */}
-      {isOpen && (
-        <div className="lg:hidden mx-1.5 mb-10 top-10 w-full flex flex-col justify-center items-left gap-2">
-          <NavButton text="Home" href="/" />
-          <NavButton text="Blogs and instructions" href="/publications" />
-          <NavButton text="Status" href="/status" />
-          <NavButton text="Events" href="/events" />
-          <NavSearchButton text="Search" href="/search"/>
+    return (
+        <div className='flex flex-col'>
+            <div className="flex mx-5 items-center justify-between py-3">
+                <div className="flex items-center">
+                    <a href={ SITE.constants.baseUrl }>
+                        <img
+                            src={ SITE.constants.logo }
+                            alt="Logo"
+                            className="h-7"
+                        />
+                    </a>
+                </div>
+
+                <div className="lg:flex flex-wrap justify-end hidden">
+                    { pageButtons }
+                </div>
+
+                <div className='flex lg:hidden h-max'>
+                    <CIcon onClick={toggleMenu} size={40} path={mdiMenu} />
+                </div>
+            </div>
+            {isOpen && 
+                <div className='lg:hidden mx-1.5 mb-10 top-10 w-full flex flex-col justify-center items-left gap-2' >
+                    { pageButtons }
+                </div>
+            }
         </div>
-      )}
-    </div>
-  );
+      );
 };