Added DemoTime Browser Extension (dev)

apps/browser-extension/README.md

@@ -0,0 +1,100 @@
+# DemoTime Browser Extension
+
+A browser extension for Microsoft Edge and Google Chrome that allows users to quickly return to their DemoTime slides in Visual Studio Code.
+
+Built with [Extension.JS](https://extension.js.org/) and styled using the official DemoTime design system.
+
+## Features
+
+- **Navigation Page**: Quick access to return to your DemoTime presentation with a single click (previous or next scene)
+- **Settings Page**: Configure your DemoTime API URL
+- **Scenes Page**: Overview of all scenes from you DemoTime where you can navigate to
+- **Cross-browser Support**: Works on both Chrome and Edge
+
+
+## Development
+
+This extension is built using Extension.JS, a modern cross-browser extension framework.
+
+### Prerequisites
+
+- Node.js (v16 or higher)
+- npm or pnpm
+
+### Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Start development mode (auto-reload on changes)
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm start
+```
+
+### Available Commands
+
+- `npm run dev` - Start development with Chrome (use `--browser=edge` for Edge)
+- `npm run build` - Build extension for production
+- `npm start` - Preview the production build
+
+### Development with specific browsers
+
+```bash
+# Chrome (default)
+npm run dev
+
+# Edge
+npm run dev -- --browser=edge
+```
+
+## Installation
+
+### For Chrome:
+1. Run `npm run build`
+2. Open Chrome and go to `chrome://extensions/`
+3. Enable "Developer mode" in the top right
+4. Click "Load unpacked"
+5. Select the `dist/chrome-mv3-prod` directory
+
+### For Edge:
+1. Run `npm run build`
+2. Open Edge and go to `edge://extensions/`
+3. Enable "Developer mode" in the left sidebar
+4. Click "Load unpacked"
+5. Select the `dist/chrome-mv3-prod` directory
+
+## Usage
+
+1. Click the DemoTime extension icon in your browser toolbar
+2. On first use, click the settings icon (cog) to configure your DemoTime URL
+3. Enter a valid URL (http or https) and click "Save"
+4. Click the "Next" button to navigate to your DemoTime presentation
+
+## Project Structure
+
+```
+demotime-browser-extension/
+├── manifest.json           # Extension configuration
+├── assets/                 # Logo images
+│   ├── demotime.png
+│   ├── logo-16.png
+│   ├── logo-48.png
+│   └── logo-128.png
+├── pages/                  # HTML pages
+│   ├── navigation.html     # Main navigation page
+│   └── settings.html       # Settings page
+├── scripts/                # JavaScript files
+│   ├── navigation.js       # Navigation logic
+│   └── settings.js         # Settings logic
+└── styles/                 # CSS files
+    ├── common.css          # Shared styles
+    ├── navigation.css      # Navigation page styles
+    └── settings.css        # Settings page styles
+```
+

apps/browser-extension/demotime-custom.css

@@ -0,0 +1,227 @@
+/* Dark mode colors. */
+:root {
+  --sl-color-accent-low: #2d2200;
+  --sl-color-accent: #816600;
+  --sl-color-accent-high: #ffd43b;
+  --sl-color-white: #ffffff;
+  --sl-color-gray-1: #eaeef6;
+  --sl-color-gray-2: #c4c8d3;
+  --sl-color-gray-3: #9ba4b7;
+  --sl-color-gray-4: #505869;
+  --sl-color-gray-5: #313848;
+  --sl-color-gray-6: #202736;
+  --sl-color-black: #15181f;
+}
+
+/* Light mode colors. */
+:root[data-theme='light'] {
+  --sl-color-accent-low: #e1d6b9;
+  --sl-color-accent: #624d00;
+  --sl-color-accent-high: #3f3000;
+  --sl-color-white: #15181f;
+  --sl-color-gray-1: #202736;
+  --sl-color-gray-2: #313848;
+  --sl-color-gray-3: #505869;
+  --sl-color-gray-4: #838c9e;
+  --sl-color-gray-5: #bdc2cc;
+  --sl-color-gray-6: #eaeef6;
+  --sl-color-gray-7: #f4f6fa;
+  --sl-color-black: #ffffff;
+}
+
+body {
+  font-family: 'Mona Sans', serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings: 'wdth' 100;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.site-title {
+  font-family: 'Hubot Sans', serif;
+  font-optical-sizing: auto;
+  font-weight: 600;
+  font-variation-settings: 'wdth' 100;
+}
+
+.site-title {
+  font-family: 'Hubot Sans', serif;
+  font-optical-sizing: auto;
+  font-weight: 600;
+  font-variation-settings: 'wdth' 100;
+  font-style: italic;
+  text-transform: uppercase;
+}
+
+h1 {
+  font-style: italic;
+  font-weight: 900;
+}
+
+.site-title {
+  color: var(--sl-color-white);
+}
+
+.hero {
+  img {
+    @apply h-[150px] w-full md:h-[350px];
+  }
+}
+
+.navigation__docs_link {
+  @apply text-white font-semibold no-underline uppercase;
+}
+
+.social-icons {
+  svg {
+    @apply h-5 w-5;
+
+    color: var(--sl-color-white);
+  }
+}
+
+.sl-link-button.primary {
+  @apply bg-[#FFD43B] text-black !important;
+
+  &:hover {
+    @apply bg-[#FFD43B]/90 text-black !important;
+  }
+}
+
+.content-panel {
+  a {
+    @apply underline-offset-4 decoration-dotted;
+
+    &:hover {
+      @apply decoration-solid;
+    }
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+  11.11% {
+    opacity: 1;
+  }
+  33.33% {
+    opacity: 1;
+  }
+  44.44% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.slideshow {
+  display: flex;
+  animation: slide 16s infinite;
+
+  img {
+    margin-top: 0 !important;
+  }
+}
+
+@keyframes slide {
+  0% {
+    transform: translateX(0);
+  }
+  12.5% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-100%);
+  }
+  37.5% {
+    transform: translateX(-200%);
+  }
+  50% {
+    transform: translateX(-300%);
+  }
+  62.5% {
+    transform: translateX(-400%);
+  }
+  75% {
+    transform: translateX(-500%);
+  }
+  87.5% {
+    transform: translateX(-600%);
+  }
+  100% {
+    transform: translateX(-700%);
+  }
+}
+
+.images {
+  overflow: hidden;
+}
+
+.images img {
+  min-width: 100%;
+  transition: transform 1s ease;
+}
+
+/* Success message styling */
+.success-message {
+  text-align: center;
+  max-width: 36rem;
+  margin: 0 auto;
+  padding: 3rem 2rem;
+}
+
+.success-icon {
+  width: 5rem;
+  height: 5rem;
+  background-color: #ecfdf5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1.5rem;
+}
+
+.success-icon svg {
+  color: var(--sl-color-green);
+}
+
+/* Call-to-Action Section */
+.cta-section {
+  text-align: center;
+  background: var(--sl-color-gray-6);
+  border-radius: 16px;
+  padding: 3rem 2rem;
+  border: 1px solid var(--sl-color-gray-5);
+}
+
+.cta-section h2 {
+  margin: 0 0 1rem 0;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--sl-color-white);
+}
+
+.cta-section p {
+  margin: 0 0 2rem 0;
+  font-size: 1.125rem;
+  color: var(--sl-color-gray-2);
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2rem;
+}
+
+@media (min-width: 640px) {
+  .cta-buttons {
+    flex-direction: row;
+    gap: 1.5rem;
+  }
+}

apps/browser-extension/extension.config.js

@@ -0,0 +1,8 @@
+/** @type {import('extension').ExtensionConfig} */
+module.exports = {
+  vite: (config) => {
+    config.plugins = config.plugins || [];
+    config.plugins.push(require('@tailwindcss/vite').default());
+    return config;
+  }
+};

apps/browser-extension/manifest.json

@@ -0,0 +1,25 @@
+{
+  "manifest_version": 3,
+  "name": "DemoTime Browser Extension",
+  "version": "1.0.0",
+  "description": "Navigate back to DemoTime slides in Visual Studio Code",
+  "action": {
+    "default_popup": "pages/home.html",
+    "default_icon": {
+      "16": "assets/logo-16.png",
+      "48": "assets/logo-48.png",
+      "128": "assets/logo-128.png"
+    }
+  },
+  "icons": {
+    "16": "assets/logo-16.png",
+    "48": "assets/logo-48.png",
+    "128": "assets/logo-128.png"
+  },
+  "permissions": [
+    "storage"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ]
+}