initial commit

src/App.vue

@@ -0,0 +1,5 @@
+<template>
+  <router-view class="font-soleil" />
+</template>
+
+<script setup lang="ts"></script>

src/boot/mermaid.ts

@@ -0,0 +1,8 @@
+import { boot } from 'quasar/wrappers';
+import mermaid from 'mermaid';
+
+// "async" is optional;
+// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
+export default boot(async (/* { app, router, ... } */) => {
+  mermaid.initialize({ startOnLoad: true });
+});

src/components/DiagramRenderer.vue

@@ -0,0 +1,77 @@
+<template>
+  <div ref="mermaidGraph"></div>
+  <br />
+  <div ref="imageGraph"></div>
+</template>
+
+<script setup lang="ts">
+import mermaid from 'mermaid';
+import { onMounted, ref, watchEffect } from 'vue';
+
+// variables
+const mermaidGraph = ref<HTMLInputElement | null>(null);
+const imageGraph = ref<HTMLInputElement | null>(null);
+
+// load mermaid graph
+onMounted(() => {
+  mermaid.initialize({
+    startOnLoad: false,
+    logLevel: 'fatal',
+    securityLevel: 'loose',
+    theme: 'neutral'
+  });
+});
+
+watchEffect(() => {
+  if (mermaidGraph.value != null) {
+    mermaid.render(
+      'test',
+      "graph LR; Wood(<div class='wood-icon'><span>1</span></div>)-->Icon(<div class='timber-icon'>1</div>)",
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        mermaidGraph.value!.innerHTML = svgCode;
+      }
+    );
+  } else {
+    console.log('null value');
+  }
+});
+
+watchEffect(() => {
+  if (imageGraph.value != null) {
+    mermaid.render(
+      'woodTimber',
+      "graph LR; Wood(<img src='/annoIcons/buildingMaterials/Wood.webp' class='icon-size' />)-->Icon(<img src='/annoIcons/buildingMaterials/Timber.webp' class='icon-size' />)",
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        imageGraph.value!.innerHTML = svgCode;
+      }
+    );
+  } else {
+    console.log('null value');
+  }
+});
+</script>
+
+<style lang="scss">
+.icon-size {
+  width: 40px;
+  height: 40px;
+}
+
+.wood-icon {
+  background: no-repeat center/100%
+    url('../assets/annoIcons/buildingMaterials/Wood.webp');
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+.timber-icon {
+  background: no-repeat center/100%
+    url('../assets/annoIcons/buildingMaterials/Timber.webp');
+  width: 40px;
+  height: 40px;
+}
+</style>

src/components/EssentialLink.vue

@@ -0,0 +1,34 @@
+<template>
+  <q-item
+    clickable
+    tag="a"
+    target="_blank"
+    :href="link"
+  >
+    <q-item-section
+      v-if="icon"
+      avatar
+    >
+      <q-icon :name="icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label caption>{{ caption }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+export interface EssentialLinkProps {
+  title: string;
+  caption?: string;
+  link?: string;
+  icon?: string;
+}
+withDefaults(defineProps<EssentialLinkProps>(), {
+  caption: '',
+  link: '#',
+  icon: '',
+});
+</script>

src/components/ExampleComponent.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <p>{{ title }}</p>
+    <ul>
+      <li v-for="todo in todos" :key="todo.id" @click="increment">
+        {{ todo.id }} - {{ todo.content }}
+      </li>
+    </ul>
+    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
+    <p>Active: {{ active ? 'yes' : 'no' }}</p>
+    <p>Clicks on todos: {{ clickCount }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Todo, Meta } from './models';
+
+interface Props {
+  title: string;
+  todos?: Todo[];
+  meta: Meta;
+  active: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  todos: () => [],
+});
+
+const clickCount = ref(0);
+function increment() {
+  clickCount.value += 1;
+  return clickCount.value;
+}
+
+const todoCount = computed(() => props.todos.length);
+
+</script>

src/components/models.ts

@@ -0,0 +1 @@
+export {};

src/css/app.scss

@@ -0,0 +1,11 @@
+// app global css in SCSS form
+
+@font-face {
+  font-family: Soleil;
+  src: url('assets/fonts/SoleilRegular.otf');
+}
+
+.font-soleil {
+  font-family: Soleil;
+  color: #2d3e4f;
+}

src/css/quasar.variables.scss

@@ -0,0 +1,25 @@
+// Quasar SCSS (& Sass) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary: #1333c9;
+$secondary: #26a69a;
+$accent: #9c27b0;
+
+$dark: #1d1d1d;
+$dark-page: #121212;
+
+$positive: #21ba45;
+$negative: #c10015;
+$info: #31ccec;
+$warning: #f2c037;

src/env.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    NODE_ENV: string;
+    VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined;
+    VUE_ROUTER_BASE: string | undefined;
+  }
+}

src/layouts/MainLayout.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header>
+      <q-toolbar class="border-black-bottom-med bg-white text-black">
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
+        />
+
+        <!-- TODO: add link to git -->
+        <q-toolbar-title> Anno 1800 Production Chain Renderer </q-toolbar-title>
+
+        <q-icon name="lab la-github" color="black" size="2.2rem"></q-icon>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" bordered>
+      <q-list>
+        <q-item-label header> Navigation </q-item-label>
+
+        <EssentialLink
+          v-for="link in linksList"
+          :key="link.title"
+          v-bind="link"
+        />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import EssentialLink from 'components/EssentialLink.vue';
+import linksList from './data/linksList.json';
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script>
+
+<style lang="scss">
+.border-black-bottom-med {
+  border-bottom: 0.15rem solid black;
+}
+</style>

src/layouts/data/linksList.json

@@ -0,0 +1,8 @@
+[
+  {
+    "title": "Home",
+    "caption": "Homepage",
+    "icon": "las la-home",
+    "link": "/"
+  }
+]

src/pages/ErrorNotFound.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">
+        404
+      </div>
+
+      <div class="text-h2" style="opacity:.4">
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>

src/pages/IndexPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <q-page class="row items-center justify-evenly">
+    <diagram-renderer />
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import DiagramRenderer from 'src/components/DiagramRenderer.vue';
+</script>

src/quasar.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+// Forces TS to apply `@quasar/app-vite` augmentations of `quasar` package
+// Removing this would break `quasar/wrappers` imports as those typings are declared
+//  into `@quasar/app-vite`
+// As a side effect, since `@quasar/app-vite` reference `quasar` to augment it,
+//  this declaration also apply `quasar` own
+//  augmentations (eg. adds `$q` into Vue component context)
+/// <reference types="@quasar/app-vite" />

src/router/index.ts

@@ -0,0 +1,36 @@
+import { route } from 'quasar/wrappers';
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+
+import routes from './routes';
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default route(function (/* { store, ssrContext } */) {
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
+
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+    routes,
+
+    // Leave this as is and make changes in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    history: createHistory(process.env.VUE_ROUTER_BASE),
+  });
+
+  return Router;
+});

src/router/routes.ts

@@ -0,0 +1,18 @@
+import { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
+  },
+
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('pages/ErrorNotFound.vue'),
+  },
+];
+
+export default routes;

src/shims-vue.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+
+/// <reference types="vite/client" />
+
+// Mocks all files ending in `.vue` showing them as plain Vue instances
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}