@owdproject/core 3.0.0-alpha.0

package/README.md

@@ -0,0 +1,141 @@
+<p align="center">
+  <img width="160" height="160" alt="Motion logo" src="https://avatars.githubusercontent.com/u/65117737?s=160&v=4" />
+</p>
+<h1 align="center">Open Web Desktop</h1>
+<h3 align="center">
+  A framework for building web-based desktop experiences.
+</h3>
+
+## Overview
+Open Web Desktop (OWD) is a framework designed to provide a simple environment for building web-based desktop experiences. It's built with TypeScript and leverages the extensible architecture of Nuxt.js.
+
+[Check out the demo](https://owdproject.github.io/docs) of the `client` base repository, decked with essential modules.
+
+## Features
+- Open-source web desktop environment built with Nuxt.js
+- Fully extendable through themes, apps, and modules
+- Bundled with popular libraries like Pinia, VueUse, Mitt
+- Designed to make the most of the Nuxt.js ecosystem
+- Styled with PrimeVue and Tailwind for a consistent UI
+- Fully localizable with i18n support
+
+## Getting started
+Required software:
+
+- [Git](https://git-scm.com)
+- [Node](https://nodejs.org)
+
+When you are ready, bootstrap a new project by running:
+```
+npm create owd
+```
+Once the process is complete, you can start to develop:
+```
+# Run the dev server with hot-reload
+npm run dev
+
+# Build for production
+npm run generate
+```
+
+## Modules
+Open Web Desktop projects can be extended with themes, plugins, and desktop apps — whether contributed by the community or created custom for your needs. Explore available modules at [topics/owd-modules](https://github.com/topics/owd-modules).
+
+### Install a new app
+You can simply install a new app with `npm install git+https://github.com/owdproject/app-todo.git` or by cloning it into `./desktop/apps/app-todo`. Then, define the application in your project configuration.
+
+```typescript
+// owd.config.ts
+import AppTodo from 'owd-app-todo/owd.config'
+
+export const owdConfig = {
+    theme: ['github:owdproject/theme-win95', { install: true }],
+
+    // apps to import
+    apps: [
+       './node_modules/owd-app-todo',
+    ],
+
+    loader: async () => {
+        await defineDesktopApp(AppTodo)
+    }
+}
+```
+
+## Themes
+Themes allow you to customize the look and feel of your Open Web Desktop instance.
+You can explore available themes, ranging from popular OS designs to fully custom creations, at [topics/owd-themes](https://github.com/topics/owd-modules).
+
+### Install a new theme
+You can install a new theme by defining its location in the `theme` property of your `owd.config.ts` file.  
+Themes can be loaded from local paths or directly from GitHub repositories.
+
+**1. Using a local theme:**
+
+To use a theme from a local folder, specify the path like this:
+
+```typescript
+// owd.config.ts
+export const owdConfig = {
+    theme: './desktop/themes/owd-theme-win95',
+}
+```
+
+**2. Using a theme from GitHub:**
+
+To use a theme directly from a GitHub repository, specify it in this format: `github:<username>/<repository>`:
+
+```typescript
+// owd.config.ts
+export const owdConfig = {
+    theme: ['github:owdproject/theme-win95', { install: true }],
+}
+```
+
+## Contributing
+
+**Any contribution is welcome!** Open Web Desktop is built with Nuxt and follows a modular architecture, making it easy to contribute to the core codebase or create new modules, themes and desktop apps.
+
+### Local Development Setup
+
+If you'd like to contribute, here's how to set up your local development environment:
+
+**Prerequisites:**
+
+- [Git](https://git-scm.com)
+- [Node](https://nodejs.org)
+
+**Cloning the Repository:**
+
+To contribute, start by forking the Open Web Desktop client repository on GitHub.
+
+Then, clone your fork using HTTPS or SSH:
+
+```bash
+# Clone using HTTPS
+git clone https://github.com/<your-username>/owd-client.git
+
+# Clone using SSH
+git clone git@github.com:<your-username>/owd-client.git
+```
+
+Once you have cloned the repository, navigate to the project folder.  
+Install the dependencies, then start the development server:
+
+```bash
+cd owd-client
+
+npm install
+npm run dev
+```
+
+This will launch Open Web Desktop in development mode, allowing you to test your changes and see them reflected in real-time.
+The dev server will be available at http://localhost:3000 by default.
+
+## Getting Involved
+
+Open Web Desktop is a vast project. The code has been totally rewritten and is now actively being developed, but your support is what makes it all possible. If you're enjoying it and want to see more, consider donating. Your contribution helps keep the project alive, add new features, and build a stronger community.
+
+### License
+
+Open Web Desktop is licensed under the [GNU General Public License v3](LICENSE).

package/index.ts

@@ -0,0 +1,10 @@
+export * from './runtime/composables/useAppEntries'
+export * from './runtime/composables/useApplicationManager'
+export * from './runtime/composables/useApplicationState'
+export * from './runtime/composables/useDesktopManager'
+export * from './runtime/composables/useTerminalManager'
+export * from './runtime/utils/utilsCommon'
+export * from './runtime/utils/utilsDebug'
+export * from './runtime/utils/utilsDesktop'
+export * from './runtime/utils/utilsTerminal'
+export * from './runtime/utils/utilsWindow'

package/module/index.ts

@@ -0,0 +1,146 @@
+import {defineNuxtModule, createResolver, addComponentsDir, addImportsDir, installModule} from '@nuxt/kit'
+import pkg from '../package.json'
+import path from "path";
+
+export default defineNuxtModule({
+    meta: {
+        name: 'owd-core',
+    },
+    async setup(options, nuxt) {
+        const {resolve} = createResolver(import.meta.url);
+
+        // set core version to runtime variables
+
+        nuxt.options.runtimeConfig.public.coreVersion = pkg.version
+
+        // configure nuxt plugins
+
+        nuxt.options.primevue = nuxt.options.primevue || {};
+        nuxt.options.primevue.options = nuxt.options.primevue.options || {};
+        nuxt.options.primevue.options.theme = nuxt.options.primevue.options.theme || {};
+        nuxt.options.primevue.options.theme.options = {
+            cssLayer: false
+        };
+
+        {
+
+            // install tailwind
+
+            nuxt.options.modules.push('@nuxtjs/tailwindcss')
+            await installModule("@nuxtjs/tailwindcss", {
+                viewer: false,
+                //configPath: resolve(runtimeDir, "tailwind.config"),
+            })
+
+        }
+
+        {
+
+            // install primevue
+
+            nuxt.options.modules.push('@primevue/nuxt-module')
+            await installModule("@primevue/nuxt-module")
+
+        }
+
+        {
+
+            // install pinia
+
+            nuxt.options.modules.push('@pinia/nuxt')
+            await installModule("@pinia/nuxt")
+
+        }
+
+        {
+
+            // install @nuxt/fonts
+
+            nuxt.options.modules.push('@nuxt/fonts')
+            await installModule("@nuxt/fonts")
+
+        }
+
+        {
+
+            // install @nuxt/icon
+
+            nuxt.options.modules.push('@nuxt/icon')
+            await installModule("@nuxt/icon", {
+                clientBundle: {
+                    scan: true,
+                    sizeLimitKb: 256,
+                },
+            })
+
+        }
+
+        {
+
+            // install @vueuse/nuxt
+
+            nuxt.options.modules.push('@vueuse/nuxt')
+            await installModule("@vueuse/nuxt")
+
+        }
+
+        {
+
+            // install @nuxtjs/i18n
+
+            nuxt.options.modules.push('@nuxtjs/i18n')
+            await installModule("@nuxtjs/i18n")
+
+        }
+
+        {
+
+            // configure scss for vite
+
+            nuxt.hook('vite:extendConfig', (viteConfig) => {
+                viteConfig.css = viteConfig.css || {}
+                viteConfig.css.preprocessorOptions = viteConfig.css.preprocessorOptions || {}
+                viteConfig.css.preprocessorOptions.scss = {
+                    api: 'modern-compiler',
+                }
+            })
+
+        }
+
+        {
+
+            // add css
+
+            nuxt.options.css.push('sanitize.css')
+
+        }
+
+        {
+
+            // add runtime components
+
+            addComponentsDir({
+                path: resolve("../runtime/components"),
+                prefix: "",
+                global: true,
+            })
+
+        }
+
+        {
+
+            nuxt.options.plugins.push(
+                resolve('../runtime/plugins/resize.client.ts'),
+                resolve('../runtime/plugins/slicksort.client.ts'),
+                resolve('../runtime/plugins/swiper.client.ts'),
+            )
+
+            addImportsDir(resolve('../runtime/composables'))
+            addImportsDir(resolve('../runtime/core'))
+            addImportsDir(resolve('../runtime/stores'))
+            addImportsDir(resolve('../runtime/utils'))
+
+        }
+
+    }
+})

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@owdproject/core",
+  "version": "3.0.0-alpha.0",
+  "description": "Open Web Desktop core",
+  "keywords": [
+    "web",
+    "desktop",
+    "vue",
+    "web desktop"
+  ],
+  "homepage": "https://github.com/owdproject/client#readme",
+  "bugs": {
+    "url": "https://github.com/owdproject/client/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/owdproject/client.git"
+  },
+  "license": "GPL-3.0-or-later",
+  "author": {
+    "name": "dxlliv",
+    "url": "https://github.com/dxlliv"
+  },
+  "dependencies": {
+    "@nuxt/fonts": "^0.11.0",
+    "@nuxt/icon": "^1.11.0",
+    "@nuxtjs/i18n": "^9.4.0",
+    "@nuxtjs/tailwindcss": "^6.13.2",
+    "@pinia/nuxt": "^0.10.1",
+    "@primeuix/themes": "^1.0.0",
+    "@primevue/forms": "^4.3.3",
+    "@primevue/nuxt-module": "^4.3.3",
+    "@vueuse/components": "^13.0.0",
+    "@vueuse/core": "^13.0.0",
+    "@vueuse/nuxt": "^13.0.0",
+    "memfs": "^4.17.0",
+    "mitt": "^3.0.1",
+    "nanoid": "^5.1.5",
+    "nuxt": "^3.16.1",
+    "pinia": "^3.0.1",
+    "sanitize.css": "^13.0.0",
+    "sass": "^1.86.0",
+    "vue-resizable": "^2.1.7"
+  }
+}

package/runtime/components/Core/Application/CoreApplicationRender.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {useApplicationManager} from "../../../composables/useApplicationManager"
+
+defineProps<{
+  workspaceFilter?: string
+}>()
+
+const applicationManager = useApplicationManager()
+</script>
+
+<template>
+  <CoreApplicationWindowsRender
+      v-for="app of applicationManager.appsRunning"
+      :workspace-filter="workspaceFilter"
+      :windows="app.windowsOpened"
+  />
+</template>

package/runtime/components/Core/Application/CoreApplicationWindowsRender.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  workspaceFilter?: string
+  windows: Map<string, IApplicationController['windows']>
+}>()
+</script>
+
+<template>
+  <template
+      v-for="[windowId, window] in windows"
+      :key="windowId"
+  >
+    <component
+        v-if="!workspaceFilter || (workspaceFilter && window.state.workspace === workspaceFilter)"
+        :window="window"
+        :is="window.config.component"
+    />
+  </template>
+</template>

package/runtime/components/Core/Background/CoreBackground.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="owd-background">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.owd-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--owd-background-color);
+  z-index: -1;
+}
+</style>

package/runtime/components/Core/Desktop/CoreDesktop.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {onMounted, onUnmounted} from "vue"
+import {computed, toRaw} from "@vue/reactivity"
+import {useDesktopManager} from "../../../composables/useDesktopManager"
+import {useApplicationManager} from "../../../composables/useApplicationManager"
+import {useDesktopStore} from "../../../stores/storeDesktop"
+import {useDesktopWorkspaceStore} from "../../../stores/storeDesktopWorkspace"
+
+const props = withDefaults(defineProps<{
+  windows?: DesktopWindowsConfig
+  systemBar?: DesktopSystemBarConfig
+  dockBar?: DesktopDockBarConfig
+}>(), {
+  windows: {
+    position: 'fixed',
+  },
+  systemBar: {},
+  dockBar: {},
+})
+
+const desktopManager = useDesktopManager()
+const applicationManager = useApplicationManager()
+
+// create firsts workspaces if not available
+const desktopStore = useDesktopStore()
+const desktopWorkspaceStore = useDesktopWorkspaceStore()
+
+if (desktopStore.$persistedState) {
+  desktopStore.$persistedState.isReady().then(() => {
+    desktopWorkspaceStore.setupWorkspaces()
+  })
+} else {
+  desktopWorkspaceStore.setupWorkspaces()
+}
+
+// override desktop configurations
+desktopManager.overrideConfig({
+  windows: toRaw(props.windows),
+  systemBar: toRaw(props.systemBar),
+  dockBar: toRaw(props.dockBar),
+})
+
+// define apps and restore statuses
+applicationManager.importApps()
+
+// desktop resize
+// todo move to composable
+
+onMounted(() => window.addEventListener('resize', handleDesktopResize))
+onUnmounted(() => window.removeEventListener('resize', handleDesktopResize))
+
+function handleDesktopResize() {
+  //store.dispatch('core/window/windowsAdjustPosition')
+}
+
+const classes = computed(() => {
+  const list = ['owd-desktop']
+
+  list.push(`owd-desktop--${desktopManager.config.name}`)
+
+  return list
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <slot/>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.owd-desktop {
+  width: 100vw;
+  height: 100dvh;
+  user-select: none;
+}
+</style>

package/runtime/components/Core/Explorer/CoreExplorerFile.vue

@@ -0,0 +1,67 @@
+<template>
+  <li :class="['owd-explorer-file', { 'owd-explorer-file--inactive': props.inactive }]">
+    <a :href="props.url" :target="props.target" :title="props.title" @click="props.fn">
+      <img :src="props.icon" :alt="props.title" />
+      <div class="owd-explorer-file__name" v-html="props.name" />
+    </a>
+  </li>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  name: string
+  title: string
+  icon: string
+  url: string
+  target: string
+  inactive: boolean
+}>()
+</script>
+
+<style scoped lang="scss">
+  li.file {
+    width: 100px;
+    margin: 0 5px 5px 0;
+    text-align: center;
+    float: left;
+    border-radius: 2px;
+    border: 1px solid rgba(0, 0, 0, 0);
+
+    @media(max-width: 480px) {
+      margin-right: 0;
+    }
+
+    @media(min-width: 480px) {
+      &:not(.inactive):hover {
+
+      }
+    }
+
+    &.inactive {
+      filter: grayscale(100%);
+      opacity: 0.2;
+    }
+
+    a {
+      display: block;
+      color: #CCC;
+      text-decoration: none;
+      transition: color 0.15s ease-in-out;
+      padding: 10px 0;
+
+      img {
+        vertical-align: middle;
+        height: 32px;
+        border-radius: 2px;
+      }
+
+      div.name {
+        font-size: 12px;
+        letter-spacing: -0.2px;
+        line-height: 10px;
+        margin-top: 10px;
+        cursor: pointer;
+      }
+    }
+  }
+</style>

package/runtime/components/Core/Explorer/CoreExplorerFolder.vue

@@ -0,0 +1,11 @@
+<template>
+  <CoreExplorerFile class="owd-explorer-folder">
+    <slot />
+  </CoreExplorerFile>
+</template>
+
+<style scoped lang="scss">
+.owd-explorer-folder {
+
+}
+</style>

package/runtime/components/Core/Time/CoreTime.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import {ref, onMounted, onUnmounted} from 'vue'
+import {computed} from "@vue/reactivity"
+import {useI18n} from "vue-i18n"
+
+const date: Ref<Date> = ref(new Date())
+const {locale} = useI18n()
+
+let minuteTimeout: any
+
+onMounted(() => {
+  function scheduleNextMinute() {
+    const now = new Date()
+    const millisecondsToNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds()
+    minuteTimeout = setTimeout(() => {
+      date.value = new Date()
+      scheduleNextMinute()
+    }, millisecondsToNextMinute)
+  }
+  scheduleNextMinute()
+})
+
+onUnmounted(() => {
+  clearTimeout(minuteTimeout)
+})
+
+const time = computed(() => {
+  if (!date.value) {
+    return ''
+  }
+
+  let hours = date.value.getHours()
+  let minutes: string = date.value.getMinutes().toString()
+  let period = 'AM'
+
+  if (locale.value !== 'it') {
+    if (hours >= 12) {
+      period = 'PM'
+      if (hours > 12) hours -= 12
+    } else if (hours === 0) {
+      hours = 12
+    }
+  }
+
+  if (minutes.length === 1) minutes = `0${minutes}`
+
+  return locale.value === 'it' ? `${hours}:${minutes}` : `${hours}:${minutes} ${period}`
+})
+</script>
+
+<template>
+  <time class="owd-time" v-text="time" />
+</template>