From 3d74c6f442458cbc16ede586587eaeca07175730 Mon Sep 17 00:00:00 2001 From: chimpdev Date: Mon, 15 Apr 2024 22:36:41 +0300 Subject: [PATCH 1/3] Remove open source announcement and relevant codes about newspaper --- .../app/components/Header/CollapsedHeader.jsx | 7 +- .../components/Header/NotCollapsedHeader.jsx | 5 +- .../app/components/Newspaper/OpenSource.jsx | 76 ------------------- client/app/page.js | 5 +- client/stores/newspaper/index.js | 6 -- 5 files changed, 3 insertions(+), 96 deletions(-) delete mode 100644 client/app/components/Newspaper/OpenSource.jsx delete mode 100644 client/stores/newspaper/index.js diff --git a/client/app/components/Header/CollapsedHeader.jsx b/client/app/components/Header/CollapsedHeader.jsx index b266a000..2092e152 100644 --- a/client/app/components/Header/CollapsedHeader.jsx +++ b/client/app/components/Header/CollapsedHeader.jsx @@ -12,11 +12,9 @@ import { AnimatePresence, motion } from 'framer-motion'; import LogoWithText from '@/app/components/Logo/WithText'; import { nanoid } from 'nanoid'; import { usePathname } from 'next/navigation'; -import { useNewspaperStore } from '@/stores/newspaper'; export default function CollapsedHeader() { const theme = useThemeStore(state => state.theme); - const newspaperIsOpen = useNewspaperStore(state => state.isOpen); const [open, setOpen] = useState(false); const pathname = usePathname(); @@ -28,10 +26,7 @@ export default function CollapsedHeader() { }, [open]); return ( -
+
discord.place Logo diff --git a/client/app/components/Header/NotCollapsedHeader.jsx b/client/app/components/Header/NotCollapsedHeader.jsx index 8b88406a..d6f52c84 100644 --- a/client/app/components/Header/NotCollapsedHeader.jsx +++ b/client/app/components/Header/NotCollapsedHeader.jsx @@ -9,11 +9,9 @@ import config from '@/config'; import { usePrevious, useWindowScroll, useWindowSize } from 'react-use'; import useThemeStore from '@/stores/theme'; import UserSide from '@/app/components/Header/UserSide'; -import { useNewspaperStore } from '@/stores/newspaper'; export default function NotCollapsedHeader() { const theme = useThemeStore(state => state.theme); - const newspaperIsOpen = useNewspaperStore(state => state.isOpen); const { y } = useWindowScroll(); const oldY = usePrevious(y); @@ -51,8 +49,7 @@ export default function NotCollapsedHeader() {
diff --git a/client/app/components/Newspaper/OpenSource.jsx b/client/app/components/Newspaper/OpenSource.jsx deleted file mode 100644 index 21a8f729..00000000 --- a/client/app/components/Newspaper/OpenSource.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import { useNewspaperStore } from '@/stores/newspaper'; -import { useEffect, useRef } from 'react'; -import Image from 'next/image'; -import { useLockBodyScroll, useClickAway } from 'react-use'; -import { IoCloseSharp } from 'react-icons/io5'; -import { motion, AnimatePresence } from 'framer-motion'; -import Link from 'next/link'; - -export default function OpenSourceAnnouncement() { - const isOpen = useNewspaperStore(state => state.isOpen); - const setIsOpen = useNewspaperStore(state => state.setIsOpen); - - useEffect(() => { - setIsOpen(true); - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - useLockBodyScroll(isOpen); - - const contentRef = useRef(null); - useClickAway(contentRef, () => setIsOpen(false)); - - return ( - - {isOpen && ( - - -
- Open Source Announcement Banner - -
setIsOpen(false)}> - -
- -
-

discord.place Goes Open Source on GitHub!

- -

- We{'\''}re thrilled to announce that the discord.place codebase is now open source on GitHub! Join us in our journey of transparency, collaboration, and innovation. Explore, contribute, and learn with us! -

- - - GitHub Repository - -
-
- - - )} - - ); -} \ No newline at end of file diff --git a/client/app/page.js b/client/app/page.js index b1337ef8..73f01a0b 100644 --- a/client/app/page.js +++ b/client/app/page.js @@ -11,7 +11,6 @@ import { IoPeople } from 'react-icons/io5'; import { RiRobot2Fill } from 'react-icons/ri'; import { MdEmojiEmotions } from 'react-icons/md'; import { MdArrowForward } from 'react-icons/md'; -import OpenSourceAnnouncement from '@/app/components/Newspaper/OpenSource'; const SourceSerif4 = Source_Serif_4({ subsets: ['latin'] }); @@ -48,9 +47,7 @@ export default function Page() { ]; return ( -
- - +

({ - isOpen: false, - setIsOpen: (isOpen) => set({ isOpen }) -})); \ No newline at end of file From 27fa8324a246f55e4e8978c046f1084674e5b7cb Mon Sep 17 00:00:00 2001 From: chimpdev Date: Mon, 15 Apr 2024 23:22:38 +0300 Subject: [PATCH 2/3] New homepage --- client/app/page.js | 172 ++++++++++++++++++------------------- client/styles/tailwind.css | 20 +---- client/tailwind.config.js | 7 -- 3 files changed, 84 insertions(+), 115 deletions(-) diff --git a/client/app/page.js b/client/app/page.js index 73f01a0b..334b10e1 100644 --- a/client/app/page.js +++ b/client/app/page.js @@ -1,115 +1,109 @@ 'use client'; import cn from '@/lib/cn'; -import { motion } from 'framer-motion'; -import { nanoid } from 'nanoid'; import { Source_Serif_4 } from 'next/font/google'; -import MotionLink from '@/app/components/Motion/Link'; import Square from './components/Background/Square'; -import { CgProfile } from 'react-icons/cg'; -import { IoPeople } from 'react-icons/io5'; -import { RiRobot2Fill } from 'react-icons/ri'; -import { MdEmojiEmotions } from 'react-icons/md'; import { MdArrowForward } from 'react-icons/md'; +import { useRef, useState } from 'react'; +import Link from 'next/link'; const SourceSerif4 = Source_Serif_4({ subsets: ['latin'] }); export default function Page() { - const links = [ - { - label: 'Profiles', - href: '/profiles', - icon: CgProfile, - description: 'Find, share and explore the customized page of Discord profiles! Tons of users are sharing their profiles, and you can too!', - color: '#3b82f6', - }, - { - label: 'Servers', - href: '/servers', - icon: IoPeople, - description: 'Find, share and explore the best servers and communities on Discord! There are tons of servers to join and explore!', - color: '#7c3aed' - }, - { - label: 'Bots', - href: '#', - icon: RiRobot2Fill, - description: 'Find, share and explore the best bots on Discord! There are tons of bots to add to your server and explore!', - color: '#db2777' - }, - { - label: 'Emojis', - href: '/emojis', - icon: MdEmojiEmotions, - description: 'Explore, find and download the perfect emoji for your Discord server! There are tons of emojis to add to your server!', - color: '#14b8a6' - } - ]; + const defaultBlockColor = '#ffffff10'; + const [hoveredBlockColor, setHoveredBlockColor] = useState(defaultBlockColor); + + function Block({ title, desc, to, index, color, disabled }) { + const blockRef = useRef(null); + const buttonRef = useRef(null); + + return ( + { + setHoveredBlockColor(`${color}15`); + blockRef.current.style.backgroundColor = `${color}10`; + buttonRef.current.style.backgroundColor = `${color}80`; + buttonRef.current.style.color = '#ffffff'; + }} + onMouseLeave={() => { + setHoveredBlockColor(defaultBlockColor); + blockRef.current.style.backgroundColor = 'transparent'; + buttonRef.current.style.backgroundColor = '#ffffff'; + buttonRef.current.style.color = '#000000'; + }} + href={to} + > +

{title}

+

{desc}

+
+ View +
+ + ); + } return (

discord.place

- - All things related to Discord in one place. Find the best bots, servers, and communities. - - -
- {links.map((link, index) => ( - -
-
- -
+
-

{link.label}

-
- -

- {link.description} -

- - {link.href === '#' ? ( -
- Coming Soon -
- ) : ( -
-
- Explore - -
-
- )} - - ))} +
+
+ + + + +
+
); } \ No newline at end of file diff --git a/client/styles/tailwind.css b/client/styles/tailwind.css index 9c689c85..bd6213e1 100644 --- a/client/styles/tailwind.css +++ b/client/styles/tailwind.css @@ -1,21 +1,3 @@ @tailwind base; @tailwind components; -@tailwind utilities; - -@layer components { - .animated-h1 { - @apply font-bold text-transparent duration-3000 bg-black dark:bg-white cursor-default text-edge-outline animate-title text-4xl sm:text-6xl z-[100000] whitespace-nowrap bg-clip-text - } -} - -.duration-3000 { - transition-duration: 3000ms; -} - -.text-edge-outline { - -webkit-text-stroke: 1px hsla(0, 0%, 0%, .3); -} - -html.dark .text-edge-outline { - -webkit-text-stroke: 1px hsla(0, 0%, 100%, .3); -} \ No newline at end of file +@tailwind utilities; \ No newline at end of file diff --git a/client/tailwind.config.js b/client/tailwind.config.js index fee5f9cf..70e52a0e 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -47,7 +47,6 @@ module.exports = { animation: { shine: 'shine 1s infinite ease-in-out', loading: 'loading 3s infinite cubic-bezier(.48, -0.03, .12, .97)', - title: 'title 3s ease-out forwards', 'logo-spin': 'logo-spin 1.5s forwards cubic-bezier(.83,-0.16,.04,1.36)' }, keyframes: { @@ -62,12 +61,6 @@ module.exports = { '99.9%': { opacity: 0 }, '100%': { opacity: 1, transform: 'translateX(-100%)' } }, - title: { - '0%': { 'line-height': '0%', 'letter-spacing': '.25em', opacity: 0 }, - '25%': { 'line-height': '0%', opacity: 0 }, - '80%': { opacity: '100%' }, - '100%': { 'line-height': '130%', opacity: '100%' } - }, 'logo-spin': { '0%': { transform: 'rotate(0deg)' }, '100%': { transform: 'rotate(360deg)' } From 17cb10ccbd415f607cfb23c457a9d88e9e1d8cb3 Mon Sep 17 00:00:00 2001 From: chimpdev Date: Tue, 16 Apr 2024 00:00:00 +0300 Subject: [PATCH 3/3] New header --- .../app/components/Header/CollapsedHeader.jsx | 2 +- .../components/Header/NotCollapsedHeader.jsx | 93 ++++++++++--------- client/app/components/Header/index.jsx | 2 +- client/config.js | 34 ++++--- 4 files changed, 71 insertions(+), 60 deletions(-) diff --git a/client/app/components/Header/CollapsedHeader.jsx b/client/app/components/Header/CollapsedHeader.jsx index 2092e152..c0fff939 100644 --- a/client/app/components/Header/CollapsedHeader.jsx +++ b/client/app/components/Header/CollapsedHeader.jsx @@ -75,7 +75,7 @@ export default function CollapsedHeader() { )} onClick={() => setOpen(false)} > - {link.label} + {link.title} {pathname === link.href && Current} ))} diff --git a/client/app/components/Header/NotCollapsedHeader.jsx b/client/app/components/Header/NotCollapsedHeader.jsx index d6f52c84..bb213392 100644 --- a/client/app/components/Header/NotCollapsedHeader.jsx +++ b/client/app/components/Header/NotCollapsedHeader.jsx @@ -4,9 +4,9 @@ import Image from 'next/image'; import Link from 'next/link'; import cn from '@/lib/cn'; import { usePathname } from 'next/navigation'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import config from '@/config'; -import { usePrevious, useWindowScroll, useWindowSize } from 'react-use'; +import { usePrevious, useWindowScroll } from 'react-use'; import useThemeStore from '@/stores/theme'; import UserSide from '@/app/components/Header/UserSide'; @@ -27,59 +27,62 @@ export default function NotCollapsedHeader() { } }, [y, oldY]); - const { width } = useWindowSize(); const pathname = usePathname(); - - const [activeLinkWidth, setActiveLinkWidth] = useState(null); - const [activeLinkLeft, setActiveLinkLeft] = useState(null); + const backgroundRef = useRef(null); useEffect(() => { - const activeLink = document.querySelector(`a[data-href="${pathname}"]`); + const activeLink = document.querySelector('header a[data-active="true"]'); if (activeLink) { - const rect = activeLink.getBoundingClientRect(); - setActiveLinkWidth(rect.width); - setActiveLinkLeft(rect.left); + const { left, width } = activeLink.getBoundingClientRect(); + const { left: parentLeft } = activeLink.parentElement.getBoundingClientRect(); + const x = left - parentLeft; + const w = width; + + backgroundRef.current.style.left = `${x}px`; + backgroundRef.current.style.width = `${w}px`; + backgroundRef.current.style.opacity = 1; } else { - setActiveLinkWidth(null); - setActiveLinkLeft(null); + backgroundRef.current.style.opacity = 0; } - }, [pathname, width]); + }, [pathname]); return ( -
-
- - discord.place Logo - +
+
+
+ + discord.place Logo + +
-
-
+
+
+
- {config.headerLinks.map(link => ( - - {link.label} - - ))} + {config.headerLinks.map((link, index) => ( + + + {link.title} + + ))} +
-
- -
+ + +
+
); } \ No newline at end of file diff --git a/client/app/components/Header/index.jsx b/client/app/components/Header/index.jsx index 0b5a2e15..0845d534 100644 --- a/client/app/components/Header/index.jsx +++ b/client/app/components/Header/index.jsx @@ -5,7 +5,7 @@ import CollapsedHeader from '@/app/components/Header/CollapsedHeader'; import { useMedia } from 'react-use'; export default function Header() { - const collapseHeader = useMedia('(max-width: 815px)', false); + const collapseHeader = useMedia('(max-width: 1205px)', false); return collapseHeader ? : ; } \ No newline at end of file diff --git a/client/config.js b/client/config.js index 89d0a755..2ddd0f54 100644 --- a/client/config.js +++ b/client/config.js @@ -1,4 +1,7 @@ -import { LuShieldQuestion } from 'react-icons/lu'; +import { CgProfile } from 'react-icons/cg'; +import { IoPeople } from 'react-icons/io5'; +import { MdEmojiEmotions } from 'react-icons/md'; +import { RiRobot2Fill } from 'react-icons/ri'; const config = { supportInviteUrl: 'https://invite.discord.place', @@ -12,24 +15,29 @@ const config = { }, headerLinks: [ { - label: 'Profiles', - href: '/profiles' + title: 'Profiles', + href: '/profiles', + icon: CgProfile, + iconColor: '#3b82f6', }, { - label: 'Emojis', - href: '/emojis' + title: 'Servers', + href: '/servers', + icon: IoPeople, + iconColor: '#7c3aed' }, { - label: 'Servers', - href: '/servers' + title: 'Bots', + href: '/bots', + icon: RiRobot2Fill, + iconColor: '#db2777', + disabled: true }, { - label: <> - - Get In Touch - , - href: 'https://invite.discord.place', - target: '_blank' + title: 'Emojis', + href: '/emojis', + icon: MdEmojiEmotions, + iconColor: '#14b8a6' } ], errorMessages: {