feat: add docs buttons in menu

.env.example

@@ -4,8 +4,10 @@ NODE_ENV=development
 # OFFLINE or ONLINE, change editor mode beetween local execution and online execution
 PUBLIC_MODE=OFFLINE
 
-# Project Manager
+# Urls
 PUBLIC_PM_URL=https://projects.nanoforge.eu
+PUBLIC_DOCS_URL=https://docs.nanoforge.eu
+PUBLIC_LANDING_URL=https://nanoforge.eu
 
 # Api params (required if PUBLIC_MODE=ONLINE)
 API_URL=http://localhost:3000

.github/workflows/alpha-release.yml

@@ -8,6 +8,12 @@ on:
         type: boolean
         default: false
 
+env:
+  PUBLIC_MODE: ${{ vars.PUBLIC_MODE }}
+  PUBLIC_PM_URL: ${{ vars.PUBLIC_PM_URL }}
+  PUBLIC_DOCS_URL: ${{ vars.PUBLIC_DOCS_URL }}
+  PUBLIC_LANDING_URL: ${{ vars.PUBLIC_LANDING_URL }}
+
 permissions:
   contents: write
   id-token: write

.github/workflows/pre-release.yml

@@ -12,6 +12,12 @@ on:
         type: boolean
         default: false
 
+env:
+  PUBLIC_MODE: ${{ vars.PUBLIC_MODE }}
+  PUBLIC_PM_URL: ${{ vars.PUBLIC_PM_URL }}
+  PUBLIC_DOCS_URL: ${{ vars.PUBLIC_DOCS_URL }}
+  PUBLIC_LANDING_URL: ${{ vars.PUBLIC_LANDING_URL }}
+
 permissions:
   contents: write
   pull-requests: write

.github/workflows/release.yml

@@ -13,6 +13,11 @@ env:
   IMAGE_NAME: ${{ github.event.repository.name }}
   CONFIG_FILE: kubernetes/nanoforge/editor-override.yaml
 
+  PUBLIC_MODE: ${{ vars.PUBLIC_MODE }}
+  PUBLIC_PM_URL: ${{ vars.PUBLIC_PM_URL }}
+  PUBLIC_DOCS_URL: ${{ vars.PUBLIC_DOCS_URL }}
+  PUBLIC_LANDING_URL: ${{ vars.PUBLIC_LANDING_URL }}
+
 permissions:
   contents: write
   packages: write
@@ -88,9 +93,8 @@ jobs:
           args: |
             PUBLIC_MODE
             PUBLIC_PM_URL
-        env:
-          PUBLIC_MODE: ONLINE
-          PUBLIC_PM_URL: https://projects.nanoforge.eu
+            PUBLIC_DOCS_URL
+            PUBLIC_LANDING_URL
 
   publish-docs:
     name: Publish docs

.github/workflows/tests.yml

@@ -9,6 +9,12 @@ on:
       - main
   workflow_dispatch:
 
+env:
+  PUBLIC_MODE: ${{ vars.PUBLIC_MODE }}
+  PUBLIC_PM_URL: ${{ vars.PUBLIC_PM_URL }}
+  PUBLIC_DOCS_URL: ${{ vars.PUBLIC_DOCS_URL }}
+  PUBLIC_LANDING_URL: ${{ vars.PUBLIC_LANDING_URL }}
+
 jobs:
   tests:
     runs-on: ubuntu-latest
@@ -18,9 +24,6 @@ jobs:
 
       - name: Prepare
         uses: ./.github/actions/prepare
-        env:
-          PUBLIC_MODE: ${{ vars.PUBLIC_MODE }}
-          PUBLIC_PM_URL: ${{ vars.PUBLIC_PM_URL }}
 
       - name: Run linter
         run: pnpm lint

Dockerfile

@@ -16,9 +16,13 @@ FROM base AS prod
 
 ARG PUBLIC_MODE
 ARG PUBLIC_PM_URL
+ARG PUBLIC_DOCS_URL
+ARG PUBLIC_LANDING_URL
 
 ENV PUBLIC_MODE=${PUBLIC_MODE}
 ENV PUBLIC_PM_URL=${PUBLIC_PM_URL}
+ENV PUBLIC_DOCS_URL=${PUBLIC_DOCS_URL}
+ENV PUBLIC_LANDING_URL=${PUBLIC_LANDING_URL}
 
 RUN pnpm install --frozen-lockfile
 COPY . /app

src/lib/components/Menu/MenuBar.svelte

@@ -3,9 +3,27 @@
   import MenuItem from './MenuItem.svelte';
   import { resolve } from '$app/paths';
   import { goto } from '$app/navigation';
+  import type { Snippet } from 'svelte';
+  import { ProjectLoader } from '$lib/client/project';
+  import { PUBLIC_DOCS_URL, PUBLIC_LANDING_URL } from '$env/static/public';
 
   let fileInput: HTMLInputElement;
 
+  type MenuItem = { icon: string } & (
+    | {
+        name: string;
+      }
+    | {
+        snippet: Snippet;
+      }
+  ) &
+    ({ onClick: () => void; link?: string } | { onClick?: () => void; link: string });
+
+  interface Menu {
+    name: string;
+    items: MenuItem[];
+  }
+
   async function handleImportClick() {
     fileInput.click();
   }
@@ -19,31 +37,75 @@
     //await importFromZip(file);
     input.value = '';
   }
+
+  const nullFunction = () => {};
+
+  const elements: Menu[] = [
+    {
+      name: 'File',
+      items: [
+        { name: 'Save', icon: 'i-solar-cloud-download-bold-duotone', onClick: nullFunction },
+        {
+          snippet: fileImportSnippet,
+          icon: 'i-solar-download-bold-duotone',
+          onClick: handleImportClick,
+        },
+        { name: 'Export', icon: 'i-solar-file-send-bold-duotone', onClick: nullFunction },
+        {
+          name: 'Exit',
+          icon: 'i-solar-exit-bold-duotone',
+          onClick: () => {
+            ProjectLoader.unload();
+            goto(resolve('/'));
+          },
+        },
+      ],
+    },
+    {
+      name: 'Edit',
+      items: [
+        { name: 'Undo', icon: 'i-solar-arrow-left-bold-duotone', onClick: nullFunction },
+        { name: 'Redo', icon: 'i-solar-arrow-right-bold-duotone', onClick: nullFunction },
+        { name: 'Project settings', icon: 'i-solar-settings-bold-duotone', onClick: nullFunction },
+      ],
+    },
+    {
+      name: 'Help',
+      items: [
+        { name: 'Documentation', icon: 'i-solar-book-2-bold-duotone', link: PUBLIC_DOCS_URL },
+        {
+          name: 'About Us',
+          icon: 'i-solar-info-circle-bold-duotone',
+          link: `${PUBLIC_LANDING_URL}/about`,
+        },
+      ],
+    },
+  ];
 </script>
 
+{#snippet fileImportSnippet()}
+  Import
+  <input
+    type="file"
+    accept=".zip"
+    bind:this={fileInput}
+    class="hidden"
+    on:change={handleFileChange}
+  />
+{/snippet}
+
 <div class="w-full flex">
-  <MenuButton title="File">
-    <MenuItem icon="i-solar-cloud-download-bold-duotone">Save</MenuItem>
-    <MenuItem onClick={handleImportClick}>
-      Import
-      <input
-        type="file"
-        accept=".zip"
-        bind:this={fileInput}
-        class="hidden"
-        on:change={handleFileChange}
-      />
-    </MenuItem>
-    <MenuItem icon="i-solar-file-send-bold-duotone">Export</MenuItem>
-    <MenuItem icon="i-solar-exit-bold-duotone" onClick={() => goto(resolve('/'))}>Exit</MenuItem>
-  </MenuButton>
-  <MenuButton title="Edit">
-    <MenuItem icon="i-solar-arrow-left-bold-duotone">Undo</MenuItem>
-    <MenuItem icon="i-solar-arrow-right-bold-duotone">Redo</MenuItem>
-    <MenuItem icon="i-solar-settings-bold-duotone">Project settings</MenuItem>
-  </MenuButton>
-  <MenuButton title="Help">
-    <MenuItem icon="i-solar-book-2-bold-duotone">Documentation</MenuItem>
-    <MenuItem icon="i-solar-info-circle-bold-duotone">About Us</MenuItem>
-  </MenuButton>
+  {#each elements as menu (menu.name)}
+    <MenuButton title={menu.name}>
+      {#each menu.items as item, i (i)}
+        <MenuItem icon={item.icon} link={item.link} onClick={item.onClick}>
+          {#if 'snippet' in item}
+            {@render item.snippet()}
+          {:else}
+            {item.name}
+          {/if}
+        </MenuItem>
+      {/each}
+    </MenuButton>
+  {/each}
 </div>

src/lib/components/Menu/MenuItem.svelte

@@ -4,20 +4,32 @@
 
   interface Props {
     icon?: string;
+    link?: string;
     children?: Snippet;
     onClick?: () => void;
   }
-  let { icon, children, onClick }: Props = $props();
+  let { icon, link, children, onClick }: Props = $props();
 </script>
 
 <div>
   <DropdownMenuItem class="p-0 w-full">
-    <button
-      class="flex cursor-pointer items-center gap-2 px-3 py-2 text-white text-xs hover:bg-neutral-600 w-full"
-      onclick={onClick}
-    >
-      <span class="{icon || 'opacity-0'} w-4 h-4 text-xs text-neutral-200 rounded-none"></span>
-      {@render children?.()}
-    </button>
+    {#if link}
+      <a
+        href={link}
+        target="_blank"
+        class="flex cursor-pointer items-center gap-2 px-3 py-2 text-white text-xs hover:bg-neutral-600 w-full"
+      >
+        <span class="{icon || 'opacity-0'} w-4 h-4 text-xs text-neutral-200 rounded-none"></span>
+        {@render children?.()}
+      </a>
+    {:else}
+      <button
+        class="flex cursor-pointer items-center gap-2 px-3 py-2 text-white text-xs hover:bg-neutral-600 w-full"
+        onclick={onClick}
+      >
+        <span class="{icon || 'opacity-0'} w-4 h-4 text-xs text-neutral-200 rounded-none"></span>
+        {@render children?.()}
+      </button>
+    {/if}
   </DropdownMenuItem>
 </div>