@simple-reporting/base 0.0.1

package/dev/src/i18n/translation.ts

@@ -0,0 +1,85 @@
+import useConfig from '@/composables/config'
+import { i18n } from '@/i18n'
+import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
+
+let config = null
+useConfig().then((c) => (config = c))
+
+const Translate = {
+  isLocaleSupported(locale: string) {
+    // <--- 1
+    return Translate.supportedLocales.includes(locale)
+  },
+
+  getUserLocale() {
+    // <--- 2
+    const locale: string = window.navigator.language || Translate.defaultLocale
+    return {
+      locale: locale,
+      localeNoRegion: locale.split('-')[0]
+    }
+  },
+
+  getPersistedLocale(): string | null {
+    const persistedLocale = localStorage.getItem('user-locale')
+    if (persistedLocale && Translate.isLocaleSupported(persistedLocale)) {
+      return persistedLocale
+    } else {
+      return null
+    }
+  },
+
+  guessDefaultLocale(): string {
+    const userPersistedLocale = Translate.getPersistedLocale()
+    if (userPersistedLocale) {
+      return userPersistedLocale
+    }
+    const userPreferredLocale = Translate.getUserLocale()
+    if (Translate.isLocaleSupported(userPreferredLocale.locale)) {
+      return userPreferredLocale.locale
+    }
+    if (Translate.isLocaleSupported(userPreferredLocale.localeNoRegion)) {
+      return userPreferredLocale.localeNoRegion
+    }
+
+    return Translate.defaultLocale
+  },
+
+  get defaultLocale() {
+    return config.value.settings.defaultLanguage
+  },
+
+  get supportedLocales(): string[] {
+    return config.value.settings.languages
+  },
+
+  set currentLocale(newLocale: string) {
+    i18n.global.locale.value = newLocale
+  },
+
+  async switchLanguage(newLocale: string) {
+    Translate.currentLocale = newLocale
+    const objHtml = document.querySelector('html')
+    if (objHtml) {
+      objHtml.setAttribute('lang', newLocale)
+    }
+    localStorage.setItem('user-locale', newLocale)
+  },
+
+  async routeMiddleware(
+    to: RouteLocationNormalized,
+    _from: RouteLocationNormalized,
+    next: NavigationGuardNext
+  ) {
+    const paramLocale = to.params.locale
+    if (typeof paramLocale === 'string') {
+      if (!Translate.isLocaleSupported(paramLocale)) {
+        return next(Translate.guessDefaultLocale())
+      }
+      await Translate.switchLanguage(paramLocale)
+    }
+    return next()
+  }
+}
+
+export default Translate

package/dev/src/locales/de.json

@@ -0,0 +1,15 @@
+{
+  "page": {
+    "next": "Nächste Seite",
+    "prev": "Vorherige Seite",
+    "notFound": "Seite nicht gefunden"
+  },
+  "search": {
+    "title": "Suchergebnisse",
+    "for": "Ihre Suche nach {search} ergab {count} Treffer"
+  },
+  "scrollToTop": "Nach oben scrollen",
+  "buttons": {
+    "close": "Schließen"
+  }
+}

package/dev/src/locales/en.json

@@ -0,0 +1,15 @@
+{
+  "page": {
+    "next": "Next page",
+    "prev": "Previous page",
+    "notFound": "Page not found"
+  },
+  "search": {
+    "title": "Search results",
+    "for": "Your search for {search} returned {count} hits"
+  },
+  "scrollToTop": "Scroll to top",
+  "buttons": {
+    "close": "Close"
+  }
+}

package/dev/src/main.ts

@@ -0,0 +1,16 @@
+import '../.nswow/app.scss'
+
+import useConfig from '@/composables/config'
+import { createApp } from 'vue'
+import { initI18n } from './i18n'
+
+import App from './App.vue'
+import router from './router'
+
+useConfig().then(async () => {
+  const awi18n = await initI18n()
+  const app = createApp(App)
+  app.use(awi18n)
+  app.use(router)
+  app.mount('#app')
+})

package/dev/src/router/index.ts

@@ -0,0 +1,47 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Tr from '@/i18n/translation'
+import HomeView from '@/views/HomeView.vue'
+import SearchView from '@/views/SearchView.vue'
+import DownloadsView from '@/views/DownloadsView.vue'
+import ArticleView from '@/views/ArticleView.vue'
+import PageNotFound from '@/views/PageNotFound.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.BASE_URL),
+  scrollBehavior() {
+    window.scrollTo(0, 0)
+  },
+  routes: [
+    {
+      path: '/:locale?',
+      name: 'home',
+      component: HomeView,
+      beforeEnter: Tr.routeMiddleware
+    },
+    {
+      path: '/:locale/search',
+      name: 'search',
+      component: SearchView,
+      beforeEnter: Tr.routeMiddleware
+    },
+    {
+      path: '/:locale/downloads',
+      name: 'downloads',
+      component: DownloadsView,
+      beforeEnter: Tr.routeMiddleware
+    },
+    {
+      path: '/:locale/404',
+      name: 'pageNotFound',
+      component: PageNotFound,
+      beforeEnter: Tr.routeMiddleware
+    },
+    {
+      path: '/:locale/:slug+',
+      component: ArticleView,
+      beforeEnter: Tr.routeMiddleware
+    }
+  ]
+})
+
+export default router

package/dev/src/types/nswow.d.ts

@@ -0,0 +1,73 @@
+export {}
+declare global {
+  export type NsWowSettings = {
+    languages: string[]
+    defaultLanguage: string
+    shortBreadcrumb: boolean
+    search: {
+      boldTheWord: boolean
+    }
+    categories: string[]
+  }
+
+  export interface NsWowArticle {
+    uuid: string
+    name: string
+    translatedTitle: string
+    slug: string
+    index: boolean
+    seo_keywords: string[]
+    ignoreInSearch: boolean
+    excerpt: string
+    originalLanguageOfArticle: string
+    status: string
+  }
+
+  export interface NsWowArticles {
+    [locale: string]: NsWowArticle[]
+  }
+
+  export type NsWowConfig = {
+    loaded: boolean
+    settings: NsWowSettings
+    articles: NsWowArticles
+    menus: NsWowMenus
+  }
+
+  export interface NsWowMenu {
+    label: string
+    type: string
+    page?: string
+    url?: string
+    anchor?: string
+    submenuEntries?: NsWowMenu[]
+  }
+
+  export interface NsWowMenus {
+    [locale: string]: {
+      [menu: string]: NsWowMenu[]
+    }
+  }
+
+  export interface NsWowResponseRouting {
+    version: string
+    pages: NsWowArticle[]
+    menu: {
+      [menu: string]: NsWowMenu[]
+    }
+  }
+
+  export interface NsWowDownload {
+    type: string
+    title: string
+    fileType: string
+    size: string
+    artifact: string
+  }
+
+  export type NsWowDownloads = {
+    version?: string
+    structure: NsWowDownload[]
+    annualReport?: NsWowDownload
+  }
+}

package/dev/src/utils/variables.ts

@@ -0,0 +1,13 @@
+/**
+ * Converts an array or a string to a string representation with elements separated by a specified separator.
+ *
+ * @param {String|String[]} data - The array or string to be converted.
+ * @param {String} [separator='-'] - The separator to be used between elements. Defaults to '-' if not provided.
+ *
+ * @return {String} - The string representation of the input data with elements separated by the specified separator.
+ */
+function ArrayToString(data: string | any[], separator: string = '-'): string {
+  return Array.isArray(data) ? data.join(separator) : data
+}
+
+export { ArrayToString }

package/dev/src/views/ArticleView.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref, nextTick, computed, watch, onMounted, markRaw } from 'vue'
+import { useRoute } from 'vue-router'
+import useConfig from '@/composables/config'
+import Autoload from '@/Autoload'
+import PrevNext from '@/components/PrevNext.vue'
+import { useRouter } from 'vue-router'
+import { ArrayToString } from '@/utils/variables'
+
+const config = await useConfig()
+const router = useRouter()
+const route = useRoute()
+const articleContent = ref<HTMLDivElement | undefined>()
+const output = ref<string>('')
+const locale = computed<string>(() => {
+  return ArrayToString(route.params.locale)
+})
+const slug = computed<string>(() => {
+  return ArrayToString(route.params.slug)
+})
+async function getContent() {
+  const currentPage =
+    config.value.articles[locale.value] &&
+    config.value.articles[locale.value].find((i) => {
+      return i.slug === slug.value
+    })
+  let res = ''
+  if (currentPage) {
+    const file = `./html/${locale.value}/${currentPage.name}.html`
+    try {
+      const response = await fetch(file)
+      res = await response.text()
+      output.value = res
+      await nextTick(() => {
+        if (articleContent.value) {
+          Autoload.init(articleContent.value)
+        }
+      })
+    } catch (e) {
+      console.error(`"${file}" could not be loaded.`)
+      await router.push(`/${locale.value}/404`)
+    }
+  } else {
+    await router.push(`/${locale.value}/404`)
+  }
+}
+
+watch(route, async () => await getContent())
+onMounted(async () => {
+  await getContent()
+})
+</script>
+
+<template>
+  <article>
+    <transition name="fade">
+      <div v-if="output.length" ref="articleContent" class="srl-article-root" v-html="output" />
+    </transition>
+    <PrevNext />
+  </article>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+article {
+  padding-bottom: nswow.system-size-unit(50);
+}
+</style>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-article-root {
+  margin-bottom: nswow.system-size-unit(50);
+}
+</style>

package/dev/src/views/DownloadsView.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { ArrayToString } from '@/utils/variables'
+
+const route = useRoute()
+const locale = computed(() => {
+  return ArrayToString(route.params.locale)
+})
+const downloadData = ref<NsWowDownloads>({ structure: [] })
+
+async function getDownloads() {
+  const file = `./downloads/downloads_${locale.value}.json`
+  try {
+    const response = await fetch(file)
+    downloadData.value = await response.json()
+  } catch (e) {
+    console.error(`"${file}" could not be loaded.`)
+  }
+}
+
+watch(route, () => getDownloads())
+getDownloads()
+</script>
+
+<template>
+  <article class="srl-download">
+    <h1>Downloads</h1>
+    <h2>Annual Report</h2>
+    <div v-if="downloadData.annualReport">
+      <a target="_blank">{{ downloadData.annualReport?.title }}</a>
+    </div>
+    <h2>Downloads</h2>
+    <transition name="fade">
+      <ul v-if="downloadData.structure.length" class="srl-download__list">
+        <li v-for="(item, index) in downloadData?.structure" :key="index">
+          <a href="" target="_blank">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              class="bi bi-download"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"
+              />
+              <path
+                d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"
+              />
+            </svg>
+            <div>
+              <span class="title">{{ item.title }}</span
+              ><br />
+              <span>{{ item.size }}</span>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </transition>
+  </article>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-download {
+  margin: 0 auto;
+  @include nswow.grid-container();
+
+  &__list {
+    list-style-type: none;
+    padding: 0 0 0 0;
+
+    li {
+      margin-bottom: nswow.system-size-unit(20);
+
+      a {
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        gap: nswow.system-size-unit(10);
+      }
+    }
+  }
+}
+</style>

package/dev/src/views/HomeView.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ArrayToString } from '@/utils/variables'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const locale = computed<string>(() => {
+  return ArrayToString(route.params.locale)
+})
+</script>
+
+<template>
+  <div class="srl-main">
+    <h1>Welcome {{ locale }}</h1>
+    <h3>Dokumentation Frontend Toolkit für Komponenten als auch APP:</h3>
+    <p>
+      <a href="https://mmssolutionsio.github.io/mms-reporting-docs/docs/intro" target="_blank"
+        >Dokumentation</a
+      >
+    </p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-main {
+  padding: nswow.system-size-unit(100) 0;
+  margin-left: auto;
+  margin-right: auto;
+  min-height: 80vh;
+  @include nswow.grid-container();
+}
+</style>

package/dev/src/views/PageNotFound.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="srl-notfound">
+    <div class="srl-notfound__inner">
+      <h1>404</h1>
+      <h2>{{ $t('page.notFound') }}</h2>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="bi bi-robot"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z"
+        />
+        <path
+          d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-notfound {
+  margin: 0 auto;
+  @include nswow.grid-container();
+  @include nswow.fonts-core-styles();
+
+  &__inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    min-height: 80vh;
+
+    svg {
+      height: 100px;
+      width: 100px;
+      margin-top: 2rem;
+      animation: spin 600ms linear 2;
+
+      @keyframes spin {
+        10%,
+        90% {
+          transform: translate3d(-1px, 0, 0);
+        }
+
+        20%,
+        80% {
+          transform: translate3d(2px, 0, 0);
+        }
+
+        30%,
+        50%,
+        70% {
+          transform: translate3d(-4px, 0, 0);
+        }
+
+        40%,
+        60% {
+          transform: translate3d(4px, 0, 0);
+        }
+      }
+    }
+  }
+}
+</style>

package/dev/src/views/SearchView.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import useConfig from '@/composables/config'
+import { ArrayToString } from '@/utils/variables'
+
+type searchDataType = {
+  title: string
+  content: string
+  link: string
+  translatedTitle: string
+  firstParagraph: string
+}
+
+const config = await useConfig()
+const route = useRoute()
+const isLoading = ref<boolean>(true)
+const searchData = ref<searchDataType[]>([])
+
+const locale = computed<string>(() => {
+  return ArrayToString(route.params.locale)
+})
+
+const searchValue = computed<string>(() => {
+  return route.query.searchValue ? ArrayToString(route.query.searchValue, ' ') : ''
+})
+
+const articles = computed<NsWowArticle[]>(() => {
+  return config.value.articles[locale.value] ?? []
+})
+
+async function getSearchResult() {
+  isLoading.value = true
+  searchData.value = []
+  const routesArray: {
+    uuid: string
+    slug: string
+    name: string
+    translatedTitle: string
+  }[] = []
+
+  articles.value
+    .filter((item) => {
+      return !item.ignoreInSearch
+    })
+    .map((value) => {
+      routesArray.push({
+        uuid: value.uuid,
+        slug: value.slug,
+        name: value.name,
+        translatedTitle: value.translatedTitle
+      })
+    })
+
+  if (routesArray.length) {
+    routesArray.map(async (value) => {
+      const file = `./html/${locale.value}/${value.name}.html`
+      try {
+        const response = await fetch(file)
+        const data = await response.text()
+        if (data.toLowerCase().includes(searchValue.value.toLowerCase())) {
+          const item: searchDataType = {
+            title: `${locale.value}/${value.slug}`,
+            content: data,
+            link: `/${locale.value}/${value.slug}`,
+            translatedTitle: value.translatedTitle,
+            firstParagraph: ''
+          }
+          const doc = new DOMParser().parseFromString(data, 'text/html')
+          const paragraph = doc.querySelector('p')
+          if (paragraph) {
+            item.firstParagraph = paragraph.textContent ?? ''
+          }
+          searchData.value.push(item)
+        }
+
+        searchData.value.sort((a, b) => {
+          return a.title.localeCompare(b.title)
+        })
+
+        isLoading.value = false
+      } catch (e) {
+        console.error(`"${file}" could not be loaded.`)
+      }
+    })
+  }
+}
+
+watch(route, () => getSearchResult())
+getSearchResult()
+</script>
+
+<template>
+  <article class="srl-article">
+    <div class="srl-article-container">
+      <h1>{{ $t('search.title') }}</h1>
+
+      <div v-if="isLoading">Loading...</div>
+      <transition name="fade">
+        <h2 v-if="!isLoading">
+          {{ $t('search.for', { search: searchValue, count: searchData.length }) }}
+        </h2>
+      </transition>
+
+      <transition name="fade">
+        <div v-if="!isLoading && searchValue">
+          <div v-for="(dataItem, index) in searchData" :key="index">
+            <h5>{{ dataItem.translatedTitle }}</h5>
+            <p>{{ dataItem.firstParagraph }}</p>
+            <router-link :to="{ path: dataItem.link }">{{ dataItem.title }}</router-link>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </article>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-article {
+  margin: 0 auto;
+  @include nswow.grid-container();
+  @include nswow.typography-core-styles();
+}
+</style>

package/dev/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "nswow": ["./nswow"],
+      "nswow/*": ["./nswow/*"]
+    }
+  }
+}