chore(release): 1.4.3

.github/workflows/build_docker.yml

@@ -20,15 +20,21 @@ jobs:
           username: ${{github.actor}}
           password: ${{secrets.ACCESS_TOKEN}}
 
-      - name: 'Build Inventory Image'
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: 'Build and push Inventory Image'
         run: |
           IMAGE_NAME="ghcr.io/remvze/moodist"
 
           GIT_TAG=${{ github.ref }}
           GIT_TAG=${GIT_TAG#refs/tags/}
 
-          docker build . --tag $IMAGE_NAME:latest
-          docker push $IMAGE_NAME:latest
-
-          docker build . --tag $IMAGE_NAME:$GIT_TAG
-          docker push $IMAGE_NAME:$GIT_TAG
+          docker buildx build \
+            --platform linux/amd64,linux/arm64 \
+            -t $IMAGE_NAME:latest \
+            -t $IMAGE_NAME:$GIT_TAG \
+            --push .

CHANGELOG.md

@@ -2,6 +2,42 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.4.3](https://github.com/remvze/moodist/compare/v1.4.2...v1.4.3) (2024-04-11)
+
+
+### 🚚 Chores
+
+* remove arm/v7 ([fa9711a](https://github.com/remvze/moodist/commit/fa9711a1e09e6e979b420556160c3cd69a8c3775))
+
+### [1.4.2](https://github.com/remvze/moodist/compare/v1.4.1...v1.4.2) (2024-04-11)
+
+
+### 💄 Styling
+
+* change font path ([43ba975](https://github.com/remvze/moodist/commit/43ba9754085d7a710d3d629e70f873b16f267507))
+
+
+### 🚚 Chores
+
+* remove arm/v6 ([017c27f](https://github.com/remvze/moodist/commit/017c27fb2b20402553011db8f417717dcca6d447))
+
+### [1.4.1](https://github.com/remvze/moodist/compare/v1.4.0...v1.4.1) (2024-04-11)
+
+
+### ✨ Features
+
+* add toolbar and portal ([ede4801](https://github.com/remvze/moodist/commit/ede480186c4b3f187c82e1d64e4d521ee59da31a))
+
+
+### 💄 Styling
+
+* widen the container ([7ec7ea7](https://github.com/remvze/moodist/commit/7ec7ea74d53db85cffa3af646c03270793453009))
+
+
+### 🚚 Chores
+
+* change GitHub workflow ([faf7f78](https://github.com/remvze/moodist/commit/faf7f78b8c10cd7b3688ed5bba3d0c077c020ad2))
+
 ## [1.4.0](https://github.com/remvze/moodist/compare/v1.3.1...v1.4.0) (2024-02-29)
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "moodist",
-  "version": "1.4.0",
+  "version": "1.4.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "moodist",
-      "version": "1.4.0",
+      "version": "1.4.3",
       "dependencies": {
         "@astrojs/react": "^3.0.3",
         "@floating-ui/react": "0.26.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "moodist",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.4.3",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/components/app/app.tsx

@@ -9,9 +9,8 @@ import { Container } from '@/components/container';
 import { StoreConsumer } from '@/components/store-consumer';
 import { Buttons } from '@/components/buttons';
 import { Categories } from '@/components/categories';
-import { ScrollToTop } from '@/components/scroll-to-top';
 import { SharedModal } from '@/components/modals/shared';
-import { Menu } from '@/components/menu/menu';
+import { Toolbar } from '@/components/toolbar';
 import { SnackbarProvider } from '@/contexts/snackbar';
 
 import { sounds } from '@/data/sounds';
@@ -77,8 +76,7 @@ export function App() {
           <Categories categories={allCategories} />
         </Container>
 
-        <ScrollToTop />
-        <Menu />
+        <Toolbar />
         <SharedModal />
       </StoreConsumer>
     </SnackbarProvider>

src/components/container/container.module.css

@@ -6,4 +6,8 @@
   &.tight {
     max-width: 450px;
   }
+
+  &.wide {
+    max-width: 760px;
+  }
 }

src/components/container/container.tsx

@@ -6,11 +6,24 @@ interface ContainerProps {
   children: React.ReactNode;
   className?: string;
   tight?: boolean;
+  wide?: boolean;
 }
 
-export function Container({ children, className, tight }: ContainerProps) {
+export function Container({
+  children,
+  className,
+  tight,
+  wide,
+}: ContainerProps) {
   return (
-    <div className={cn(styles.container, className, tight && styles.tight)}>
+    <div
+      className={cn(
+        styles.container,
+        className,
+        tight && styles.tight,
+        wide && styles.wide,
+      )}
+    >
       {children}
     </div>
   );

src/components/menu/menu.module.css

@@ -1,13 +1,4 @@
 .wrapper {
-  position: fixed;
-  right: calc(50vw - 400px);
-  bottom: 20px;
-  z-index: 15;
-
-  @media (width <= 850px) {
-    right: 5vw;
-  }
-
   & .menuButton {
     display: flex;
     align-items: center;

src/components/modal/modal.tsx

@@ -2,6 +2,8 @@ import { useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { IoClose } from 'react-icons/io5/index';
 
+import { Portal } from '@/components/portal';
+
 import { fade, mix, slideY } from '@/lib/motion';
 import { cn } from '@/helpers/styles';
 
@@ -36,35 +38,37 @@ export function Modal({
   }, [show, lockBody]);
 
   return (
-    <AnimatePresence>
-      {show && (
-        <>
-          <motion.div
-            animate="show"
-            className={styles.overlay}
-            exit="hidden"
-            initial="hidden"
-            variants={variants.overlay}
-            onClick={onClose}
-            onKeyDown={onClose}
-          />
-          <div className={styles.modal}>
+    <Portal>
+      <AnimatePresence>
+        {show && (
+          <>
             <motion.div
               animate="show"
-              className={cn(styles.content, wide && styles.wide)}
+              className={styles.overlay}
               exit="hidden"
               initial="hidden"
-              variants={variants.modal}
-            >
-              <button className={styles.close} onClick={onClose}>
-                <IoClose />
-              </button>
+              variants={variants.overlay}
+              onClick={onClose}
+              onKeyDown={onClose}
+            />
+            <div className={styles.modal}>
+              <motion.div
+                animate="show"
+                className={cn(styles.content, wide && styles.wide)}
+                exit="hidden"
+                initial="hidden"
+                variants={variants.modal}
+              >
+                <button className={styles.close} onClick={onClose}>
+                  <IoClose />
+                </button>
 
-              {children}
-            </motion.div>
-          </div>
-        </>
-      )}
-    </AnimatePresence>
+                {children}
+              </motion.div>
+            </div>
+          </>
+        )}
+      </AnimatePresence>
+    </Portal>
   );
 }

src/components/portal/index.ts

@@ -0,0 +1 @@
+export { Portal } from './portal';

src/components/portal/portal.tsx

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+interface PortalProps {
+  children: React.ReactNode;
+}
+
+export function Portal({ children }: PortalProps) {
+  const [isClientSide, setIsClientSide] = useState(false);
+
+  useEffect(() => setIsClientSide(true), []);
+
+  return isClientSide ? createPortal(children, document.body) : null;
+}

src/components/scroll-to-top/scroll-to-top.module.css

@@ -1,8 +1,4 @@
 .button {
-  position: fixed;
-  bottom: 20px;
-  left: calc(50vw - 400px);
-  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,10 +12,6 @@
   border-radius: 50%;
   transition: 0.2s;
 
-  @media (width <= 850px) {
-    left: 5vw;
-  }
-
   &:hover {
     background-color: var(--color-neutral-200);
   }

src/components/scroll-to-top/scroll-to-top.tsx

@@ -31,7 +31,7 @@ export function ScrollToTop() {
 
   return (
     <AnimatePresence>
-      {isVisible && (
+      {isVisible ? (
         <motion.button
           animate="show"
           aria-label="Scroll to top"
@@ -43,6 +43,8 @@ export function ScrollToTop() {
         >
           <BiUpArrowAlt />
         </motion.button>
+      ) : (
+        <div />
       )}
     </AnimatePresence>
   );

src/components/toolbar/index.ts

@@ -0,0 +1 @@
+export { Toolbar } from './toolbar';

src/components/toolbar/toolbar.module.css

@@ -0,0 +1,13 @@
+.wrapper {
+  position: fixed;
+  bottom: 20px;
+  left: 0;
+  z-index: 15;
+  width: 100%;
+
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}

src/components/toolbar/toolbar.tsx

@@ -0,0 +1,16 @@
+import { Container } from '@/components/container';
+import { Menu } from '@/components/menu';
+import { ScrollToTop } from '@/components/scroll-to-top';
+
+import styles from './toolbar.module.css';
+
+export function Toolbar() {
+  return (
+    <div className={styles.wrapper}>
+      <Container className={styles.container} wide>
+        <ScrollToTop />
+        <Menu />
+      </Container>
+    </div>
+  );
+}

src/styles/fonts.css

@@ -21,7 +21,7 @@
   font-family: Inter;
   font-style: normal;
   font-weight: 500;
-  src: url('../fonts/inter-v13-latin-500.woff2') format('woff2');
+  src: url('/fonts/inter-v13-latin-500.woff2') format('woff2');
   font-display: swap;
 }