diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 000000000..c651ed3b7 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,4 @@ +# ignoring files that are necessary for the project to run/develop +*.md +node_modules/ +LICENSE diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 000000000..32232c56b --- /dev/null +++ b/Dockerfile @@ -0,0 +1,14 @@ +FROM node:lts-slim + +RUN npm install -g pnpm + +WORKDIR /app +EXPOSE 3000 + +# Copy the package.json and pnpm-lock.yaml +COPY package.json . +COPY pnpm-lock.yaml . + +RUN npm run dev-setup + +COPY . . diff --git a/README.md b/README.md index f22a8bd0e..3493d88a0 100644 --- a/README.md +++ b/README.md @@ -5,17 +5,17 @@ ## Table of Contents - [Welcome to LinksHub 👋](#welcome-to-linkshub-) -- [Demo 💻](#demo-) -- [Tech stack 📚](#tech-stack-) -- [Socials 📱](#socials-) -- [Getting Started 👩‍💻](#getting-started-) -- [Let's jump right in🌟](#lets-jump-right-in) -- [_Want to add your favorite links to the Hub? make sure to follow CONTRIBUTING guidelines._](#want-to-add-your-favorite-links-into-the-hub-make-sure-to-follow-contributing-guidelines) -- [Add or update description](#want-to-add-or-update-the-descriptions-of-subcategories) -- [Building with Gitpod 💣](#building-with-gitpod-) -- [Our Contributors ✨](#our-contributors-) -- [License 📝](#license-) -- [Support ⭐](#support-) + - [Demo 💻](#demo-) + - [Tech stack 📚](#tech-stack-) + - [Socials 📱](#socials-) + - [Getting Started 👩‍💻](#getting-started-) + - [Let's jump right in🌟](#lets-jump-right-in) + - [_Want to add your favourite links to the Hub? make sure to follow CONTRIBUTING guidelines._](#want-to-add-your-favourite-links-to-the-hub-make-sure-to-follow-contributing-guidelines) + - [Want to add or update the descriptions of subcategories?](#want-to-add-or-update-the-descriptions-of-subcategories) + - [Building with Gitpod 💣](#building-with-gitpod-) + - [Top 50 Contributors ✨](#top-50-contributors-) + - [License 📝](#license-) + - [Support ⭐](#support-) @@ -99,6 +99,18 @@ You can see the live demo at: https://linkshub.vercel.app pnpm run dev ``` +> **P.S**: If you have `docker` installed in your system, you can follow these steps to set up the environment: +> 1. After forking and cloning the repo(as mentioned above), get into the project directory: +> ```bash +> cd LinksHub/ +> ``` +> 2. Start the docker container with: +> ```bash +> docker compose up +> ``` +> 3. Now start adding your changes. +> **Note:** You don't need to restart the container again and again after starting it once, because the changes you make will reflect into the container instantly. + 7. Make your changes before staging them. 8. Stage your changes diff --git a/components/BackToTop/BackToTopButton.tsx b/components/BackToTop/BackToTopButton.tsx index 2d43e630b..ffe7861c0 100644 --- a/components/BackToTop/BackToTopButton.tsx +++ b/components/BackToTop/BackToTopButton.tsx @@ -40,7 +40,7 @@ export const BackToTopButton = () => { return null } - const buttonClasses = `focus:animate-button-press rounded-full border border-white bg-violet-600 p-4 text-white shadow-xl duration-300 transition-colors focus:ring group-hover:border-dashed group-hover:border-violet-400 group-hover:bg-white dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600 ${ + const buttonClasses = `focus:animate-button-press rounded-full border border-light-primary bg-theme-secondary p-4 text-light-primary shadow-xl duration-300 transition-colors focus:ring group-hover:border-dashed group-hover:border-theme-primary group-hover:bg-light-primary dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600 ${ status === 'preEnter' || status === 'exiting' ? 'opacity-0 translate-y-3' : '' @@ -53,7 +53,7 @@ export const BackToTopButton = () => { onClick={handleClick} title="Back to top" > - + 👾 diff --git a/components/Backdrop/Backdrop.tsx b/components/Backdrop/Backdrop.tsx index b92875a3d..84115a88c 100644 --- a/components/Backdrop/Backdrop.tsx +++ b/components/Backdrop/Backdrop.tsx @@ -1,11 +1,20 @@ -import { FC } from 'react' +import { FC, useEffect } from 'react' import { createPortal } from 'react-dom' +import { useTransition } from 'react-transition-state' export const Backdrop: FC<{ onClick: (() => void) | undefined className?: string | undefined }> = (props) => { const { onClick, className } = props + const [{ status }, toggle] = useTransition({ + timeout: 500, + preEnter: true, + }) + + useEffect(() => { + toggle(true) + }, [toggle]) const overlayRoot = document.getElementById('overlay-root') @@ -15,7 +24,11 @@ export const Backdrop: FC<{ return createPortal(
, overlayRoot diff --git a/components/Cards/Card.tsx b/components/Cards/Card.tsx index 9b2925bff..bd1ef2311 100644 --- a/components/Cards/Card.tsx +++ b/components/Cards/Card.tsx @@ -22,11 +22,11 @@ const Card: FC = ({ data }) => { }, []) return ( -
+

{name} @@ -41,7 +41,7 @@ const Card: FC = ({ data }) => { {description}

{isOverflow && ( -

+

Read More

)} @@ -53,7 +53,7 @@ const Card: FC = ({ data }) => { target="_blank" rel="noopener noreferrer" className={ - 'mt-2 flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-violet-600 px-6 py-2 text-center text-white duration-100 hover:border-violet-400 hover:bg-transparent hover:text-violet-500 dark:hover:text-violet-400' + 'mt-2 flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-theme-secondary px-6 py-2 text-center text-light-primary duration-100 hover:border-theme-primary hover:bg-transparent hover:text-theme-secondary dark:hover:text-theme-primary' } > Visit site diff --git a/components/CopyToClipboard/CopyToClipboard.tsx b/components/CopyToClipboard/CopyToClipboard.tsx index 0705c066f..dac287271 100644 --- a/components/CopyToClipboard/CopyToClipboard.tsx +++ b/components/CopyToClipboard/CopyToClipboard.tsx @@ -18,11 +18,11 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
handleCopy(e)} /> -

+

{success ? 'Copied!' : 'Copy'}

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx index eae57f236..e31198c7d 100644 --- a/components/Footer/Footer.tsx +++ b/components/Footer/Footer.tsx @@ -7,12 +7,12 @@ export const Footer: FC = () => { const isDarkMode = resolvedTheme === 'dark' const nameStyles = `underline ${ - isDarkMode ? 'text-gray-200' : 'text-violet-700' + isDarkMode ? 'text-light-primary' : 'text-theme-secondary' } ` return (