chore: release v1.2.0

refactor: change routes to the home page and (new) "app" page
Tldr : "/" becomes "/app" and "/about" becomes "/"
2025-12-09 15:05:35 +00:00 · 2024-04-11 01:24:50 +02:00 · 2024-04-11 01:23:36 +02:00 · 2024-04-11 01:13:11 +02:00 · 2024-04-10 19:42:26 +02:00 · 2024-04-10 19:31:15 +02:00
42 changed files with 932 additions and 642 deletions
--- a/2
+++ b/2
@@ -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

--- a/docker-compose.yml
+++ b/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:
--- a/docker-config/mysql-dev-init.sql
+++ b/docker-config/mysql-dev-init.sql
@@ -1,3 +0,0 @@
-CREATE DATABASE IF NOT EXISTS mylinks;
-
-GRANT ALL PRIVILEGES ON DATABASE * TO mluser;
--- a/example.env
+++ b/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_IP="localhost"
-# DATABASE_PORT="3306"
-# DATABASE_URL="mysql://${MYSQL_USER}:${MYSQL_PASSWORD}@${DATABASE_IP}:${DATABASE_PORT}/${MYSQL_DATABASE}"
+DATABASE_URL="mysql://root:${MYSQL_ROOT_PASSWORD}@localhost:3306/${MYSQL_DATABASE}"

 NEXTAUTH_URL="http://localhost:3000"
 NEXT_PUBLIC_SITE_URL="http://localhost:3000"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
-    "@prisma/client": "^5.7.0",
+    "@ducanh2912/next-pwa": "^10.2.6",
+    "@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",
-    "i18next": "^23.7.11",
-    "next": "^14.0.4",
-    "next-auth": "^4.24.5",
-    "next-i18next": "^15.1.1",
-    "next-seo": "^6.4.0",
+    "framer-motion": "^11.0.27",
+    "i18next": "^23.11.1",
+    "next": "^14.1.4",
+    "next-auth": "^4.24.7",
+    "next-i18next": "^15.2.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-i18next": "^13.5.0",
-    "react-icons": "^4.12.0",
+    "react-hotkeys-hook": "^4.5.0",
+    "react-i18next": "^14.1.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",
-    "sharp": "^0.33.0",
-    "yup": "^1.3.3"
+    "sass": "^1.74.1",
+    "sharp": "^0.33.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",
-    "lint-staged": "^15.2.0",
-    "prisma": "^5.7.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prisma": "^5.12.1",
    "release-it": "^17.1.1",
-    "typescript": "5.3.3"
+    "typescript": "5.4.5"
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix"
--- a/prisma/migrations/20240410162021_add_category_description/migration.sql
+++ b/prisma/migrations/20240410162021_add_category_description/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `category` ADD COLUMN `description` VARCHAR(255) NULL;
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -29,9 +29,10 @@ model User {
 }

 model Category {
-  id    Int    @id @default(autoincrement())
-  name  String @db.VarChar(255)
-  links Link[]
+  id          Int     @id @default(autoincrement())
+  name        String  @db.VarChar(255)
+  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())
-  name        String  @db.VarChar(255)
-  description String? @db.VarChar(255)
-  url         String  @db.Text
+  id          Int    @id @default(autoincrement())
+  name        String @db.VarChar(255)
+  description String @db.VarChar(255)
+  url         String @db.Text

  category   Category @relation(fields: [categoryId], references: [id])
  categoryId Int
--- a/public/locales/en/about.json
+++ b/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"
+}
--- a/public/locales/en/common.json
+++ b/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",
--- a/public/locales/en/login.json
+++ b/public/locales/en/login.json
@@ -1,6 +1,5 @@
 {
  "title": "Authentication",
  "informative-text": "Authentication required to use MyLinks",
-  "continue-with": "Continue with {{provider}}",
-  "slogan": "Manage your links in the best possible way"
+  "continue-with": "Continue with {{provider}}"
 }
--- a/public/locales/fr/about.json
+++ b/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"
+}
--- a/public/locales/fr/common.json
+++ b/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",
--- a/public/locales/fr/login.json
+++ b/public/locales/fr/login.json
@@ -1,6 +1,5 @@
 {
  "title": "Authentification",
  "informative-text": "Authentification requise pour utiliser MyLinks",
-  "continue-with": "Continuer avec {{provider}}",
-  "slogan": "Gérez vos liens de la meilleure des façons"
+  "continue-with": "Continuer avec {{provider}}"
 }
--- a/public/website-screenshot.png
+++ b/public/website-screenshot.png
--- a/src/components/Links/Links.tsx
+++ b/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) => (
--- a/src/components/Links/links.module.scss
+++ b/src/components/Links/links.module.scss
@@ -29,24 +29,15 @@
  flex: 1;
  flex-direction: column;

-  & h2 {
-    color: $blue;
+  & .category-description {
+    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 {
--- a/src/components/Navbar/Navbar.tsx
+++ b/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>
-        </li>
-        <li>
-          <LinkTag href={PATHS.TERMS}>{t('common:terms')}</LinkTag>
+          <LinkTag href={PATHS.REPO_GITHUB}>GitHub</LinkTag>
        </li>
        {status === 'authenticated' ? (
          <>
--- a/src/components/Navbar/NavbarUntranslated.tsx
+++ b/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>
-        </li>
-        <li>
-          <LinkTag href={PATHS.TERMS}>Terms of use</LinkTag>
+          <LinkTag href={PATHS.REPO_GITHUB}>GitHub</LinkTag>
        </li>
        {status === 'authenticated' ? (
          <li>
--- a/src/components/Quotes/Quotes.tsx
+++ b/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;
--- a/src/components/Quotes/quotes.module.scss
+++ b/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;
+  }
+}
--- a/src/constants/paths.ts
+++ b/src/constants/paths.ts
@@ -2,6 +2,7 @@ const PATHS = {
  LOGIN: '/login',
  LOGOUT: '/logout',
  HOME: '/',
+  APP: '/app',
  PRIVACY: '/privacy',
  TERMS: '/terms',
  ADMIN: '/admin',
--- a/src/lib/category/categoryValidationSchema.ts
+++ b/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');

--- a/src/lib/search.tsx
+++ b/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,
  };
--- a/src/pages/_app.tsx
+++ b/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), {
-    enabled: router.pathname !== PATHS.HOME,
+  useHotkeys(Keys.CLOSE_SEARCH_KEY, () => router.push(PATHS.APP), {
+    enabled: router.pathname !== PATHS.APP,
    enableOnFormTags: ['INPUT'],
  });

--- a/src/pages/api/category/[cid].ts
+++ b/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: {
-      id: previousCategoryId,
-    },
-    data: {
-      nextId: category.nextId,
-    },
-  });
+
+  if (previousCategory) {
+    await prisma.category.update({
+      where: {
+        id: previousCategory?.id,
+      },
+      data: {
+        nextId: category.nextId,
+      },
+    });
+  }
+
  return res.send({
    success: 'Category successfully deleted',
    categoryId: category.id,
--- a/src/pages/api/category/index.ts
+++ b/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) {
--- a/src/pages/app.tsx
+++ b/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'])),
+      },
+    };
+  },
+);
--- a/src/pages/category/create.tsx
+++ b/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>
--- a/src/pages/category/edit/[cid].tsx
+++ b/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>(
-    () => name !== category.name && name !== '' && !submitted,
-    [category.name, name, submitted],
-  );
+  const canSubmit = useMemo<boolean>(() => {
+    const isFormEdited =
+      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,
        },
      };
    }
--- a/src/pages/category/remove/[cid].tsx
+++ b/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,
        },
      };
    }
--- a/src/pages/index.tsx
+++ b/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 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';
+import { useTranslation } from 'next-i18next';
+import Image from 'next/image';
+import Link from 'next/link';
+import { IconType } from 'react-icons';
+import { AiFillFolderOpen } from 'react-icons/ai';
+import { FaUser } from 'react-icons/fa';
+import { IoIosLink, IoIosSearch } from 'react-icons/io';
+import { IoExtensionPuzzleOutline } from 'react-icons/io5';
+import websiteScreenshot from '../../public/website-screenshot.png';

-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]);
+import Quotes from 'components/Quotes/Quotes';
+import PATHS from 'constants/paths';
+import styles from 'styles/about.module.scss';

+export default function AboutPage() {
+  const { t } = useTranslation('about');
  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}
+    <PageTransition className={clsx('App', styles['about-page'])}>
+      <Navbar />
+      <HeroHeader />
+      <div className={styles['page-content']}>
+        <ul className={`reset ${styles['about-list']}`}>
+          <AboutItem
+            icon={AiFillFolderOpen}
+            title={t('about:category.title')}
+            text={t('about:category.text')}
+          />
+          <AboutItem
+            icon={IoIosLink}
+            title={t('about:link.title')}
+            text={t('about:link.text')}
+          />
+          <AboutItem
+            icon={IoIosSearch}
+            title={t('about:search.title')}
+            text={t('about:search.text')}
+          />
+          <AboutItem
+            icon={IoExtensionPuzzleOutline}
+            title={t('about:extension.title')}
+            text={t('about:extension.text')}
+          />
+          <AboutItem
+            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(
-  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 AboutItem = ({
+  title,
+  text,
+  icon: Icon,
+}: {
+  title: string;
+  text: string;
+  icon: IconType;
+}) => (
+  <li className={styles['about-item']}>
+    <Icon size={60} />
+    <div>{title}</div>
+    <p>{text}</p>
+  </li>
+);

-  const handleChangeCategory = useCallback(
-    (category: CategoryWithLinks) => {
-      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 },
-  );
+function HeroHeader() {
+  const { t } = useTranslation('about');
  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>
+    <header className={styles['hero']}>
+      <h1>{t('about:hero.title')}</h1>
+      <Quotes>{t('common:slogan')}</Quotes>
+      <Link
+        href={PATHS.APP}
+        className='reset'
+      >
+        {t('about:hero.cta')}
+      </Link>
+    </header>
  );
 }

-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'])),
-      },
-    };
+export const getServerSideProps = async ({ locale }) => ({
+  props: {
+    ...(await getServerSideTranslation(locale, ['about'])),
  },
-);
+});
--- a/src/pages/link/create.tsx
+++ b/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,
        },
      };
    }
--- a/src/pages/link/edit/[lid].tsx
+++ b/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,
        },
      };
    }
--- a/src/pages/link/remove/[lid].tsx
+++ b/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,
        },
      };
    }
--- a/src/pages/login.tsx
+++ b/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,
      },
    };
  }
--- a/src/pages/privacy.tsx
+++ b/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,
-          }).map((field) => (
+          {(
+            t('privacy:collect.user.fields', {
+              returnObjects: true,
+            }) as Array<string>
+          ).map((field) => (
            <li key={field}>{field}</li>
          ))}
        </ul>
--- a/src/styles/about.module.scss
+++ b/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;
+  }
+}
--- a/src/styles/colors.scss
+++ b/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);
--- a/src/styles/globals.scss
+++ b/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 {
--- a/src/styles/login.module.scss
+++ b/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;
--- a/src/types/i18next.d.ts
+++ b/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;
  }
 }
Author	SHA1	Message	Date
Sonny	e30bdea9c5	chore: release v1.2.0	2024-04-11 01:24:50 +02:00
Sonny	f1a70f3bd1	refactor: change routes to the home page and (new) "app" page Tldr : "/" becomes "/app" and "/about" becomes "/"	2024-04-11 01:23:36 +02:00
Sonny	a53b600111	feat: add about page Finally!	2024-04-11 01:13:11 +02:00
Sonny	78915b6b99	fix: error when removing a category without a previous category	2024-04-10 19:42:26 +02:00
Sonny	b59b948ed9	fix: dev environment variables	2024-04-10 19:31:15 +02:00
Sonny	a317ee1b61	chore(deps): update deps and apply changes	2024-04-10 19:23:18 +02:00
Sonny	42a5dabec1	feat: add optionnal category description	2024-04-10 19:22:16 +02:00