Show current version somewhere

Fixes #41 Updates redundant styles to a new container in index. I like the component not owning the styling as well. The container in index also handles flex styling on the children elements that are contained. Remove sass from prettier because it doesn't support sass 🤯 Relevant Discord Chat: found out while digging a few things that even though sass and scss are super close there's a lot less tooling and underlying architecture issues that lacks sass support :' ( I guess prettier doesn't support it; and likely because of these other underlying issues, I guess google is running the dart sass team but doesn't have time to do what we all need : ( prettier/prettier#4948 mrmlnc/vscode-scss#127 sass/dart-sass#88 Interesting long technical read though TLDR; needs to have support for ASTs which allow code tools to help code; dart has no easy way to expose it It's finally on a roadmap but then they said they won't ever get to it lol classic product things
LogicHappens · Nov 7, 2021 · 19f762a · 19f762a
1 parent cfa1230
commit 19f762a
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 35 deletions.
diff --git a/components/github-badge.js b/components/github-badge.js
@@ -1,38 +1,25 @@
 const GithubBadge = () => {
-  const quickStyles = {
-    position: 'fixed',
-    right: '4px',
-    top: '4px',
-    zIndex: '2',
-    background: 'white',
-    borderRadius: '5px',
-    padding: '2px',
-    opacity: '.333',
-  }
-
   return (
-    <div style={quickStyles}>
-      <a
-        href="https://github.com/LogicHappens/musical-conquest"
-        target="_blank"
-        rel="noreferrer"
-        style={{ display: 'flex' }}
+    <a
+      href="https://github.com/LogicHappens/musical-conquest"
+      target="_blank"
+      rel="noreferrer"
+      style={{ display: 'flex' }}
+    >
+      <svg
+        height="32"
+        aria-hidden="true"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="32"
+        data-view-component="true"
       >
-        <svg
-          height="32"
-          aria-hidden="true"
-          viewBox="0 0 16 16"
-          version="1.1"
-          width="32"
-          data-view-component="true"
-        >
-          <path
-            fillRule="evenodd"
-            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
-          ></path>
-        </svg>
-      </a>
-    </div>
+        <path
+          fillRule="evenodd"
+          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+        ></path>
+      </svg>
+    </a>
   )
 }
 

diff --git a/components/version.js b/components/version.js
@@ -0,0 +1,14 @@
+import packageInfo from '../package.json'
+const { version } = packageInfo
+
+const Version = () => (
+  <a
+    href="https://github.com/LogicHappens/musical-conquest/releases"
+    target="_blank"
+    rel="noreferrer"
+  >
+    v{version}
+  </a>
+)
+
+export default Version
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "musical-conquest",
-  "version": "0.1.0",
+  "version": "1.0.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -42,6 +42,6 @@
       "eslint --cache --fix",
       "jest --bail --findRelatedTests"
     ],
-    "*.{js,css,sass,scss,md,json}": "prettier --write"
+    "*.{js,css,scss,md,json}": "prettier --write"
   }
 }
diff --git a/pages/index.js b/pages/index.js
@@ -9,6 +9,7 @@ import { useRouter } from 'next/router'
 import { Context } from '../components/helpers/context'
 import { getRandomInt } from '@/lib/random'
 import GithubBadge from '@/components/github-badge'
+import Version from '@/components/version'
 
 export default function Home() {
   const { setAudio, currentSongHash, currentSong } = useContext(Context)
@@ -72,7 +73,10 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <GithubBadge />
+      <div className={styles.infos}>
+        <GithubBadge />
+        <Version />
+      </div>
 
       {randomImage && (
         <img

diff --git a/styles/Home.module.sass b/styles/Home.module.sass
@@ -51,3 +51,21 @@
       width: 100vw
       height: 100vh
       object-fit: cover
+
+.infos
+      position: fixed
+      right: 4px
+      top: 4px
+      z-index: 2
+      display: flex
+      flex-direction: column
+      align-items: flex-end
+      gap: 4px
+      &>*
+            border-radius: 5px
+            padding: 4px
+            background: white
+            opacity: 0.333
+            width: fit-content
+            &:hover
+                  opacity: 1