Merge pull request #1 from Demetory/develop

Refactor
Demetory · Dec 5, 2022 · f91d749 · f91d749
2 parents 831d6dc + 601b0b9
commit f91d749
Show file tree

Hide file tree

Showing 39 changed files with 648 additions and 426 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,3 +1,4 @@
 {
-  "printWidth": 120
+  "printWidth": 120,
+  "endOfLine": "lf"
 }
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,20 @@
+Copyright (c) 2012-now Demetory
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/index.html b/index.html
@@ -37,7 +37,7 @@
   <body>
     <!--noindex-->
     <noscript>
-      <img src="/images/fatality.svg" />
+      <img alt="Fatality" src="/images/fatality.svg" />
       <div>
         <h1>Easy, Tiger</h1>
         <p>Turn JavaScript on, don't be so paraniod.</p>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,6 @@
     "typescript": "~4.7.4",
     "vite": "^3.1.8",
     "vitest": "^0.24.3",
-    "vue-tsc": "^1.0.8"
+    "vue-tsc": "^1.0.11"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -5,14 +5,11 @@ import { useRoute } from "vue-router";
 
 // Modules
 import axios from "axios";
+import { initApp } from "@/modules/initApp";
 import { useExamplePiniaStore } from "@/stores/examplePinia";
 
 // Components
-import TemplateHeader from "@/components/template/TemplateHeader.vue";
-
-// Composables
-import { exampleLogo } from "@/modules/exampleLogo";
-import { useConsoleImage } from "@/composables/useConsoleImage";
+import MoleculeHeader from "@/components/molecule/MoleculeHeader.vue";
 
 // Data
 const route = useRoute();
@@ -22,7 +19,7 @@ const exampleDataError = ref(null);
 
 // Hooks
 onBeforeMount(() => {
-  useConsoleImage(exampleLogo);
+  initApp();
   getExampleData();
 });
 
@@ -49,7 +46,7 @@ const getExampleData = () => {
 </script>
 
 <template>
-  <TemplateHeader />
+  <MoleculeHeader />
 
   <RouterView v-slot="{ Component }">
     <main :class="`page ${getPageName}`">

diff --git a/src/assets/images/ExampleLogo.svg b/src/assets/images/ExampleLogo.svg
diff --git a/src/assets/scss/_core/_index.scss b/src/assets/scss/_core/_index.scss
@@ -0,0 +1,9 @@
+/* ==========================================================================
+   STYLES: Default definitions to global scope
+
+   Edit carefully.
+   ========================================================================== */
+
+@import "style.defaults";
+@import "style.helpers";
+@import "style.print";
diff --git a/src/assets/scss/_core/_style.defaults.scss b/src/assets/scss/_core/_style.defaults.scss
@@ -0,0 +1,82 @@
+/* ==========================================================================
+   STYLES: Default definitions
+
+   Common default definitions.
+   Edit carefully.
+   ========================================================================== */
+
+// Core
+html {
+  display: flex;
+  flex: 1;
+  font-size: 62.5%;
+}
+
+body {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: grid.$min-width;
+  min-height: grid.$min-height;
+  font-style: normal;
+  font-size: 1.6rem;
+  line-height: 1;
+  color: colors.$font-main;
+  background-color: colors.$bg-body;
+  scroll-behavior: smooth;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 100%;
+}
+
+main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+// Links
+a {
+  color: colors.$link-main;
+  transition: color grid.$transition;
+  text-decoration: none;
+
+  &:hover {
+    color: colors.$link-main-hover;
+  }
+
+  &:active,
+  &.router-link-exact-active {
+    color: colors.$link-main-active;
+    cursor: default;
+    text-decoration: none;
+  }
+}
+
+// Selection Highlight
+::selection {
+  background-color: colors.$bg-selection;
+  color: colors.$font-selection;
+  text-shadow: none;
+}
+
+// Fade + Blur Transition
+.fade-enter-active,
+.fade-leave-active {
+  transition: all grid.$transition;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
diff --git a/src/assets/scss/_style.helpers.scss → src/assets/scss/_core/_style.helpers.scss b/src/assets/scss/_style.helpers.scss → src/assets/scss/_core/_style.helpers.scss
@@ -1,5 +1,8 @@
 /* ==========================================================================
-   Helper classes
+   STYLE: Helpers
+
+   CSS Helpers.
+   Edit carefully.
    ========================================================================== */
 
 // Hide visually and from screen readers

diff --git a/src/assets/scss/_style.print.scss → src/assets/scss/_core/_style.print.scss b/src/assets/scss/_style.print.scss → src/assets/scss/_core/_style.print.scss
@@ -1,5 +1,8 @@
 /* ==========================================================================
-   Print styles
+   STYLE: Print styles
+
+   Media queries for printing.
+   Edit carefully.
    ========================================================================== */
 
 @media print {

diff --git a/src/assets/scss/_style.common.scss b/src/assets/scss/_style.common.scss
diff --git a/src/assets/scss/_theme/_index.scss b/src/assets/scss/_theme/_index.scss
@@ -0,0 +1,8 @@
+/* ==========================================================================
+   STYLES: Custom theme styles
+
+   Feel free to customize your app ^-^
+   ========================================================================== */
+
+@import "style.fonts";
+@import "style.theme";
diff --git a/src/assets/scss/_style.fonts.scss → src/assets/scss/_theme/_style.fonts.scss b/src/assets/scss/_style.fonts.scss → src/assets/scss/_theme/_style.fonts.scss
@@ -1,5 +1,7 @@
 /* ==========================================================================
-   Imported WebFonts
+   MIXIN: Imported WebFonts
+
+   Global fonts import from /assets/fonts folder.
    ========================================================================== */
 
 @mixin font($name, $style, $weight, $url) {
@@ -9,8 +11,7 @@
     font-weight: $weight;
     src: local($name), url("@/assets/fonts/" + $url) format("woff2");
     font-display: swap;
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
 }