From ffe260f4a02238cb83cf92ed06c4f9c75ba189a4 Mon Sep 17 00:00:00 2001 From: MAZE Date: Mon, 20 May 2024 13:14:42 +0430 Subject: [PATCH] refactor: migrate to Astro components --- src/components/about.astro | 160 ++++++++++++++++++++++++ src/components/about/about.module.css | 96 -------------- src/components/about/about.tsx | 60 --------- src/components/about/index.ts | 1 - src/components/donate.astro | 57 +++++++++ src/components/donate/donate.module.css | 36 ------ src/components/donate/donate.tsx | 22 ---- src/components/donate/index.ts | 1 - src/components/footer.astro | 31 +++++ src/components/footer/footer.module.css | 17 --- src/components/footer/footer.tsx | 15 --- src/components/footer/index.ts | 1 - src/components/hero.astro | 142 +++++++++++++++++++++ src/components/hero/hero.module.css | 120 ------------------ src/components/hero/hero.tsx | 42 ------- src/components/hero/index.ts | 1 - src/components/source.astro | 101 +++++++++++++++ src/components/source/index.ts | 1 - src/components/source/source.module.css | 70 ----------- src/components/source/source.tsx | 32 ----- src/pages/index.astro | 15 ++- 21 files changed, 498 insertions(+), 523 deletions(-) create mode 100644 src/components/about.astro delete mode 100644 src/components/about/about.module.css delete mode 100644 src/components/about/about.tsx delete mode 100644 src/components/about/index.ts create mode 100644 src/components/donate.astro delete mode 100644 src/components/donate/donate.module.css delete mode 100644 src/components/donate/donate.tsx delete mode 100644 src/components/donate/index.ts create mode 100644 src/components/footer.astro delete mode 100644 src/components/footer/footer.module.css delete mode 100644 src/components/footer/footer.tsx delete mode 100644 src/components/footer/index.ts create mode 100644 src/components/hero.astro delete mode 100644 src/components/hero/hero.module.css delete mode 100644 src/components/hero/hero.tsx delete mode 100644 src/components/hero/index.ts create mode 100644 src/components/source.astro delete mode 100644 src/components/source/index.ts delete mode 100644 src/components/source/source.module.css delete mode 100644 src/components/source/source.tsx diff --git a/src/components/about.astro b/src/components/about.astro new file mode 100644 index 0000000..a3ae3d7 --- /dev/null +++ b/src/components/about.astro @@ -0,0 +1,160 @@ +--- +import { Container } from '@/components/container'; + +import { count as soundCount } from '@/lib/sounds'; + +const count = soundCount(); + +const paragraphs = [ + { + body: 'Craving a calming escape from the daily grind? Do you need the perfect soundscape to boost your focus or lull you into peaceful sleep? Look no further than Moodist, your free and open-source ambient sound generator! Ditch the subscriptions and registrations – with Moodist, you unlock a world of soothing and immersive audio experiences, entirely for free.', + title: 'Free Ambient Sounds', + }, + { + body: `Dive into an expansive library of ${count} carefully curated sounds. Nature lovers will find solace in the gentle murmur of streams, the rhythmic crash of waves, or the crackling warmth of a campfire. Cityscapes come alive with the soft hum of cafes, the rhythmic clatter of trains, or the calming white noise of traffic. And for those seeking deeper focus or relaxation, Moodist offers binaural beats and color noise designed to enhance your state of mind.`, + title: 'Carefully Curated Sounds', + }, + { + body: 'The beauty of Moodist lies in its simplicity and customization. No complex menus or confusing options – just choose your desired sounds, adjust the volume balance, and hit play. Want to blend the gentle chirping of birds with the soothing sound of rain? No problem! Layer as many sounds as you like to create your personalized soundscape oasis.', + title: 'Create Your Soundscape', + }, + // { + // body: 'Moodist goes beyond just ambient sounds by offering a suite of productivity tools to help you stay organized and focused. Utilize the built-in pomodoro timer to structure your workday in focused intervals, jot down thoughts and ideas in the simple notepad, and keep track of your tasks with the handy to-do list. These tools seamlessly integrate with the ambient soundscapes, allowing you to create a personalized environment that fosters both focus and relaxation.', + // title: 'A Productivity Toolbox', + // }, + { + body: "Whether you're looking to unwind after a long day, enhance your focus during work, or lull yourself into a peaceful sleep, Moodist has the perfect soundscape waiting for you. The best part? It's completely free and open-source, so you can enjoy its benefits without any strings attached. Start using Moodist today and discover your new haven of tranquility and focus!", + title: 'Sounds for Every Moment', + }, +]; +--- + +
+
+ + + { + paragraphs.map((paragraph, index) => ( +
+
+ 0{index + 1} / 0{paragraphs.length} +
+ +

{paragraph.title}

+

{paragraph.body}

+
+ )) + } + + + +
+ + + + diff --git a/src/components/about/about.module.css b/src/components/about/about.module.css deleted file mode 100644 index a9571dc..0000000 --- a/src/components/about/about.module.css +++ /dev/null @@ -1,96 +0,0 @@ -.about { - padding-top: 10px; - - & .effect { - position: sticky; - top: 0; - height: 80px; - background: linear-gradient(var(--color-neutral-50), transparent); - } - - & .paragraph { - padding: 30px 0; - background: linear-gradient( - transparent, - var(--color-neutral-50) 10%, - var(--color-neutral-50) 90%, - transparent - ); - - &:last-of-type { - padding-bottom: 0; - } - - & .counter { - width: max-content; - padding: 6px 16px; - margin-bottom: 16px; - font-size: var(--font-xsm); - color: var(--color-foreground-subtle); - background: linear-gradient(var(--color-neutral-100), transparent); - border: 1px solid var(--color-neutral-300); - border-radius: 20px 20px 20px 8px; - - & span { - font-weight: 500; - color: var(--color-foreground); - } - } - - & .title { - margin-bottom: 8px; - font-family: var(--font-heading); - font-size: var(--font-md); - font-weight: 600; - } - - & .body { - line-height: 1.6; - color: var(--color-foreground-subtle); - } - } - - .button { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding: 10px 16px; - margin-top: 20px; - font-size: var(--font-xsm); - font-weight: 500; - color: var(--color-foreground); - cursor: pointer; - background-color: transparent; - border: 1px solid var(--color-neutral-200); - border-radius: 50px; - outline: none; - transition: 0.2s; - - &::before { - position: absolute; - top: -1px; - left: 50%; - width: 70%; - height: 1px; - content: ''; - background: linear-gradient( - 90deg, - transparent, - var(--color-neutral-300), - transparent - ); - transform: translateX(-50%); - } - - &:hover, - &:focus-visible { - background-color: var(--color-neutral-100); - } - - &:focus-visible { - outline: 2px solid var(--color-neutral-400); - outline-offset: 2px; - } - } -} diff --git a/src/components/about/about.tsx b/src/components/about/about.tsx deleted file mode 100644 index a850bff..0000000 --- a/src/components/about/about.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { Container } from '@/components/container'; -import { count as soundCount } from '@/lib/sounds'; - -import styles from './about.module.css'; - -export function About() { - const count = soundCount(); - - const paragraphs = [ - { - body: 'Craving a calming escape from the daily grind? Do you need the perfect soundscape to boost your focus or lull you into peaceful sleep? Look no further than Moodist, your free and open-source ambient sound generator! Ditch the subscriptions and registrations – with Moodist, you unlock a world of soothing and immersive audio experiences, entirely for free.', - title: 'Free Ambient Sounds', - }, - { - body: `Dive into an expansive library of ${count} carefully curated sounds. Nature lovers will find solace in the gentle murmur of streams, the rhythmic crash of waves, or the crackling warmth of a campfire. Cityscapes come alive with the soft hum of cafes, the rhythmic clatter of trains, or the calming white noise of traffic. And for those seeking deeper focus or relaxation, Moodist offers binaural beats and color noise designed to enhance your state of mind.`, - title: 'Carefully Curated Sounds', - }, - { - body: 'The beauty of Moodist lies in its simplicity and customization. No complex menus or confusing options – just choose your desired sounds, adjust the volume balance, and hit play. Want to blend the gentle chirping of birds with the soothing sound of rain? No problem! Layer as many sounds as you like to create your personalized soundscape oasis.', - title: 'Create Your Soundscape', - }, - // { - // body: 'Moodist goes beyond just ambient sounds by offering a suite of productivity tools to help you stay organized and focused. Utilize the built-in pomodoro timer to structure your workday in focused intervals, jot down thoughts and ideas in the simple notepad, and keep track of your tasks with the handy to-do list. These tools seamlessly integrate with the ambient soundscapes, allowing you to create a personalized environment that fosters both focus and relaxation.', - // title: 'A Productivity Toolbox', - // }, - { - body: "Whether you're looking to unwind after a long day, enhance your focus during work, or lull yourself into a peaceful sleep, Moodist has the perfect soundscape waiting for you. The best part? It's completely free and open-source, so you can enjoy its benefits without any strings attached. Start using Moodist today and discover your new haven of tranquility and focus!", - title: 'Sounds for Every Moment', - }, - ]; - - const handleClick = () => { - const app = document.getElementById('app'); - - app?.scrollIntoView(); - }; - - return ( -
-
- - - {paragraphs.map((paragraph, index) => ( -
-
- 0{index + 1} / 0{paragraphs.length} -
- -

{paragraph.title}

-

{paragraph.body}

-
- ))} - - - -
- ); -} diff --git a/src/components/about/index.ts b/src/components/about/index.ts deleted file mode 100644 index 4629637..0000000 --- a/src/components/about/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { About } from './about'; diff --git a/src/components/donate.astro b/src/components/donate.astro new file mode 100644 index 0000000..f32e970 --- /dev/null +++ b/src/components/donate.astro @@ -0,0 +1,57 @@ +--- +import { Container } from './container'; +--- + + +
+

+ Enjoy Moodist?{' '} + + Support with a donation! + +

+
+ + + diff --git a/src/components/donate/donate.module.css b/src/components/donate/donate.module.css deleted file mode 100644 index aaf64c5..0000000 --- a/src/components/donate/donate.module.css +++ /dev/null @@ -1,36 +0,0 @@ -.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; - } - } -} diff --git a/src/components/donate/donate.tsx b/src/components/donate/donate.tsx deleted file mode 100644 index bd7f4c4..0000000 --- a/src/components/donate/donate.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Container } from '@/components/container'; - -import styles from './donate.module.css'; - -export function Donate() { - return ( - -
-

- Enjoy Moodist?{' '} - - Support with a donation! - -

-
- - ); -} diff --git a/src/components/donate/index.ts b/src/components/donate/index.ts deleted file mode 100644 index a37b9c0..0000000 --- a/src/components/donate/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Donate } from './donate'; diff --git a/src/components/footer.astro b/src/components/footer.astro new file mode 100644 index 0000000..bfed23f --- /dev/null +++ b/src/components/footer.astro @@ -0,0 +1,31 @@ +--- +import { Container } from './container'; +--- + + + + diff --git a/src/components/footer/footer.module.css b/src/components/footer/footer.module.css deleted file mode 100644 index 0347592..0000000 --- a/src/components/footer/footer.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.footer { - display: flex; - align-items: center; - height: 100px; - - & p { - font-size: var(--font-sm); - color: var(--color-foreground-subtle); - text-align: center; - - & a { - font-weight: 500; - color: var(--color-foreground); - text-decoration: none; - } - } -} diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx deleted file mode 100644 index cd2f6f3..0000000 --- a/src/components/footer/footer.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Container } from '@/components/container'; - -import styles from './footer.module.css'; - -export function Footer() { - return ( - - ); -} diff --git a/src/components/footer/index.ts b/src/components/footer/index.ts deleted file mode 100644 index 4248c0b..0000000 --- a/src/components/footer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Footer } from './footer'; diff --git a/src/components/hero.astro b/src/components/hero.astro new file mode 100644 index 0000000..df30893 --- /dev/null +++ b/src/components/hero.astro @@ -0,0 +1,142 @@ +--- +import { BsSoundwave } from 'react-icons/bs/index'; + +import { Container } from './container'; + +import { count as soundCount } from '@/lib/sounds'; + +const count = soundCount(); +--- + +
+ +
+ + +
+
+

Moodist

+
+
+ +

Ambient sounds for focus and calm.

+ +

+ + + + {count} Sounds +

+
+ +
+ + diff --git a/src/components/hero/hero.module.css b/src/components/hero/hero.module.css deleted file mode 100644 index 899c887..0000000 --- a/src/components/hero/hero.module.css +++ /dev/null @@ -1,120 +0,0 @@ -.hero { - text-align: center; - - .container { - position: relative; - padding: 100px 0 80px; - - /* padding: 120px 0 60px; */ - - & .pattern { - position: absolute; - top: 0; - left: 0; - z-index: -1; - width: 100%; - height: 100%; - background-image: radial-gradient( - var(--color-neutral-300) 5%, - transparent 5% - ); - background-position: top center; - background-size: 31px 31px; - opacity: 0.9; - mask-image: linear-gradient(#fff, transparent, transparent); - } - } - - & .logo { - display: block; - width: 45px; - margin: 0 auto 12px; - } - - & .title { - display: flex; - column-gap: 15px; - align-items: center; - - & div { - flex-grow: 1; - height: 1px; - - &.left { - background: linear-gradient( - 90deg, - transparent, - transparent, - var(--color-neutral-200), - var(--color-neutral-300) - ); - } - - &.right { - background: linear-gradient( - 90deg, - var(--color-neutral-300), - var(--color-neutral-200), - transparent, - transparent - ); - } - } - - & h2 { - font-family: var(--font-display); - font-size: var(--font-2xlg); - font-weight: 600; - } - } - - & .desc { - margin-top: 5px; - line-height: 1.6; - color: var(--color-foreground-subtle); - } - - & .sounds { - position: relative; - display: flex; - column-gap: 8px; - align-items: center; - justify-content: center; - width: max-content; - height: 28px; - padding-right: 12px; - margin: 20px auto 0; - font-size: var(--font-xsm); - color: var(--color-foreground-subtle); - background: linear-gradient(var(--color-neutral-100), transparent); - border: 1px solid var(--color-neutral-200); - border-radius: 100px; - - & .icon { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - padding: 0 10px; - color: var(--color-foreground); - border-right: 1px solid var(--color-neutral-200); - border-radius: 0 100px 100px 0; - } - - &::before { - position: absolute; - top: -1px; - left: 50%; - width: 70%; - height: 1px; - content: ''; - background: linear-gradient( - 90deg, - transparent, - var(--color-neutral-400), - transparent - ); - transform: translateX(-50%); - } - } -} diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx deleted file mode 100644 index cc4cd2c..0000000 --- a/src/components/hero/hero.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { useMemo } from 'react'; -import { BsSoundwave } from 'react-icons/bs/index'; - -import { Container } from '@/components/container'; -import { count as soundCount } from '@/lib/sounds'; - -import styles from './hero.module.css'; - -export function Hero() { - const count = useMemo(soundCount, []); - - return ( -
- - {/*
*/} - - Faded Moodist Logo - -
-
-

Moodist

-
-
- -

Ambient sounds for focus and calm.

- -

- - - - {count} Sounds -

- -
- ); -} diff --git a/src/components/hero/index.ts b/src/components/hero/index.ts deleted file mode 100644 index 1e9ccae..0000000 --- a/src/components/hero/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Hero } from './hero'; diff --git a/src/components/source.astro b/src/components/source.astro new file mode 100644 index 0000000..60f6e53 --- /dev/null +++ b/src/components/source.astro @@ -0,0 +1,101 @@ +--- +import { FaGithub } from 'react-icons/fa/index'; + +import { SpecialButton } from './special-button'; +import { Container } from './container'; +--- + +
+ +
+
+
+
+ +
+
+ +

Open Source

+

Moodist is free and open-source!

+ +
+ + Source Code + +
+
+ +
+ + diff --git a/src/components/source/index.ts b/src/components/source/index.ts deleted file mode 100644 index f7ee0ff..0000000 --- a/src/components/source/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Source } from './source'; diff --git a/src/components/source/source.module.css b/src/components/source/source.module.css deleted file mode 100644 index b35830e..0000000 --- a/src/components/source/source.module.css +++ /dev/null @@ -1,70 +0,0 @@ -.source { - /* margin-top: 80px; */ - - margin-top: 40px; - - & .wrapper { - position: relative; - padding: 0 20px 40px; - background: linear-gradient(transparent, rgb(24 24 27 / 70%)); - border-radius: 0 0 20px 20px; - - &::after { - position: absolute; - bottom: 0; - left: 50%; - width: 70%; - height: 1px; - content: ''; - background: linear-gradient( - 90deg, - transparent, - var(--color-neutral-400), - transparent - ); - transform: translateX(-50%); - } - } - - & .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 { - margin: 16px auto 0; - } -} diff --git a/src/components/source/source.tsx b/src/components/source/source.tsx deleted file mode 100644 index 65e7b8d..0000000 --- a/src/components/source/source.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { FaGithub } from 'react-icons/fa/index'; - -import { Container } from '@/components/container'; -import { SpecialButton } from '@/components/special-button'; - -import styles from './source.module.css'; - -export function Source() { - return ( -
- -
-
-
-
- -
-
- -

Open Source

-

Moodist is free and open-source!

- - Source Code - -
- -
- ); -} diff --git a/src/pages/index.astro b/src/pages/index.astro index 9b997ca..94e2adc 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,21 +1,20 @@ --- import Layout from '@/layouts/layout.astro'; -import { Hero } from '@/components/hero'; +import Donate from '@/components/donate.astro'; +import Hero from '@/components/hero.astro'; +import About from '@/components/about.astro'; +import Source from '@/components/source.astro'; +import Footer from '@/components/footer.astro'; + import { App } from '@/components/app'; -import { Source } from '@/components/source'; -import { Donate } from '@/components/donate'; -import { About } from '@/components/about'; -// import { Features } from '@/components/features'; -import { Footer } from '@/components/footer'; --- - - +