///

examples/heroweb_example_base/README.md

@@ -0,0 +1,15 @@
+
+# minimalistic example for website
+
+```bash
+
+```
+
+just open index.html
+
+
+it shows
+
+- how less is more
+- the css is very easy to maintain, this allows for consistent look and feel
+- picocss is used, which is incredible so small and so powerful compared to e.g. tailwindcss

examples/heroweb_example_base/css/heroweb.css

@@ -0,0 +1,192 @@
+/* Custom styles to enhance the nav bar */
+body > main {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    height: 100vh;
+    overflow: hidden;
+}
+nav {
+    background-color: #f1f3f5;
+    padding: 0rem 1rem;
+}
+nav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+nav ul li {
+    margin: 0 0.5rem;
+}
+nav ul li a {
+    text-decoration: none;
+    color: #495057;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+nav ul li a:hover {
+    color: #1971c2;
+}
+.brand {
+    font-size: 1rem;
+    font-weight: bold;
+}
+navbar-right {
+    display: flex;
+    align-items: center;
+    margin-left: 30%;
+}
+navbar-right a {
+    margin-left: 1rem;
+}
+navbar-right input[type="search"] {
+    padding: 0.2rem 0.5rem;
+    border: 1px solid #ced4da;
+    border-radius: 1rem;
+    background-color: #f8f9fa;
+    font-size: 0.8rem;
+    line-height: 1;
+    height: 2rem;
+    width: 300px;
+    margin: 0;
+}
+/* New styles for theme icons */
+.theme-icons {
+    display: flex;
+    align-items: center;
+}
+.theme-icon {
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 50%;
+    margin-left: 0.5rem;
+}
+.theme-icon svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+}
+.theme-icon:hover {
+    background-color: #e9ecef;
+}
+
+mynav,
+docnav {
+    flex: 1;
+    min-width: 200px;
+    max-width: 250px;
+    overflow-y: auto; /* Enable scrolling for nav and docnav */
+}
+mynav ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+mynav ul ul {
+    list-style-type: none; /* Remove bullets */
+    padding-left: 0;
+    margin-left: 0.2rem;
+    display: none; /* Hide nested lists by default */
+}
+mynav ul li {
+    margin-left: 0.5rem;
+    padding-left: 0.3rem;
+    cursor: pointer; /* Indicate that items are clickable */
+    list-style-type: none; /* Remove bullets */
+}
+mynav ul li a {
+    text-decoration: none;
+    color: inherit;
+}
+mynav ul li.open > ul {
+    display: block; /* Show nested lists when parent is open */
+}
+.arrow {
+    font-size: 0.8rem; /* Reduce the font size of the arrows */
+    margin-right: 0.2rem; /* Adjust the space between the arrow and the text */
+}
+
+article {
+    flex: 4;
+    min-width: 200px;
+    max-width: 1200px;
+    overflow-y: auto; /* Enable scrolling for article */
+    height: 100%;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+article textarea {
+    line-height: 1.2;
+}
+article md {
+    line-height: 1.2;
+}
+docnav {
+    flex: 1;
+    min-width: 200px;
+    font-size: 0.9rem;
+}
+docnav ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+docnav ul li {
+    margin-left: 0.4rem;
+    padding-left: 0rem;
+    cursor: pointer; /* Indicate that items are clickable */
+    white-space: nowrap; /* Prevent text from wrapping */
+    overflow: hidden; /* Hide overflow text */
+    text-overflow: ellipsis; /* Add ellipses for overflow text */
+    max-width: 40ch; /* Limit length of item to 40 characters */
+}
+
+@media (max-width: 768px) {
+    nav {
+        margin-top: 0rem;
+    }
+    nav ul {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    nav ul li {
+        margin: 0 rem 0;
+    }
+    navbar-right {
+        flex-direction: column;
+        align-items: flex-start;
+        margin-left: 0;
+    }
+    navbar-right a {
+        margin-left: 0;
+    }
+    navbar-right input[type="search"] {
+        width: 100%;
+        margin: 0;
+    }
+    .theme-icons {
+        margin-top: 0.5rem;
+    }
+}
+
+/* [data-theme="dark"] {
+    --background-color: #333;
+    --text-color: #fff;
+}
+[data-theme="dark"] body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+[data-theme="dark"] nav {
+    background-color: #444;
+}
+[data-theme="dark"] nav ul li a {
+    color: #ddd;
+}
+[data-theme="dark"] nav ul li a:hover {
+    color: #fff;
+}
+[data-theme="dark"] .theme-icon:hover {
+    background-color: #555;
+} */

examples/heroweb_example_base/index.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PicoCSS Three-Column Layout</title>
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.classless.min.css"
+        />
+        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+        <link rel="stylesheet" href="css/heroweb.css" />
+    </head>
+    <body>
+        <textarea id="markdown-nav" style="display: none">
+
+- [intro](#intro)
+    - [products](#products)
+        - [car](#car)
+        - [plane](#plane)
+- [features](#features)
+    - [know more](#know-more)
+- [documentation](#documentation)
+
+        </textarea>
+
+        <textarea id="markdown-input" style="display: none">
+# Welcome to the Example
+
+This is a **Markdown** example.
+
+# Section 1
+Content for section 1.
+
+## Section 2
+Content for section 2.
+
+### Section 3
+
+Content for section 3.
+
+- something
+- yes
+- incredible
+
+> This is a blockquote.
+
+| Name       | Email             | Description       |
+|------------|-------------------|-------------------|
+| John Doe   | john@example.com  | Developer         |
+| Jane Smith | jane@example.com  | Designer          |
+| Bob Brown  | bob@example.com   | Manager           |
+| Alice Blue | alice@example.com | Engineer          |
+| Eve White  | eve@example.com   | Analyst           |
+| Tom Black  | tom@example.com   | Consultant        |
+
+### Section 4
+
+Content for section 4.
+
+- something
+- yes
+- incredible
+
+> This is a blockquote.
+
+        </textarea>
+        <nav>
+            <ul>
+                <li><a href="#" class="brand">MyWebsite</a></li>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#services">Services</a></li>
+                <li><a href="#contact">Contact</a></li>
+                <navbar-right>
+                    <input type="search" name="search" placeholder="Search..." />
+                    <a href="#login">Login</a>
+                    <div id="theme-switcher-icons"></div>
+                </navbar-right>
+            </ul>
+        </nav>
+        <main class="container">
+            <mynav id="mynav"> </mynav>
+            <article id="markdown-output"></article>
+            <docnav>
+                <br />
+                <h5>Doc</h5>
+                <ul id="content-pointers"></ul>
+            </docnav>
+        </main>
+        <script src="js/heroweb.js"></script>
+    </body>
+</html>

examples/heroweb_example_base/js/heroweb.js

@@ -0,0 +1,159 @@
+function convertMarkdown(inputId, outputId, pointersListId = "") {
+  const markdownInputElement = document.getElementById(inputId);
+  if (!markdownInputElement) return;
+  const markdownInput = markdownInputElement.value;
+  const htmlOutput = marked.parse(markdownInput);
+
+  const htmlOutputElement = document.getElementById(outputId);
+  if (!htmlOutputElement) return;
+  htmlOutputElement.innerHTML = htmlOutput;
+
+  // Add IDs to headers if they don't have one
+  const headers = htmlOutputElement.querySelectorAll("h1, h2");
+  headers.forEach((header, index) => {
+    if (!header.id) {
+      header.id = `header-${index}`;
+    }
+  });
+
+  // Generate content pointers if pointersListId is provided
+  if (pointersListId) {
+    const pointersList = document.getElementById(pointersListId);
+    if (!pointersList) return;
+    pointersList.innerHTML = "";
+    headers.forEach((header) => {
+      const li = document.createElement("li");
+      const a = document.createElement("a");
+      a.href = `#${header.id}`;
+      a.textContent = header.textContent;
+      li.appendChild(a);
+      pointersList.appendChild(li);
+    });
+
+    // Add event listener to scroll to the section
+    pointersList.querySelectorAll("a").forEach((anchor) => {
+      anchor.addEventListener("click", (event) => {
+        event.preventDefault();
+        const targetId = anchor.getAttribute("href").substring(1);
+        const targetElement = document.getElementById(targetId);
+        if (targetElement) {
+          targetElement.scrollIntoView({ behavior: "smooth" });
+        }
+      });
+    });
+  }
+}
+
+function initializeMarkdownConverter(inputId, outputId, pointersListId) {
+  // Convert markdown immediately on page load
+  convertMarkdown(inputId, outputId, pointersListId);
+
+  // Add event listener to input for real-time conversion
+  const inputElement = document.getElementById(inputId);
+  if (inputElement) {
+    inputElement.addEventListener("input", () => {
+      convertMarkdown(inputId, outputId, pointersListId);
+    });
+  }
+}
+
+function addNavEventListeners() {
+  const navItems = document.querySelectorAll("mynav ul li");
+
+  navItems.forEach((item) => {
+    const nestedList = item.querySelector("ul");
+    if (nestedList) {
+      // Add a visual cue for items with children
+      const arrow = document.createElement("span");
+      arrow.textContent = "▶"; // You can use any symbol or icon here
+      arrow.classList.add("arrow");
+      item.insertBefore(arrow, item.firstChild);
+
+      // Add click event listener to toggle the nested list
+      item.addEventListener("click", (event) => {
+        event.stopPropagation(); // Prevent event from bubbling up
+        item.classList.toggle("open");
+        arrow.textContent = item.classList.contains("open") ? "▼" : "▶"; // Change the arrow direction
+      });
+    }
+  });
+}
+
+// function settypes() {
+//   const navInputs = document.querySelectorAll("search-inpu");
+//   navInputs.forEach((input) => {
+//     input.setAttribute("type", "text");
+//   });
+// }
+
+// Call the initialization function when the DOM is loaded
+document.addEventListener("DOMContentLoaded", () => {
+  createThemeIcons();
+  initializeMarkdownConverter("markdown-input", "markdown-output", "content-pointers");
+  initializeMarkdownConverter("markdown-nav", "mynav");
+  addNavEventListeners();
+  //settypes();
+});
+
+function setTheme(theme) {
+  document.documentElement.setAttribute("data-theme", theme);
+  localStorage.setItem("theme", theme);
+  console.log(`Theme set to: ${theme}`);
+}
+
+function getSystemTheme() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+document.querySelectorAll(".theme-icon").forEach((icon) => {
+  icon.addEventListener("click", () => {
+    const theme = icon.getAttribute("data-theme-switcher");
+    setTheme(theme);
+  });
+});
+
+// Check for saved theme preference or use system theme
+const savedTheme = localStorage.getItem("theme");
+if (savedTheme) {
+  setTheme(savedTheme);
+} else {
+  setTheme(getSystemTheme());
+}
+
+// Listen for system theme changes
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+  setTheme(e.matches ? "dark" : "light");
+});
+
+function createThemeIcons() {
+  const themeIconsHTML = `
+        <div class="theme-icons">
+            <span class="theme-icon" data-theme-switcher="light" title="Light theme">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                        d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"
+                    />
+                </svg>
+            </span>
+            <span class="theme-icon" data-theme-switcher="dark" title="Dark theme">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                        d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"
+                    />
+                </svg>
+            </span>
+        </div>
+    `;
+
+  const placeholder = document.getElementById("theme-switcher-icons");
+  if (placeholder) {
+    placeholder.innerHTML = themeIconsHTML;
+  }
+  // Add event listeners for theme switching
+  document.querySelectorAll(".theme-icon").forEach((icon) => {
+    icon.addEventListener("click", () => {
+      const theme = icon.getAttribute("data-theme-switcher");
+      setTheme(theme);
+    });
+  });
+}

examples/heroweb_example_base/js/not_used.js

@@ -0,0 +1,79 @@
+/*!
+ * Minimal theme switcher
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2024 - Licensed under MIT
+ */
+
+const themeSwitcher = {
+  // Config
+  _scheme: "auto",
+  menuTarget: "details.dropdown",
+  buttonsTarget: "a[data-theme-switcher]",
+  buttonAttribute: "data-theme-switcher",
+  rootAttribute: "data-theme",
+  localStorageKey: "picoPreferredColorScheme",
+
+  // Init
+  init() {
+    this.scheme = this.schemeFromLocalStorage;
+    this.initSwitchers();
+  },
+
+  // Get color scheme from local storage
+  get schemeFromLocalStorage() {
+    return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
+  },
+
+  // Preferred color scheme
+  get preferredColorScheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  },
+
+  // Init switchers
+  initSwitchers() {
+    const buttons = document.querySelectorAll(this.buttonsTarget);
+    buttons.forEach((button) => {
+      button.addEventListener(
+        "click",
+        (event) => {
+          event.preventDefault();
+          // Set scheme
+          this.scheme = button.getAttribute(this.buttonAttribute);
+          // Close dropdown
+          document.querySelector(this.menuTarget)?.removeAttribute("open");
+        },
+        false
+      );
+    });
+  },
+
+  // Set scheme
+  set scheme(scheme) {
+    if (scheme == "auto") {
+      this._scheme = this.preferredColorScheme;
+    } else if (scheme == "dark" || scheme == "light") {
+      this._scheme = scheme;
+    }
+    this.applyScheme();
+    this.schemeToLocalStorage();
+  },
+
+  // Get scheme
+  get scheme() {
+    return this._scheme;
+  },
+
+  // Apply scheme
+  applyScheme() {
+    document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
+  },
+
+  // Store scheme to local storage
+  schemeToLocalStorage() {
+    window.localStorage?.setItem(this.localStorageKey, this.scheme);
+  },
+};
+
+// Init
+themeSwitcher.init();

svelte/auth/.gitignore

@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

svelte/auth/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

svelte/auth/install.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+set -ex
+
+BASE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+
+cd ${BASE_DIR}
+
+# Define the project directory
+# PROJECT_DIR="myfiles"
+
+# pushd ${BASE_DIR}/${PROJECT_DIR}
+
+# if dir doesn't exit yet
+# npm create vite@latest $PROJECT_DIR -- --template svelte --yes
+
+
+# Check if node_modules exists, if not, install the package
+if [ ! -d "node_modules" ]; then
+    npx  svelte-add@latest tailwindcss -y
+    n
+fi
+
+popd &> /dev/null

svelte/auth/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "auth",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tailwindcss/typography": "^0.5.14",
+		"autoprefixer": "^10.4.20",
+		"svelte": "^4.2.7",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^3.4.9",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3"
+	},
+	"type": "module"
+}

svelte/auth/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

svelte/auth/readme.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

svelte/auth/src/app.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

svelte/auth/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

svelte/auth/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

svelte/auth/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

svelte/auth/src/routes/+layout.svelte

@@ -0,0 +1 @@
+<script>import "../app.css";</script><slot></slot>

svelte/auth/src/routes/+page.svelte

@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

svelte/auth/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

svelte/auth/tailwind.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["./src/**/*.{html,js,svelte,ts}"],
+
+  theme: {
+    extend: {}
+  },
+
+  plugins: [require("@tailwindcss/typography")]
+} as Config;

svelte/auth/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

svelte/auth/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});

svelte/filemanager/install.sh

@@ -1,24 +1,25 @@
 #!/bin/bash
+set -ex
+
+BASE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+source ${BASE_DIR}/myenv.sh
 
 # Define the project directory
 PROJECT_DIR="myfiles"
 
-
 pushd ${BASE_DIR}/${PROJECT_DIR}
 
-
-#if dir doesn't exit yet
-#npm create vite@latest $PROJECT_DIR -- --template svelte --yes
+# if dir doesn't exit yet
+# npm create vite@latest $PROJECT_DIR -- --template svelte --yes
 
 
 # Check if node_modules exists, if not, install the package
 if [ ! -d "node_modules" ]; then
     npm config set @wx:registry https://npm.svar.dev
     npm install
-    npm config set @wx:registry https://npm.svar.dev
-    npm install @wx/trial-svelte-filemanager    
+    npm install @wx/trial-svelte-filemanager
     npm install @wx/trial-svelte-gantt
     npm install @wx/trial-svelte-grid
 fi
 
-popd &> /dev/null
+popd &> /dev/null

svelte/filemanager/run.sh

@@ -0,0 +1,48 @@
+#!/bin/bash
+set -e
+
+BASE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+cd ${BASE_DIR}
+
+#install hero if not done yet
+if ! command -v hero &> /dev/null; then
+    curl https://raw.githubusercontent.com/freeflowuniverse/crystallib/development/scripts/install_hero.sh > /tmp/hero_install.sh
+    bash /tmp/hero_install.sh
+fi
+
+hero git clone -u https://github.com/svar-widgets/filemanager-backend-go
+
+pushd ${HOME}/code/github/svar-widgets/filemanager-backend-go
+
+# Check if filemanager-go exists, if not, build it
+if [ ! -f "filemanager-go" ]; then
+  go build
+fi
+
+function manage_filemanager {
+
+    set +ex
+    pkill -f filemanager-go &> /dev/null
+    screen -S filemanager -X quit &> /dev/null
+    set -e
+
+    #${HOME}/code/github/svar-widgets/filemanager-backend-go/filemanager-go ${HOME}/code
+
+    screen -S filemanager -dm bash -c "${HOME}/code/github/svar-widgets/filemanager-backend-go/filemanager-go ${HOME}/code"
+    sleep 0.5
+    nc -zv localhost 3200
+    if [ $? -eq 0 ]; then
+      echo "Filemanager on port 3200 is running."
+    else
+      echo "Error: Filemanager port 3200 is not accessible."
+    fi
+
+    #screen -r filemanager
+}
+
+manage_filemanager
+
+popd &> /dev/null
+
+pushd ${BASE_DIR}/myfiles
+