[docs] Created a docs directory and added Markdown linting (#513)

.github/workflows/code-qa.yml

@@ -35,6 +35,8 @@ jobs:
               run: npm run prettier:check
             - name: Quality check - eslint
               run: npm run eslint:check
+            - name: Quality check - type check
+              run: npm run tsc
             - name: Quality check - cypress
               run: npm run e2e:headless
             - name: Build check

.github/workflows/markdown-lint.yml

@@ -0,0 +1,36 @@
+name: Markdown Lint
+
+on:
+    push:
+        branches: [main]
+        paths:
+            - '**/*.md'
+            - '.github/workflows/markdown-lint.yml'
+    pull_request:
+        branches: [main]
+        paths:
+            - '**/*.md'
+            - '.github/workflows/markdown-lint.yml'
+
+jobs:
+    lint-markdown:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+            - name: Cache Node.js modules
+              uses: actions/cache@v3
+              with:
+                  path: ~/.npm
+                  key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+                  restore-keys: |
+                      ${{ runner.os }}-node-
+            - name: Run installs
+              run: npm ci --legacy-peer-deps
+            - name: Run markdownlint on Markdown files
+              run: npm run lint:markdown

.markdownlint.json

@@ -0,0 +1,4 @@
+{
+	"MD010": false,
+	"MD013": false
+}

.markdownlintignore

@@ -0,0 +1,201 @@
+# compiled output
+/out-tsc
+dist
+tmp
+
+# dependencies
+.pnp.js
+/.pnp
+jspm_packages/
+node_modules
+
+# Visual Studio Code
+!.vscode/extensions.json
+!.vscode/launch.json
+!.vscode/settings.json
+!.vscode/tasks.json
+.vscode-test
+.vscode/*
+/.vscode
+
+# IDEs and editors
+*.launch
+*.sublime-workspace
+.c9/
+.classpath
+.project
+.settings/
+/.idea
+service-account.json
+
+# ORM Config
+ormconfig.*.*
+ormconfig.*.js
+ormconfig.js
+ormconfig.json
+
+# misc
+.DS_Store
+.pem
+/.sass-cache
+/connect.lock
+/coverage
+/typings
+typings/
+Thumbs.db
+
+# Next.js
+.next
+/.next/
+/out/
+
+# Env files
+!.env.example
+!.env.masterpiece-studio-8ac80
+!.env.masterpiece-studio-production
+!.env.project
+.env
+.env*
+.env*.local
+.env.*
+.env.development.local
+.env.local
+.env.production.local
+.env.test.Local
+.staging_db_url
+!.env.vault
+
+# Builds
+builds/
+build/
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+tsconfig.tsbuildinfo
+
+# ES Lint
+.eslintcache
+
+# Service workers
+*.js.map
+sw.js
+sw.js.map
+workbox-*.js
+worker-*.js
+
+# deploy
+.deploy/aws-kp.pem
+.deploy/settings-staging.json
+.deploy/settings.json
+
+# Sentry
+.sentryclirc
+
+# Flask
+.flaskenv*
+
+# Cypress
+cypress/screenshots
+cypress/videos
+worker-@cypress/
+
+# Logs
+*.log
+.pnpm-debug.log*
+/libpeerconnection.log
+lerna-debug.log*
+logs
+npm-debug.log
+npm-debug.log*
+testem.log
+yarn-debug.log*
+yarn-error.log
+yarn-error.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# npm cache directory
+.npm
+
+# stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+dist/**/*.js
+dist/**/*.js.map
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# yarn
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+
+# Firebase
+.firebase/
+
+# nx cache
+.nx/cache
+
+# Ignore minified files
+*.min.*

docs/components/projects.md

@@ -0,0 +1,79 @@
+# Projects Documentation
+
+## Overview
+
+This document explains how the projects grid is displayed and how to add new projects to the codebase.
+
+## Projects Grid Display
+
+The projects grid is displayed using the `ProjectsGrid` component located in [ProjectsGrid.tsx](../../src/components/projects/ProjectsGrid.tsx). This component creates a grid layout to showcase the projects.
+
+### Key Elements
+
+- **State Management**: The component uses the `useState` hook to manage whether to view all projects or only featured projects.
+- **Grid Layout**: The projects are displayed in a responsive grid layout using Material-UI's Grid and Stack components.
+- **Project Cards**: Each project is displayed as a card with a thumbnail image, project name, title, employer, and links to relevant resources.
+
+### Flowchart
+
+```mermaid
+flowchart LR
+    A[ProjectsGrid Component] -->|Fetches| B[Projects Data]
+    B --> C[Maps Projects to Grid Items]
+    C --> D[Displays Project Cards]
+    D --> E[Project Thumbnail]
+    D --> F[Project Name]
+    D --> G[Project Title - Employer]
+    D --> I[Links]
+    E --> J[Thumbnail Image]
+    I --> K[Link Buttons]
+```
+
+## Adding New Projects
+
+To add new projects, you need to update the `projects` array in [projects.ts](../../src/data/projects.ts).
+
+### Steps to Add a New Project
+
+1. Open the [projects.ts](../../src/data/projects.ts) file.
+2. Add a new object to the projects array with the following structure: (see `Projects` interface in [projects.ts](../../src/data/projects.ts) for more details)
+
+    ```json
+    {
+    	"name": "Project Name",
+    	"id": "project-id", // unique identifier for the project (associated with the image file name or publication)
+    	"description": "Project description", // optional
+    	"employer": "Employer Name", // optional
+    	"employerURL": "https://employer-website.com", // required if employer is provided
+    	"title": "Job Title",
+    	"publication": "https://publication-url.com", // optional
+    	"type": "Employment", // or 'Personal Project', 'School (MSc)', etc.
+    	"url": "https://project-url.com", // optional
+    	"urls": [
+    		// this is used to create a series of buttons with links
+    		{
+    			"text": "Link Text",
+    			"tooltip": "Tooltip description",
+    			"icon": "IconComponent", // this is a JSX component
+    			"url": "https://link-url.com"
+    		}
+    	],
+    	"color": "#colorCode",
+    	"dates": {
+    		"startDate": "YYYY-MM",
+    		"endDate": "YYYY-MM" // or current if ongoing
+    	},
+    	"showcase": true, // or false
+    	"objectFit": "contain" // optional, cover is used if nothing is provided
+    }
+    ```
+
+### Adding Thumbnail Images
+
+To add a thumbnail image for the new project, place the image in the appropriate directory:
+
+1. **Navigate to the images directory**: Go to the [public image projects directory](../../public/images/projects).
+2. **Create a new directory**: Create a new directory with the project ID (e.g., new-project).
+3. **Add the thumbnail image**: Place the thumbnail image in the new directory and name it thumbnail. Recommended to use `.webp` format for better performance.
+
+By following these steps, you can successfully add new projects to the projects grid.

docs/components/publications.md

@@ -0,0 +1,55 @@
+# Publications Documentation
+
+## Overview
+
+This document explains how the publications list is displayed and how to add new publications to the codebase.
+
+## Publications List Display
+
+The publications list is displayed using the `Publications` component located in [Publications.tsx](../../src/components/publications/Publications.tsx). This component creates a list layout to showcase the publications.
+
+### Key Elements
+
+- **Styling**: The component uses inline styles to manage the appearance of publication metadata.
+- **List Layout**: The publications are displayed in a responsive list layout using Material-UI's Stack and Typography components.
+- **Publication Cards**: Each publication is displayed as a card with a title, authors, metadata, and an abstract.
+
+### Flowchart
+
+```mermaid
+flowchart LR
+    A[Publications Component] -->|Fetches| B[Publications Data]
+    B --> C[Maps Publications to List Items]
+    C --> D[Displays Publication Cards]
+    D --> E[Publication Title]
+    D --> F[Publication Authors]
+    D --> G[Publication Metadata]
+    D --> H[Publication Abstract]
+```
+
+## Adding New Publications
+
+To add new publications, you need to update the `publications` array in [publications.ts](../../src/data/publications.ts).
+
+### Steps to Add a New Publication
+
+1. Open the [publications.ts](../../src/data/publications.ts) file.
+2. Add a new object to the publications array with the following structure:
+
+    ```json
+    {
+    	"title": "Publication Title",
+    	"authors": [
+    		"Author 1",
+    		"Author 2"
+    		// more authors
+    	],
+    	"abstract": "Abstract of the publication.",
+    	"doi": "10.1234/doi",
+    	"journal": "Journal Name",
+    	"date": "YYYY-MM-DD",
+    	"related-project": "project-id" // optional
+    }
+    ```
+
+By following these steps, you can successfully add new publications to the publications list.