chore: release v1.1.0

.github/workflows/CD.yml

@@ -50,4 +50,4 @@ jobs:
           key: ${{ secrets.SSH_KEY }}
           script: |
             cd /infra/my-links
-            docker compose up -d
+            sh startup.sh

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "my-links",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "my-links",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "dependencies": {
         "@ducanh2912/next-pwa": "^10.0.0",
         "@prisma/client": "^5.7.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-links",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "MyLinks is a free and open source software, that lets you manage your bookmarks in an intuitive interface",
   "private": false,
   "scripts": {

prisma/migrations/20240409202205_add_link_description/migration.sql

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

prisma/schema.prisma

@@ -45,9 +45,10 @@ model Category {
 }
 
 model Link {
-  id   Int    @id @default(autoincrement())
-  name 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

public/locales/en/common.json

@@ -8,6 +8,7 @@
     "links": "Links",
     "link": "Link",
     "name": "Link name",
+    "description": "Link description",
     "create": "Create a link",
     "edit": "Edit a link",
     "remove": "Delete a link",

public/locales/fr/common.json

@@ -8,6 +8,7 @@
     "links": "Liens",
     "link": "Lien",
     "name": "Nom du lien",
+    "description": "Description du lien",
     "create": "Créer un lien",
     "edit": "Modifier un lien",
     "remove": "Supprimer un lien",

src/components/Links/LinkItem.tsx

@@ -1,3 +1,4 @@
+import ExternalLink from 'components/ExternalLink';
 import EditItem from 'components/QuickActions/EditItem';
 import FavoriteItem from 'components/QuickActions/FavoriteItem';
 import RemoveItem from 'components/QuickActions/RemoveItem';
@@ -5,7 +6,6 @@ import PATHS from 'constants/paths';
 import { motion } from 'framer-motion';
 import useCategories from 'hooks/useCategories';
 import { makeRequest } from 'lib/request';
-import LinkTag from 'next/link';
 import { useCallback } from 'react';
 import { AiFillStar } from 'react-icons/ai';
 import { LinkWithCategory } from 'types';
@@ -19,7 +19,7 @@ export default function LinkItem({
   link: LinkWithCategory;
   index: number;
 }) {
-  const { id, name, url, favorite } = link;
+  const { id, name, url, description, favorite } = link;
   const { categories, setCategories } = useCategories();
 
   const toggleFavorite = useCallback(
@@ -73,32 +73,35 @@ export default function LinkItem({
         delay: index * 0.05,
       }}
     >
-      <LinkFavicon url={url} />
-      <LinkTag
-        href={url}
-        target={'_blank'}
-        rel='noreferrer'
-        className='reset'
-      >
-        <span className={styles['link-name']}>
-          {name} {favorite && <AiFillStar color='#ffc107' />}
-        </span>
-        <LinkItemURL url={url} />
-      </LinkTag>
-      <div className={styles['controls']}>
-        <FavoriteItem
-          isFavorite={favorite}
-          onClick={onFavorite}
-        />
-        <EditItem
-          type='link'
-          id={id}
-        />
-        <RemoveItem
-          type='link'
-          id={id}
-        />
+      <div className={styles['link-header']}>
+        <LinkFavicon url={url} />
+        <ExternalLink
+          href={url}
+          className='reset'
+        >
+          <span className={styles['link-name']}>
+            {name} {favorite && <AiFillStar color='#ffc107' />}
+          </span>
+          <LinkItemURL url={url} />
+        </ExternalLink>
+        <div className={styles['controls']}>
+          <FavoriteItem
+            isFavorite={favorite}
+            onClick={onFavorite}
+          />
+          <EditItem
+            type='link'
+            id={id}
+          />
+          <RemoveItem
+            type='link'
+            id={id}
+          />
+        </div>
       </div>
+      {description && (
+        <div className={styles['link-description']}>{description}</div>
+      )}
     </motion.li>
   );
 }

src/components/Links/links.module.scss

@@ -91,8 +91,18 @@
   border: 1px solid $lightest-grey;
   border-radius: 3px;
   outline: 3px solid transparent;
-  display: flex;
-  align-items: center;
+
+  & .link-header {
+    display: flex;
+    align-items: center;
+  }
+
+  & .link-description {
+    margin-top: 0.5em;
+    color: $black;
+    font-size: 0.8em;
+    word-wrap: break-word;
+  }
 
   &:hover {
     border: 1px solid transparent;
@@ -109,7 +119,7 @@
   }
 }
 
-.link > a {
+.link-header > a {
   height: 100%;
   max-width: calc(100% - 125px); // TODO: faut fix ça, c'est pas beau
   text-decoration: none;

src/components/Selector.tsx

@@ -23,6 +23,7 @@ interface SelectorProps {
   ) => ReactNode;
 
   disabled?: boolean;
+  required?: boolean;
 }
 
 export default function Selector({
@@ -36,6 +37,7 @@ export default function Selector({
   onChangeCallback,
   formatOptionLabel,
   disabled = false,
+  required = false,
 }: SelectorProps): JSX.Element {
   const [selectorValue, setSelectorValue] = useState<Option>();
 
@@ -56,7 +58,7 @@ export default function Selector({
   }
 
   return (
-    <div className={`input-field ${fieldClass}`}>
+    <div className={`input-field ${fieldClass} ${required && 'required'}`}>
       {label && (
         <label
           htmlFor={name}

src/components/TextBox.tsx

@@ -10,6 +10,7 @@ interface InputProps {
   inputClass?: string;
   value?: string;
   onChangeCallback?: (value) => void;
+  required?: boolean;
 }
 
 export default function TextBox({
@@ -22,6 +23,7 @@ export default function TextBox({
   inputClass = '',
   value,
   onChangeCallback,
+  required = false,
 }: InputProps): JSX.Element {
   const [inputValue, setInputValue] = useState<string>(value);
 
@@ -33,11 +35,11 @@ export default function TextBox({
   }
 
   return (
-    <div className={`input-field ${fieldClass}`}>
+    <div className={`input-field ${fieldClass} ${required && 'required'}`}>
       {label && (
         <label
           htmlFor={name}
-          title={`${name} field`}
+          title={label}
         >
           {label}
         </label>

src/lib/link/linkValidationSchema.ts

@@ -6,6 +6,7 @@ const LinkBodySchema = object({
     .trim()
     .required('Link name is required')
     .max(128, 'Link name is too long'),
+  description: string().trim().max(255, 'Link description is too long'),
   url: string()
     .trim()
     .required('URl is required')

src/pages/api/link/[lid].ts

@@ -10,9 +10,8 @@ export default apiHandler({
 
 async function editLink({ req, res, user }) {
   const { lid } = await LinkQuerySchema.validate(req.query);
-  const { name, url, favorite, categoryId } = await LinkBodySchema.validate(
-    req.body,
-  );
+  const { name, url, description, favorite, categoryId } =
+    await LinkBodySchema.validate(req.body);
 
   const link = await getUserLink(user, lid);
   if (!link) {
@@ -22,6 +21,7 @@ async function editLink({ req, res, user }) {
   if (
     link.name === name &&
     link.url === url &&
+    link.description === description &&
     link.favorite === favorite &&
     link.categoryId === categoryId
   ) {
@@ -33,6 +33,7 @@ async function editLink({ req, res, user }) {
     data: {
       name,
       url,
+      description,
       favorite,
       categoryId,
     },

src/pages/api/link/index.ts

@@ -10,9 +10,8 @@ export default apiHandler({
 });
 
 async function createLink({ req, res, user }) {
-  const { name, url, favorite, categoryId } = await LinkBodySchema.validate(
-    req.body,
-  );
+  const { name, url, description, favorite, categoryId } =
+    await LinkBodySchema.validate(req.body);
 
   const link = await getUserLinkByName(user, name, categoryId);
   if (link) {
@@ -28,6 +27,7 @@ async function createLink({ req, res, user }) {
     data: {
       name,
       url,
+      description,
       categoryId,
       favorite,
       authorId: user.id,

src/pages/link/create.tsx

@@ -28,6 +28,8 @@ export default function PageCreateLink({
 
   const [name, setName] = useState<LinkWithCategory['name']>('');
   const [url, setUrl] = useState<LinkWithCategory['url']>('');
+  const [description, setDescription] =
+    useState<LinkWithCategory['description']>('');
   const [favorite, setFavorite] = useState<LinkWithCategory['favorite']>(false);
   const [categoryId, setCategoryId] = useState<
     LinkWithCategory['category']['id']
@@ -54,7 +56,7 @@ export default function PageCreateLink({
     makeRequest({
       url: PATHS.API.LINK,
       method: 'POST',
-      body: { name, url, favorite, categoryId },
+      body: { name, url, description, favorite, categoryId },
     })
       .then((data) =>
         router.push(`${PATHS.HOME}?categoryId=${data?.categoryId}`),
@@ -75,19 +77,29 @@ export default function PageCreateLink({
         <TextBox
           name='name'
           label={t('common:link.name')}
-          onChangeCallback={(value) => setName(value)}
+          onChangeCallback={setName}
           value={name}
           fieldClass={styles['input-field']}
           placeholder={t('common:link.name')}
           innerRef={autoFocusRef}
+          required
         />
         <TextBox
           name='url'
           label={t('common:link.link')}
-          onChangeCallback={(value) => setUrl(value)}
+          onChangeCallback={setUrl}
           value={url}
           fieldClass={styles['input-field']}
           placeholder='https://www.example.com/'
+          required
+        />
+        <TextBox
+          name='description'
+          label={t('common:link.description')}
+          onChangeCallback={setDescription}
+          value={description}
+          fieldClass={styles['input-field']}
+          placeholder={t('common:link.description')}
         />
         <Selector
           name='category'
@@ -98,11 +110,12 @@ export default function PageCreateLink({
             label: name,
             value: id,
           }))}
+          required
         />
         <Checkbox
           name='favorite'
           isChecked={favorite}
-          onChangeCallback={(value) => setFavorite(value)}
+          onChangeCallback={setFavorite}
           label={t('common:favorite')}
         />
       </FormLayout>

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

@@ -30,6 +30,7 @@ export default function PageEditLink({
 
   const [name, setName] = useState<string>(link.name);
   const [url, setUrl] = useState<string>(link.url);
+  const [description, setDescription] = useState<string>(link.description);
   const [favorite, setFavorite] = useState<boolean>(link.favorite);
   const [categoryId, setCategoryId] = useState<number | null>(
     link.category?.id || null,
@@ -42,6 +43,7 @@ export default function PageEditLink({
     const isFormEdited =
       name !== link.name ||
       url !== link.url ||
+      description !== link.description ||
       favorite !== link.favorite ||
       categoryId !== link.category.id;
     const isFormValid =
@@ -50,17 +52,7 @@ export default function PageEditLink({
       favorite !== null &&
       categoryId !== null;
     return isFormEdited && isFormValid && !submitted;
-  }, [
-    categoryId,
-    favorite,
-    link.category.id,
-    link.favorite,
-    link.name,
-    link.url,
-    name,
-    submitted,
-    url,
-  ]);
+  }, [categoryId, description, favorite, link, name, submitted, url]);
 
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -70,7 +62,7 @@ export default function PageEditLink({
     makeRequest({
       url: `${PATHS.API.LINK}/${link.id}`,
       method: 'PUT',
-      body: { name, url, favorite, categoryId },
+      body: { name, url, description, favorite, categoryId },
     })
       .then((data) =>
         router.push(`${PATHS.HOME}?categoryId=${data?.categoryId}`),
@@ -90,19 +82,29 @@ export default function PageEditLink({
         <TextBox
           name='name'
           label={t('common:link.name')}
-          onChangeCallback={(value) => setName(value)}
+          onChangeCallback={setName}
           value={name}
           fieldClass={styles['input-field']}
           placeholder={`${t('common:link.name')} : ${link.name}`}
           innerRef={autoFocusRef}
+          required
         />
         <TextBox
           name='url'
           label={t('common:link.link')}
-          onChangeCallback={(value) => setUrl(value)}
+          onChangeCallback={setUrl}
           value={url}
           fieldClass={styles['input-field']}
           placeholder='https://example.com/'
+          required
+        />
+        <TextBox
+          name='description'
+          label={t('common:link.description')}
+          onChangeCallback={setDescription}
+          value={description}
+          fieldClass={styles['input-field']}
+          placeholder={`${t('common:link.description')} : ${link.description}`}
         />
         <Selector
           name='category'
@@ -113,11 +115,12 @@ export default function PageEditLink({
             label: name,
             value: id,
           }))}
+          required
         />
         <Checkbox
           name='favorite'
           isChecked={favorite}
-          onChangeCallback={(value) => setFavorite(value)}
+          onChangeCallback={setFavorite}
           label={t('common:favorite')}
         />
       </FormLayout>

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

@@ -69,6 +69,13 @@ export default function PageRemoveLink({
           fieldClass={styles['input-field']}
           disabled={true}
         />
+        <TextBox
+          name='description'
+          label={t('common:link.description')}
+          value={link.description}
+          fieldClass={styles['input-field']}
+          disabled={true}
+        />
         <TextBox
           name='category'
           label={t('common:category.category')}

src/styles/globals.scss

@@ -160,11 +160,23 @@ input::placeholder {
 }
 
 .input-field {
-  & label,
   & input,
   & select {
     width: 100%;
   }
+
+  & label {
+    position: relative;
+    width: fit-content;
+  }
+
+  &.required label::after {
+    content: '*';
+    position: absolute;
+    top: 0;
+    right: -0.75em;
+    color: $red;
+  }
 }
 
 .checkbox-field {

src/types/types.d.ts

@@ -1,11 +1,11 @@
-import { Category, User } from '@prisma/client';
+import { Category, Link, User } from '@prisma/client';
 import { Profile } from 'next-auth';
 
 export type CategoryWithLinks = Category & {
   author: User;
   links: LinkWithCategory[];
 };
-export type LinkWithCategory = LinkWithCategory & {
+export type LinkWithCategory = Link & {
   author: User;
   category: CategoryWithLinks;
 };