Merge pull request #9 from Lissy93/feat/homepage-improvments

Add homepage customization options for user

Author: lissy93

.github/CONTRIBUTING.md

@@ -0,0 +1,23 @@
+# Contributing
+
+Hey! Thanks for wanting to contribute to Networking Toolbox 🎉
+
+## Getting Started
+
+Checkout the [README](README.md) for setup instructions, it's all very standard (clone, cd, npm install, npm run dev).
+
+## Code Style
+
+The usual, just keep it reasonably clean and consistent. Like normal TypeScript + Svelte stuff.
+
+## Before You Submit
+
+Don't forget to ensure that all checks pass. If you just run `npm run hold-my-beer` then you should be good to go!
+
+For all project commands, take a look at the [the readme](https://github.com/Lissy93/networking-toolbox?tab=readme-ov-file#project-commands) or just the [`package.json`](https://github.com/Lissy93/networking-toolbox/blob/main/package.json). 
+
+## Code of Conduct
+
+Be respectful and constructive. See [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) for details.
+
+If you mention .NET I might block you. Just kidding. Maybe.

.github/docs/app-customization.md

@@ -0,0 +1,134 @@
+# Customization Guide
+
+If you're self-hosting Networking Toolbox, you can customize the branding for your instance with a few env vars.
+
+## Overview
+
+Networking Toolbox supports customization through environment variables. This allows you to:
+- Brand the application with your organization's name
+- Use a custom logo/icon
+- Set default themes and layouts
+- Maintain consistency across your organization
+
+**Important:** These customizations only affect the default values. Users can still customize their personal preferences through the settings menu, and those will be stored in their browser's localStorage.
+
+## Getting Started
+
+Download the [`.env.example`](https://gist.githubusercontent.com/Lissy93/3c5f85dc0e2263a4706d3e136f0a076e/raw/62a00f625c920ac9e1cafe60721213e2ea233581/.env.example) to `.env` in the root of your project.
+
+1. Copy `.env.example` to `.env`:
+   ```bash
+    curl -o .env https://gist.githubusercontent.com/Lissy93/3c5f85dc0e2263a4706d3e136f0a076e/raw/62a00f625c920ac9e1cafe60721213e2ea233581/.env.example
+   ```
+
+2. Edit `.env` and uncomment/modify the variables you want to customize
+
+3. Restart your application to apply changes
+
+## Available Customizations
+
+### Site Branding
+
+```bash
+# Customize your site name and description
+NTB_SITE_NAME=My Network Tools
+NTB_SITE_TITLE=My Network Tools
+NTB_SITE_DESCRIPTION=Professional networking utilities for your team
+```
+
+### Custom Logo
+
+Use a custom logo image in the navbar:
+
+```bash
+NTB_SITE_ICON=/logo.svg
+```
+
+Place your logo image in the `static/` directory and reference it with a leading slash. Supported formats: SVG, PNG, JPG, WebP.
+
+### Default Layout
+
+Set the default homepage layout:
+
+```bash
+# Options: categories, default, minimal, carousel, bookmarks, small-icons, list, search, empty
+NTB_HOMEPAGE_LAYOUT=categories
+```
+
+### Default Navbar Display
+
+Control what appears in the top navigation:
+
+```bash
+# Options: default, bookmarked, frequent, none
+NTB_NAVBAR_DISPLAY=default
+```
+
+### Default Theme
+
+Set the default color theme:
+
+```bash
+# Options: dark, light, midnight, arctic, ocean, purple, cyberpunk, terminal, lightpurple, muteddark, solarized
+NTB_DEFAULT_THEME=dark
+```
+
+## Example Configurations
+
+### Corporate Branding Example
+
+```bash
+NTB_SITE_NAME=Acme Corp Network Tools
+NTB_SITE_TITLE=Acme Corp Network Tools
+NTB_SITE_DESCRIPTION=Internal networking utilities for Acme Corp IT team
+NTB_SITE_ICON=/acme-logo.svg
+NTB_DEFAULT_THEME=light
+NTB_HOMEPAGE_LAYOUT=list
+```
+
+### Minimalist Setup Example
+
+```bash
+NTB_SITE_NAME=NetUtils
+NTB_SITE_DESCRIPTION=Simple network utilities
+NTB_DEFAULT_THEME=muteddark
+NTB_HOMEPAGE_LAYOUT=search
+NTB_NAVBAR_DISPLAY=none
+```
+
+## Docker Deployment
+
+When using Docker, pass environment variables with the `-e` flag or use a `.env` file:
+
+```bash
+docker run -p 5000:5000 \
+  -e NTB_SITE_NAME="My Network Tools" \
+  -e NTB_DEFAULT_THEME="light" \
+  lissy93/networking-toolbox
+```
+
+Or with docker-compose:
+
+```yaml
+services:
+  networking-toolbox:
+    image: lissy93/networking-toolbox
+    ports:
+      - "5000:5000"
+    environment:
+      - NTB_SITE_NAME=My Network Tools
+      - NTB_DEFAULT_THEME=light
+      - NTB_SITE_ICON=/custom-logo.svg
+    volumes:
+      - ./static:/app/static  # For custom logo
+```
+
+## Notes
+
+- All environment variables must be prefixed with `NTB_` to be accessible
+- Changes require an application restart to take effect
+- The managed instance at [networking-toolbox.as93.net](https://networking-toolbox.as93.net) uses the default values
+- User preferences set through the UI take precedence over these defaults
+- Invalid values will fallback to the default settings
+
+

.github/workflows/report-tests.yml

@@ -1,3 +1,5 @@
+# Runs after the test workflow is done, uses results to gen a report for the PR
+
 name: 📣 Report Tests
 
 on:
@@ -10,6 +12,7 @@ permissions:
   contents: read
   checks: write    # For test reporting
   pull-requests: write  # For PR comments
+  actions: read
 
 jobs:
   report:
@@ -33,7 +36,7 @@ jobs:
         uses: dorny/test-reporter@v1
         if: always()
         with:
-          name: Unit Tests
+          name: ⚙️ Unit Tests
           path: test-results.xml
           reporter: java-junit
           fail-on-error: false
@@ -44,7 +47,7 @@ jobs:
         uses: dorny/test-reporter@v1
         if: always()
         with:
-          name: API Contract Tests
+          name: 📡 API Contract Tests
           path: api-test-results.xml
           reporter: java-junit
           fail-on-error: false
@@ -55,7 +58,7 @@ jobs:
         uses: dorny/test-reporter@v1
         if: always()
         with:
-          name: E2E Tests
+          name: 🧭 E2E Tests
           path: e2e-results.xml
           reporter: java-junit
           fail-on-error: false
@@ -109,13 +112,12 @@ jobs:
           {
             echo "## 📊 Detailed Test Report"
             echo ""
-            echo "**Overall Status:** $(em "${{ github.event.workflow_run.conclusion }}")"
-            echo ""
-
             if [ "$failures" -eq 0 ]; then
-              echo "🎉 **All test suites passed!**"
+              echo "🎉 **All test suites passed!**<br>"
+              echo "![niceee](https://media.tenor.com/5IWFYb4D1WMAAAAi/swan-hack-dab.gif)<br>"
             else
-              echo "⚠️ **$failures test suite(s) failed**"
+              echo "⚠️ **$failures test suite(s) failed**<br>"
+              echo "![its not the end of the wold](https://media.tenor.com/37jOSZZvjQUAAAAi/pengu-pudgy.gif)<br>"
             fi
 
             # Detailed Unit Test Report

eslint.config.js

@@ -29,6 +29,28 @@ export default [
       'svelte/no-navigation-without-resolve': 'off'
     }
   },
+  {
+    files: ['**/*.svelte.ts'],
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        extraFileExtensions: ['.svelte']
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2023,
+        // Svelte 5 runes globals
+        $state: 'readonly',
+        $derived: 'readonly',
+        $effect: 'readonly',
+        $props: 'readonly',
+        $bindable: 'readonly',
+        $inspect: 'readonly'
+      }
+    }
+  },
   {
     rules: {
       // Prefer TS version of unused-vars, and ignore _-prefixed

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "networking-toolbox",
 	"private": true,
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -15,10 +15,11 @@
 		"build-check": "vite build --minify=false --sourcemap=false --logLevel error",
 		"build:node": "DEPLOY_ENV='node' npm run build",
 		"build:static": "DEPLOY_ENV='static' npm run build",
-		"test": "vitest",
+		"test": "vitest run",
 		"test:coverage": "vitest run --coverage",
 		"test:api": "vitest run --config tests/vitest.api.config.ts",
-		"test:e2e": "playwright test"
+		"test:e2e": "playwright test",
+		"hold-my-beer": "npm run format && npm run lint && npm run types && npm run check && npm run build-check && npm run test"
 	},
 	"devDependencies": {
 		"@axe-core/playwright": "^4.10.2",

src/app.html

@@ -3,6 +3,22 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Prevent FOUC by applying theme before page renders -->
+    <script>
+      (function () {
+        try {
+          // Apply theme
+          const theme = localStorage.getItem('theme') || 'dark';
+          if (theme !== 'dark') {
+            document.documentElement.classList.add('theme-' + theme);
+          }
+        } catch (e) {
+          // Ignore localStorage errors (private browsing, etc.)
+        }
+      })();
+    </script>
+
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">

src/lib/components/common/KeyboardShortcutChip.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { formatShortcut } from '$lib/utils/keyboard';
+
+  interface Props {
+    label: string;
+    shortcut: string;
+    onclick?: () => void;
+  }
+
+  let { label, shortcut, onclick }: Props = $props();
+
+  const formattedShortcut = $derived(formatShortcut(shortcut));
+</script>
+
+<button class="shortcut-chip" {onclick} aria-label="{label} - {formattedShortcut}">
+  <span class="chip-label">{label}</span>
+  <span class="chip-shortcut">{formattedShortcut}</span>
+</button>
+
+<style lang="scss">
+  .shortcut-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-size: var(--font-size-xs);
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+    white-space: nowrap;
+    box-shadow: var(--shadow-sm);
+    animation: chipAppear 0.4s ease-out;
+    justify-content: space-between;
+
+    &:hover {
+      background-color: var(--surface-hover);
+      border-color: var(--color-primary);
+      transform: translateY(-1px) scale(1.02);
+      box-shadow: var(--shadow-md);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-primary);
+      outline-offset: 2px;
+    }
+
+    &:active {
+      transform: scale(0.98) translateY(1px);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .chip-label {
+      font-weight: 500;
+      color: var(--text-primary);
+    }
+
+    .chip-shortcut {
+      background-color: var(--bg-tertiary);
+      border: 1px solid var(--border-secondary);
+      border-radius: var(--radius-sm);
+      padding: 2px var(--spacing-xs);
+      font-size: var(--font-size-xs);
+      color: var(--text-secondary);
+      font-family: var(--font-mono);
+    }
+  }
+
+  @keyframes chipAppear {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+</style>

src/lib/components/common/OfflineIndicator.svelte

@@ -4,7 +4,7 @@
   import { resolve } from '$app/paths';
   import Icon from '$lib/components/global/Icon.svelte';
 
-  $: currentPath = $page.url.pathname;
+  $: currentPath = $page.url?.pathname ?? '/';
   $: isOfflinePage = currentPath === '/offline';
   $: isActualTool = isDownloadableTool(currentPath);
   $: worksOffline = isOfflineCapable(currentPath);

src/lib/components/furniture/BurgerMenu.svelte

@@ -126,7 +126,8 @@
 
   // Check if a link is currently active
   function isActiveLink(href: string): boolean {
-    return $page.url.pathname === href || $page.url.pathname.startsWith(href + '/');
+    const pathname = $page.url?.pathname ?? '/';
+    return pathname === href || pathname.startsWith(href + '/');
   }
 
   // Get nav groups for organized display