search

FNNDSC / website-old

ChRIS Project Website
https://chrisproject.org
MIT License
5 stars 12 forks source link

Convert chrisproject.org from jekyll to gatsby #49

Open mairin opened 2 years ago

mairin commented 2 years ago

We have started using asciidoc rather than markdown for website content and documentation.

Right now chrisproject.org uses jekyll, which is markdown first although we have an asciidoc plugin for it configured. jekyll has a number of problems, it has some technical debt and is a little hard for new contributors to approach, and it has some security issues too.

A pie-in-the-sky idea we had was to use asciidoc-formatted content for multiple outputs - e.g., one adoc file could output a README into a repo, a static HTML page for the website, and a static HTML page for a documentation site.

I investigated using antora and I believe it doesn't support this "multiple output targets per one file" idea, but Gatsby does. It would be very helpful for someone to fork this website repo and investigate converting it to Gatsby.

The ideal outcome of this ticket:

Seundede commented 1 year ago

Gatsby works with Markdown and it can take the data from YAML front matter block. This is done with the installation of  gatsby-transformer-remark plugin. Gatsby offers great performance, SEO and accessibility.

List of tasks

  1. Get a Gatsby project up and running.
  2. Add Gatsby plugins like gatsby-source-filesystem to enhance the project to generate a page from a markdown file and gatsby-plugin-mdx to implement the use of markdown files that render contents.
  3. Configure the plugins in the gatsby-config.js file.
  4. Replace the contents in src/pages/index.js file with the home page content.
  5. Create new files in src/pages to match the pages for About ChRIS, About Us, Join US, Plugins, More Info, For Users and For Devs respectively.
  6. Add an SEO component to each file in the pages folder
  7. Replace all the loops with JSX map functions.
  8. Add the style structure (SCSS, tailwind etc)
  9. For image optimization, install and configure gatsby-plugin-image with it’s associated dependencies
Seundede commented 1 year ago

@mairin @jennydaman