feat: new embed method

prisma/migrations/20230111055303_embed/migration.sql

@@ -0,0 +1,13 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `embedColor` on the `User` table. All the data in the column will be lost.
+  - You are about to drop the column `embedSiteName` on the `User` table. All the data in the column will be lost.
+  - You are about to drop the column `embedTitle` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "embedColor",
+DROP COLUMN "embedSiteName",
+DROP COLUMN "embedTitle",
+ADD COLUMN     "embed" JSONB NOT NULL DEFAULT '{}';

prisma/schema.prisma

@@ -16,9 +16,7 @@ model User {
   administrator Boolean   @default(false)
   superAdmin    Boolean   @default(false)
   systemTheme   String    @default("system")
-  embedTitle    String?
-  embedColor    String    @default("#2f3136")
-  embedSiteName String?   @default("{image.file} • {user.name}")
+  embed         Json      @default("{}")
   ratelimit     DateTime?
   totpSecret    String?
   domains       String[]

src/components/pages/Manage/index.tsx

@@ -8,6 +8,7 @@ import {
   Group,
   Image,
   PasswordInput,
+  SimpleGrid,
   Space,
   Text,
   TextInput,
@@ -139,9 +140,10 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
     initialValues: {
       username: user.username,
       password: '',
-      embedTitle: user.embedTitle ?? '',
-      embedColor: user.embedColor,
-      embedSiteName: user.embedSiteName ?? '',
+      embedTitle: user.embed?.title ?? null,
+      embedColor: user.embed?.color ?? '',
+      embedSiteName: user.embed?.siteName ?? null,
+      embedDescription: user.embed?.description ?? null,
       domains: user.domains.join(','),
     },
   });
@@ -149,9 +151,12 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
   const onSubmit = async (values) => {
     const cleanUsername = values.username.trim();
     const cleanPassword = values.password.trim();
-    const cleanEmbedTitle = values.embedTitle.trim();
-    const cleanEmbedColor = values.embedColor.trim();
-    const cleanEmbedSiteName = values.embedSiteName.trim();
+    const cleanEmbed = {
+      title: values.embedTitle ? values.embedTitle.trim() : null,
+      color: values.embedColor !== '' ? values.embedColor.trim() : null,
+      siteName: values.embedSiteName ? values.embedSiteName.trim() : null,
+      description: values.embedDescription ? values.embedDescription.trim() : null,
+    };
 
     if (cleanUsername === '') return form.setFieldError('username', "Username can't be nothing");
 
@@ -166,13 +171,11 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
     const data = {
       username: cleanUsername,
       password: cleanPassword === '' ? null : cleanPassword,
-      embedTitle: cleanEmbedTitle === '' ? null : cleanEmbedTitle,
-      embedColor: cleanEmbedColor === '' ? null : cleanEmbedColor,
-      embedSiteName: cleanEmbedSiteName === '' ? null : cleanEmbedSiteName,
       domains: values.domains
         .split(/\s?,\s?/)
         .map((x) => x.trim())
         .filter((x) => x !== ''),
+      embed: cleanEmbed,
     };
 
     const newUser = await useFetch('/api/user', 'PATCH', data);
@@ -405,6 +408,15 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
           my='sm'
           {...form.getInputProps('password')}
         />
+
+        <SimpleGrid
+          cols={4}
+          breakpoints={[
+            { maxWidth: 768, cols: 1 },
+            { minWidth: 769, maxWidth: 1024, cols: 2 },
+            { minWidth: 1281, cols: 4 },
+          ]}
+        >
           <TextInput id='embedTitle' label='Embed Title' my='sm' {...form.getInputProps('embedTitle')} />
           <ColorInput id='embedColor' label='Embed Color' my='sm' {...form.getInputProps('embedColor')} />
           <TextInput
@@ -413,6 +425,14 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
             my='sm'
             {...form.getInputProps('embedSiteName')}
           />
+          <TextInput
+            id='embedDescription'
+            label='Embed Description'
+            my='sm'
+            {...form.getInputProps('embedDescription')}
+          />
+        </SimpleGrid>
+
         <TextInput
           id='domains'
           label='Domains'

src/lib/middleware/withZipline.ts

@@ -18,9 +18,19 @@ export interface NextApiFile {
   size: number;
 }
 
-export interface UserExtended extends User {
+export interface UserOauth extends User {
   oauth: OAuth[];
 }
+export type UserExtended = UserOauth & {
+  embed: UserEmbed;
+};
+
+export interface UserEmbed {
+  title?: string;
+  siteName?: string;
+  description?: string;
+  color?: string;
+}
 
 export type NextApiReq = NextApiRequest & {
   user: () => Promise<UserExtended | null>;
@@ -166,7 +176,7 @@ export const withZipline =
             include: { oauth: true },
           });
 
-          if (user) return user;
+          if (user) return user as UserExtended;
         }
 
         const userId = req.getCookie('user');
@@ -182,7 +192,7 @@ export const withZipline =
         });
 
         if (!user) return null;
-        return user;
+        return user as UserExtended;
       } catch (e) {
         Logger.get('withZipline').debug(e.message);
         if (e.code && e.code === 'ERR_CRYPTO_TIMING_SAFE_EQUAL_LENGTH') {

src/pages/api/user/[id].ts

@@ -101,22 +101,10 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
         data: { avatar: req.body.avatar },
       });
 
-    if (req.body.embedTitle)
+    if (req.body.embed)
       await prisma.user.update({
         where: { id: target.id },
-        data: { embedTitle: req.body.embedTitle },
-      });
-
-    if (req.body.embedColor)
-      await prisma.user.update({
-        where: { id: target.id },
-        data: { embedColor: req.body.embedColor },
-      });
-
-    if (req.body.embedSiteName)
-      await prisma.user.update({
-        where: { id: target.id },
-        data: { embedSiteName: req.body.embedSiteName },
+        data: { embed: req.body.embed },
       });
 
     if (req.body.systemTheme)

src/pages/api/user/index.ts

@@ -165,22 +165,10 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
         data: { avatar: req.body.avatar },
       });
 
-    if (req.body.embedTitle)
+    if (req.body.embed)
       await prisma.user.update({
         where: { id: user.id },
-        data: { embedTitle: req.body.embedTitle },
-      });
-
-    if (req.body.embedColor)
-      await prisma.user.update({
-        where: { id: user.id },
-        data: { embedColor: req.body.embedColor },
-      });
-
-    if (req.body.embedSiteName)
-      await prisma.user.update({
-        where: { id: user.id },
-        data: { embedSiteName: req.body.embedSiteName },
+        data: { embed: req.body.embed },
       });
 
     if (req.body.systemTheme)
@@ -222,9 +210,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
       },
       select: {
         administrator: true,
-        embedColor: true,
-        embedTitle: true,
-        embedSiteName: true,
+        embed: true,
         id: true,
         images: false,
         password: false,

src/pages/view/[id].tsx

@@ -75,16 +75,16 @@ export default function EmbeddedFile({
       <Head>
         {image.embed && (
           <>
-            {user.embedSiteName && (
+            {user.embed.siteName && (
               <meta
                 property='og:site_name'
-                content={parseString(user.embedSiteName, { file: image, user })}
+                content={parseString(user.embed.siteName, { file: image, user })}
               />
             )}
-            {user.embedTitle && (
-              <meta property='og:title' content={parseString(user.embedTitle, { file: image, user })} />
+            {user.embed.title && (
+              <meta property='og:title' content={parseString(user.embed.title, { file: image, user })} />
             )}
-            <meta property='theme-color' content={user.embedColor ?? '#2f3136'} />
+            <meta property='theme-color' content={user.embed.color ?? '#2f3136'} />
           </>
         )}
         {image.mimetype.startsWith('image') && (

src/scripts/set-user.ts

@@ -11,9 +11,7 @@ const SUPPORTED_FIELDS = [
   'token',
   'superAdmin',
   'systemTheme',
-  'embedTitle',
-  'embedColor',
-  'embedSiteName',
+  'embed',
   'ratelimit',
   'domains',
 ];