chore: release v1.2.0

Tldr : "/" becomes "/app" and "/about" becomes "/"

Makefile

@@ -2,7 +2,7 @@ db:
 	docker compose -f dev.docker-compose.yml up -d --wait
 
 dev: db
-	npx prisma migrate deploy
+	npx prisma db push
 	npx prisma generate
 	npm run dev
 

docker-compose.yml

@@ -30,8 +30,6 @@ services:
     container_name: MyLinksDB
     image: mysql:latest
     restart: always
-    volumes:
-      - ./docker-config/mysql-dev-init.sql:/docker-entrypoint-initdb.d/init.sql
     env_file:
       - .env
     healthcheck:

docker-config/mysql-dev-init.sql

@@ -1,3 +0,0 @@
-CREATE DATABASE IF NOT EXISTS mylinks;
-
-GRANT ALL PRIVILEGES ON DATABASE * TO mluser;

example.env

@@ -1,12 +1,9 @@
-MYSQL_USER="root"
+MYSQL_USER="mluser"
 MYSQL_PASSWORD="root"
 MYSQL_ROOT_PASSWORD="root"
 MYSQL_DATABASE="mylinks"
 
-# Or if you need external Database
+DATABASE_URL="mysql://root:${MYSQL_ROOT_PASSWORD}@localhost:3306/${MYSQL_DATABASE}"
-# DATABASE_IP="localhost"
-# DATABASE_PORT="3306"
-# DATABASE_URL="mysql://${MYSQL_USER}:${MYSQL_PASSWORD}@${DATABASE_IP}:${DATABASE_PORT}/${MYSQL_DATABASE}"
 
 NEXTAUTH_URL="http://localhost:3000"
 NEXT_PUBLIC_SITE_URL="http://localhost:3000"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-links",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "MyLinks is a free and open source software, that lets you manage your bookmarks in an intuitive interface",
   "private": false,
   "scripts": {
@@ -13,50 +13,50 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@ducanh2912/next-pwa": "^10.0.0",
+    "@ducanh2912/next-pwa": "^10.2.6",
-    "@prisma/client": "^5.7.0",
+    "@prisma/client": "^5.12.1",
     "@svgr/webpack": "^8.1.0",
     "@types/react-toggle": "^4.0.5",
     "accept-language": "^3.0.18",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
-    "framer-motion": "^10.16.16",
+    "framer-motion": "^11.0.27",
-    "i18next": "^23.7.11",
+    "i18next": "^23.11.1",
-    "next": "^14.0.4",
+    "next": "^14.1.4",
-    "next-auth": "^4.24.5",
+    "next-auth": "^4.24.7",
-    "next-i18next": "^15.1.1",
+    "next-i18next": "^15.2.0",
-    "next-seo": "^6.4.0",
+    "next-seo": "^6.5.0",
     "next-sitemap": "^4.2.3",
-    "node-html-parser": "^6.1.11",
+    "node-html-parser": "^6.1.13",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-hotkeys-hook": "^4.4.1",
+    "react-hotkeys-hook": "^4.5.0",
-    "react-i18next": "^13.5.0",
+    "react-i18next": "^14.1.0",
-    "react-icons": "^4.12.0",
+    "react-icons": "^5.0.1",
     "react-select": "^5.8.0",
     "react-swipeable": "^7.0.1",
     "react-tabs": "^6.0.2",
     "react-toggle": "^4.1.3",
-    "sass": "^1.69.5",
+    "sass": "^1.74.1",
-    "sharp": "^0.33.0",
+    "sharp": "^0.33.3",
-    "yup": "^1.3.3"
+    "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.12.7",
     "@types/nprogress": "^0.2.3",
     "@types/react": "^18.2.45",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.0.4",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.2",
-    "prisma": "^5.7.0",
+    "prisma": "^5.12.1",
     "release-it": "^17.1.1",
-    "typescript": "5.3.3"
+    "typescript": "5.4.5"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix"

prisma/migrations/20240410162021_add_category_description/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `category` ADD COLUMN `description` VARCHAR(255) NULL;

prisma/schema.prisma

@@ -29,9 +29,10 @@ model User {
 }
 
 model Category {
-  id    Int    @id @default(autoincrement())
+  id          Int     @id @default(autoincrement())
-  name  String @db.VarChar(255)
+  name        String  @db.VarChar(255)
-  links Link[]
+  description String? @db.VarChar(255)
+  links       Link[]
 
   author   User @relation(fields: [authorId], references: [id])
   authorId Int
@@ -45,10 +46,10 @@ model Category {
 }
 
 model Link {
-  id          Int     @id @default(autoincrement())
+  id          Int    @id @default(autoincrement())
-  name        String  @db.VarChar(255)
+  name        String @db.VarChar(255)
-  description String? @db.VarChar(255)
+  description String @db.VarChar(255)
-  url         String  @db.Text
+  url         String @db.Text
 
   category   Category @relation(fields: [categoryId], references: [id])
   categoryId Int

public/locales/en/about.json

@@ -0,0 +1,28 @@
+{
+  "hero": {
+    "title": "Welcome to MyLinks",
+    "cta": "Get started"
+  },
+  "category": {
+    "title": "Create categories",
+    "text": "Organize your bookmarks by categories to keep your links tidy and find them easily."
+  },
+  "link": {
+    "title": "Manage Links",
+    "text": "Add, edit, and manage your bookmarks with a simple and intuitive interface."
+  },
+  "search": {
+    "title": "Search",
+    "text": "Quickly find the bookmark you're looking for with the powerful search feature."
+  },
+  "extension": {
+    "title": "Browser extension",
+    "text": "Enhance your experience with the official MyLinks browser extension."
+  },
+  "contribute": {
+    "title": "Contribute to MyLinks",
+    "text": "Suggest improvements you would like to see on MyLinks."
+  },
+  "look-title": "Take a look",
+  "website-screenshot-alt": "A screenshot of MyLinks"
+}

public/locales/en/common.json

@@ -1,4 +1,5 @@
 {
+  "slogan": "Manage your links in the best possible way",
   "confirm": "Confirm",
   "cancel": "Cancel",
   "back-home": "← Back to home page",
@@ -18,6 +19,8 @@
     "categories": "Categories",
     "category": "Category",
     "name": "Category name",
+    "description": "Category description",
+    "no-description": "No description",
     "create": "Create a category",
     "edit": "Edit a category",
     "remove": "Delete a category",

public/locales/en/login.json

@@ -1,6 +1,5 @@
 {
   "title": "Authentication",
   "informative-text": "Authentication required to use MyLinks",
-  "continue-with": "Continue with {{provider}}",
+  "continue-with": "Continue with {{provider}}"
-  "slogan": "Manage your links in the best possible way"
 }

public/locales/fr/about.json

@@ -0,0 +1,28 @@
+{
+  "hero": {
+    "title": "Bienvenue sur MyLinks",
+    "cta": "Lancez-vous !"
+  },
+  "category": {
+    "title": "Créer des catégories",
+    "text": "Organisez vos favoris dans des catégories pour garder vos liens en ordre et les retrouver facilement."
+  },
+  "link": {
+    "title": "Gérer les liens",
+    "text": "Ajoutez, modifiez et gérez vos favoris à l'aide d'une interface simple et intuitive."
+  },
+  "search": {
+    "title": "Rechercher",
+    "text": "Trouvez rapidement vos liens favoris en utilisant la fonction de recherche."
+  },
+  "extension": {
+    "title": "Extension de navigateur",
+    "text": "Améliorez votre expérience avec l'extension de navigateur officielle MyLinks."
+  },
+  "contribute": {
+    "title": "Contribuer à MyLinks",
+    "text": "Proposez des améliorations que vous souhaiteriez voir sur MyLinks."
+  },
+  "look-title": "Jetez un coup d'oeil",
+  "website-screenshot-alt": "Une capture d'écran de MyLinks"
+}

public/locales/fr/common.json

@@ -1,4 +1,5 @@
 {
+  "slogan": "Gérez vos liens de la meilleure des façons",
   "confirm": "Confirmer",
   "cancel": "Annuler",
   "back-home": "← Revenir à l'accueil",
@@ -18,6 +19,8 @@
     "categories": "Catégories",
     "category": "Catégorie",
     "name": "Nom de la catégorie",
+    "description": "Description de la catégorie",
+    "no-description": "Aucune description",
     "create": "Créer une catégorie",
     "edit": "Modifier une catégorie",
     "remove": "Supprimer une catégorie",

public/locales/fr/login.json

@@ -1,6 +1,5 @@
 {
   "title": "Authentification",
   "informative-text": "Authentification requise pour utiliser MyLinks",
-  "continue-with": "Continuer avec {{provider}}",
+  "continue-with": "Continuer avec {{provider}}"
-  "slogan": "Gérez vos liens de la meilleure des façons"
 }

src/components/Links/Links.tsx

@@ -66,6 +66,11 @@ export default function Links({
           />
         </span>
       </h2>
+      {activeCategory.description && (
+        <p className={styles['category-description']}>
+          {activeCategory.description}
+        </p>
+      )}
       {links.length !== 0 ? (
         <ul className={clsx(styles['links'], 'reset')}>
           {links.map((link, index) => (

src/components/Links/links.module.scss

@@ -29,24 +29,15 @@
   flex: 1;
   flex-direction: column;
 
-  & h2 {
+  & .category-description {
-    color: $blue;
+    font-size: 0.85em;
     margin-bottom: 0.5em;
-    font-weight: 500;
-
-    & svg {
-      display: flex;
-    }
-
-    & .links-count {
-      color: $grey;
-      font-weight: 300;
-      font-size: 0.8em;
-    }
   }
 }
 
 .category-header {
+  color: $blue;
+  font-weight: 500;
   display: flex;
   gap: 0.4em;
   align-items: center;
@@ -65,6 +56,16 @@
     gap: 0.5em;
     align-items: center;
   }
+
+  & svg {
+    display: flex;
+  }
+
+  & .links-count {
+    color: $grey;
+    font-weight: 300;
+    font-size: 0.8em;
+  }
 }
 
 .links {

src/components/Navbar/Navbar.tsx

@@ -22,10 +22,7 @@ export default function Navbar() {
           <LinkTag href={PATHS.HOME}>MyLinks</LinkTag>
         </li>
         <li>
-          <LinkTag href={PATHS.PRIVACY}>{t('common:privacy')}</LinkTag>
+          <LinkTag href={PATHS.REPO_GITHUB}>GitHub</LinkTag>
-        </li>
-        <li>
-          <LinkTag href={PATHS.TERMS}>{t('common:terms')}</LinkTag>
         </li>
         {status === 'authenticated' ? (
           <>

src/components/Navbar/NavbarUntranslated.tsx

@@ -13,10 +13,7 @@ export default function NavbarUntranslated() {
           <LinkTag href={PATHS.HOME}>MyLinks</LinkTag>
         </li>
         <li>
-          <LinkTag href={PATHS.PRIVACY}>Privacy</LinkTag>
+          <LinkTag href={PATHS.REPO_GITHUB}>GitHub</LinkTag>
-        </li>
-        <li>
-          <LinkTag href={PATHS.TERMS}>Terms of use</LinkTag>
         </li>
         {status === 'authenticated' ? (
           <li>

src/components/Quotes/Quotes.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import styles from './quotes.module.scss';
+
+const Quotes = ({ children }: { children: ReactNode }) => (
+  <p className={styles['quotes']}>{children}</p>
+);
+
+export default Quotes;

src/components/Quotes/quotes.module.scss

@@ -0,0 +1,25 @@
+@import 'styles/colors.scss';
+
+.quotes {
+  position: relative;
+  width: fit-content;
+  white-space: pre-wrap;
+  text-align: center;
+  font-style: italic;
+  color: rgba($color: $black, $alpha: 0.75);
+
+  &::before {
+    position: absolute;
+    left: -0.65em;
+    content: '“';
+    font-family: sans-serif;
+    font-size: 2.25em;
+  }
+  &::after {
+    position: absolute;
+    right: -0.5em;
+    content: '”';
+    font-family: sans-serif;
+    font-size: 2.25em;
+  }
+}

src/constants/paths.ts

@@ -2,6 +2,7 @@ const PATHS = {
   LOGIN: '/login',
   LOGOUT: '/logout',
   HOME: '/',
+  APP: '/app',
   PRIVACY: '/privacy',
   TERMS: '/terms',
   ADMIN: '/admin',

src/lib/category/categoryValidationSchema.ts

@@ -5,6 +5,7 @@ const CategoryBodySchema = object({
     .trim()
     .required('Category name is required')
     .max(128, 'Category name is too long'),
+  description: string().trim().max(255, 'Category description is too long'),
   nextId: number().required().nullable(),
 }).typeError('Missing request Body');
 

src/lib/search.tsx

@@ -16,7 +16,7 @@ export function buildSearchItem(
     url:
       type === 'link'
         ? (item as LinkWithCategory).url
-        : `${PATHS.HOME}?categoryId=${item.id}`,
+        : `${PATHS.APP}?categoryId=${item.id}`,
     type,
     category: type === 'link' ? (item as LinkWithCategory).category : undefined,
   };

src/pages/_app.tsx

@@ -23,8 +23,8 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   // TODO: use dynamic locale import
   dayjs.locale(i18n.language);
 
-  useHotkeys(Keys.CLOSE_SEARCH_KEY, () => router.push(PATHS.HOME), {
+  useHotkeys(Keys.CLOSE_SEARCH_KEY, () => router.push(PATHS.APP), {
-    enabled: router.pathname !== PATHS.HOME,
+    enabled: router.pathname !== PATHS.APP,
     enableOnFormTags: ['INPUT'],
   });
 

src/pages/api/category/[cid].ts

@@ -16,7 +16,9 @@ export default apiHandler({
 
 async function editCategory({ req, res, user }) {
   const { cid } = await CategoryQuerySchema.validate(req.query);
-  const { name, nextId } = await CategoryBodySchema.validate(req.body);
+  const { name, description, nextId } = await CategoryBodySchema.validate(
+    req.body,
+  );
   const userId = user.id as User['id'];
 
   const category = await getUserCategory(user, cid);
@@ -104,6 +106,7 @@ async function editCategory({ req, res, user }) {
       },
       data: {
         name,
+        description,
         nextId: category.nextId,
       },
     });
@@ -131,18 +134,22 @@ async function deleteCategory({ req, res, user }) {
     where: { id: cid },
   });
 
-  const { id: previousCategoryId } = await prisma.category.findFirst({
+  const previousCategory = await prisma.category.findFirst({
     where: { nextId: category.id },
     select: { id: true },
   });
-  await prisma.category.update({
+
-    where: {
+  if (previousCategory) {
-      id: previousCategoryId,
+    await prisma.category.update({
-    },
+      where: {
-    data: {
+        id: previousCategory?.id,
-      nextId: category.nextId,
+      },
-    },
+      data: {
-  });
+        nextId: category.nextId,
+      },
+    });
+  }
+
   return res.send({
     success: 'Category successfully deleted',
     categoryId: category.id,

src/pages/api/category/index.ts

@@ -18,7 +18,7 @@ async function getCategories({ res, user }) {
 }
 
 async function createCategory({ req, res, user }) {
-  const { name } = await CategoryBodySchema.validate(req.body);
+  const { name, description } = await CategoryBodySchema.validate(req.body);
 
   const category = await getUserCategoryByName(user, name);
   if (category) {
@@ -36,7 +36,7 @@ async function createCategory({ req, res, user }) {
   });
 
   const categoryCreated = await prisma.category.create({
-    data: { name, authorId: user.id },
+    data: { name, description, authorId: user.id },
   });
 
   if (lastCategory) {

src/pages/app.tsx

@@ -0,0 +1,205 @@
+import clsx from 'clsx';
+import Links from 'components/Links/Links';
+import PageTransition from 'components/PageTransition';
+import SideMenu from 'components/SideMenu/SideMenu';
+import SideNavigation from 'components/SideNavigation/SideNavigation';
+import * as Keys from 'constants/keys';
+import PATHS from 'constants/paths';
+import ActiveCategoryContext from 'contexts/activeCategoryContext';
+import CategoriesContext from 'contexts/categoriesContext';
+import FavoritesContext from 'contexts/favoritesContext';
+import GlobalHotkeysContext from 'contexts/globalHotkeysContext';
+import { AnimatePresence } from 'framer-motion';
+import { useMediaQuery } from 'hooks/useMediaQuery';
+import useModal from 'hooks/useModal';
+import { getServerSideTranslation } from 'i18n';
+import getUserCategories from 'lib/category/getUserCategories';
+import sortCategoriesByNextId from 'lib/category/sortCategoriesByNextId';
+import { useRouter } from 'next/router';
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useSwipeable } from 'react-swipeable';
+import styles from 'styles/home.module.scss';
+import { CategoryWithLinks, LinkWithCategory } from 'types/types';
+import { withAuthentication } from 'utils/session';
+
+interface HomePageProps {
+  categories: CategoryWithLinks[];
+  activeCategory: CategoryWithLinks | undefined;
+}
+
+export default function HomePage(props: Readonly<HomePageProps>) {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const { isShowing, open, close } = useModal();
+  const handlers = useSwipeable({
+    trackMouse: true,
+    onSwipedRight: open,
+  });
+
+  useEffect(() => {
+    if (!isMobile && isShowing) {
+      close();
+    }
+  }, [close, isMobile, isShowing]);
+
+  return (
+    <PageTransition
+      className={clsx('App', 'flex-row')}
+      hideLangageSelector
+    >
+      <HomeProviders
+        categories={props.categories}
+        activeCategory={props.activeCategory}
+      >
+        <div
+          className={styles['swipe-handler']}
+          {...handlers}
+        >
+          {!isMobile && (
+            <div className={styles['side-bar']}>
+              <SideNavigation />
+            </div>
+          )}
+          <AnimatePresence>
+            {isShowing && (
+              <SideMenu close={close}>
+                <SideNavigation />
+              </SideMenu>
+            )}
+          </AnimatePresence>
+          <Links
+            isMobile={isMobile}
+            openSideMenu={open}
+          />
+        </div>
+      </HomeProviders>
+    </PageTransition>
+  );
+}
+
+function HomeProviders(
+  props: Readonly<{
+    children: ReactNode;
+    categories: CategoryWithLinks[];
+    activeCategory: CategoryWithLinks;
+  }>,
+) {
+  const router = useRouter();
+  const [globalHotkeysEnabled, setGlobalHotkeysEnabled] =
+    useState<boolean>(true);
+  const [categories, setCategories] = useState<CategoryWithLinks[]>(
+    props.categories,
+  );
+  const [activeCategory, setActiveCategory] =
+    useState<CategoryWithLinks | null>(props.activeCategory || categories?.[0]);
+
+  const handleChangeCategory = useCallback(
+    (category: CategoryWithLinks) => {
+      setActiveCategory(category);
+      router.push(`${PATHS.APP}?categoryId=${category.id}`);
+    },
+    [router],
+  );
+
+  const favorites = useMemo<LinkWithCategory[]>(
+    () =>
+      categories.reduce((acc, category) => {
+        category.links.forEach((link) =>
+          link.favorite ? acc.push(link) : null,
+        );
+        return acc;
+      }, [] as LinkWithCategory[]),
+    [categories],
+  );
+
+  const categoriesContextValue = useMemo(
+    () => ({ categories, setCategories }),
+    [categories],
+  );
+  const activeCategoryContextValue = useMemo(
+    () => ({ activeCategory, setActiveCategory: handleChangeCategory }),
+    [activeCategory, handleChangeCategory],
+  );
+  const favoritesContextValue = useMemo(() => ({ favorites }), [favorites]);
+  const globalHotkeysContextValue = useMemo(
+    () => ({
+      globalHotkeysEnabled: globalHotkeysEnabled,
+      setGlobalHotkeysEnabled,
+    }),
+    [globalHotkeysEnabled],
+  );
+
+  useHotkeys(
+    Keys.OPEN_CREATE_LINK_KEY,
+    () => {
+      router.push(`${PATHS.LINK.CREATE}?categoryId=${activeCategory.id}`);
+    },
+    { enabled: globalHotkeysEnabled },
+  );
+  useHotkeys(
+    Keys.OPEN_CREATE_CATEGORY_KEY,
+    () => {
+      router.push(PATHS.CATEGORY.CREATE);
+    },
+    { enabled: globalHotkeysEnabled },
+  );
+  return (
+    <CategoriesContext.Provider value={categoriesContextValue}>
+      <ActiveCategoryContext.Provider value={activeCategoryContextValue}>
+        <FavoritesContext.Provider value={favoritesContextValue}>
+          <GlobalHotkeysContext.Provider value={globalHotkeysContextValue}>
+            {props.children}
+          </GlobalHotkeysContext.Provider>
+        </FavoritesContext.Provider>
+      </ActiveCategoryContext.Provider>
+    </CategoriesContext.Provider>
+  );
+}
+
+export const getServerSideProps = withAuthentication(
+  async ({ query, session, user, locale }) => {
+    const queryCategoryId = (query?.categoryId as string) || '';
+    const searchQueryParam = (query?.q as string)?.toLowerCase() || '';
+
+    const categories = await getUserCategories(user);
+    if (categories.length === 0) {
+      return {
+        redirect: {
+          destination: PATHS.CATEGORY.CREATE,
+        },
+      };
+    }
+
+    const link = categories
+      .map((category) => category.links)
+      .flat()
+      .find(
+        (link: LinkWithCategory) =>
+          link.name.toLowerCase() === searchQueryParam ||
+          link.url.toLowerCase() === searchQueryParam,
+      );
+    if (link) {
+      return {
+        redirect: {
+          destination: link.url,
+        },
+      };
+    }
+
+    const activeCategory = categories.find(
+      ({ id }) => id === Number(queryCategoryId),
+    );
+    return {
+      props: {
+        session,
+        categories: JSON.parse(
+          JSON.stringify(sortCategoriesByNextId(categories)),
+        ),
+        activeCategory: activeCategory
+          ? JSON.parse(JSON.stringify(activeCategory))
+          : null,
+        ...(await getServerSideTranslation(locale, ['home'])),
+      },
+    };
+  },
+);

src/pages/category/create.tsx

@@ -23,6 +23,7 @@ export default function PageCreateCategory({
   const info = useRouter().query?.info as string;
 
   const [name, setName] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
 
   const [error, setError] = useState<string | null>(null);
   const [submitted, setSubmitted] = useState<boolean>(false);
@@ -40,10 +41,10 @@ export default function PageCreateCategory({
     makeRequest({
       url: PATHS.API.CATEGORY,
       method: 'POST',
-      body: { name, nextId: null },
+      body: { name, description, nextId: null },
     })
       .then((data) =>
-        router.push(`${PATHS.HOME}?categoryId=${data?.categoryId}`),
+        router.push(`${PATHS.APP}?categoryId=${data?.categoryId}`),
       )
       .catch(setError)
       .finally(() => setSubmitted(false));
@@ -62,11 +63,20 @@ export default function PageCreateCategory({
         <TextBox
           name='name'
           label={t('common:category.name')}
-          onChangeCallback={(value) => setName(value)}
+          onChangeCallback={setName}
           value={name}
           fieldClass={styles['input-field']}
           placeholder={t('common:category.name')}
           innerRef={autoFocusRef}
+          required
+        />
+        <TextBox
+          name='description'
+          label={t('common:category.description')}
+          onChangeCallback={setDescription}
+          value={description}
+          fieldClass={styles['input-field']}
+          placeholder={t('common:category.description')}
         />
       </FormLayout>
     </PageTransition>

src/pages/category/edit/[cid].tsx

@@ -23,14 +23,17 @@ export default function PageEditCategory({
   const autoFocusRef = useAutoFocus();
 
   const [name, setName] = useState<string>(category.name);
+  const [description, setDescription] = useState<string>(category.description);
 
   const [error, setError] = useState<string | null>(null);
   const [submitted, setSubmitted] = useState<boolean>(false);
 
-  const canSubmit = useMemo<boolean>(
+  const canSubmit = useMemo<boolean>(() => {
-    () => name !== category.name && name !== '' && !submitted,
+    const isFormEdited =
-    [category.name, name, submitted],
+      name !== category.name || description !== category.description;
-  );
+    const isFormValid = name !== '';
+    return isFormEdited && isFormValid && !submitted;
+  }, [category.description, category.name, description, name, submitted]);
 
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -40,10 +43,10 @@ export default function PageEditCategory({
     makeRequest({
       url: `${PATHS.API.CATEGORY}/${category.id}`,
       method: 'PUT',
-      body: { name, nextId: category.nextId },
+      body: { name, description, nextId: category.nextId },
     })
       .then((data) =>
-        router.push(`${PATHS.HOME}?categoryId=${data?.categoryId}`),
+        router.push(`${PATHS.APP}?categoryId=${data?.categoryId}`),
       )
       .catch(setError)
       .finally(() => setSubmitted(false));
@@ -60,11 +63,20 @@ export default function PageEditCategory({
         <TextBox
           name='name'
           label={t('common:category.name')}
-          onChangeCallback={(value) => setName(value)}
+          onChangeCallback={setName}
           value={name}
           fieldClass={styles['input-field']}
           placeholder={`${t('common:category.name')} : ${category.name}`}
           innerRef={autoFocusRef}
+          required
+        />
+        <TextBox
+          name='description'
+          label={t('common:category.description')}
+          onChangeCallback={setDescription}
+          value={description}
+          fieldClass={styles['input-field']}
+          placeholder={t('common:category.description')}
         />
       </FormLayout>
     </PageTransition>
@@ -79,7 +91,7 @@ export const getServerSideProps = withAuthentication(
     if (!category) {
       return {
         redirect: {
-          destination: PATHS.HOME,
+          destination: PATHS.APP,
         },
       };
     }

src/pages/category/remove/[cid].tsx

@@ -39,7 +39,7 @@ export default function PageRemoveCategory({
       url: `${PATHS.API.CATEGORY}/${category.id}`,
       method: 'DELETE',
     })
-      .then(() => router.push(PATHS.HOME))
+      .then(() => router.push(PATHS.APP))
       .catch(setError)
       .finally(() => setSubmitted(false));
   };
@@ -70,6 +70,16 @@ export default function PageRemoveCategory({
           fieldClass={styles['input-field']}
           disabled={true}
         />
+        <TextBox
+          name='description'
+          label={t('common:category.description')}
+          value={category.description}
+          fieldClass={styles['input-field']}
+          placeholder={
+            !category.description && t('common:category.no-description')
+          }
+          disabled={true}
+        />
         <Checkbox
           name='confirm-delete'
           label={t('common:category.remove-confirm')}
@@ -90,7 +100,7 @@ export const getServerSideProps = withAuthentication(
     if (!category) {
       return {
         redirect: {
-          destination: PATHS.HOME,
+          destination: PATHS.APP,
         },
       };
     }

src/pages/index.tsx

@@ -1,205 +1,105 @@
 import clsx from 'clsx';
-import Links from 'components/Links/Links';
+import Footer from 'components/Footer/Footer';
+import Navbar from 'components/Navbar/Navbar';
 import PageTransition from 'components/PageTransition';
-import SideMenu from 'components/SideMenu/SideMenu';
-import SideNavigation from 'components/SideNavigation/SideNavigation';
-import * as Keys from 'constants/keys';
-import PATHS from 'constants/paths';
-import ActiveCategoryContext from 'contexts/activeCategoryContext';
-import CategoriesContext from 'contexts/categoriesContext';
-import FavoritesContext from 'contexts/favoritesContext';
-import GlobalHotkeysContext from 'contexts/globalHotkeysContext';
-import { AnimatePresence } from 'framer-motion';
-import { useMediaQuery } from 'hooks/useMediaQuery';
-import useModal from 'hooks/useModal';
 import { getServerSideTranslation } from 'i18n';
-import getUserCategories from 'lib/category/getUserCategories';
+import { useTranslation } from 'next-i18next';
-import sortCategoriesByNextId from 'lib/category/sortCategoriesByNextId';
+import Image from 'next/image';
-import { useRouter } from 'next/router';
+import Link from 'next/link';
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { IconType } from 'react-icons';
-import { useHotkeys } from 'react-hotkeys-hook';
+import { AiFillFolderOpen } from 'react-icons/ai';
-import { useSwipeable } from 'react-swipeable';
+import { FaUser } from 'react-icons/fa';
-import styles from 'styles/home.module.scss';
+import { IoIosLink, IoIosSearch } from 'react-icons/io';
-import { CategoryWithLinks, LinkWithCategory } from 'types/types';
+import { IoExtensionPuzzleOutline } from 'react-icons/io5';
-import { withAuthentication } from 'utils/session';
+import websiteScreenshot from '../../public/website-screenshot.png';
 
-interface HomePageProps {
+import Quotes from 'components/Quotes/Quotes';
-  categories: CategoryWithLinks[];
+import PATHS from 'constants/paths';
-  activeCategory: CategoryWithLinks | undefined;
+import styles from 'styles/about.module.scss';
-}
-
-export default function HomePage(props: Readonly<HomePageProps>) {
-  const isMobile = useMediaQuery('(max-width: 768px)');
-  const { isShowing, open, close } = useModal();
-  const handlers = useSwipeable({
-    trackMouse: true,
-    onSwipedRight: open,
-  });
-
-  useEffect(() => {
-    if (!isMobile && isShowing) {
-      close();
-    }
-  }, [close, isMobile, isShowing]);
 
+export default function AboutPage() {
+  const { t } = useTranslation('about');
   return (
-    <PageTransition
+    <PageTransition className={clsx('App', styles['about-page'])}>
-      className={clsx('App', 'flex-row')}
+      <Navbar />
-      hideLangageSelector
+      <HeroHeader />
-    >
+      <div className={styles['page-content']}>
-      <HomeProviders
+        <ul className={`reset ${styles['about-list']}`}>
-        categories={props.categories}
+          <AboutItem
-        activeCategory={props.activeCategory}
+            icon={AiFillFolderOpen}
-      >
+            title={t('about:category.title')}
-        <div
+            text={t('about:category.text')}
-          className={styles['swipe-handler']}
+          />
-          {...handlers}
+          <AboutItem
-        >
+            icon={IoIosLink}
-          {!isMobile && (
+            title={t('about:link.title')}
-            <div className={styles['side-bar']}>
+            text={t('about:link.text')}
-              <SideNavigation />
+          />
-            </div>
+          <AboutItem
-          )}
+            icon={IoIosSearch}
-          <AnimatePresence>
+            title={t('about:search.title')}
-            {isShowing && (
+            text={t('about:search.text')}
-              <SideMenu close={close}>
+          />
-                <SideNavigation />
+          <AboutItem
-              </SideMenu>
+            icon={IoExtensionPuzzleOutline}
-            )}
+            title={t('about:extension.title')}
-          </AnimatePresence>
+            text={t('about:extension.text')}
-          <Links
+          />
-            isMobile={isMobile}
+          <AboutItem
-            openSideMenu={open}
+            icon={FaUser}
+            title={t('about:contribute.title')}
+            text={t('about:contribute.text')}
+          />
+        </ul>
+        <h2>{t('about:look-title')}</h2>
+        <div className={styles['screenshot-wrapper']}>
+          <Image
+            src={websiteScreenshot}
+            alt={t('about:website-screenshot-alt')}
+            title={t('about:website-screenshot-alt')}
+            fill
           />
         </div>
-      </HomeProviders>
+      </div>
+      <Footer />
     </PageTransition>
   );
 }
 
-function HomeProviders(
+const AboutItem = ({
-  props: Readonly<{
+  title,
-    children: ReactNode;
+  text,
-    categories: CategoryWithLinks[];
+  icon: Icon,
-    activeCategory: CategoryWithLinks;
+}: {
-  }>,
+  title: string;
-) {
+  text: string;
-  const router = useRouter();
+  icon: IconType;
-  const [globalHotkeysEnabled, setGlobalHotkeysEnabled] =
+}) => (
-    useState<boolean>(true);
+  <li className={styles['about-item']}>
-  const [categories, setCategories] = useState<CategoryWithLinks[]>(
+    <Icon size={60} />
-    props.categories,
+    <div>{title}</div>
-  );
+    <p>{text}</p>
-  const [activeCategory, setActiveCategory] =
+  </li>
-    useState<CategoryWithLinks | null>(props.activeCategory || categories?.[0]);
+);
 
-  const handleChangeCategory = useCallback(
+function HeroHeader() {
-    (category: CategoryWithLinks) => {
+  const { t } = useTranslation('about');
-      setActiveCategory(category);
-      router.push(`${PATHS.HOME}?categoryId=${category.id}`);
-    },
-    [router],
-  );
-
-  const favorites = useMemo<LinkWithCategory[]>(
-    () =>
-      categories.reduce((acc, category) => {
-        category.links.forEach((link) =>
-          link.favorite ? acc.push(link) : null,
-        );
-        return acc;
-      }, [] as LinkWithCategory[]),
-    [categories],
-  );
-
-  const categoriesContextValue = useMemo(
-    () => ({ categories, setCategories }),
-    [categories],
-  );
-  const activeCategoryContextValue = useMemo(
-    () => ({ activeCategory, setActiveCategory: handleChangeCategory }),
-    [activeCategory, handleChangeCategory],
-  );
-  const favoritesContextValue = useMemo(() => ({ favorites }), [favorites]);
-  const globalHotkeysContextValue = useMemo(
-    () => ({
-      globalHotkeysEnabled: globalHotkeysEnabled,
-      setGlobalHotkeysEnabled,
-    }),
-    [globalHotkeysEnabled],
-  );
-
-  useHotkeys(
-    Keys.OPEN_CREATE_LINK_KEY,
-    () => {
-      router.push(`${PATHS.LINK.CREATE}?categoryId=${activeCategory.id}`);
-    },
-    { enabled: globalHotkeysEnabled },
-  );
-  useHotkeys(
-    Keys.OPEN_CREATE_CATEGORY_KEY,
-    () => {
-      router.push(PATHS.CATEGORY.CREATE);
-    },
-    { enabled: globalHotkeysEnabled },
-  );
   return (
-    <CategoriesContext.Provider value={categoriesContextValue}>
+    <header className={styles['hero']}>
-      <ActiveCategoryContext.Provider value={activeCategoryContextValue}>
+      <h1>{t('about:hero.title')}</h1>
-        <FavoritesContext.Provider value={favoritesContextValue}>
+      <Quotes>{t('common:slogan')}</Quotes>
-          <GlobalHotkeysContext.Provider value={globalHotkeysContextValue}>
+      <Link
-            {props.children}
+        href={PATHS.APP}
-          </GlobalHotkeysContext.Provider>
+        className='reset'
-        </FavoritesContext.Provider>
+      >
-      </ActiveCategoryContext.Provider>
+        {t('about:hero.cta')}
-    </CategoriesContext.Provider>
+      </Link>
+    </header>
   );
 }
 
-export const getServerSideProps = withAuthentication(
+export const getServerSideProps = async ({ locale }) => ({
-  async ({ query, session, user, locale }) => {
+  props: {
-    const queryCategoryId = (query?.categoryId as string) || '';
+    ...(await getServerSideTranslation(locale, ['about'])),
-    const searchQueryParam = (query?.q as string)?.toLowerCase() || '';
-
-    const categories = await getUserCategories(user);
-    if (categories.length === 0) {
-      return {
-        redirect: {
-          destination: PATHS.CATEGORY.CREATE,
-        },
-      };
-    }
-
-    const link = categories
-      .map((category) => category.links)
-      .flat()
-      .find(
-        (link: LinkWithCategory) =>
-          link.name.toLowerCase() === searchQueryParam ||
-          link.url.toLowerCase() === searchQueryParam,
-      );
-    if (link) {
-      return {
-        redirect: {
-          destination: link.url,
-        },
-      };
-    }
-
-    const activeCategory = categories.find(
-      ({ id }) => id === Number(queryCategoryId),
-    );
-    return {
-      props: {
-        session,
-        categories: JSON.parse(
-          JSON.stringify(sortCategoriesByNextId(categories)),
-        ),
-        activeCategory: activeCategory
-          ? JSON.parse(JSON.stringify(activeCategory))
-          : null,
-        ...(await getServerSideTranslation(locale, ['home'])),
-      },
-    };
   },
-);
+});

src/pages/link/create.tsx

@@ -59,7 +59,7 @@ export default function PageCreateLink({
       body: { name, url, description, favorite, categoryId },
     })
       .then((data) =>
-        router.push(`${PATHS.HOME}?categoryId=${data?.categoryId}`),
+        router.push(`${PATHS.APP}?categoryId=${data?.categoryId}`),
       )
       .catch(setError)
       .finally(() => setSubmitted(false));
@@ -129,7 +129,7 @@ export const getServerSideProps = withAuthentication(
     if (categories.length === 0) {
       return {
         redirect: {
-          destination: PATHS.HOME,
+          destination: PATHS.APP,
         },
       };
     }

src/pages/link/edit/[lid].tsx

@@ -65,7 +65,7 @@ export default function PageEditLink({
       body: { name, url, description, favorite, categoryId },
     })
       .then((data) =>
-        router.push(`${PATHS.HOME}?categoryId=${data?.categoryId}`),
+        router.push(`${PATHS.APP}?categoryId=${data?.categoryId}`),
       )
       .catch(setError)
       .finally(() => setSubmitted(false));
@@ -104,7 +104,9 @@ export default function PageEditLink({
           onChangeCallback={setDescription}
           value={description}
           fieldClass={styles['input-field']}
-          placeholder={`${t('common:link.description')} : ${link.description}`}
+          placeholder={`${t('common:link.description')}${
+            ` : ${link.description}` ?? ''
+          }`}
         />
         <Selector
           name='category'
@@ -137,7 +139,7 @@ export const getServerSideProps = withAuthentication(
     if (!link) {
       return {
         redirect: {
-          destination: PATHS.HOME,
+          destination: PATHS.APP,
         },
       };
     }

src/pages/link/remove/[lid].tsx

@@ -38,7 +38,7 @@ export default function PageRemoveLink({
       method: 'DELETE',
     })
       .then((data) =>
-        router.push(`${PATHS.HOME}?categoryId=${data?.categoryId}`),
+        router.push(`${PATHS.APP}?categoryId=${data?.categoryId}`),
       )
       .catch(setError)
       .finally(() => setSubmitted(false));
@@ -108,7 +108,7 @@ export const getServerSideProps = withAuthentication(
     if (!link) {
       return {
         redirect: {
-          destination: PATHS.HOME,
+          destination: PATHS.APP,
         },
       };
     }

src/pages/login.tsx

@@ -3,6 +3,7 @@ import Footer from 'components/Footer/Footer';
 import LangSelector from 'components/LangSelector';
 import MessageManager from 'components/MessageManager/MessageManager';
 import PageTransition from 'components/PageTransition';
+import Quotes from 'components/Quotes/Quotes';
 import PATHS from 'constants/paths';
 import getUser from 'lib/user/getUser';
 import { Provider } from 'next-auth/providers';
@@ -35,7 +36,7 @@ export default function SignIn({ providers }: Readonly<SignInProps>) {
           height={100}
           alt="MyLinks's logo"
         />
-        <p className={styles['slogan']}>{t('login:slogan')}</p>
+        <Quotes>{t('common:slogan')}</Quotes>
         <div className={styles['form-wrapper']}>
           <h1>{t('login:title')}</h1>
           <MessageManager info={t('login:informative-text')} />
@@ -65,7 +66,7 @@ export async function getServerSideProps({ req, res, locale }) {
   if (user) {
     return {
       redirect: {
-        destination: PATHS.HOME,
+        destination: PATHS.APP,
       },
     };
   }

src/pages/privacy.tsx

@@ -27,9 +27,11 @@ export default function Privacy() {
         <h3>{t('privacy:collect.user.title')}</h3>
         <p>{t('privacy:collect.user.description')}</p>
         <ul>
-          {t('privacy:collect.user.fields', {
+          {(
-            returnObjects: true,
+            t('privacy:collect.user.fields', {
-          }).map((field) => (
+              returnObjects: true,
+            }) as Array<string>
+          ).map((field) => (
             <li key={field}>{field}</li>
           ))}
         </ul>

src/styles/about.module.scss

@@ -0,0 +1,97 @@
+@import 'colors.scss';
+
+.about-page {
+  height: unset;
+}
+
+.page-content {
+  margin-bottom: 4em;
+  text-align: center;
+  display: flex;
+  gap: 2em;
+  flex: 1;
+  flex-direction: column;
+}
+
+header.hero {
+  height: 275px;
+  min-height: 275px;
+  width: 100%;
+  background-color: $darkest-blue;
+  margin-top: 0.5em;
+  border-radius: 3px;
+  padding: 1em;
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  & h1 {
+    font-size: 36px;
+  }
+
+  & p {
+    font-size: 24px;
+  }
+
+  & a {
+    font-size: 16px;
+    width: fit-content;
+    background-color: $blue;
+    border-radius: 5em;
+    padding: 0.5em 1.5em;
+  }
+
+  & * {
+    color: $white;
+    text-align: center;
+  }
+}
+
+.about-list {
+  margin: 4em 0;
+  display: flex;
+  gap: 2em;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.about-item {
+  width: 350px;
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  & svg {
+    color: $blue;
+  }
+
+  & div {
+    font-size: 1.25em;
+    font-weight: 500;
+  }
+
+  & p {
+    color: $dark-grey;
+  }
+}
+
+.screenshot-wrapper {
+  position: relative;
+  height: 360px;
+  width: 640px;
+  max-width: 100%;
+  margin: 0 auto;
+
+  & img {
+    height: auto !important;
+    width: 100%;
+    box-shadow: 0 0 1em 1px $lightest-grey;
+    border-radius: 3px;
+    overflow: hidden;
+  }
+}

src/styles/colors.scss

@@ -2,12 +2,14 @@ $lightest-blue: #d3e8fa;
 $light-blue: #82c5fede;
 $blue: #3f88c5;
 $dark-blue: #005aa5;
+$darkest-blue: #1f2937;
 
 $white: #fff;
 
 $lightest-grey: #dadce0;
 $light-grey: #f0eef6;
 $grey: #aaa;
+$dark-grey: #4b5563;
 
 $black: #333;
 $black-blur: rgba(0, 0, 0, 0.3);

src/styles/globals.scss

@@ -12,13 +12,11 @@
 html,
 body {
   height: 100dvh;
-  width: 100dvw;
   color: $black;
   background-color: $light-grey;
   font-family: 'Poppins', sans-serif;
   padding: 0;
   margin: 0;
-  overflow: hidden;
 }
 
 #__next {

src/styles/login.module.scss

@@ -21,30 +21,6 @@
   flex-direction: column;
 }
 
-.slogan {
-  position: relative;
-  width: fit-content;
-  white-space: pre-wrap;
-  text-align: center;
-  font-style: italic;
-  color: rgba($color: $black, $alpha: 0.75);
-
-  &::before {
-    position: absolute;
-    left: -0.65em;
-    content: '“';
-    font-family: sans-serif;
-    font-size: 2.25em;
-  }
-  &::after {
-    position: absolute;
-    right: -0.5em;
-    content: '”';
-    font-family: sans-serif;
-    font-size: 2.25em;
-  }
-}
-
 .form-wrapper {
   width: 100%;
   background-color: $white;

src/types/i18next.d.ts

@@ -1,19 +1,8 @@
-/**
- * If you want to enable locale keys typechecking and enhance IDE experience.
- *
- * Requires `resolveJsonModule:true` in your tsconfig.json.
- *
- * @link https://www.i18next.com/overview/typescript
- */
 import 'i18next';
 
-// resources.ts file is generated with `npm run toc`
-import resources from '../i18n/resources';
-
 declare module 'i18next' {
   interface CustomTypeOptions {
     defaultNS: 'common';
-    resources: (typeof resources)['en'];
     returnNull: false;
   }
 }