@raclettejs/core 0.0.1

package/services/frontend/src/orchestrator/ProductOrchestrator.vue

@@ -0,0 +1,239 @@
+<template>
+  <v-app
+    id="pacificoApp"
+    :class="{
+      'tw:select-none': isDraggingOrResizingAnything,
+      klingon: locale === 'tl-TL',
+    }"
+  >
+    <!-- Global Toolbar -->
+    <v-app-bar
+      :order="-10"
+      v-if="availableInterfaces.indexOf('topBar') > -1"
+      id="appAppbar"
+      color="topbar-bg"
+      density="compact"
+      flat
+      app
+      class="tw:border-0 tw:border-b tw:border-solid"
+      :class="{
+        'tw:border-gray-300': theme === 'light',
+        'tw:border-[#444]': theme === 'dark',
+      }"
+    >
+      <div class="tw:flex tw:items-center">
+        <!-- home icon -->
+        <div class="tw:flex tw:justify-center">
+          <RouterLink
+            :to="{
+              path: '/',
+            }"
+          >
+            <img
+              class="tw:cursor-pointer tw:h-[40px] tw:ml-2"
+              src="/home-icon.png"
+            />
+          </RouterLink>
+        </div>
+
+        <img v-if="logoExists" class="tw:h-[40px]" :src="logoSrc" alt="Logo" />
+      </div>
+
+      <v-spacer />
+
+      <DevIndicator v-if="isDevelopment" />
+
+      <UserNotifications />
+      <ServerStatus />
+      <UserMenu
+        :class="{
+          klingon: locale === 'tl-TL',
+        }"
+      />
+    </v-app-bar>
+
+    <snackbarStack />
+    <!-- Navigation Drawer -->
+    <PageNavigation
+      :key="locale"
+      v-if="availableInterfaces.indexOf('pageNavigation') > -1"
+    />
+
+    <!-- Main content -->
+    <v-main class="tw:flex tw:flex-col">
+      <div class="tw:w-full tw-h-1 tw:top-[49px]">
+        <v-progress-linear
+          :height="2"
+          :indeterminate="loading"
+          color="primary"
+        />
+      </div>
+
+      <component v-if="showWelcomeScreen" :is="welcomeScreenComponent" />
+
+      <template v-else>
+        <WidgetsLayoutLoader
+          v-if="widgetsLayout"
+          class="tw:overflow-y-auto! tw:pb-0"
+          :class="{ '!tw:invisible': loading }"
+          :widgets-layout="widgetsLayout"
+          @scroll.passive="onScroll($event)"
+        />
+
+        <v-empty-state
+          v-else
+          :headline="$t('core.error.404')"
+          :title="$t('core.error.page_not_foundTitle')"
+          :text="$t('core.error.page_not_foundSubtitle')"
+          image="/Logo_Main_V1.png"
+        >
+          <v-btn :to="{ path: '/' }">{{
+            $t("core.error.return_to_home")
+          }}</v-btn>
+        </v-empty-state>
+      </template>
+
+      <v-footer
+        :order="-1"
+        color="footer-bg"
+        border-thin
+        v-if="configService.getPleaseLetUsAdvertiseOurselves()"
+        class="tw:items-center tw:text-center tw:flex tw:flex-col tw:border-t-1 tw:grow-0! tw:mt-auto"
+      >
+        <a
+          href="https://www.raclettejs.com"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="raclette"
+          class="tw:text-[0.9rem]"
+        >
+          Cooked with <span class="raclette">raclette 🧀</span></a
+        >
+        <span
+          v-if="configService.getAdvertiseYourself().length"
+          v-html="configService.getAdvertiseYourself()"
+        ></span>
+      </v-footer>
+    </v-main>
+
+    <CompositionOverlay v-if="availableInterfaces.includes('modalTools')" />
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch, computed, defineAsyncComponent } from "vue"
+import UserNotifications from "./components/menu/UserNotifications.vue"
+import PageNavigation from "./components/navigation/PageNavigationSidebar.vue"
+import snackbarStack from "./components/snackbar/SnackStack.vue"
+import ServerStatus from "./components/menu/ServerStatus.vue"
+import UserMenu from "./components/menu/UserMenu.vue"
+import DevIndicator from "./components/menu/DevIndicator.vue"
+import { useTheme, useLocale } from "vuetify"
+import { useRoute } from "vue-router"
+import useUiState from "./composables/useUiState"
+import useRouteState from "./composables/useRouteState"
+import CompositionOverlay from "./components/composition/CompositionOverlay.vue"
+import { useTitle } from "@vueuse/core"
+import loginUserNotifications from "./helpers/loginUserNotifications"
+import configService from "@racletteCore/lib/configService"
+import { isDevelopmentMode } from "@racletteCore/helpers/devMode"
+import { useLocalStorage } from "@vueuse/core"
+import useDragAndDrop from "./composables/useDragAndDrop"
+import { useCurrentComposition } from "./composables"
+import WidgetsLayoutLoader from "./components/composition/WidgetsLayoutLoader.vue"
+
+useTitle(`raclette - ${configService.getApplicationTitle()}`)
+const route = useRoute()
+const vuetifyLocale = useLocale()
+const vuetifyTheme = useTheme()
+const userTheme = useLocalStorage<string>("user-theme", null)
+const { loading, theme, locale, landingPage, availableInterfaces } =
+  useUiState()
+useRouteState()
+const { isDraggingOrResizingAnything } = useDragAndDrop()
+const { widgetsLayout } = useCurrentComposition()
+
+const showWelcomeScreen = computed(() => {
+  const isDynamicPage = route.name === "app.space.page"
+  const hasPageIdParameter = Boolean(route.params.pageId?.length)
+  const hasLandingPage = !!landingPage.value
+
+  return isDynamicPage && !hasPageIdParameter && !hasLandingPage
+})
+
+const WelcomeScreenComponent = defineAsyncComponent({
+  loader: () => import("./WelcomeScreen.vue"),
+  errorComponent: {
+    template: `
+      <div class="tw:flex tw:items-center tw:justify-center tw:h-full tw:text-center tw:p-8">
+        <div>
+          <h1 class="tw:text-4xl tw:font-bold tw:mb-4 tw:text-gray-800">Welcome to Raclette</h1>
+          <p class="tw:text-gray-600 tw:text-lg">Get started by selecting a page from the navigation.</p>
+        </div>
+      </div>
+    `,
+  },
+  delay: 0,
+  timeout: 3000,
+  suspensible: false,
+  onError: (error, retry, fail, attempts) => {
+    console.warn("WelcomeScreen component failed to load:", error)
+    fail() // Don't retry, just fail gracefully
+  },
+})
+
+const welcomeScreenComponent = computed(() => {
+  return showWelcomeScreen.value ? WelcomeScreenComponent : null
+})
+
+const logoExists = ref(false)
+const logoSrc = ref("/logo.png")
+
+const checkImageExists = async (url: string): Promise<boolean> => {
+  try {
+    const response = await fetch(url, { method: "HEAD" })
+
+    if (!response.ok) {
+      return false
+    }
+
+    // Check if the response is actually an image
+    const contentType = response.headers.get("content-type")
+    return contentType ? contentType.startsWith("image/") : false
+  } catch {
+    return false
+  }
+}
+
+const showScrollToTopBtn = ref(false)
+const isDevelopment = ref(false)
+
+const onScroll = (e) =>
+  (showScrollToTopBtn.value = e.currentTarget.scrollTop > 0)
+
+onMounted(async () => {
+  vuetifyTheme.change(theme.value)
+  vuetifyLocale.current.value = locale.value
+  isDevelopment.value = isDevelopmentMode()
+  logoExists.value = await checkImageExists(logoSrc.value)
+  // check if we have a message from checkToken to display as a snackbar
+  loginUserNotifications()
+})
+
+watch(theme, () => {
+  vuetifyTheme.change(theme.value)
+})
+
+// set vuetify locale here, the rest is done in setup/i18n
+watch(locale, () => {
+  vuetifyLocale.current.value = locale.value
+})
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", (event) => {
+    const newColorScheme = event.matches ? "dark" : "light"
+    if (userTheme.value === null) {
+      vuetifyTheme.change(newColorScheme)
+    }
+  })
+</script>

package/services/frontend/src/orchestrator/WelcomeScreen.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Welcome to raclettejs!</div>
+</template>

package/services/frontend/src/orchestrator/assets/iconMappings/flags.json

@@ -0,0 +1,91 @@
+{
+  "tl-TL": "<svg viewBox=\"0 0 1533.2061 976.86072\" width=\"15\" height=\"15\" xmlns=\"http://www.w3.org/2000/svg\"><rect y=\"0\" x=\"0\" height=\"976.86072\" width=\"1533.2061\" style=\"fill:#dd0000;fill-opacity:1;fill-rule:nonzero;stroke-opacity:1;stroke:none\"/><path transform=\"matrix(1.207407,0,0,1.171533,-277.7523,-130.1734)\" d=\"m 1123.855,558.20612 a 251.19275,254.91412 0 1 1 -502.38552,0 251.19275,254.91412 0 1 1 502.38552,0 z\" style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke-opacity:1;stroke:none\"/><g transform=\"matrix(1.637503,0,0,1.813484,491.952,59.94811)\"><g transform=\"translate(-15.15542,-17.54026)\"><g><path d=\"m 188.99078,375.57092 c 21.98812,-33.28511 42.04006,-52.32832 64.02818,-85.61344 -5.02254,-20.74152 -25.81541,-9.11049 -63.24457,-268.052116 -42.30734,260.900196 -64.99978,249.583906 -67.19248,266.132466 21.49014,33.92568 44.91872,53.60845 66.40887,87.53309 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:8.73021;stroke-opacity:0\"/><path d=\"m 111.11807,308.50231 c 16.74081,23.26538 47.92685,55.49665 64.66763,78.76202 C 75.019018,393.34342 54.282043,415.30659 19.856289,447.76699 13.705668,340.18531 93.013415,340.72001 111.11807,308.50231 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:8.72339;stroke-opacity:0\"/><path d=\"m 202.79551,386.70297 c 19.41951,-25.24811 43.79091,-55.641 63.2104,-80.88912 32.85044,60.94726 75.58711,79.63235 115.52691,82.66587 -31.1994,39.76059 -111.38131,35.25793 -178.73731,-1.77675 z\" style=\"fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:8.5976;stroke-opacity:0\"/></g></g></g></svg>",
+  "de-DE": "🇩🇪",
+  "de-AT": "🇦🇹",
+  "de-EU": "<svg viewBox=\"0 0 450 300\" width=\"15\" height=\"15\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"450\" height=\"300\" fill=\"#de1800\" /><rect width=\"225\" height=\"100\" fill=\"#000\" /><rect y=\"200\" width=\"225\" height=\"100\" fill=\"#ffce00\" /><rect x=\"225\" y=\"100\" width=\"225\" height=\"100\" fill=\"#fff\" /><rect x=\"150\" y=\"75\" width=\"150\" height=\"150\" fill=\"#de1800\" /><rect x=\"210\" y=\"100\" width=\"30\" height=\"100\" fill=\"#fff\" /><rect x=\"175\" y=\"135\" width=\"100\" height=\"30\" fill=\"#fff\" /></svg>",
+  "en-EU": "🇪🇺",
+  "en-GB": "🇬🇧",
+  "en-US": "🇺🇸",
+  "en-CA": "🇨🇦",
+  "en-AU": "🇦🇺",
+  "en-NZ": "🇳🇿",
+  "en-IN": "🇮🇳",
+  "en-ZA": "🇿🇦",
+  "en-IE": "🇮🇪",
+  "fr-FR": "🇫🇷",
+  "fr-CA": "🇨🇦",
+  "fr-BE": "🇧🇪",
+  "fr-CH": "🇨🇭",
+  "es-ES": "🇪🇸",
+  "es-MX": "🇲🇽",
+  "es-AR": "🇦🇷",
+  "es-CO": "🇨🇴",
+  "es-US": "🇺🇸",
+  "es-BO": "🇧🇴",
+  "es-CL": "🇨🇱",
+  "es-CR": "🇨🇷",
+  "es-DO": "🇩🇴",
+  "es-EC": "🇪🇨",
+  "es-GT": "🇬🇹",
+  "en-BZ": "🇧🇿",
+  "en-JM": "🇯🇲",
+  "en-TT": "🇹🇹",
+  "en-ZW": "🇿🇼",
+  "ar-SA": "🇸🇦",
+  "as-IN": "🇮🇳",
+  "ay-BO": "🇧🇴",
+  "az-AZ": "🇦🇿",
+  "be-BY": "🇧🇾",
+  "bg-BG": "🇧🇬",
+  "bn-BD": "🇧🇩",
+  "bn-IN": "🇮🇳",
+  "bo-CN": "🇨🇳",
+  "br-FR": "🇫🇷",
+  "ca-ES": "🇪🇸",
+  "cs-CZ": "🇨🇿",
+  "cy-GB": "🇬🇧",
+  "da-DK": "🇩🇰",
+  "el-GR": "🇬🇷",
+  "eo-UN": "🇺🇳",
+  "fa-IR": "🇮🇷",
+  "fi-FI": "🇫🇮",
+  "fr-LU": "🇱🇺",
+  "ga-IE": "🇮🇪",
+  "he-IL": "🇮🇱",
+  "hi-IN": "🇮🇳",
+  "hr-HR": "🇭🇷",
+  "hu-HU": "🇭🇺",
+  "id-ID": "🇮🇩",
+  "is-IS": "🇮🇸",
+  "ja-JP": "🇯🇵",
+  "kn-IN": "🇮🇳",
+  "ko-KR": "🇰🇷",
+  "lt-LT": "🇱🇹",
+  "lv-LV": "🇱🇻",
+  "mk-MK": "🇲🇰",
+  "ms-MY": "🇲🇾",
+  "mt-MT": "🇲🇹",
+  "nl-NL": "🇳🇱",
+  "nl-BE": "🇧🇪",
+  "nn-NO": "🇳🇴",
+  "oc-FR": "🇫🇷",
+  "pa-IN": "🇮🇳",
+  "pl-PL": "🇵🇱",
+  "pt-PT": "🇵🇹",
+  "pt-BR": "🇧🇷",
+  "qu-PE": "🇵🇪",
+  "ro-RO": "🇷🇴",
+  "ru-RU": "🇷🇺",
+  "sl-SI": "🇸🇮",
+  "sq-AL": "🇦🇱",
+  "sv-SE": "🇸🇪",
+  "ta-IN": "🇮🇳",
+  "th-TH": "🇹🇭",
+  "tr-TR": "🇹🇷",
+  "uk-UA": "🇺🇦",
+  "vi-VN": "🇻🇳",
+  "yi-IL": "🇮🇱",
+  "zu-ZA": "🇿🇦",
+  "sk-SK": "🇸🇰",
+  "sl-SL": "🇸🇮"
+}

package/services/frontend/src/orchestrator/assets/styles/fonts/klingon.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Klingon";
+  src: url("../../fonts/klingon/klingon.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}

package/services/frontend/src/orchestrator/assets/styles/fonts/quicksand.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Quicksand";
+  src: url("../../fonts/quicksand/Quicksand-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}

package/services/frontend/src/orchestrator/assets/styles/fonts/roboto-fontface.scss

@@ -0,0 +1,191 @@
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-Thin.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Thin.woff") format("woff");
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Thin";
+  src:
+    url("../../fonts/roboto/Roboto-Thin.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Thin.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-ThinItalic.woff") format("woff");
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Roboto-ThinItalic";
+  src:
+    url("../../fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-ThinItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-Light.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Light";
+  src:
+    url("../../fonts/roboto/Roboto-Light.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Light.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-LightItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-LightItalic.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Roboto-LightItalic";
+  src:
+    url("../../fonts/roboto/Roboto-LightItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-LightItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Regular";
+  src:
+    url("../../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-RegularItalic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Roboto-RegularItalic";
+  src:
+    url("../../fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-RegularItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-Medium.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Medium";
+  src:
+    url("../../fonts/roboto/Roboto-Medium.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Medium.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-MediumItalic.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Roboto-MediumItalic";
+  src:
+    url("../../fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-MediumItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-Bold.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Bold";
+  src:
+    url("../../fonts/roboto/Roboto-Bold.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-BoldItalic.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Roboto-BoldItalic";
+  src:
+    url("../../fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-BoldItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-Black.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Black.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Black";
+  src:
+    url("../../fonts/roboto/Roboto-Black.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-Black.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../../fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-BlackItalic.woff") format("woff");
+  font-weight: 900;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Roboto-BlackItalic";
+  src:
+    url("../../fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"),
+    url("../../fonts/roboto/Roboto-BlackItalic.woff") format("woff");
+}

package/services/frontend/src/orchestrator/assets/styles/main.scss

@@ -0,0 +1,14 @@
+@use "./fonts/quicksand.scss";
+@use "./fonts/roboto-fontface.scss";
+@use "./fonts/klingon.scss";
+
+.ASTEROIDSYEAH {
+  @apply tw:overflow-hidden;
+}
+.klingon * {
+  font-family: "Klingon";
+}
+.raclette {
+  font-family: "Quicksand" !important;
+  font-weight: 700;
+}

package/services/frontend/src/orchestrator/assets/styles/tailwindStyles.css

@@ -0,0 +1,16 @@
+@source "../../../../index.html";
+@source "/**/*.{vue,js,ts,jsx,tsx,html}";
+/* vite aliase? */
+/* @source "@racletteOrchestrator" */
+
+@import "tailwindcss" prefix(tw);
+
+/* The commented code below allows to granually import tailwind */
+/* @layer theme, base, components, utilities; */
+/* @import "tailwindcss/theme.css" layer(theme) prefix(tw); */
+/* @import "tailwindcss/preflight.css" layer(base) prefix(tw); */
+/* @import "tailwindcss/utilities.css" layer(utilities) prefix(tw);  */
+
+/* safelist for the resizing in the composition editor */
+@source inline('tw:col-span-{1..12}');
+@source inline('tw:grid-cols-{1..12}');