improved About page + route

ref #5

src/App.svelte

@@ -18,6 +18,7 @@
   import NotFound from "./components/NotFound.svelte";
   import store from "./store.js";
   import ForgotPassword from "./components/ForgotPassword.svelte";
+  import About from "./components/About.svelte";
   store.init();
   //
   const checkAuth = (detail) => {
@@ -29,6 +30,7 @@
     return true;
   };
   const routes = {
+    "/about": About,
     "/login": Login,
     "/forgot_password": ForgotPassword,
     "/dashboard": wrap({ component: Dashboard, conditions: [checkAuth] }),

src/components/About.svelte

@@ -1,5 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
+  import Footer from "./Footer.svelte";
 </script>
 
 <style>
@@ -51,7 +52,141 @@
       <p class="text-center">{$_('oss_credit_description')}</p>
     </div>
     <div class="w-screen leading-8 pl-5 mt-5">
-      <ul class="list-disc text-gray-500">
+      <!--  -->
+      <table>
+        <thead>
+          <tr>
+            <th>name</th>
+            <th>licenseType</th>
+            <th>link</th>
+            <th>installedVersion</th>
+            <th>author</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>@odit/lfk-client-js</td>
+            <td>CC-BY-NC-SA-4.0</td>
+            <td>https://git.odit.services/lfk/lfk-client-js</td>
+            <td>0.0.5</td>
+            <td>ODIT.Services</td>
+          </tr>
+          <tr>
+            <td>filepond</td>
+            <td>MIT</td>
+            <td>https://github.com/pqina/filepond.git</td>
+            <td>4.25.1</td>
+            <td>PQINA</td>
+          </tr>
+          <tr>
+            <td>gridjs</td>
+            <td>MIT</td>
+            <td>https://github.com/grid-js/gridjs.git</td>
+            <td>3.2.0</td>
+            <td>Afshin Mehrabani</td>
+          </tr>
+          <tr>
+            <td>nanoid</td>
+            <td>MIT</td>
+            <td>https://github.com/ai/nanoid.git</td>
+            <td>3.1.20</td>
+            <td>Andrey Sitnik</td>
+          </tr>
+          <tr>
+            <td>svelte-filepond</td>
+            <td>MIT</td>
+            <td>https://github.com/pqina/svelte-filepond.git</td>
+            <td>0.0.1</td>
+            <td>PQINA</td>
+          </tr>
+          <tr>
+            <td>svelte-i18n</td>
+            <td>MIT</td>
+            <td>https://github.com/kaisermann/svelte-i18n.git</td>
+            <td>3.3.0</td>
+            <td>Christian Kaisermann</td>
+          </tr>
+          <tr>
+            <td>svelte-spa-router</td>
+            <td>MIT</td>
+            <td>https://github.com/ItalyPaleAle/svelte-spa-router.git</td>
+            <td>3.1.0</td>
+            <td>Alessandro Segala</td>
+          </tr>
+          <tr>
+            <td>tailwindcss</td>
+            <td>MIT</td>
+            <td>https://github.com/tailwindlabs/tailwindcss.git</td>
+            <td>2.0.2</td>
+            <td />
+          </tr>
+          <tr>
+            <td>toastify-js</td>
+            <td>MIT</td>
+            <td>https://github.com/apvarun/toastify-js.git</td>
+            <td>1.9.3</td>
+            <td>Varun A P</td>
+          </tr>
+          <tr>
+            <td>validator</td>
+            <td>MIT</td>
+            <td>https://github.com/chriso/validator.js.git</td>
+            <td>13.5.2</td>
+            <td>Chris O'Hara</td>
+          </tr>
+          <tr>
+            <td>@snowpack/plugin-svelte</td>
+            <td>MIT</td>
+            <td>https://github.com/snowpackjs/snowpack.git</td>
+            <td>3.4.1</td>
+            <td />
+          </tr>
+          <tr>
+            <td>autoprefixer</td>
+            <td>MIT</td>
+            <td>https://github.com/postcss/autoprefixer.git</td>
+            <td>10.1.0</td>
+            <td>Andrey Sitnik</td>
+          </tr>
+          <tr>
+            <td>postcss</td>
+            <td>MIT</td>
+            <td>https://github.com/postcss/postcss.git</td>
+            <td>8.2.1</td>
+            <td>Andrey Sitnik</td>
+          </tr>
+          <tr>
+            <td>postcss-load-config</td>
+            <td>MIT</td>
+            <td>https://github.com/postcss/postcss-load-config.git</td>
+            <td>3.0.0</td>
+            <td>Michael Ciniawky</td>
+          </tr>
+          <tr>
+            <td>snowpack</td>
+            <td>MIT</td>
+            <td>https://github.com/snowpackjs/snowpack.git</td>
+            <td>3.0.0-rc.2</td>
+            <td>Fred K. Schott</td>
+          </tr>
+          <tr>
+            <td>svelte</td>
+            <td>MIT</td>
+            <td>https://github.com/sveltejs/svelte.git</td>
+            <td>3.31.0</td>
+            <td>Rich Harris</td>
+          </tr>
+          <tr>
+            <td>svelte-preprocess</td>
+            <td>MIT</td>
+            <td>https://github.com/sveltejs/svelte-preprocess.git</td>
+            <td>4.6.1</td>
+            <td>Christian Kaisermann</td>
+          </tr>
+        </tbody>
+      </table>
+      <!--  -->
+      <!-- <ul class="list-disc text-gray-500">
         <li>
           Snowpack:
           <a
@@ -66,7 +201,7 @@
             href="https://svelte.dev"
             target="_blank">https://svelte.dev</a>
         </li>
-      </ul>
+      </ul> -->
     </div>
     <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
       Fragen
@@ -99,3 +234,4 @@
     </div>
   </div>
 </div>
+<Footer />

src/components/Dashboard.svelte

@@ -187,6 +187,21 @@
         </svg>
         <span>Settings</span>
       </a>
+      <a
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/#/about/">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" />
+          <path d="M12 16v-4M12 8h.01" /></svg>
+        <span>About</span>
+      </a>
     </nav>
   </nav>
   <div class="ml-0 transition md:ml-60">