first commit

.github/dependabot.yml

@@ -0,0 +1,16 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    groups:
+      all-dependencies:
+        patterns:
+          - "*"
+    ignore:
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]
+
+      - dependency-name: "@tabler/icons-react"
+        versions: ["3.19.0"]

.github/workflows/auto-merge.yml

@@ -0,0 +1,26 @@
+name: Auto-merge Dependabot updates
+
+on: pull_request
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  enable-auto-merge:
+    runs-on: ubuntu-latest
+    if: github.actor == 'dependabot[bot]'
+
+    steps:
+      - name: Fetch metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@v2
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+
+      - name: Enable auto-merge
+        if: contains(fromJSON('["version-update:semver-minor", "version-update:semver-patch"]'), steps.metadata.outputs.update-type)
+        run: gh pr merge --auto --rebase "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/build.yml

@@ -0,0 +1,27 @@
+name: Build project
+
+on: pull_request
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "*"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build project
+        run: yarn run build --base=/${{ github.event.repository.name }}/

.github/workflows/deploy.yml

@@ -0,0 +1,66 @@
+name: Deploy static content to Pages
+
+on:
+  push:
+    branches: ["master"]
+    paths-ignore:
+      - ".**"
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "*"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build project
+        run: yarn run build --base=/${{ github.event.repository.name }}/
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Fix permissions
+        run: |
+          chmod -c -R +rX "_site/" | while read line; do
+            echo "::warning title=Invalid file permissions automatically fixed::$line"
+          done
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./dist"
+
+  deploy:
+    needs: build
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Deploy to Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+*.tsbuildinfo
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierignore

@@ -0,0 +1,2 @@
+# Ignore generated API types
+src/api/types.d.ts

.prettierrc.json

@@ -0,0 +1 @@
+{}

README.md

@@ -0,0 +1,27 @@
+# SSHOM Search
+
+A web interface for searching the SSH Open Marketplace.
+
+## Development
+
+### Requirements
+
+- **Node.js** v22.x
+- **Yarn** v1.x
+
+### Getting started
+
+1. Run `yarn` to install the project's dependencies and generate the API definitions.
+2. Run `yarn run dev` to start the development server.
+
+### Available scripts in `package.json`
+
+| Command          | Action                                               |
+| ---------------- | ---------------------------------------------------- |
+| dev              | Run the development server.                          |
+| build            | Build the project to the `dist` folder.              |
+| lint             | Check for issues in the code.                        |
+| preview          | Serve the built project.                             |
+| api:generate     | Generate the API definitions.                        |
+| formatting:check | Check if the source code matches the Prettier style. |
+| formatting:apply | Format the source code to the Prettier style.        |

eslint.config.js

@@ -0,0 +1,47 @@
+import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist", "src/api/types.d.ts"] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.strictTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-misused-promises": [
+        "error",
+        {
+          checksVoidReturn: {
+            attributes: false,
+          },
+        },
+      ],
+      "@typescript-eslint/no-unused-vars": "warn",
+    },
+  },
+  eslintConfigPrettier,
+);

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SSHOM Search</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "sshom-search",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "api:generate": "openapi-typescript https://marketplace-api.sshopencloud.eu/v3/api-docs -o ./src/api/types.d.ts",
+    "formatting:check": "yarn prettier --check .",
+    "formatting:apply": "yarn prettier --write .",
+    "postinstall": "yarn run api:generate"
+  },
+  "dependencies": {
+    "@mantine/core": "^7.13.3",
+    "@mantine/hooks": "^7.13.3",
+    "@mantine/notifications": "^7.13.3",
+    "@tabler/icons-react": "~3.18.0",
+    "clsx": "^2.1.1",
+    "jotai": "^2.10.1",
+    "markdown-to-jsx": "^7.5.0",
+    "openapi-typescript": "^7.4.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.2.1",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "globals": "^15.11.0",
+    "postcss": "^8.4.47",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.10.0",
+    "vite": "^5.4.9",
+    "vite-tsconfig-paths": "^5.0.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,14 @@
+export default {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
+  },
+};

src/api/service/getAutocompleteData.ts

@@ -0,0 +1,23 @@
+import { SuggestedSearchPhrases } from "@customTypes/api";
+
+let abortController: AbortController | undefined;
+
+export async function getAutocompleteData(searchQuery: string) {
+  if (abortController) abortController.abort();
+  abortController = new AbortController();
+
+  if (!searchQuery) return [];
+
+  const jsonData = await fetch(
+    `https://marketplace-api.sshopencloud.eu/api/item-search/autocomplete?q=${searchQuery}&category=tool-or-service`,
+    { signal: abortController.signal },
+  );
+  const data = (await jsonData.json()) as SuggestedSearchPhrases;
+  if (!data.suggestions) return [];
+  return (
+    data.suggestions
+      .filter((suggestion) => suggestion.phrase)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      .map((suggestion) => suggestion.phrase!)
+  );
+}

src/api/service/getItemDetails.ts

@@ -0,0 +1,15 @@
+import { ToolDto } from "@customTypes/api";
+
+let abortController: AbortController | undefined;
+
+export async function getItemDetails(persistentId: string) {
+  if (abortController) abortController.abort();
+  abortController = new AbortController();
+
+  const jsonData = await fetch(
+    `https://marketplace-api.sshopencloud.eu/api/tools-services/${persistentId}`,
+    { signal: abortController.signal },
+  );
+  const data = (await jsonData.json()) as ToolDto;
+  return data;
+}

src/api/service/getSearchResults.ts

@@ -0,0 +1,21 @@
+import { PaginatedSearchItems } from "@customTypes/api";
+
+let abortController: AbortController | undefined;
+
+export async function getSearchResults(
+  searchQuery: string,
+  page: number,
+  resultsPerPage: number,
+  facets?: string[],
+) {
+  if (abortController) abortController.abort();
+  abortController = new AbortController();
+
+  let queryUrl = `https://marketplace-api.sshopencloud.eu/api/item-search?order=score&categories=tool-or-service&page=${page.toString()}&perpage=${resultsPerPage.toString()}`;
+  if (searchQuery) queryUrl += `&q=${searchQuery}`;
+  if (facets?.length) for (const facet of facets) queryUrl += facet;
+
+  const jsonData = await fetch(queryUrl, { signal: abortController.signal });
+  const data = (await jsonData.json()) as PaginatedSearchItems;
+  return data;
+}