Switched to MPA powered by Razor Pages

After reconsidering where I want to take this project, I realized that a MPA is more fitting.

Props/assets/images/logo.svg

@@ -0,0 +1,249 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="130.02815mm"
+   height="183.73235mm"
+   viewBox="0 0 130.02815 183.73235"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="logo.svg"
+   inkscape:export-filename="C:\Users\yunya\Documents\Props\Props\client\src\assets\images\logo.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:snap-global="true"
+     inkscape:zoom="1.0607991"
+     inkscape:cx="181.46697"
+     inkscape:cy="340.78083"
+     inkscape:window-width="1920"
+     inkscape:window-height="1027"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-40.717182,-65.583996)">
+    <rect
+       style="fill:#51b6bf;fill-opacity:1;stroke:none;stroke-width:0.394384"
+       id="rect846"
+       width="130.02815"
+       height="180.11604"
+       x="40.717182"
+       y="69.200294"
+       ry="7.2278728" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.355205"
+       id="rect6139"
+       width="114.73653"
+       height="165.58026"
+       x="48.362995"
+       y="76.468185"
+       ry="6.6445661" />
+    <g
+       id="g20855"
+       transform="translate(0,-4.5861139)">
+      <rect
+         style="fill:none;fill-opacity:1;stroke:#3b3485;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect4822-1"
+         width="8.1061144"
+         height="8.1061144"
+         x="56.92775"
+         y="113.97274"
+         ry="1.3718038" />
+      <rect
+         style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:1.86051;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5136-7"
+         width="42.169209"
+         height="3.4690557"
+         x="69.150803"
+         y="116.29127"
+         ry="1.7345278" />
+    </g>
+    <g
+       id="g20859"
+       transform="translate(0,-7.0555611)">
+      <rect
+         style="fill:none;fill-opacity:1;stroke:#3b3485;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect4822-14"
+         width="8.1061144"
+         height="8.1061144"
+         x="56.92775"
+         y="127.76641"
+         ry="1.3718038" />
+      <rect
+         style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:1.43107;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5136-7-2"
+         width="21.986813"
+         height="3.9363635"
+         x="68.953468"
+         y="129.85129"
+         ry="1.9681817" />
+    </g>
+    <g
+       id="g20845"
+       transform="translate(0,-2.1166667)">
+      <rect
+         style="fill:none;fill-opacity:1;stroke:#3b3485;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect4822"
+         width="8.1061144"
+         height="8.1061144"
+         x="56.92775"
+         y="100.17907"
+         ry="1.3718038" />
+      <rect
+         style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:1.59414;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5136"
+         width="28.571259"
+         height="3.7589138"
+         x="69.028404"
+         y="102.35267"
+         ry="1.8794569" />
+      <rect
+         style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:1.50408;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5136-5"
+         width="24.788029"
+         height="3.8569105"
+         x="102.89133"
+         y="102.30367"
+         ry="1.9284552" />
+    </g>
+    <g
+       id="g20863"
+       transform="translate(0,-9.5250005)">
+      <rect
+         style="fill:none;fill-opacity:1;stroke:#3b3485;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect4822-1-4"
+         width="8.1061144"
+         height="8.1061144"
+         x="56.92775"
+         y="141.56007"
+         ry="1.3718038" />
+      <rect
+         style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:1.57172;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5728"
+         width="27.594185"
+         height="3.7833092"
+         x="69.018089"
+         y="143.72148"
+         ry="1.8916546" />
+    </g>
+    <rect
+       style="fill:#202042;fill-opacity:1;stroke:none;stroke-width:0.23824"
+       id="rect1392"
+       width="53.152565"
+       height="18.233921"
+       x="-132.30754"
+       y="-83.817917"
+       ry="3.4788733"
+       transform="scale(-1)" />
+    <rect
+       style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:2.22336;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6412"
+       width="73.657707"
+       height="2.8362327"
+       x="56.336582"
+       y="201.33577"
+       ry="1.4181163" />
+    <rect
+       style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:2.23876;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6414"
+       width="69.712616"
+       height="3.0383809"
+       x="56.344284"
+       y="209.24466"
+       ry="1.5191904" />
+    <rect
+       style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:2.42357;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6416"
+       width="86.988022"
+       height="2.8535743"
+       x="56.436687"
+       y="217.23825"
+       ry="1.4267871" />
+    <rect
+       style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:2.38882;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6418"
+       width="83.495445"
+       height="2.8883159"
+       x="56.419315"
+       y="225.12207"
+       ry="1.444158" />
+    <rect
+       style="fill:#2f3898;fill-opacity:1;stroke:none;stroke-width:3.0459;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6295-8"
+       width="57.490276"
+       height="6.8199105"
+       x="76.986122"
+       y="87.608482"
+       ry="3.4099553" />
+    <rect
+       style="fill:#2f3898;fill-opacity:1;stroke:none;stroke-width:2.58155;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6490"
+       width="41.297459"
+       height="6.8199105"
+       x="85.082527"
+       y="188.09093"
+       ry="3.4099553" />
+    <rect
+       style="fill:#2f3898;fill-opacity:1;stroke:none;stroke-width:1.87563;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6490-3"
+       width="21.8001"
+       height="6.8199105"
+       x="94.831207"
+       y="151.63762"
+       ry="3.4099553" />
+    <rect
+       style="opacity:1;fill:#2bc8d7;fill-opacity:1;stroke:none;stroke-width:1.63579;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6492"
+       width="16.931116"
+       height="13.580167"
+       x="132.27409"
+       y="201.23309"
+       ry="2.6454868" />
+    <rect
+       style="opacity:1;fill:#dcf8f6;fill-opacity:1;stroke:none;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6932"
+       width="79.717339"
+       height="19.929335"
+       x="65.872589"
+       y="161.02196"
+       ry="5.6437054" />
+    <path
+       style="fill:none;stroke:#3d39a9;stroke-width:1.265;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 67.636283,179.27583 17.812943,-8.46556 24.779394,3.96823 34.12678,-11.19923"
+       id="path7699"
+       sodipodi:nodetypes="cccc" />
+    <path
+       style="fill:none;stroke:#6f78b2;stroke-width:0.765;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 65.872624,169.39934 37.918646,0.17637 17.98931,5.20279 23.63302,-7.14281"
+       id="path8022" />
+    <rect
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#b8edf3;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect9952"
+       width="79.717339"
+       height="19.929335"
+       x="65.872589"
+       y="161.02196"
+       ry="5.6437054" />
+  </g>
+</svg>

Props/assets/js/main.js

@@ -0,0 +1,2 @@
+import "../../node_modules/bootstrap/js/dist/collapse";
+import "simplebar";

Props/assets/js/services/http.js

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+let currentAuthorizationInterceptorID = null;
+
+const apiHttp = axios.create({
+    baseURL: window.location.origin + "/api",
+    timeout: 3000,
+});
+
+function addBearerTokenInterceptor(token) {
+    currentAuthorizationInterceptorID = apiHttp.interceptors.request.use((config) => {
+        config.headers.Authorization = `Bearer ${token}`;
+        return config;
+    }, (err) => {
+        console.error(err);
+    });
+}
+
+function removeBearerTokenInterceptor() {
+    apiHttp.interceptors.request.eject(currentAuthorizationInterceptorID);
+}
+
+export { apiHttp, addBearerTokenInterceptor, removeBearerTokenInterceptor };

Props/assets/js/services/persistence.js

@@ -0,0 +1,31 @@
+const prefix = "Props";
+function put(key, value) {
+    if (value == null) return false;
+    try {
+        localStorage.setItem(prefix + ":" + key, JSON.stringify(value));
+    } catch (error) {
+        console.error(error);
+        return false;
+    }
+    return true;
+}
+
+function get(key) {
+    if (!exists(key)) return null;
+    try {
+        return JSON.parse(localStorage.getItem(prefix + ":" + key));
+    } catch (error) {
+        console.error(error);
+        return null;
+    }
+}
+
+function remove(key) {
+    localStorage.removeItem(prefix + ":" + key);
+}
+
+function exists(key) {
+    return localStorage.getItem(prefix + ":" + key) != null;
+}
+
+export { put, get, remove, exists };

Props/assets/js/specific/search.js

@@ -0,0 +1 @@
+console.log("abc");

Props/assets/scss/_themer.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "variables";
+
+// Applied Dmitry Borody's method for theming with modifications. - https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1
+@mixin themed($themes: variables.$themes) {
+    @each $theme, $vars in $themes {
+        .theme-#{$theme} &, &.theme-#{$theme} {
+            $theme-values: $vars !global;
+            @content;
+            $theme-values: null !global;
+        }
+    }
+}
+
+@function color-of($type) {
+    @return map.get($theme-values, $type);
+}

Props/assets/scss/_variables.scss

@@ -0,0 +1,3 @@
+$themes: (
+    "light": ("background": #f4f4f4, "navbar": #FFF8F8, "main": #BDF2D5, "footer": #F2F2F2,"sub": #F2FCFC, "bold": #647b9b, "text": #1A1A1A, "muted": #797a7e),
+);

Props/assets/scss/main.scss

@@ -0,0 +1,96 @@
+@use "themer";
+@use "~/node_modules/bootstrap/scss/bootstrap";
+@import "~/node_modules/bootstrap-icons/font/bootstrap-icons.css";
+@import "~/node_modules/simplebar/dist/simplebar.min.css";
+
+header > nav {
+    @extend .navbar-expand-lg;
+    @extend .navbar;
+    @extend .border-bottom;
+    @include themer.themed {
+        background-color: themer.color-of("navbar");
+    }
+
+    .nav-link, .navbar-brand {
+        @include themer.themed {
+            color: themer.color-of("bold");
+        }
+        &.active {
+            @include themer.themed {
+                color: themer.color-of("text");
+            }
+        }
+    }
+
+    .navbar-toggler {
+        .bi-list {
+            font-size: 1.5rem;
+        }
+    }
+}
+
+body {
+    @include themer.themed {
+        background-color: themer.color-of("background");
+        color: themer.color-of("text");
+    }
+}
+
+footer {
+    @extend .py-2;
+    @extend .text-center;
+    @extend .border-top;
+    @include themer.themed {
+        background-color: themer.color-of("footer");
+        color: themer.color-of("muted");
+    }
+
+    a {
+        @include themer.themed {
+            color: themer.color-of("muted");
+        }
+    }
+
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+}
+
+.jumbotron {
+    @extend .container-fluid;
+    @extend .p-4;
+    @include themer.themed {
+        background-color: themer.color-of("main");
+    }
+
+    &.sub {
+        @include themer.themed {
+            background-color: themer.color-of("sub");
+        }
+    }
+}
+
+.concise {
+    max-width: 630px;
+    width: inherit;
+}
+
+h1 {
+    font-size: 5em;
+}
+
+h2 {
+    font-size: 3em;
+}
+
+hr {
+    @extend .my-3;
+    @include themer.themed {
+        color: themer.color-of("bold");
+    }
+}
+
+html {
+    min-height: 100%;
+    position: relative;
+}