From 19f762aa11e65d7d0fea647760df5759156a8c4d Mon Sep 17 00:00:00 2001 From: Cody Swartz Date: Sat, 6 Nov 2021 23:11:16 -0700 Subject: [PATCH] Show current version somewhere Fixes #41 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 : ( https://github.com/prettier/prettier/issues/4948 https://github.com/mrmlnc/vscode-scss/issues/127 https://github.com/sass/dart-sass/issues/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 --- components/github-badge.js | 51 ++++++++++++++------------------------ components/version.js | 14 +++++++++++ package.json | 4 +-- pages/index.js | 6 ++++- styles/Home.module.sass | 18 ++++++++++++++ 5 files changed, 58 insertions(+), 35 deletions(-) create mode 100644 components/version.js diff --git a/components/github-badge.js b/components/github-badge.js index e60311c..332cef4 100644 --- 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 ( -
- + -
+ + + ) } diff --git a/components/version.js b/components/version.js new file mode 100644 index 0000000..2e17185 --- /dev/null +++ b/components/version.js @@ -0,0 +1,14 @@ +import packageInfo from '../package.json' +const { version } = packageInfo + +const Version = () => ( + + v{version} + +) + +export default Version diff --git a/package.json b/package.json index b717f8f..35df029 100644 --- 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 index 43c56ba..e02b9c8 100644 --- 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() { - +
+ + +
{randomImage && ( * + border-radius: 5px + padding: 4px + background: white + opacity: 0.333 + width: fit-content + &:hover + opacity: 1