diff --git a/README.md b/README.md index 5ad24e61695e..08ecd62b3a62 100644 --- a/README.md +++ b/README.md @@ -1,96 +1,12 @@ # Fork of [FiQCI/fiqci.github.io](https://github.com/FiQCI/fiqci.github.io) repository -## Site rewrite +## Documentation -### Tools +### For content creators -- (`asdf` for runtime version management) - - Ruby - - (Bundler for managing Ruby gems) - - Jekyll - - Node.js - - React - - Tailwind CSS - - Webpack +See [Documentation](docs/index.md). -Some installation instructions follow. All of the commands shown are to be executed in the repository root. +### For developers -#### Install `asdf` for runtime version management - -Instructions at [Getting Started | asdf](https://asdf-vm.com/guide/getting-started.html). - - -##### Install Ruby and Node.js using `asdf` - -The file `.tool-versions` contains the version numbers for - - Ruby: 3.3.5 - - Node.js: v22.10.0 - -Install the `asdf` plugins (see the respective Git repositories for required dependencies) with - -```bash -asdf plugin add ruby https://github.com/asdf-vm/asdf-ruby.git -``` - -and - -```bash -asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git -``` - -Then, as instructed in `asdf --help`, - -> ```text -> asdf install Install all the package versions listed -> in the .tool-versions file -> ``` - -the command `asdf install` should install both Ruby and Node.js. It might take a while, though. When the installations are done, check the versions with - -```console -$ ruby --version -ruby 3.3.5 (2024-09-03 revision ef084cc8f4) [x86_64-linux] -``` - -and - -```console -$ node --version -v22.10.0 -``` - - -##### Install the Ruby gems and Node packages - -If not already installed, install Bundler with - -```bash -gem install bundler -``` - -Then, using Bundler, install the Ruby gems defined in the Gemfile - -```bash -bundle install -``` - -Again, you can check the version (of Jekyll this time) with - -```console -$ jekyll --version -jekyll 4.3.4 -``` - -Finally, install the Node packages with the command - -```bash -npm install -``` - - -### Serve with live reload - -The command `npm run watch` starts Tailwind CSS, Webpack and Jekyll concurrently with the source monitored for changes. - -The site should now be ready at `http://localhost:4000`. +See [Developer documentation](docs/dev_index.md). diff --git a/docs/blog_post.md b/docs/blog_post.md new file mode 100644 index 000000000000..bfbf684832d6 --- /dev/null +++ b/docs/blog_post.md @@ -0,0 +1,191 @@ +This document is an outline for writing a blog post for the Fiqci website. The document covers the most common +formatting/syntax topics and explains technical aspects to know when writing a blog. Also, use old blogs as a reference. +E.g. [Circuit-Knitting-Blog.md](content/_publications/2024-08-27-Circuit-Knitting-Blog.md), +[Topology.md](content/_publications/2024-08-29-Topology.md) are good examples since not all old blogs exactly follow the principles +outlined here. + +## Contents + +1. [Filename](#filename) +2. [Metadata](#metadata) +3. [Abstract](#abstract) +4. [Headings](#headings) +5. [Images](#images) +6. [Tables](#tables) +7. [Code blocks](#code-blocks) +8. [LaTex](#latex) +9. [References](#references) +10. [Other imprtant remarks](#other-important-remarks) + +## Filename + +Have the filename of the post begin with the publication data in yyyy-mm-dd. The file should then be +"yyyy-mm-dd-Blog-Title.md". The file should be placed in `/content/_publications/` + +## Metadata + +First of below is a code blog containing example metadata for a blog. This is included at the top of each post +(wrapped with the "---" separator). Each field has comments explaining it and listing possible values if applicable. + +```markdown +--- +title: 'The main title of the post' #Blog title +date: yyyy-mm-dd #the date of publication as yyyy-mm-dd +collection: publications #don't change +header: #thumbnail image for the post + teaser: /assets/images/{path to teaser image of your blog} #e.g /assets/images/topology/thumbnail.png +published: true +author: author name #name of the author +layout: post #don't change +tags: #keywords related to the topic of the blog, e.g Helmi, Quantum, etc + - tag_1 + - tag_2 + - etc +filters: #choose appropriate filters from the commented options. If multiple separate with a comma + Skill level: Beginner # Beginner, Advanced + Type: Blog # Blog, Instructions, News + Theme: Technical # Technical, Algorithm, Programming, Hybrid QC+HPC computing +--- +``` + +## Abstract +Begin the blog with a short abstract and wrap it with "*" for italics: +```markdown +*Short abstract in italics* +``` + +## Headings + +You can add different levels of headers with markdown as: +```markdown +## Header 2 +## Header 3 +### Header 4 +#### Header 5 +##### Header 6 etc +``` + +To avoid clashing with the main title, use `## Header 2` as the biggest heading in the blog test. + +**NOTE**: Do not add a separate header for your main title. It'll be automatically displayed from the title field in metadata. + +## Images + +You can add images in markdown like: +```markdown +![alt text goes here](/assets/images/{path to your image}) +``` + +**NOTE**: Images will not display on VS Code's markdown preview. For the preview to work, use +`![alt text goes here](../assets/images/{path to your image}) ` just remember to change before publishing. + +e.g: +```markdown +![Example on how circuit changes when a wire is cut](/assets/images/Circuit-Knitting-Blog/circuit-knitting-general-example.png) +``` + +You can also use HTML for more fine-grained layout control: +```html +
+ alt text goes here +
+``` + + +e.g +```html +
+ Qubit grid +
+``` + +For consistent styles, use markdown syntax when possible. + +## Tables + +Markdown: +```markdown +| Title 1 | Title 2 | Title 3 | +|-------------|-----------|--------------| +| wow | look | at | +| this | amazing | table | +``` + +If the table needs to be centred HTML is needed: +```html +
+ + + + + + + + + + + + + + + + + + + + +
Title 1Title 2Title 3
wowlookat
thisamazingtable
+
+``` + +## Code blocks + +Code blocks can be added with: `` `code goes here` `` for inline code or for multiline code +```` +```language e.g python +Code goes here +``` +```` + +## LaTex + +Equations special characters etc can be added with latex. Use `$ latex here $` for inline and for multlline +```latex + +$$ latex here $$ + +``` + +Note that the multiline block needs to be separated from the main text with an empty line e.g. +```markdown +some text + +$$ latex block $$ + +some more text +``` + +## References + +If your blog/post has references, use the exact formatting as below. This ensures that the formatting will +work once deployed to the website. You can refer to a specific reference using `[1]`. +This will show up as [1]. + +1. Reference 1 +2. Reference 2 +3. etc + +## Other important remarks + +Do not add: + +```markdown +## Give feedback! + +Feedback is greatly appreciated! You can send feedback directly to [fiqci-feedback@postit.csc.fi](mailto:fiqci-feedback@postit.csc.fi). +``` + +to the end of the blog. It is added automatically. + +For other syntax etc have a look at [Circuit-Knitting-Blog.md](content/_publications/2024-08-27-Circuit-Knitting-Blog.md), +[Topology.md](content/_publications/2024-08-29-Topology.md), and [markdown guide](https://www.markdownguide.org/basic-syntax/) diff --git a/docs/build.md b/docs/build.md new file mode 100644 index 000000000000..92340ac9a30b --- /dev/null +++ b/docs/build.md @@ -0,0 +1,18 @@ +# Building + +After [installing the software dependencies](install.md), you should be ready to build or serve the site from a local development server. + + +## Serve with live reload + +The command `npm run watch` starts Tailwind CSS, Webpack and Jekyll concurrently with the source monitored for changes. + +The site should now be ready at `http://localhost:4000`. + + +## Build environment + +For Matomo web analytics, the build environment needs to have the following variables defined. + +- `MATOMO_URL=${matomo_instance_url}` +- `MATOMO_TAG_MANAGER_CONTAINER=${matomo_tag_manager_container_id}` diff --git a/docs/dev_index.md b/docs/dev_index.md new file mode 100644 index 000000000000..28ef5f87af09 --- /dev/null +++ b/docs/dev_index.md @@ -0,0 +1,5 @@ +# Developer documentation + +- [Description of the structure of the application](structure.md) +- [Installing the software dependencies](install.md) +- [Building the application](build.md) diff --git a/docs/edit_or_add_content.md b/docs/edit_or_add_content.md new file mode 100644 index 000000000000..96f5f10b589f --- /dev/null +++ b/docs/edit_or_add_content.md @@ -0,0 +1,318 @@ +# Editing and adding content + +Most of the static (constant) content of the site is fetched from `content/_data/constants.yml`. +Therefore to edit the content of the website one edits the constants.yml file. +This file describes the basic structure of the contanst.yml file and explains how to make changes to the content on the site. + + +## New announcement + +In constants edit: +```yml +"/": + hero: + announcement: #the orange announcement box + text: Access to VTT Q50 for accepted projects now open! #Announcement text + link: + title: How to access Q50, instructions #Link display text + href: FIXME #Link address +``` + +## New Quantum Computer + +Add the quantum computer to the lists at: +```yml +"/status/": + quantum-computers: + - name: VTT Q5 (Helmi) + qubits: 5 + basis: "PRX, CZ" + topology: "Star" + status_url: FIXME + ... +``` + +and + +```yml +"/access/": + quantum_resources: #list of the available quantum resources + - name: VTT Q5 (Helmi) + desc: |- + The VTT Q5 "Helmi" is the first Finnish quantum computer. Helmi is based on superconducting technology and provides 5 qubits + in a star-shape topology. Hybrid HPC+QC access was opened in 2022. Helmi is operated by VTT, + and was co-developed with IQM Quantm Computers. + image: "/assets/images/vtt-images/VTT_lab-2.jpg" + links: + - link: "" + teaser: "How to access VTT Q5, instructions" + icon: mdiArrowRight + - link: "" + teaser: "Read more about VTT Q5 (VTT website)" + icon: mdiOpenInNew + ... +``` + +## New page + +A new page can be added by creating a `your-page-name.md` file in `content/pages/` and a corresponding `your-page-namemd.jsz` in `src/pages/`. +To make the page show up in the navigation bar add it to: +```yml +header_nav: + - title: Home + page: pages/home.md + ... +``` + +in constanst.yml. Additionally add any needed constanst to constants.yml under a new section titled `"/your-page-url/"` + +The latter applies also for new supercomputer and emulation resources. + +## Structure + +The file begins with some global contants used e.g. for the footer and the navigation bar. +If new pages are added to the site they need to be added here to the header_nav section for the to show up in the navigation bar. + +```yml +title: FiQCI +author: The FiQCI Consortium +copyright: © 2024 The FiQCI Consortium +... + +header_nav: + - title: Home + page: pages/home.md + - title: About FiQCI + page: pages/about.md + ... +``` + +After the global constant the contents are split so that each page has its own section denoted by page url: + +```yml +"/": + ... + +"/access/": + ... + +"/about/": + ... + +"/status/": + ... +``` + +Each section contains static text content, link urls, image paths, etc else that the page is using. + +### Home + +```yml +"/": + hero: #content of the hero component (the initial content visibile on the main page) + tagline: Making the power of quantum computing accessible + subtitle: FiQCI – Finnish quantum-computing infrastructure + announcement: #the orange announcement box + text: Access to VTT Q50 for accepted projects now open! + link: + title: How to access Q50, instructions + href: FIXME + buttons: #navigation buttons under the announcement + - title: How to get access + href: "/access" + - title: Blogs and instructions + href: /publications + - title: About FiQCI + href: "#about" + + mission: #Links for the fiqci mission section. Note that the mission text on the mainpage is the same as on the about page and hence comes from /about/ section of this file + links: + about: + title: Read more about FiQCI + href: /dev/about + access: + title: How to get access + href: /dev/access + + access_cards: #resource access cars under the hero conteent + - title: Quantum computers + href: /access/#quantum + teaser: /assets/images/FiQCI-banner.jpg + description: |- + The Finnish quantum-computing infrastructure (FiQCI) provides access to quantum computers + through the LUMI supercomputer environment. Currently there are two quantum computers + available for use: VTT Q5 (Helmi), and VTT Q50 + links: + - title: Quantum computer resources + href: /access/#quantum + - title: Supercomputers + href: /access/#super + teaser: /assets/images/vtt-images/VTT_lab-2.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. + links: + - title: Supercomputer resources + href: /access/#super + - title: Emulation resources + href: /access/#emulation + teaser: /assets/images/FiQCI-banner.jpg + description: |- + With the LUMI supercomputer it is possible to emulate quantum computers with up to 44 qubits. + This allows for testing and development of quantum algorithms without the need for actual quantum hardware. + links: + - title: Emulation resources + href: /access/#emulation +``` + +### Access + +```yml +"/access/": + quantum_resources: #list of the available quantum resources + - name: VTT Q5 (Helmi) + desc: |- + The VTT Q5 "Helmi" is the first Finnish quantum computer. Helmi is based on superconducting technology and provides 5 qubits + in a star-shape topology. Hybrid HPC+QC access was opened in 2022. Helmi is operated by VTT, + and was co-developed with IQM Quantm Computers. + image: "/assets/images/vtt-images/VTT_lab-2.jpg" + links: + - link: "" + teaser: "How to access VTT Q5, instructions" + icon: mdiArrowRight + - link: "" + teaser: "Read more about VTT Q5 (VTT website)" + icon: mdiOpenInNew + + - name: VTT Q50 + desc: |- + VTT Q50 is based on superconducting technology and provides 53 qubits in a square grid topology. + Hybrid HPC+QC access was opened in 2025. VTT Q50 is operated by VTT, , and was co-developed with IQM Quantm Computers. + 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 + + supercomputer_resources: #list of the available supercompute resources + - name: LUMI + desc: |- + Presently the backbone of the classical HPC and AI resources in FiQCI. The pre-exascale EuroHPC LUMI supercomputer + serves as the portal for hybrid HPC+QC. LUMI is 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: #list of the available emulation / simulation resources + - name: Quantum emualtion with LUMI + desc: |- + The LUMI supercomputer enables full emulation and simulation of quantum algorithms of up to 44 qubits. + image: "/assets/images/FiQCI-banner.jpg" + links: + - link: "" + teaser: "Quantum emulation documentation" + icon: mdiArrowRight +``` + +### About + +```yml +"/about/": #static text for the about page + 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: #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: #management group + 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 +``` + +### Status + +``` +"/status/": + quantum-computers: + - name: VTT Q5 (Helmi) + qubits: 5 + basis: "PRX, CZ" + topology: "Star" + status_url: FIXME + + - name: VTT Q50 + qubits: 50 + basis: "PRX, CZ" + topology: "Square grid" + status_url: FIXME +``` + + +### Others + +If content is not in the constants.yml file it is either in a relevant react component or in a mardown page file in content/pages diff --git a/docs/event.md b/docs/event.md new file mode 100644 index 000000000000..9a37093020ce --- /dev/null +++ b/docs/event.md @@ -0,0 +1,49 @@ +This document is an outline for adding an event to the Fiqci website. The document covers the most common +formatting/syntax topics and explains technical aspects to know when adding an event. Also, use old events as a reference. + +## Contents + +1. [Filename](#filename) +2. [Metadata](#metadata) +3. [Content](#abstract) + + +## Filename + +Have the filename of the post begin with the publication data in yyyy-mm-dd. The file should then be +"yyyy-mm-dd-Blog-Title.md". The file should be placed in `/content/_events/` + +## Metadata + +First of below is a code block containing example metadata for an event. This is included at the top of each event file +(wrapped with the "---" separator). Each field has comments explaining it and listing possible values if applicable. + +```markdown +--- +title: 'Title of the Event' #Event name +date: yyyy-mm-dd #date when to be published as yyyy-mm-dd +published: true #leave as is, or if should be hidden change to false +link: https://the-event.fi/info/signup #link to event page +tags: #keywords related to the event, e.g Helmi, Quantum, etc + - tag_1 + - tag_2 + - etc +type: Event #leave as is +filters: #choose appropriate filters from the commented options. If multiple separate with a comma + Pricing: Free of charge # Free of charge, or empty if paid + Availability: Open to anyone # Open to anyone, Registration needed + Skill level: Beginner # Beginner, Advanced + Type: Online # Online, Hybrid, Onsite + Theme: Course/Workshop # Course/Workshop, Hybrid QC+HPC computing, Programming, Webinar/Lecture +--- +``` + +## Content +The content of the event file should simply be the days when the event takes place followed by a short description (separated by a ":") +``` +dd-dd month_name_spelled_out: Description. +``` +E.g. +``` +25-25 November: Two-day introductory course on quantum computers and the basic quantum algorithms that control them. +``` diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 000000000000..321105618570 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,6 @@ +# Documentation + +- [Description of the structure of the application](structure.md#) +- [Publishing a blog post](blog_post.md#) +- [Adding an event](event.md#) +- [Editing the site content](edit_or_add_content.md) diff --git a/docs/install.md b/docs/install.md new file mode 100644 index 000000000000..7e3c35a22b94 --- /dev/null +++ b/docs/install.md @@ -0,0 +1,87 @@ +# Installation + +- `asdf` for runtime version management + - Ruby + - (Bundler for managing Ruby gems) + - Jekyll + - Node.js + - React + - Tailwind CSS + - Webpack + +Some installation instructions follow. All of the commands shown are to be executed in the repository root. + + +## Install `asdf` for runtime version management + +Instructions at [_Getting Started | asdf_](https://asdf-vm.com/guide/getting-started.html). + + +## Install Ruby and Node.js using `asdf` + +The file `.tool-versions` contains the version numbers for + - Ruby: 3.3.5 + - Node.js: v22.10.0 + +Install the `asdf` plugins (see the respective Git repositories for required dependencies) with + +```bash +asdf plugin add ruby https://github.com/asdf-vm/asdf-ruby.git +``` + +and + +```bash +asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git +``` + +Then, as instructed in `asdf --help`, + +> ```text +> asdf install Install all the package versions listed +> in the .tool-versions file +> ``` + +the command `asdf install` should install both Ruby and Node.js. It might take a while, though. When the installations are done, check the versions with + +```console +$ ruby --version +ruby 3.3.5 (2024-09-03 revision ef084cc8f4) [x86_64-linux] +``` + +and + +```console +$ node --version +v22.10.0 +``` + + +## Install the Ruby gems and Node packages + +If not already installed, install Bundler with + +```bash +gem install bundler +``` + +Then, using Bundler, install the Ruby gems defined in the Gemfile + +```bash +bundle install +``` + +Again, you can check the version (of Jekyll this time) with + +```console +$ jekyll --version +jekyll 4.3.4 +``` + +Finally, install the Node packages with the command + +```bash +npm install +``` + +You should now be able to [serve the site from a local development server](build.md#serve-with-live-reload). diff --git a/docs/structure.md b/docs/structure.md new file mode 100644 index 000000000000..9dafaaee272b --- /dev/null +++ b/docs/structure.md @@ -0,0 +1,209 @@ +# Structure + +## Configuration files + +- **ASDF** ([_.tool-versions_](../.tool-versions)): Version numbers for Ruby and Node.js runtimes. + - **Ruby** ([_Gemfile_](../Gemfile)): The required Ruby gems. + - **Jekyll** ([_\_config.yml_](../_config.yml)): Jekyll configuration file. + - **npm** ([_package.json_](../package.json)): Node.js package configuration. + - **webpack** ([_webpack.config.js_](../webpack.config.js)): Webpack configuration. + - **Tailwind CSS** ([_tailwind.config.js_](../tailwind.config.js)): Tailwind CSS configuration. + - **PostCSS** ([_postcss.config.js_](../postcss.config.js)): PostCSS configuration. + + +## Directory structure + +### `content/`: Ruby/Jekyll + +- `_data/`: Directory for [Jekyll data files](https://jekyllrb.com/docs/datafiles/). + - `theme/`: + - `constants.yml`: The constants used in the site theme. +- `_drafts/`: Directory for [Jekyll draft posts](https://jekyllrb.com/docs/posts/#drafts). +- `_events/`: Contains the 'events' collection configured in [_config.yml](../_config.yml). +- `_includes/`: Directory for [Jekyll includes](https://jekyllrb.com/docs/includes/), i.e. Liquid template fragments that can be included in content or templates. + - `external/`: Links to software libraries served from CDNs. + - `font.html`: The [Inter font](https://github.com/rsms/inter) used on the site. + - `mathjax.html`: [MathJax](https://www.mathjax.org/) for rendering math. +- `_layouts/`: Directory for [Jekyll layouts](https://jekyllrb.com/docs/layouts/), i.e. layout Liquid templates. + - `base.html`: The base template. + - `home.html`: The template for the home page. + - `page.html`: A page template. + - `post.html`: A post template. +- `_publications/`: Contains the 'publications' collection configured in [_config.yml](../_config.yml). +- `api/`: Directory for templates to be rendered and served as JSON. + - `theme/` + - `constants.yml`: Liquid template for serving _/content/\_data/theme/constants.yml_ at _/api/theme/constants.json_. +- `assets/`: Directory for static assets, such as images. +- `pages/`: Markdown sources for individual pages. + - `about.md`: \[TODO\] + - `access.md`: \[TODO\] + - `events.md` The 'Events' page. + - `home.md`: The home page. (Rendered as _/index.html_.) + - `publications.md`: The 'Blogs and instructions' page. + - `search.md`: The search results page. + - `status.md`: The 'Status' page. +- `404.md`: Markdown source for the HTTP _404 Not Found_ error response page. +- `properties.css.liquid`: CSS custom properties. +- `site.js.liquid`: \[TODO\] +- `store.js.liquid`: \[TODO\] + + +### `src/`: Node.js/React + +- `components/`: React components. +- `hooks/`: React custom hooks. +- `layouts/`: JSX corresponding to the Liquid templates found under _/content/\_layouts/_. +- `pages/`: JSX corresponding to the Markdown-defined pages under _/content/pages/_. +- `stylesheets/` + - `main.css`: The base stylesheet used by Tailwind CSS. +- `utils/`: Some JavaScript utility functions. + +## Overview: Home page + +- _Home_ + - **Page Markdown** [home.md](../content/pages/home.md) + - `id='access-cards'` + - `id='blog-cards'` + - `id='event-cards'` + - **Page JSX** [home.md.jsx](../src/pages/home.md.jsx) + - `` (_props_ <-- `useJsonApi()`) + - `` (createPortal `id='access-cards'`) + - `` (createPortal `id='blog-cards'`) + - `` (createPortal `id='event-cards'`) + - **`` (createRoot `id='react-root'`)** + - **Liquid layout** [home.html](../content/_layouts/home.html) + - `id='hero'` + - **Liquid layout** [base.html](../content/_layouts/base.html) + - **`id='react-root'`** + - `id='navigation-header'` + - `id='footer'` + - **Layout JSX** [home.html.jsx](../src/layouts/home.html.jsx) + - `` (_props_ <-- ``) + - `` (createPortal `id='hero'`) + - **Layout JSX** [base.html.jsx](../src/layouts/base.html.jsx) + - `` + - `` (createPortal `id='navigation-header'`) + - `