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.
This commit is contained in:
bwnyasse
2026-01-10 23:48:45 -05:00
parent 5dca852aab
commit ea6765af96
3 changed files with 66 additions and 6 deletions

View File

@@ -46,8 +46,13 @@ async function loadLinks() {
</div>
<div class="space-y-3">
${group.links.map(link => `
<a href="${link.url}" target="_blank"
${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 `
<a ${hrefAttr} ${onclickAttr}
class="flex items-center justify-between p-4 ${link.containerClass} rounded-xl transition-all group">
<div class="flex items-center space-x-3">
${link.iconClass ? `<div class="${link.iconClass}"></div>` : link.iconSvg}
@@ -69,7 +74,7 @@ async function loadLinks() {
</svg>
` : ''}
</a>
`).join('')}
`}).join('')}
</div>
</div>
`).join('');

View File

@@ -310,6 +310,22 @@
</div>
</div>
<!-- Iframe Viewer (Prototypes) -->
<div id="iframe-viewer" class="hidden h-full flex flex-col p-4">
<div class="flex items-center justify-between mb-4 px-2">
<h3 id="iframe-title" class="text-xl font-bold text-gray-900"></h3>
<div class="flex items-center space-x-2">
<a id="iframe-external-link" href="#" target="_blank" class="text-sm text-blue-600 hover:underline flex items-center">
Open in new tab
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
</a>
</div>
</div>
<div class="flex-1 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden relative">
<iframe id="content-iframe" class="w-full h-full border-0" src=""></iframe>
</div>
</div>
</main>
</div>
@@ -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 = `
<div class="flex flex-col items-center space-y-3">
@@ -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 = `
<div class="flex flex-col items-center justify-center space-y-3 py-12">