chore(release): 1.3.1

CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.3.1](https://github.com/remvze/moodist/compare/v1.3.0...v1.3.1) (2024-02-01)
+
+
+### ✨ Features
+
+* add donate item ([f12ca48](https://github.com/remvze/moodist/commit/f12ca4806c9279f69f298bef770f8cac69a0860a))
+* add donate section ([d449c29](https://github.com/remvze/moodist/commit/d449c29321024a43517e92cc59223b4b22fe2e82))
+* add donation header ([17b4f25](https://github.com/remvze/moodist/commit/17b4f25ff10e09a917203e67cf963cac8358de1a))
+
+
+### 🐛 Bug Fixes
+
+* coffee typo ([8e02910](https://github.com/remvze/moodist/commit/8e0291004a90e55b67a921b9ffb483b409109ae4))
+* complete donation links ([e6f768a](https://github.com/remvze/moodist/commit/e6f768a5e6dc983ae04b70f6c434fd4c13aeb506))
+
+
+### 🚚 Chores
+
+* add donation link to README file ([1f806c4](https://github.com/remvze/moodist/commit/1f806c4e561d79a00850130eda09376299d85ed2))
+
 ## [1.3.0](https://github.com/remvze/moodist/compare/v1.2.0...v1.3.0) (2024-02-01)
 
 

README.md

@@ -2,5 +2,5 @@
   <img src="/assets/banner.svg" alt="Moodist Logo Banner" />
   <h2>Moodist 🌲</h2>
   <p>Ambient sounds for focus and calm.</p>
-  <a href="https://moodist.app">Visit <strong>Moodist</strong> →</a>
+  <a href="https://moodist.app">Visit <strong>Moodist</strong></a> | <a href="https://buymeacoffee.com/remvze">Buy Me a Coffee</a>
 </div>

package-lock.json

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

package.json

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

src/components/categories/categories.tsx

@@ -1,6 +1,7 @@
 import { AnimatePresence } from 'framer-motion';
 
 import { Category } from '@/components/category';
+import { Donate } from './donate';
 
 import type { Categories } from '@/data/types';
 
@@ -11,12 +12,16 @@ interface CategoriesProps {
 export function Categories({ categories }: CategoriesProps) {
   return (
     <AnimatePresence initial={false}>
-      {categories.map(category => (
-        <Category
-          functional={category.id !== 'favorites'}
-          {...category}
-          key={category.id}
-        />
+      {categories.map((category, index) => (
+        <>
+          <Category
+            functional={category.id !== 'favorites'}
+            {...category}
+            key={category.id}
+          />
+
+          {index === 3 && <Donate />}
+        </>
       ))}
     </AnimatePresence>
   );

src/components/categories/donate/donate.module.css

@@ -0,0 +1,63 @@
+.donate {
+  & .iconContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 15px;
+
+    & .tail {
+      width: 1px;
+      height: 75px;
+      background: linear-gradient(transparent, var(--color-neutral-300));
+    }
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background-color: var(--color-neutral-100);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+    }
+  }
+
+  & .title {
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & .desc {
+    margin-top: 8px;
+    color: var(--color-foreground-subtle);
+    text-align: center;
+  }
+
+  .button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: max-content;
+    height: 40px;
+    padding: 0 20px;
+    margin: 16px auto 0;
+    font-size: var(--font-xsm);
+    font-weight: 500;
+    color: var(--color-neutral-subtle);
+    text-decoration: none;
+    cursor: pointer;
+    background-color: var(--color-neutral-50);
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 50px;
+    transition: 0.2s;
+
+    &:hover {
+      background-color: var(--color-neutral-100);
+    }
+  }
+}

src/components/categories/donate/donate.tsx

@@ -0,0 +1,27 @@
+import { FaCoffee } from 'react-icons/fa/index';
+
+import styles from './donate.module.css';
+
+export function Donate() {
+  return (
+    <div className={styles.donate}>
+      <div className={styles.iconContainer}>
+        <div className={styles.tail} />
+        <div className={styles.icon}>
+          <FaCoffee />
+        </div>
+      </div>
+
+      <h2 className={styles.title}>Support Me</h2>
+      <p className={styles.desc}>Help me keep Moodist ad-free.</p>
+      <a
+        className={styles.button}
+        href="https://buymeacoffee.com/remvze"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Donate Today
+      </a>
+    </div>
+  );
+}

src/components/categories/donate/index.ts

@@ -0,0 +1 @@
+export { Donate } from './donate';

src/components/donate.astro

@@ -0,0 +1,56 @@
+---
+import { Container } from '@/components/container';
+---
+
+<Container>
+  <section class="wrapper">
+    <p class="text">
+      Enjoy Moodist? <a
+        href="https://buymeacoffee.com/remvze"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Support with a donation!
+      </a>
+    </p>
+  </section>
+</Container>
+
+<style>
+  .wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 16px;
+    font-size: var(--font-xsm);
+    color: var(--color-foreground-subtle);
+
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 80%;
+      height: 1px;
+      content: '';
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-neutral-200),
+        transparent
+      );
+      transform: translateX(-50%);
+    }
+
+    & .text {
+      text-align: center;
+
+      & a {
+        font-weight: 500;
+        color: var(--color-foreground);
+        text-decoration: none;
+      }
+    }
+  }
+</style>

src/components/hero.astro

@@ -37,7 +37,7 @@ const count = soundCount();
 
 <style>
   .hero {
-    padding: 140px 0 60px;
+    padding: 100px 0 60px;
     text-align: center;
 
     & .logo {

src/components/menu/item/item.module.css

@@ -10,6 +10,7 @@
   line-height: 1;
   color: var(--color-foreground-subtle);
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
   background-color: transparent;
   border: 1px solid var(--color-neutral-200);

src/components/menu/item/item.tsx

@@ -1,16 +1,30 @@
 import styles from './item.module.css';
 
 interface ItemProps {
-  disabled: boolean;
+  disabled?: boolean;
+  href?: string;
   icon: React.ReactElement;
   label: string;
-  onClick: () => void;
+  onClick?: () => void;
 }
 
-export function Item({ disabled = false, icon, label, onClick }: ItemProps) {
+export function Item({
+  disabled = false,
+  href,
+  icon,
+  label,
+  onClick = () => {},
+}: ItemProps) {
+  const Comp = href ? 'a' : 'button';
+
   return (
-    <button className={styles.item} disabled={disabled} onClick={onClick}>
+    <Comp
+      className={styles.item}
+      disabled={disabled}
+      onClick={onClick}
+      {...(href ? { href, target: '_blank' } : {})}
+    >
       <span className={styles.icon}>{icon}</span> {label}
-    </button>
+    </Comp>
   );
 }

src/components/menu/items/donate.tsx

@@ -0,0 +1,13 @@
+import { SiBuymeacoffee } from 'react-icons/si/index';
+
+import { Item } from '../item';
+
+export function Donate() {
+  return (
+    <Item
+      href="https://buymeacoffee.com/remvze"
+      icon={<SiBuymeacoffee />}
+      label="Buy Me a Coffee"
+    />
+  );
+}

src/components/menu/items/index.ts

@@ -1,2 +1,3 @@
 export { Shuffle as ShuffleItem } from './shuffle';
 export { Share as ShareItem } from './share';
+export { Donate as DonateItem } from './donate';

src/components/menu/menu.tsx

@@ -14,7 +14,7 @@ import {
   FloatingFocusManager,
 } from '@floating-ui/react';
 
-import { ShuffleItem, ShareItem } from './items';
+import { ShuffleItem, ShareItem, DonateItem } from './items';
 import { ShareLinkModal } from '@/components/modals/share-link';
 
 import { slideY, fade, mix } from '@/lib/motion';
@@ -76,6 +76,7 @@ export function Menu() {
                 >
                   <ShareItem open={() => setShowShareLink(true)} />
                   <ShuffleItem />
+                  <DonateItem />
                 </motion.div>
               </div>
             </FloatingFocusManager>

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/layout.astro';
+import Donate from '@/components/donate.astro';
 import Hero from '@/components/hero.astro';
 import Footer from '@/components/footer.astro';
 import AboutSection from '@/components/sections/about.astro';
@@ -10,6 +11,7 @@ import { App } from '@/components/app';
 ---
 
 <Layout title="Moodist: Ambient Sounds for Focus and Calm">
+  <Donate />
   <Hero />
   <App client:load />
   <AboutSection />