chore: release v1.3.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.3.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/migrations/20240413174109_add_category_visibility/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `category` ADD COLUMN `visibility` ENUM('private', 'public') NOT NULL DEFAULT 'private';

prisma/schema.prisma

@@ -29,9 +29,11 @@ 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[]
+  visibility  Visibility @default(private)
 
   author   User @relation(fields: [authorId], references: [id])
   authorId Int
@@ -62,3 +64,8 @@ model Link {
 
   @@map("link")
 }
+
+enum Visibility {
+  private
+  public
+}

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,9 @@
     "categories": "Categories",
     "category": "Category",
     "name": "Category name",
+    "description": "Category description",
+    "no-description": "No description",
+    "visibility": "Public",
     "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,9 @@
     "categories": "Catégories",
     "category": "Catégorie",
     "name": "Nom de la catégorie",
+    "description": "Description de la catégorie",
+    "visibility": "Public",
+    "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/CategoryDescription/CategoryDescription.tsx

@@ -0,0 +1,13 @@
+import { CategoryWithLinks } from 'types/types';
+import styles from './category-description.module.scss';
+
+const CategoryDescription = ({
+  description,
+}: {
+  description?: CategoryWithLinks['description'];
+}) =>
+  description && (
+    <p className={styles['category-description']}>{description}</p>
+  );
+
+export default CategoryDescription;

src/components/Links/CategoryDescription/category-description.module.scss

@@ -0,0 +1,4 @@
+.category-description {
+  font-size: 0.85em;
+  margin-bottom: 0.5em;
+}

src/components/Links/CategoryHeader/CategoryHeader.tsx

@@ -0,0 +1,24 @@
+import { CategoryWithLinks } from 'types/types';
+import styles from './category-header.module.scss';
+import VisibilityBadge from 'components/Visibility/Visibility';
+import { useTranslation } from 'next-i18next';
+
+export default function CategoryHeader({
+  activeCategory: { name, links, visibility },
+}: {
+  activeCategory: CategoryWithLinks;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles['category-name-wrapper']}>
+      <div className={styles['category-name']}>{name}</div>
+      {links.length > 0 && (
+        <span className={styles['links-count']}> — {links.length}</span>
+      )}
+      <VisibilityBadge
+        label={t('common:category.visibility')}
+        visibility={visibility}
+      />
+    </div>
+  );
+}

src/components/Links/CategoryHeader/category-header.module.scss

@@ -0,0 +1,24 @@
+@import 'styles/colors.scss';
+
+.category-name-wrapper {
+  min-width: 0;
+  width: 100%;
+  display: flex;
+  gap: 0.35em;
+  flex: 1;
+  align-items: center;
+}
+
+.category-name {
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.links-count {
+  min-width: fit-content;
+  font-weight: 300;
+  font-size: 0.8em;
+  color: $grey;
+}

src/components/Links/LinkItem.tsx

@@ -15,9 +15,11 @@ import styles from './links.module.scss';
 export default function LinkItem({
   link,
   index,
+  showUserControls = false,
 }: {
   link: LinkWithCategory;
   index: number;
+  showUserControls: boolean;
 }) {
   const { id, name, url, description, favorite } = link;
   const { categories, setCategories } = useCategories();
@@ -80,24 +82,27 @@ export default function LinkItem({
           className='reset'
         >
           <span className={styles['link-name']}>
-            {name} {favorite && <AiFillStar color='#ffc107' />}
+            {name}{' '}
+            {showUserControls && favorite && <AiFillStar color='#ffc107' />}
           </span>
           <LinkItemURL url={url} />
         </ExternalLink>
-        <div className={styles['controls']}>
+        {showUserControls && (
-          <FavoriteItem
+          <div className={styles['controls']}>
-            isFavorite={favorite}
+            <FavoriteItem
-            onClick={onFavorite}
+              isFavorite={favorite}
-          />
+              onClick={onFavorite}
-          <EditItem
+            />
-            type='link'
+            <EditItem
-            id={id}
+              type='link'
-          />
+              id={id}
-          <RemoveItem
+            />
-            type='link'
+            <RemoveItem
-            id={id}
+              type='link'
-          />
+              id={id}
-        </div>
+            />
+          </div>
+        )}
       </div>
       {description && (
         <div className={styles['link-description']}>{description}</div>

src/components/Links/LinkList/LinkList.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import { CategoryWithLinks } from 'types/types';
+import LinkItem from '../LinkItem';
+import styles from '../links.module.scss';
+
+const LinkList = ({
+  links,
+  showUserControls = false,
+}: {
+  links: CategoryWithLinks['links'];
+  showUserControls: boolean;
+}) => (
+  <ul className={clsx(styles['links'], 'reset')}>
+    {links.map((link, index) => (
+      <LinkItem
+        link={link}
+        index={index}
+        key={link.id}
+        showUserControls={showUserControls}
+      />
+    ))}
+  </ul>
+);
+
+export default LinkList;

src/components/Links/LinkList/NoLinkItem.tsx

@@ -0,0 +1,37 @@
+import { Category } from '@prisma/client';
+import { motion } from 'framer-motion';
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import styles from '../links.module.scss';
+
+export default function NoLinkItem({
+  categoryId,
+  categoryName,
+}: {
+  categoryId: Category['id'];
+  categoryName: Category['name'];
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles['no-link']}>
+      <motion.p
+        initial={{ opacity: 0, scale: 0.85 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{
+          type: 'spring',
+          stiffness: 260,
+          damping: 20,
+          duration: 0.01,
+        }}
+        dangerouslySetInnerHTML={{
+          __html: t('home:no-link', { name: categoryName } as any, {
+            interpolation: { escapeValue: false },
+          }),
+        }}
+      />
+      <Link href={`/link/create?categoryId=${categoryId}`}>
+        {t('common:link.create')}
+      </Link>
+    </div>
+  );
+}

src/components/Links/Links.tsx

@@ -1,15 +1,17 @@
-import clsx from 'clsx';
 import ButtonLink from 'components/ButtonLink';
 import Footer from 'components/Footer/Footer';
 import CreateItem from 'components/QuickActions/CreateItem';
 import EditItem from 'components/QuickActions/EditItem';
 import RemoveItem from 'components/QuickActions/RemoveItem';
-import { motion } from 'framer-motion';
 import useActiveCategory from 'hooks/useActiveCategory';
+import useUser from 'hooks/useUser';
 import { useTranslation } from 'next-i18next';
 import LinkTag from 'next/link';
 import { RxHamburgerMenu } from 'react-icons/rx';
-import LinkItem from './LinkItem';
+import CategoryDescription from './CategoryDescription/CategoryDescription';
+import CategoryHeader from './CategoryHeader/CategoryHeader';
+import LinkList from './LinkList/LinkList';
+import NoLinkItem from './LinkList/NoLinkItem';
 import styles from './links.module.scss';
 
 interface LinksProps {
@@ -21,6 +23,7 @@ export default function Links({
   isMobile,
   openSideMenu,
 }: Readonly<LinksProps>) {
+  const { status } = useUser();
   const { t } = useTranslation('home');
   const { activeCategory } = useActiveCategory();
 
@@ -33,7 +36,7 @@ export default function Links({
     );
   }
 
-  const { id, name, links } = activeCategory;
+  const { id, name, description, links } = activeCategory;
   return (
     <div className={styles['links-wrapper']}>
       <h2 className={styles['category-header']}>
@@ -45,59 +48,36 @@ export default function Links({
             <RxHamburgerMenu size={'1.5em'} />
           </ButtonLink>
         )}
-        <span className={styles['category-name']}>
+        <CategoryHeader activeCategory={activeCategory} />
-          {name}
+        {status === 'authenticated' && (
-          {links.length > 0 && (
+          <span className={styles['category-controls']}>
-            <span className={styles['links-count']}> — {links.length}</span>
+            <CreateItem
-          )}
+              type='link'
-        </span>
+              categoryId={id}
-        <span className={styles['category-controls']}>
-          <CreateItem
-            type='link'
-            categoryId={id}
-          />
-          <EditItem
-            type='category'
-            id={id}
-          />
-          <RemoveItem
-            type='category'
-            id={id}
-          />
-        </span>
-      </h2>
-      {links.length !== 0 ? (
-        <ul className={clsx(styles['links'], 'reset')}>
-          {links.map((link, index) => (
-            <LinkItem
-              link={link}
-              index={index}
-              key={link.id}
             />
-          ))}
+            <EditItem
-        </ul>
+              type='category'
+              id={id}
+            />
+            <RemoveItem
+              type='category'
+              id={id}
+            />
+          </span>
+        )}
+      </h2>
+      <CategoryDescription description={description} />
+      {links.length !== 0 ? (
+        <LinkList
+          links={links}
+          showUserControls
+        />
       ) : (
-        <div className={styles['no-link']}>
+        <NoLinkItem
-          <motion.p
+          categoryId={id}
-            key={id}
+          categoryName={name}
-            initial={{ opacity: 0, scale: 0.85 }}
+          key={id}
-            animate={{ opacity: 1, scale: 1 }}
+        />
-            transition={{
-              type: 'spring',
-              stiffness: 260,
-              damping: 20,
-              duration: 0.01,
-            }}
-            dangerouslySetInnerHTML={{
-              __html: t('home:no-link', { name } as any, {
-                interpolation: { escapeValue: false },
-              }),
-            }}
-          />
-          <LinkTag href={`/link/create?categoryId=${id}`}>
-            {t('common:link.create')}
-          </LinkTag>
-        </div>
       )}
       <Footer />
     </div>

src/components/Links/links.module.scss

@@ -28,43 +28,25 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-
-  & h2 {
-    color: $blue;
-    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;
   justify-content: space-between;
 
-  & .category-name {
-    min-width: 0;
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
   & .category-controls {
     display: flex;
     gap: 0.5em;
     align-items: center;
   }
+
+  & > svg {
+    display: flex;
+  }
 }
 
 .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/Navbar/navbar.module.scss

@@ -7,6 +7,7 @@
   display: flex;
   gap: 1.5em;
   justify-content: center;
+  transition: 0.15s;
 }
 
 .navbar .user {
@@ -14,3 +15,9 @@
   gap: 0.25em;
   justify-content: center;
 }
+
+@media (max-width: 768px) {
+  .navbar ul {
+    gap: 0.5em;
+  }
+}

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/components/SideNavigation/Categories/CategoryItem.tsx

@@ -1,10 +1,12 @@
 import clsx from 'clsx';
+import VisibilityBadge from 'components/Visibility/Visibility';
 import PATHS from 'constants/paths';
 import { motion } from 'framer-motion';
 import useActiveCategory from 'hooks/useActiveCategory';
 import useCategories from 'hooks/useCategories';
 import sortCategoriesByNextId from 'lib/category/sortCategoriesByNextId';
 import { makeRequest } from 'lib/request';
+import { useTranslation } from 'next-i18next';
 import { useCallback, useEffect, useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
@@ -28,6 +30,7 @@ export default function CategoryItem({
 }: Readonly<CategoryItemProps>): JSX.Element {
   const { activeCategory, setActiveCategory } = useActiveCategory();
   const { categories, setCategories } = useCategories();
+  const { t } = useTranslation('common');
 
   const ref = useRef<HTMLLIElement>();
 
@@ -155,8 +158,16 @@ export default function CategoryItem({
       )}
 
       <div className={styles['content']}>
-        <span className={styles['name']}>{category.name}</span>
+        <div className={styles['name-wrapper']}>
-        <span className={styles['links-count']}>— {category.links.length}</span>
+          <span className={styles['name']}>{category.name}</span>
+          <span className={styles['links-count']}>
+            — {category.links.length}
+          </span>
+        </div>
+        <VisibilityBadge
+          label={t('common:category.visibility')}
+          visibility={category.visibility}
+        />
       </div>
     </motion.li>
   );

src/components/SideNavigation/Categories/categories.module.scss

@@ -37,13 +37,22 @@
   }
 
   & .content {
-    width: calc(100% - 42px);
+    width: calc(100% - 24px);
     display: flex;
-    flex: 1;
+    gap: 0.35em;
     align-items: center;
 
+    & .name-wrapper {
+      min-width: 0;
+      width: 100%;
+      display: flex;
+      gap: 0.35em;
+      flex: 1;
+      align-items: center;
+    }
+
     & .name {
-      margin-right: 5px;
+      min-width: 0;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;

src/components/Visibility/Visibility.tsx

@@ -0,0 +1,18 @@
+import { Visibility } from '@prisma/client';
+import { IoEarthOutline } from 'react-icons/io5';
+import styles from './visibility.module.scss';
+
+const VisibilityBadge = ({
+  label,
+  visibility,
+}: {
+  label: string;
+  visibility: Visibility;
+}) =>
+  visibility === Visibility.public && (
+    <span className={styles['visibility']}>
+      {label} <IoEarthOutline size='1em' />
+    </span>
+  );
+
+export default VisibilityBadge;

src/components/Visibility/visibility.module.scss

@@ -0,0 +1,13 @@
+@import 'styles/colors.scss';
+
+.visibility {
+  font-weight: 300;
+  font-size: 0.6em;
+  color: rgba($color: $blue, $alpha: 0.75);
+  border: 1px solid rgba($color: $blue, $alpha: 0.75);
+  border-radius: 50px;
+  padding: 0.15em 0.65em;
+  display: flex;
+  gap: 0.35em;
+  align-items: center;
+}

src/constants/paths.ts

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

src/hooks/useUser.tsx

@@ -2,7 +2,12 @@ import { User } from '@prisma/client';
 import { Session } from 'next-auth';
 import { useSession } from 'next-auth/react';
 
-export default function useUser() {
+type SessionStatus = ReturnType<typeof useSession>['status'];
-  const { data } = useSession();
+
-  return data as Session & { user?: User };
+export default function useUser(): Session & {
+  user?: User;
+  status: SessionStatus;
+} {
+  const { data, status } = useSession();
+  return { status, ...data, user: data?.user as User };
 }

src/lib/category/categoryValidationSchema.ts

@@ -1,10 +1,13 @@
-import { number, object, string } from 'yup';
+import { Visibility } from '@prisma/client';
+import { mixed, number, object, string } from 'yup';
 
 const CategoryBodySchema = object({
   name: string()
     .trim()
     .required('Category name is required')
     .max(128, 'Category name is too long'),
+  description: string().trim().max(255, 'Category description is too long'),
+  visibility: mixed<Visibility>().oneOf(Object.values(Visibility)).required(),
   nextId: number().required().nullable(),
 }).typeError('Missing request Body');
 

src/lib/category/getPublicCategoryById.ts

@@ -0,0 +1,14 @@
+import { Category, Visibility } from '@prisma/client';
+import prisma from 'utils/prisma';
+
+export default async function getPublicCategoryById(id: Category['id']) {
+  return await prisma.category.findFirst({
+    where: {
+      id,
+      visibility: Visibility.public,
+    },
+    include: {
+      links: true,
+    },
+  });
+}

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,8 @@ 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, visibility, nextId } =
+    await CategoryBodySchema.validate(req.body);
   const userId = user.id as User['id'];
 
   const category = await getUserCategory(user, cid);
@@ -104,6 +105,8 @@ async function editCategory({ req, res, user }) {
       },
       data: {
         name,
+        description,
+        visibility,
         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,9 @@ async function getCategories({ res, user }) {
 }
 
 async function createCategory({ req, res, user }) {
-  const { name } = await CategoryBodySchema.validate(req.body);
+  const { name, description, visibility } = await CategoryBodySchema.validate(
+    req.body,
+  );
 
   const category = await getUserCategoryByName(user, name);
   if (category) {
@@ -36,7 +38,7 @@ async function createCategory({ req, res, user }) {
   });
 
   const categoryCreated = await prisma.category.create({
-    data: { name, authorId: user.id },
+    data: { name, description, visibility, authorId: user.id },
   });
 
   if (lastCategory) {

src/pages/app.tsx

@@ -0,0 +1,229 @@
+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 getPublicCategoryById from 'lib/category/getPublicCategoryById';
+import getUserCategories from 'lib/category/getUserCategories';
+import sortCategoriesByNextId from 'lib/category/sortCategoriesByNextId';
+import getUser from 'lib/user/getUser';
+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 { getSession } 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 async function getServerSideProps({ req, res, locale, query }) {
+  const session = await getSession(req, res);
+  const user = await getUser(session);
+
+  const queryCategoryId = (query?.categoryId as string) || '';
+  const searchQueryParam = (query?.q as string)?.toLowerCase() || '';
+
+  const publicCategory = await getPublicCategoryById(Number(queryCategoryId));
+  if (!publicCategory && !user) {
+    return {
+      redirect: {
+        destination: PATHS.LOGIN,
+      },
+    };
+  }
+
+  if (!!publicCategory && publicCategory.authorId !== user?.id) {
+    return {
+      redirect: {
+        destination: `${PATHS.SHARED}?id=${publicCategory.id}`,
+      },
+    };
+  }
+
+  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 {
+    redirect: !activeCategory &&
+      queryCategoryId && {
+        destination: PATHS.APP,
+      },
+    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

@@ -1,3 +1,5 @@
+import { Visibility } from '@prisma/client';
+import Checkbox from 'components/Checkbox';
 import FormLayout from 'components/FormLayout';
 import PageTransition from 'components/PageTransition';
 import TextBox from 'components/TextBox';
@@ -23,6 +25,8 @@ export default function PageCreateCategory({
   const info = useRouter().query?.info as string;
 
   const [name, setName] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+  const [visibility, setVisibility] = useState<Visibility>(Visibility.private);
 
   const [error, setError] = useState<string | null>(null);
   const [submitted, setSubmitted] = useState<boolean>(false);
@@ -40,10 +44,10 @@ export default function PageCreateCategory({
     makeRequest({
       url: PATHS.API.CATEGORY,
       method: 'POST',
-      body: { name, nextId: null },
+      body: { name, description, visibility, 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 +66,28 @@ 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')}
+        />
+        <Checkbox
+          name='visibility'
+          isChecked={visibility === Visibility.public}
+          onChangeCallback={(value) =>
+            setVisibility(!!value ? Visibility.public : Visibility.private)
+          }
+          label={t('common:category.visibility')}
         />
       </FormLayout>
     </PageTransition>

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

@@ -1,3 +1,5 @@
+import { Visibility } from '@prisma/client';
+import Checkbox from 'components/Checkbox';
 import FormLayout from 'components/FormLayout';
 import PageTransition from 'components/PageTransition';
 import TextBox from 'components/TextBox';
@@ -23,14 +25,28 @@ export default function PageEditCategory({
   const autoFocusRef = useAutoFocus();
 
   const [name, setName] = useState<string>(category.name);
+  const [description, setDescription] = useState<string>(category.description);
+  const [visibility, setVisibility] = useState<Visibility>(category.visibility);
 
   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 ||
+      visibility !== category.visibility;
+    const isFormValid = name !== '';
+    return isFormEdited && isFormValid && !submitted;
+  }, [
+    category.description,
+    category.name,
+    category.visibility,
+    description,
+    name,
+    submitted,
+    visibility,
+  ]);
 
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -40,10 +56,10 @@ export default function PageEditCategory({
     makeRequest({
       url: `${PATHS.API.CATEGORY}/${category.id}`,
       method: 'PUT',
-      body: { name, nextId: category.nextId },
+      body: { name, description, visibility, 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 +76,28 @@ 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')}
+        />
+        <Checkbox
+          name='visibility'
+          isChecked={visibility === Visibility.public}
+          onChangeCallback={(value) =>
+            setVisibility(!!value ? Visibility.public : Visibility.private)
+          }
+          label={t('common:category.visibility')}
         />
       </FormLayout>
     </PageTransition>
@@ -79,7 +112,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/pages/shared.tsx

@@ -0,0 +1,80 @@
+import Footer from 'components/Footer/Footer';
+import CategoryDescription from 'components/Links/CategoryDescription/CategoryDescription';
+import CategoryHeader from 'components/Links/CategoryHeader/CategoryHeader';
+import LinkList from 'components/Links/LinkList/LinkList';
+import Navbar from 'components/Navbar/Navbar';
+import PageTransition from 'components/PageTransition';
+import PATHS from 'constants/paths';
+import { getServerSideTranslation } from 'i18n';
+import getPublicCategoryById from 'lib/category/getPublicCategoryById';
+import { useTranslation } from 'next-i18next';
+import { DefaultSeo } from 'next-seo';
+import styles from 'styles/shared.module.scss';
+import { CategoryWithLinks } from 'types/types';
+import { getSession } from 'utils/session';
+
+export default function SharedCategoryPage({
+  category,
+}: {
+  category: CategoryWithLinks;
+}) {
+  const { t } = useTranslation();
+  return (
+    <PageTransition className='App'>
+      <DefaultSeo
+        title={category.name}
+        description={category.description ?? undefined}
+      />
+      <Navbar />
+      <main className={styles['content']}>
+        <div className={styles['header']}>
+          <h2 className={styles['title']}>
+            <CategoryHeader activeCategory={category} />
+          </h2>
+          <CategoryDescription description={category.description} />
+        </div>
+        {category.links.length !== 0 ? (
+          <LinkList
+            links={category.links}
+            showUserControls={false}
+          />
+        ) : (
+          <div className={styles['no-link-wrapper']}>
+            <p
+              dangerouslySetInnerHTML={{
+                __html: t('home:no-link', { name: category.name } as any, {
+                  interpolation: { escapeValue: false },
+                }),
+              }}
+            />
+          </div>
+        )}
+      </main>
+      <Footer />
+    </PageTransition>
+  );
+}
+
+export async function getServerSideProps({ req, res, locale, query }) {
+  const session = await getSession(req, res);
+  const queryCategoryId = (query?.id as string) || '';
+
+  const publicCategory = await getPublicCategoryById(Number(queryCategoryId));
+  if (!publicCategory) {
+    return {
+      redirect: {
+        destination: PATHS.APP,
+      },
+    };
+  }
+
+  return {
+    props: {
+      session,
+      category: publicCategory
+        ? JSON.parse(JSON.stringify(publicCategory))
+        : null,
+      ...(await getServerSideTranslation(locale, ['home'])),
+    },
+  };
+}

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 {
@@ -32,7 +30,7 @@ body {
 .App {
   height: 100%;
   width: 1280px;
-  padding: 0.5em;
+  padding: 0.5em 1.5em;
   display: flex;
   flex-direction: column;
 }

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/styles/shared.module.scss

@@ -0,0 +1,21 @@
+.header {
+  margin-bottom: 1.5em;
+}
+
+.title {
+  font-size: 24px;
+  margin-top: 0.5em;
+}
+
+main.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.no-link-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}

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;
   }
 }