feature(documentation): add tool listing to the website

fixes idrinth-api-bench/issues#420

language/en.yml

@@ -16,6 +16,7 @@ nav:
   quick-start: "Quick Start"
   faq: "FAQ"
   code-of-conduct: "Code of Conduct"
+  tools: "Tools"
 
 socials:
   npm:
@@ -503,6 +504,27 @@ loader:
   offline: "Please go online and then refresh the page."
   reload: "Content has changed, reloading the page for you in a moment."
 
+tools:
+  meta:
+    title: "Tools"
+    description: "These are the major tools that we use to bring value to you."
+  title: "Tools we use"
+  description: "These are the major tools in use by us, that bring value to you and help us develop better."
+  typescript: "Typescript is the base language we use across all projects. We choose it over pure JavaScript for it's ability to find errors early."
+  react: "React is the framework of this website. It allows us to write reusable code and have a simple documentation process."
+  svelte: "Svelte is used for the history website, a tool to display historical run data and compare it graphically."
+  fastify: "Fastify is used for the history microservice, a tool to access stored historical run data."
+  docker: "We provide multiple docker images for continuous integrating and hosting the history components."
+  eslint: "ESLint is the core of our continuous integration. It is used to prevent us from writing bad code or code not sticking to our standards."
+  chai: "Chai is one of the default tools for testing we use across all libraries and project parts."
+  mocha: "Chai is one of the default tools for testing we use across all libraries and project parts."
+  cypress: "Chai is one of the default tools for testing we use across all libraries and project parts."
+  stylelint: "Stylelint is our tool of choice for making sure we don't mess up too much when writing styles."
+  markmap-render: "Markmap is the base that we built on for our mindmap, it serves as the drawing component."
+  vue: "Vue powers the desktop client for running framework tests locally."
+  electron: "Electron powers the desktop client for running framework tests locally."
+  express: "Express is in use for our website deployment tool."
+
 command:
   or: "or"
   deprecated: "This command is deprecated."

src/components/header.tsx

@@ -119,7 +119,7 @@ const Header = ({
           <Lang lnkey='nav.contributing'/>
           <MdArrowDropDown onClick={preventOpenLink} />
         </NavLink>
-        <ul aria-labelledby="dropdown-contributing" id="contributing-menu" >
+        <ul aria-labelledby="dropdown-contributing" id="contributing-menu">
           <li>
             <NavLink to="/contributing/contributors/">
               <Lang lnkey='nav.contributors'/>
@@ -130,6 +130,11 @@ const Header = ({
               <Lang lnkey='nav.sponsors'/>
             </NavLink>
           </li>
+          <li>
+            <NavLink to="/contributing/tools/">
+              <Lang lnkey='nav.tools'/>
+            </NavLink>
+          </li>
         </ul>
       </li>
       <li>

src/components/tool.scss

@@ -0,0 +1,17 @@
+.tool {
+  display: grid;
+  grid-template-columns: min(200px, 50%) auto;
+  background: rgba(0, 0, 0, .1);
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  border-radius: 1em 0 0 1em;
+  > p {
+    padding: 0.5em;
+  }
+  > :first-child {
+    background: rgba(0, 0, 0, .1);
+    border-radius: 1em 0 0 1em;
+    border-right: 1px solid var(--highlight-color);
+    padding-right: 0.5em;
+  }
+}

src/components/tool.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Lang from './lang.tsx';
+import './tool.scss';
 import languageKey from '../locales/language-key.ts';
 
 interface ToolType {
@@ -10,21 +11,16 @@ interface ToolType {
 const Tool = ({
   name,
   link,
-}: ToolType,) => <div>
+}: ToolType,) => <div className={'tool'}>
   <a
     href={link}
     target='_blank'
     rel='noreferrer'
   >
-    <h3><Lang lnkey={`tools.${ name }.title` as languageKey}/></h3>
-    <picture>
-      <source srcSet={`/assets/tools/${ name }.avif`} type="image/avif"/>
-      <source srcSet={`/assets/tools/${ name }.webp`} type="image/webp"/>
-      <img src={`/assets/tools/${ name }.png`} alt={name}/>
-    </picture>
+    <h3>{name}</h3>
   </a>
   <p>
-    <Lang lnkey={`tools.${ name }.description` as languageKey}/>
+    <Lang lnkey={`tools.${ name }` as languageKey}/>
   </p>
 </div>;
 

src/pages/contributing/tools/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Layout from '../../../components/layout.tsx';
+import Tool from '../../../components/tool.tsx';
+import ContentUnit from '../../../components/content-unit.tsx';
+
+const Index = () => <Layout
+  page='tools'
+  path='/contributing/tools'
+>
+  <ContentUnit text={'tools.title'} level={'h1'}>
+    tools.description
+  </ContentUnit>
+  <Tool link={'https://www.typescriptlang.org/'} name={'typescript'}/>
+  <Tool link={'https://react.dev/'} name={'react'}/>
+  <Tool link={'https://svelte.dev/'} name={'svelte'}/>
+  <Tool link={'https://fastify.dev/'} name={'fastify'}/>
+  <Tool link={'https://www.docker.com/'} name={'docker'}/>
+  <Tool link={'https://eslint.org/'} name={'eslint'}/>
+  <Tool link={'https://www.chaijs.com/'} name={'chai'}/>
+  <Tool link={'https://mochajs.org/'} name={'mocha'}/>
+  <Tool link={'https://www.cypress.io/'} name={'cypress'}/>
+  <Tool link={'https://stylelint.io/'} name={'stylelint'}/>
+  <Tool link={'https://markmap.js.org/'} name={'markmap-render'}/>
+  <Tool link={'https://vuejs.org/'} name={'vue'}/>
+  <Tool link={'https://www.electronjs.org/'} name={'electron'}/>
+  <Tool link={'https://expressjs.com/'} name={'express'}/>
+</Layout>;
+export default Index;