... so that PRs get automatically merged.

As a visiter of Thoth's website, I want to be able to see all of the projects offered by Thoth so that I can explore what I might use or contribute to.

Acceptance Criteria

• Create a all projects page (see https://www.redhat.com/en/technologies/all-products for general layout)
• route should be /projects
• data should be pulled from markdown files using Gastby just like #253
• Page can have a side navigation panel for jumping to sections of the page. This is only if we plan on grouping projects into categories.

As a developer of Thoth projects, I want to be able to update the details on our website through markdown files and not directly editing HTML.

Note: this issue does not include populating the project markdown files

Acceptance Criteria

• Create a reusable card component that can take varying levels of detail
• Connect the card inputs to markdown files read by Gastby
  • There should be a sub folder in this repo that defines the different projects
  • Each project has its own .mdx file
  • use the markdown frontmatter to define variables:
    • title
    • short_summary
    • software_stack
    • github_url
    • group
    • pinned_project
    • any others that would help ...
  • The rest of the document can be used to define the rest of the details describing the project
    • long summary
    • examples
    • getting started
    • etc.
• Add the cards to the home page

More Detail

Less Detail

Card extra details

• Cards can be separated by type
• Cards should be sorted by most used
• Cards can include bulleted points to help guide user to their use case (see figma)
• Cards can have link to github page
• Cards should link to detail page i.e. thoth-station.ninja/projects/{project_name}

Is your feature request related to a problem? Please describe.
As a potential new user or contributor of Thoth, I want to be visually guided to a solution right from the main website.

The Thoth website does not direct users in an optimal way. Some users have reported getting lost between the many websites in the Thoth ecosystem to find the right documentation.

Describe the solution you'd like
Rewrite the website using a React framework, define are more modern UX design that directs users to a solution directly, and unify the styling between the documentation, website, and other Thoth related sites.

Additional context

• Figma design example

Acceptance Criteria

• #245
• #251
• restyle the documentation to match website styling

As a visiter of Thoth's website, I want to be able to read up on everything related to a project from one page so I don't have to bounce around to different pages to find what Im looking for.

These pages will essentially be landing pages for a specific project. We want to either include directly or as links for installation, docs, contribution guidelines and instructions. We also can include features and other details. Many SaaS sites will have a home page for each project (or major project). Including all the elements used in the home screen: hero header, features, why this product section, user stories. See this red hat product page as notice it looks like a company home page

Our goal in this issue is to create a template component in Gatsby that can generate a consistent style for a project page while still allowing customization per product. This will require creating a few reusable components that can be defined in an mdx file.

Any project specific components can be used if need be. They will need (not need but its a better practice) to be placed in a custom project folder to signify they are specific to a project page: src/components/project/{project_name}/{component_name}

Acceptance Criiteria

• A template React component that uses data from a project mdx file.
• It will read frontmatter data and then render the rest of the markdown body
  • mdx allows you to place react components in the markdown file directly (sauce)
• Include a section for showcasing the stack of the project (using frontmatter vars as the list of software)

Note: this issue does not include creating custom components for each project. This is just creating the template and structure for future issues

Is your feature request related to a problem? Please describe.
Google Analytics is moving to version 4 and going to deprecate the current method of analysis.
https://blog.google/products/marketingplatform/analytics/prepare-for-future-with-google-analytics-4/?utm_campaign=2022-q1-gbl-all-gafree&utm_source=google-growth&utm_medium=email&utm_content=ga-deprecation-comm-ua-only

It is been advised to move to google analytics 4.

Describe the solution you'd like
Following the setup to update to new analytics.

Describe alternatives you've considered
Find a different tracking tool.

As a visiter of Thoth website, I don't want to be overwhelmed by an extensive nav bar, however I still want to be able to navigate to most of Thoths pages through links.

Acceptance Criteria

• Reduce the number of links on top to only Projects, Community, Resources, Documentation
• Each link can dropdown into a list of other links. i.e. Resources can hold most of the links that were on the current nav bar
• add Thoth logo that links back to homepage on left side of the nav bar
• Call to action should link to our getting started docs

Additional Info
Nav Bar mockup

Drop down can display links in a multi column modal

As a visiter of Thoth's website I want to learn about what Thoth is and why it exists in a short summary.

Acceptance Criteria

• write a summary about Thoth's dependency resolution story and why it is needed
• place summary on Thoth's home page
• Reuse elements from https://thoth-station.ninja/ "How we help developers" and place them in the new site

Mockup

With thoth-station/adviser#1539 we include justification "si_bandit" that should be located at https://thoth-station.ninja/j/si_bandit.html. However, this document does not exist. Let's write a short summary of security indicators and how bandit data relate to them.

Is your feature request related to a problem? Please describe.
As a Thoth user, I want all Thoth related sites to have the same UI and share navigation to make the Thoth sites feel more uniform.

Describe the solution you'd like
Convert the Thoth site and its content to a Gatsby JS site and have better navigation for the documentation.

Additional context

Gastby can be used to pull markdown files (or any other files), format them, and render them in a consistent way using React. Operate First's old website did this and their new site also uses Gatsby but doesn't pull markdown data.

• Operate First new website: https://github.com/operate-first/operate-first.github.io
• Operate First old website: https://github.com/operate-first/operate-first.github.io-old
• Thoth Help site: https://thoth-station.ninja/help/
• Thoth Website: https://thoth-station.ninja
• current Doc generation: https://github.com/thoth-station/nepthys

Acceptance Criteria

• Gatsby site looks like Thoths current website in terms of formatting, color, structure.
• Gastby site renders documentation using Gastby nodes (see Thoth help page and old operate first site for implementation)

As a visiter to Thoth's website, I want to be get an idea of what Thoth is right away by looking at the website's hero header.

Acceptance Criteria

• Create new graphic that embodies what Thoth is to draw attention
  • This could be the terminal window with the output of the command thamos advise
  • This could be something else entirely
• Call to action should link to the first spot we want all users to go to.
  • There can multiple call to actions but no more than 2-3
  • usually a getting started button is used
  • possibly take this topic to a Tech Talk

Examples of hero headers

Notice they have 3 calls to action. Their first button takes them to a getting started docs page which then seperates the user into different types based on their needs

Possible Thoth hero header

Update the UX to help users navigate our tool better. Nest certain less important items. Link directly or display Thoth core values and projects.

Acceptance Criteria

• #252
• #254
• #255
• #253
• thoth-station/core#451
• #256
• #257
• Section for Community / Open source / users who use the product

Is your feature request related to a problem? Please describe.

I could not find a description of how the site is built and guidelines to contribute to it.

Describe the solution you'd like

Ideally there should be documentation in the repo that explains:

1. How is the static website built. Jekyll, right? but there are references to Hugo and Pelican as well
2. How to contribute, with some best practices

Describe alternatives you've considered

Additionally, from an initial review of the contents of the repo, there seems to be content that is not actually used (categories? tags?...), and in that case it would be better to clean things up.

Additional context