Migrating to scss, added a store plugin that doesn't really work

If I have the energy in the future I may have some ideas on how to actually make the store plugin work properly
not-night-but · Jul 16, 2023 · 68929c2 · 68929c2
1 parent 9e9bea9
commit 68929c2
Show file tree

Hide file tree

Showing 23 changed files with 188 additions and 129 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v18.16.0
diff --git a/index.html b/index.html
@@ -2,8 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="./src-tauri/icons/icon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./src/assets/styles/app.scss">
     <title>Hysteria</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@tauri-apps/cli": "^1.0.3",
     "pinia": "^2.0.36",
     "rxjs": "~7.5.6",
+    "sass-loader": "^13.3.2",
     "ts-md5": "^1.2.11",
     "tslib": "^2.4.0",
     "vue": "^3.3.2",
@@ -35,7 +36,7 @@
     "eslint-plugin-vue": "^9.11.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
-    "sass": "^1.62.1",
+    "sass": "^1.63.6",
     "typescript": "~5.0.4",
     "vite": "^4.3.5",
     "vue-tsc": "^1.6.4"

diff --git a/src/App.vue b/src/App.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import CommitViewer from './components/CommitViewer.vue';
+import CommitViewer from './components/commits/CommitViewer.vue';
 
 export default {
   components: {
@@ -14,7 +14,9 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss">
+@import 'assets/styles/app.scss';
+
 .app {
   margin: 0;
   padding: 0;

diff --git a/src/assets/base.css b/src/assets/base.css
diff --git a/src/assets/main.css b/src/assets/main.css
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
@@ -0,0 +1,32 @@
+$vt-c-white: #ffffff;
+$vt-c-white-soft: #f8f8f8;
+$vt-c-white-mute: #f2f2f2;
+
+$vt-c-black: #000000;
+$vt-c-black-soft: #222222;
+$vt-c-black-mute: #282828;
+
+$vt-c-indigo: #2c3e50;
+
+$vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+$vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+$vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+$vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+$vt-c-text-light-1: $vt-c-indigo;
+$vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+$vt-c-text-dark-1: $vt-c-white;
+$vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+
+
+$color-background: $vt-c-black;
+$color-background-soft: $vt-c-black-soft;
+$color-background-mute: $vt-c-black-mute;
+
+$color-border: $vt-c-divider-dark-2;
+$color-border-hover: $vt-c-divider-dark-1;
+
+$color-heading: $vt-c-text-dark-1;
+$color-text: $vt-c-text-dark-1;
+
+$section-gap: 160px;
diff --git a/src/assets/styles/_widgets.scss b/src/assets/styles/_widgets.scss
diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
@@ -0,0 +1,75 @@
+@import './_variables.scss';
+@import './_widgets.scss';
+
+@media (prefers-color-scheme: light) {
+  :root {
+    $color-background: $vt-c-white;
+    $color-background-soft: $vt-c-white-soft;
+    $color-background-mute: $vt-c-white-mute;
+
+    $color-border: $vt-c-divider-light-2;
+    $color-border-hover: $vt-c-divider-light-1;
+
+    $color-heading: $vt-c-text-light-1;
+    $color-text: $vt-c-text-light-2;
+  }
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  background: $color-background;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: $color-text;
+  background: $color-background;
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
diff --git a/src/components/CommitGraph.vue → src/components/commits/CommitGraph.vue b/src/components/CommitGraph.vue → src/components/commits/CommitGraph.vue
@@ -19,10 +19,10 @@
 </template>
 
 <script lang="ts">
-import { useGitDataStore } from '../stores/gitData';
+import { useGitDataStore } from '@/stores/gitData';
 import { mapState, mapActions } from 'pinia';
-import { Branch, PlacedLine, VertexData, Vertex } from '../lib/graph/classes';
-import { useAppStore } from '../stores/app';
+import { Branch, PlacedLine, VertexData, Vertex } from '@/lib/graph/classes';
+import { useAppStore } from '@/stores/app';
 
 
 export default {

diff --git a/src/components/CommitTable.vue → src/components/commits/CommitTable.vue b/src/components/CommitTable.vue → src/components/commits/CommitTable.vue
@@ -22,10 +22,10 @@
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia';
-import { useGitDataStore } from '../stores/gitData';
-import { BranchData, Commit, Vertex } from '../lib/graph/classes';
+import { BranchData, Commit, Vertex } from '@/lib/graph/classes';
 import { Md5 } from 'ts-md5';
-import { useAppStore } from '../stores/app';
+import { useGitDataStore } from '@/stores/gitData';
+import { useAppStore } from '@/stores/app';
 
 export default {
   data() {
@@ -53,7 +53,7 @@ export default {
     },
     branchesMap() {
       if (this.commits.length > 0) {
-        return new Map(this.branches?.map(branch => [this.commits.findIndex(commit => commit.sha === branch.tip_id), branch]));
+        return new Map(this.branches?.map((branch: BranchData) => [this.commits.findIndex((commit: Commit) => commit.sha === branch.tip_id), branch]));
       } else {
         return new Map();
       }

diff --git a/src/components/CommitViewer.vue → src/components/commits/CommitViewer.vue b/src/components/CommitViewer.vue → src/components/commits/CommitViewer.vue
@@ -13,7 +13,7 @@
 // import { invoke } from '@tauri-apps/api';
 import CommitGraph from './CommitGraph.vue';
 import CommitTable from './CommitTable.vue';
-import { useGitDataStore } from '../stores/gitData';
+import { useGitDataStore } from '@/stores/gitData';
 
 export default {
   components: {

diff --git a/src/components/interface/AppSidebar.vue b/src/components/interface/AppSidebar.vue
diff --git a/src/components/interface/AppTopbar.vue b/src/components/interface/AppTopbar.vue
diff --git a/src/components/repository/BranchList.vue b/src/components/repository/BranchList.vue
diff --git a/src/components/repository/ChangesList.vue b/src/components/repository/ChangesList.vue
diff --git a/src/main.ts b/src/main.ts
@@ -1,14 +1,16 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import HysteriaStorePlugin from './plugins/HysteriaStorePlugin'
 
 import App from './App.vue'
-import router from './router'
+// import router from './router'
 
-import './assets/main.css'
+import './assets/styles/app.scss'
 
 const app = createApp(App)
 
 app.use(createPinia())
-app.use(router)
+// app.use(router)
+app.use(HysteriaStorePlugin)
 
 app.mount('#app')
diff --git a/src/plugins/HysteriaStorePlugin.ts b/src/plugins/HysteriaStorePlugin.ts
@@ -0,0 +1,20 @@
+import { useGitDataStore } from '../stores/gitData';
+import { useAppStore } from '../stores/app';
+
+export const HysteriaStorePlugin = {
+  gitData() {
+    return useGitDataStore();
+  },
+  app() {
+    return useAppStore();
+  }
+}
+
+export type HysteriaStorePlugin = typeof HysteriaStorePlugin;
+
+export default {
+  // @ts-expect-error
+  install(app) {
+    app.config.globalProperties.$store = HysteriaStorePlugin;
+  }
+}
diff --git a/src/shims-plugins.d.ts b/src/shims-plugins.d.ts
@@ -0,0 +1,7 @@
+import { HysteriaStorePlugin } from './plugins/HysteriaStorePlugin';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $store: HysteriaStorePlugin
+  }
+}
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
@@ -0,0 +1 @@
+declare module '*.vue'; 
diff --git a/tsconfig.json b/tsconfig.json
@@ -21,7 +21,12 @@
     "lib": [
       "es2022",
       "dom"
-    ]
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

diff --git a/vite.config.js b/vite.config.js
@@ -10,5 +10,14 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @import "./src/assets/styles/_variables.scss";
+        `
+      }
+    }
   }
 })