diff --git a/.github/workflows/cd-pages.yml b/.github/workflows/cd-pages.yml
new file mode 100644
index 0000000..276bb18
--- /dev/null
+++ b/.github/workflows/cd-pages.yml
@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+ # Runs on pushes targeting the default branch
+ push:
+ branches: ["main"]
+
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+ group: "pages"
+ cancel-in-progress: false
+
+jobs:
+ # Single deploy job since we're just deploying
+ deploy:
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+ - name: Setup Pages
+ uses: actions/configure-pages@v5
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v3
+ with:
+ # Upload entire repository
+ path: './public'
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v5
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..e43d051
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,61 @@
+name: CI
+
+on:
+ push:
+ branches:
+ - main
+ # - dev
+ pull_request:
+ branches:
+ - main
+ # - dev
+ workflow_dispatch:
+
+permissions:
+ contents: read
+
+concurrency:
+ group: ci-${{ github.ref }}
+ cancel-in-progress: true
+
+jobs:
+ static-site-checks:
+ name: Static site checks
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v6
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: 24
+ cache: npm
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Run unit tests
+ run: npm test
+
+ # TODO: Re-enable formatting check once we have a consistent style and a formatter in place.
+ # Prettier formatting
+ # - name: Check formatting
+ # run: npm run format:check
+
+ - name: Lint JavaScript
+ run: npm run lint:js
+
+ # TODO: Re-enable HTML validation once we have a consistent style and the necessary configuration in place.
+ # html-validate
+ # - name: Validate HTML
+ # run: npm run lint:html
+
+ - name: Verify public site files exist
+ run: |
+ test -f public/index.html
+ test -d public/assets
+
+ - name: Check links
+ run: npm run check:links
diff --git a/assets/css/style.css b/assets/css/style.css
deleted file mode 100644
index fbcd7cc..0000000
--- a/assets/css/style.css
+++ /dev/null
@@ -1,153 +0,0 @@
-/* Basic Reset */
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
- background-color: #f9fafb;
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- color: #333;
-}
-
-/* Container and Header */
-.container {
- max-width: 800px;
- padding: 20px;
- background-color: #fff;
- border-radius: 8px;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
- text-align: center;
-}
-
-header {
- margin-bottom: 20px;
- position: relative;
-}
-
-h1 {
- color: #004085;
- font-size: 2em;
- font-weight: 700;
-}
-
-.description {
- color: #666;
- font-size: 1.1em;
- margin-top: 10px;
-}
-
-/* Dropdown Menu */
-.dropdown {
- position: relative;
- display: inline-block;
-}
-
-.dropdown-btn {
- background-color: #004085;
- color: white;
- padding: 10px 15px;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 0.9em;
-}
-
-.dropdown-content {
- display: none;
- position: absolute;
- background-color: #fff;
- min-width: 160px;
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
- border-radius: 4px;
- padding: 10px 0;
- z-index: 1;
-}
-
-.dropdown-content a {
- color: #004085;
- padding: 8px 16px;
- text-decoration: none;
- display: block;
- transition: background-color 0.3s;
-}
-
-.dropdown-content a:hover {
- background-color: #e8f1fa;
-}
-
-/* Show dropdown on click */
-.show {
- display: block;
-}
-
-/* Link Cards */
-.links-grid {
- display: grid;
- gap: 15px;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
-.card {
- background-color: #e8f1fa;
- padding: 15px;
- border-radius: 8px;
- text-decoration: none;
- color: #004085;
- box-shadow: 0 4px 8px rgba(0, 64, 133, 0.15);
- transition: transform 0.3s, box-shadow 0.3s;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.card img {
- width: 40px;
- height: 40px;
- margin-bottom: 10px;
-}
-
-.card h2 {
- font-size: 1.2em;
- margin-bottom: 5px;
-}
-
-.card p {
- font-size: 0.9em;
- color: #555;
-}
-
-.card:hover {
- transform: translateY(-5px);
- box-shadow: 0 6px 12px rgba(0, 64, 133, 0.25);
-}
-
-/* Footer */
-footer {
- margin-top: 20px;
- padding: 10px;
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 10px;
-}
-
-.watermark {
- font-size: 0.9em;
- color: #999;
-}
-
-.github-link img {
- width: 24px;
- height: 24px;
- transition: opacity 0.2s;
-}
-
-.github-link:hover img {
- opacity: 0.7;
-}
diff --git a/assets/js/script.js b/assets/js/script.js
deleted file mode 100644
index b77be95..0000000
--- a/assets/js/script.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// Function to dynamically set the current year in the footer
-function setCurrentYear() {
- const yearElement = document.getElementById('currentYear');
- if (yearElement) {
- yearElement.textContent = new Date().getFullYear();
- }
-}
-
-// Function to toggle the dropdown menu
-function toggleDropdown() {
- const dropdownMenu = document.getElementById('dropdownMenu');
- dropdownMenu.classList.toggle('show');
-}
-
-// Ensure the function runs only after the DOM is fully loaded
-document.addEventListener('DOMContentLoaded', setCurrentYear);
-
-// Close dropdown if clicked outside
-window.onclick = function(event) {
- if (!event.target.matches('.dropdown-btn')) {
- const dropdowns = document.getElementsByClassName("dropdown-content");
- for (let i = 0; i < dropdowns.length; i++) {
- const openDropdown = dropdowns[i];
- if (openDropdown.classList.contains('show')) {
- openDropdown.classList.remove('show');
- }
- }
- }
-};
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..64dcaf2
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,45 @@
+export default [
+ {
+ ignores: [
+ "node_modules/**",
+ "dist/**",
+ "coverage/**",
+ "public/vendor/**",
+ ],
+ },
+ {
+ files: [
+ "public/assets/js/**/*.js",
+ "tests/**/*.js",
+ ],
+ languageOptions: {
+ ecmaVersion: "latest",
+ sourceType: "module",
+ globals: {
+ document: "readonly",
+ window: "readonly",
+ Event: "readonly",
+ MouseEvent: "readonly",
+ console: "readonly",
+ URL: "readonly",
+ process: "readonly",
+ },
+ },
+ rules: {
+ "no-unused-vars": [
+ "error",
+ {
+ argsIgnorePattern: "^_",
+ varsIgnorePattern: "^_",
+ },
+ ],
+ "no-undef": "error",
+ "no-console": "warn",
+ "prefer-const": "error",
+ "eqeqeq": [
+ "error",
+ "always",
+ ],
+ },
+ },
+];
diff --git a/index.html b/index.html
deleted file mode 100644
index 0443225..0000000
--- a/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
-
-
-
- safesploitOrg Project Overview
-
-
- safesploitOrg Project Overview
-
- A central hub for all projects hosted under *.git.safesploit.com . Here, you'll find links to each project, providing a convenient way to navigate the safesploitOrg ecosystem.
-
-
- Useful Resources ▼
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ©
-
-
-
-
safesploitOrg Project Overview
+
+
+
+
+
+
+
+
+
+ ©
+
+
+
+
+
+
+
+ This page works without JavaScript, but the dropdown menu and
+ dynamic footer year require JavaScript.
+
+
+
+
diff --git a/tests/helpers/sitePaths.js b/tests/helpers/sitePaths.js
new file mode 100644
index 0000000..43217e2
--- /dev/null
+++ b/tests/helpers/sitePaths.js
@@ -0,0 +1,39 @@
+import fs from "node:fs";
+import path from "node:path";
+
+export const REPO_ROOT = process.cwd();
+
+export function getSiteRoot() {
+ const publicRoot = path.join(REPO_ROOT, "public");
+ const publicIndex = path.join(publicRoot, "index.html");
+
+ if (fs.existsSync(publicIndex)) {
+ return publicRoot;
+ }
+
+ return REPO_ROOT;
+}
+
+export function getIndexPath() {
+ return path.join(getSiteRoot(), "index.html");
+}
+
+export function getAssetsPath() {
+ return path.join(getSiteRoot(), "assets");
+}
+
+export function getScriptPath() {
+ return path.join(getAssetsPath(), "js", "script.js");
+}
+
+export function getProjectsJsonPath() {
+ return path.join(getAssetsPath(), "data", "projects.json");
+}
+
+export function readIndexHtml() {
+ return fs.readFileSync(getIndexPath(), "utf8");
+}
+
+export function resolveSiteAsset(relativePath) {
+ return path.join(getSiteRoot(), relativePath);
+}
diff --git a/tests/projects-data.test.js b/tests/projects-data.test.js
new file mode 100644
index 0000000..a560b85
--- /dev/null
+++ b/tests/projects-data.test.js
@@ -0,0 +1,97 @@
+/*
+ This is for the future /public/assets/data/projects.json approach.
+ It skips automatically if you have not created the JSON file yet.
+*/
+
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, test } from "vitest";
+import {
+ getProjectsJsonPath,
+ getSiteRoot,
+ resolveSiteAsset,
+} from "./helpers/sitePaths.js";
+
+const PROJECTS_JSON_PATH = getProjectsJsonPath();
+const HAS_PROJECTS_JSON = fs.existsSync(PROJECTS_JSON_PATH);
+
+describe.skipIf(!HAS_PROJECTS_JSON)("projects.json data quality", () => {
+ function loadProjects() {
+ const rawJson = fs.readFileSync(PROJECTS_JSON_PATH, "utf8");
+ return JSON.parse(rawJson);
+ }
+
+ test("projects.json contains a non-empty array", () => {
+ const projects = loadProjects();
+
+ expect(Array.isArray(projects)).toBe(true);
+ expect(projects.length).toBeGreaterThan(0);
+ });
+
+ test("each project has required fields", () => {
+ const projects = loadProjects();
+
+ for (const project of projects) {
+ expect(project.name).toBeTruthy();
+ expect(project.description).toBeTruthy();
+ expect(project.url).toBeTruthy();
+ expect(project.category).toBeTruthy();
+ expect(project.icon).toBeTruthy();
+
+ expect(project.url).toMatch(/^https:\/\//);
+ expect(project.description.length).toBeGreaterThan(20);
+ }
+ });
+
+ test("project URLs are unique", () => {
+ const projects = loadProjects();
+ const urls = projects.map((project) => project.url);
+ const uniqueUrls = new Set(urls);
+
+ expect(uniqueUrls.size).toBe(urls.length);
+ });
+
+ test("project names are unique", () => {
+ const projects = loadProjects();
+ const names = projects.map((project) => project.name.toLowerCase());
+ const uniqueNames = new Set(names);
+
+ expect(uniqueNames.size).toBe(names.length);
+ });
+
+ test("project icons exist locally when using relative paths", () => {
+ const projects = loadProjects();
+
+ for (const project of projects) {
+ const icon = project.icon;
+
+ if (icon.startsWith("http://") || icon.startsWith("https://")) {
+ continue;
+ }
+
+ const iconPath = resolveSiteAsset(icon);
+
+ expect(
+ fs.existsSync(iconPath),
+ `Missing icon for ${project.name}: ${path.relative(getSiteRoot(), iconPath)}`,
+ ).toBe(true);
+ }
+ });
+
+ test("tags are arrays when present", () => {
+ const projects = loadProjects();
+
+ for (const project of projects) {
+ if (!Object.hasOwn(project, "tags")) {
+ continue;
+ }
+
+ expect(Array.isArray(project.tags)).toBe(true);
+
+ for (const tag of project.tags) {
+ expect(typeof tag).toBe("string");
+ expect(tag.trim()).toBeTruthy();
+ }
+ }
+ });
+});
diff --git a/tests/script.behaviour.test.js b/tests/script.behaviour.test.js
new file mode 100644
index 0000000..81e1d65
--- /dev/null
+++ b/tests/script.behaviour.test.js
@@ -0,0 +1,108 @@
+import fs from "node:fs";
+import { describe, expect, test } from "vitest";
+import { JSDOM } from "jsdom";
+import { getScriptPath } from "./helpers/sitePaths.js";
+
+function createDom() {
+ return new JSDOM(
+ `
+
+
+
+ Useful Resources
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+