From ea6765af966bf58fb082e5549e4a4cd50dfa5334 Mon Sep 17 00:00:00 2001 From: bwnyasse <5323628+bwnyasse@users.noreply.github.com> Date: Sat, 10 Jan 2026 23:48:45 -0500 Subject: [PATCH] feat(docs): update contributing guide with required tools and IDE setup feat(internal/launchpad): add iframe viewer for prototypes and update links loader This commit introduces an iframe viewer in the launchpad to display prototypes directly within the application. It also updates the links loader to handle prototype links differently, opening them in the iframe instead of a new tab. The contributing guide has been updated to include a list of required development tools and recommended IDE setup, ensuring that contributors have the necessary tools to work on the project. --- docs/03-contributing.md | 23 ++++++++++-- internal/launchpad/assets/js/links-loader.js | 11 ++++-- internal/launchpad/index.html | 38 ++++++++++++++++++++ 3 files changed, 66 insertions(+), 6 deletions(-) diff --git a/docs/03-contributing.md b/docs/03-contributing.md index dcffe706..06a4c787 100644 --- a/docs/03-contributing.md +++ b/docs/03-contributing.md @@ -23,9 +23,26 @@ Follow these steps to set up your development environment and gain access to all * Install Enpass (our team's shared password manager). * Ensure you have access to the shared KROW vault for all project credentials (API keys, service accounts, etc.). -5. **Install Recommended Development Tools:** - * **IDE:** We recommend **VS Code** or **Vim/Neovim** for development. - * **Diagramming:** Use **MermaidChart.com** for creating and editing diagrams (Mermaid syntax). +5. **Install Required Development Tools:** + + Before running the project, ensure you have the following installed: + + * **Node.js (v20+):** We recommend using **[nvm](https://github.com/nvm-sh/nvm)** (Node Version Manager) to install and manage Node versions. + * **pnpm:** Our preferred package manager for JavaScript projects. (`npm install -g pnpm`) + * **Flutter Version Management (FVM):** We use **[FVM](https://fvm.app/)** to manage Flutter SDK versions per project. Install it via Homebrew (`brew install fvm`) or Dart (`dart pub global activate fvm`). + * **Firebase CLI:** Required for emulation and deployment. (`npm install -g firebase-tools`) + * **Google Cloud CLI (gcloud):** Required for backend authentication and resource management. + + **Recommended IDE:** + * **[Google Project IDX (Antigravity)](https://idx.google.com/)** or **VS Code**. + * **Essential Extensions:** + * Flutter & Dart + * Firebase + * Tailwind CSS IntelliSense + * ESLint & Prettier + + **Diagramming:** + * Use **MermaidChart.com** for creating and editing diagrams (Mermaid syntax). 6. **Local Development Environment Setup:** * Clone the monorepo: `git clone git@github.com:Oloodi/krow-workforce.git` diff --git a/internal/launchpad/assets/js/links-loader.js b/internal/launchpad/assets/js/links-loader.js index 9bca36f7..47f20edf 100644 --- a/internal/launchpad/assets/js/links-loader.js +++ b/internal/launchpad/assets/js/links-loader.js @@ -46,8 +46,13 @@ async function loadLinks() {
- ${group.links.map(link => ` - { + const isPrototype = link.url.startsWith('/prototypes/'); + const hrefAttr = isPrototype ? 'href="#"' : `href="${link.url}" target="_blank"`; + const onclickAttr = isPrototype ? `onclick="event.preventDefault(); showView('iframe', this, '${link.url}', '${link.title}')"` : ''; + + return ` +
${link.iconClass ? `
` : link.iconSvg} @@ -69,7 +74,7 @@ async function loadLinks() { ` : ''} - `).join('')} + `}).join('')}
`).join(''); diff --git a/internal/launchpad/index.html b/internal/launchpad/index.html index 472f97d7..55c7fb9e 100644 --- a/internal/launchpad/index.html +++ b/internal/launchpad/index.html @@ -310,6 +310,22 @@ + + + @@ -454,6 +470,13 @@ const documentViewer = document.getElementById('document-viewer'); const documentContainer = document.getElementById('document-container'); const documentTitle = document.getElementById('document-title'); + + // Iframe Elements + const iframeViewer = document.getElementById('iframe-viewer'); + const iframeContent = document.getElementById('content-iframe'); + const iframeTitle = document.getElementById('iframe-title'); + const iframeExternalLink = document.getElementById('iframe-external-link'); + const zoomInBtn = document.getElementById('zoomInBtn'); const zoomOutBtn = document.getElementById('zoomOutBtn'); const resetBtn = document.getElementById('resetBtn'); @@ -681,16 +704,30 @@ } diagramContainer.innerHTML = ''; documentContainer.innerHTML = ''; + // Reset iframe + iframeContent.src = 'about:blank'; currentScale = 1; if (viewName === 'home') { homeView.classList.remove('hidden'); diagramViewer.classList.add('hidden'); documentViewer.classList.add('hidden'); + iframeViewer.classList.add('hidden'); + } else if (viewName === 'iframe') { + // New Iframe View + homeView.classList.add('hidden'); + diagramViewer.classList.add('hidden'); + documentViewer.classList.add('hidden'); + iframeViewer.classList.remove('hidden'); + + iframeTitle.textContent = title; + iframeExternalLink.href = filePath; + iframeContent.src = filePath; } else if (viewName === 'diagram') { homeView.classList.add('hidden'); diagramViewer.classList.remove('hidden'); documentViewer.classList.add('hidden'); + iframeViewer.classList.add('hidden'); diagramTitle.textContent = title; diagramContainer.innerHTML = `
@@ -766,6 +803,7 @@ homeView.classList.add('hidden'); diagramViewer.classList.add('hidden'); documentViewer.classList.remove('hidden'); + iframeViewer.classList.add('hidden'); documentTitle.textContent = title; documentContainer.innerHTML = `