revert v3 api and go back to v2 while adding new color pos feature

package.json

@@ -31,7 +31,7 @@
     "@builder.io/partytown": "^0.10.2",
     "@builder.io/qwik": "1.5.7",
     "@builder.io/qwik-city": "1.5.7",
-    "@luminescent/ui": "0.18.1",
+    "@luminescent/ui": "0.18.2",
     "@modular-forms/qwik": "^0.25.0",
     "@types/eslint": "8.56.10",
     "@types/node": "latest",

src/components/util/PresetUtils.ts

@@ -223,7 +223,7 @@ export function loadPreset(p: string) {
   }
   if (version === 1) {
     newPreset.version = defaults.version;
-    newPreset.colors = preset.colors.map((color: string, i: number) => ({ hex: color, pos: i / preset.colors.length * 100 }));
+    newPreset.colors = preset.colors.map((color: string, i: number) => ({ hex: color, pos: (100 / (preset.colors.length - 1)) * i }));
     newPreset.name = preset.name;
     newPreset.text = preset.text;
     newPreset.speed = preset.speed;
@@ -242,7 +242,7 @@ export function loadPreset(p: string) {
   }
   if (version === 2) {
     newPreset.version = defaults.version;
-    newPreset.colors = preset.colors.map((color: string, i: number) => ({ hex: color, pos: i / preset.colors.length * 100 }));
+    newPreset.colors = preset.colors.map((color: string, i: number) => ({ hex: color, pos: (100 / (preset.colors.length - 1)) * i }));
     newPreset.name = preset.name;
     newPreset.text = preset.text;
     newPreset.speed = preset.speed;

src/routes/api/gradient/index.tsx

@@ -49,13 +49,11 @@ export const onGet: RequestHandler = async ({ json, query }) => {
   };
 
   throw json(200, {
-    WARNING: 'This endpoint is deprecated. Please use /api/v3/rgb instead.',
-    output: generateOutput(text, colors?.split(',').map((color: string, index: number) => {
-      return {
-        hex: color,
-        pos: index / colors.length,
-      };
-    }), { color: format, char: formatchar }, `${prefix}$t`, true, bold == 'true', italic == 'true', underline == 'true', strikethrough == 'true'),
+    WARNING: 'This endpoint is deprecated. Please use /api/v2/rgb instead.',
+    output: generateOutput(text, colors?.split(',').map((color: string, i: number) => ({
+      hex: color,
+      pos: (100 / (colors.length - 1)) * i,
+    })), { color: format, char: formatchar }, `${prefix}$t`, true, bold == 'true', italic == 'true', underline == 'true', strikethrough == 'true'),
     ...options,
   });
 };

src/routes/api/index.tsx

@@ -9,10 +9,6 @@ export const onGet: RequestHandler = async ({ json }) => {
       },
       '/api/v2': {
         GET: 'View the v2 API endpoints.',
-        WARNING: '/api/v2 is deprecated. Please use /api/v3 instead.',
-      },
-      '/api/v3': {
-        GET: 'View the v3 API endpoints.',
       },
     },
   });

src/routes/api/v2/docs/index.tsx

@@ -26,9 +26,6 @@ export default component$(() => {
         <h1 class="flex gap-4 items-center text-gray-100 text-2xl sm:text-4xl font-bold my-12 drop-shadow-lg">
           <DocumentOutline width="64" /> RGBirdflop API Docs
         </h1>
-        <p class="text-red-500 mb-6">
-          The /api/gradient and /api/v2 endpoints are deprecated and will be removed in the future in favor of /api/v3. Please update your code to use the new API.
-        </p>
         <h2 class="flex gap-4 items-center text-gray-100 text-xl sm:text-3xl font-bold mb-3 drop-shadow-lg">
           Get Started
         </h2>
@@ -70,7 +67,7 @@ export default component$(() => {
         </h2>
         <Card>
           <Header id="formatobject" anchor>
-            Format Object
+            Format
           </Header>
           <div>
             <p class="font-bold text-white">color</p>
@@ -110,6 +107,25 @@ export default component$(() => {
             <p class="text-gray-500">example: {v3formats.find(format => format.color == 'MiniMessage')?.strikethrough}</p>
           </div>
         </Card>
+        <Card>
+          <Header id="color" anchor>
+            Color
+          </Header>
+          <div>
+            <p class="font-bold text-white">hex</p>
+            <p class="text-red-500">required</p>
+            <p>type: string</p>
+            <p class="text-gray-400">The color in hex format.</p>
+            <p class="text-gray-500">example: "#00ffe0"</p>
+          </div>
+          <div>
+            <p class="font-bold text-white">pos</p>
+            <p class="text-red-500">required</p>
+            <p>type: number</p>
+            <p class="text-gray-400">The position of the color in the gradient as a percentage</p>
+            <p class="text-gray-500">example: 50</p>
+          </div>
+        </Card>
       </div>
     </section>
   </>;

src/routes/api/v2/index.tsx

@@ -6,9 +6,7 @@ export const onGet: RequestHandler = async ({ json }) => {
       '/api/v2/rgb': {
         POST: 'Generate a gradient.',
         GET: 'Equivalent to POST, but with query parameters.',
-        WARNING: '/api/v2/rgb is deprecated. Please use /api/v3/rgb instead.',
       },
     },
-    WARNING: '/api/v2 is deprecated. Please use /api/v3 instead.',
   });
 };

src/routes/api/v2/rgb/index.tsx

@@ -3,30 +3,19 @@ import { v3formats } from '~/components/util/PresetUtils';
 import { generateOutput } from '~/components/util/RGBUtils';
 import { rgbDefaults } from '~/routes/resources/rgb';
 
-const v2rgbDefaults = {
-  rgbDefaults,
-  colors: rgbDefaults.colors.map(color => color.hex),
-};
-
 export const onGet: RequestHandler = async ({ json, query }) => {
   let output = {};
   try {
     const queryjson: any = Object.fromEntries(query);
+
     const keys = Object.keys(queryjson);
     for (const key of keys) {
-      if (key == 'colors') {
-        queryjson.colors = queryjson.colors.split(',');
-        queryjson.colors = queryjson.colors.map((color: string, index: number) => {
-          return {
-            hex: color,
-            pos: index / queryjson.colors.length,
-          };
-        });
-      }
+      if (key == 'colors') queryjson.colors = queryjson.colors.split(',');
       else if (queryjson[key] == 'true') queryjson[key] = true;
       else if (queryjson[key] == 'false') queryjson[key] = false;
       else if (queryjson[key].startsWith('{') && queryjson[key].endsWith('}')) queryjson[key] = JSON.parse(queryjson[key]);
     }
+
     output = await getOutput(queryjson);
   }
   catch (e: any) {
@@ -39,13 +28,7 @@ export const onGet: RequestHandler = async ({ json, query }) => {
 export const onPost: RequestHandler = async ({ json, parseBody }) => {
   let output = {};
   try {
-    const body = await parseBody() as any;
-    if (body?.colors) body.colors = body.colors.map((color: string, index: number) => {
-      return {
-        hex: color,
-        pos: index / body.colors.length * 100,
-      };
-    });
+    const body = await parseBody();
     output = await getOutput(body);
   }
   catch (e: any) {
@@ -69,12 +52,12 @@ async function getOutput(body: any) {
         default: rgbDefaults.text,
       },
       colors: {
-        type: 'array of (string)',
+        type: 'array of (Color object - see data models in docs) or array of (string)',
         description: 'The colors to use for the gradient. Must be in hex format.',
-        default: v2rgbDefaults.colors,
+        default: rgbDefaults.colors,
       },
       format: {
-        type: 'format object - see data models in docs',
+        type: 'Format object - see data models in docs',
         description: 'The format to use for the color and format codes. For MiniMessage, { color: "MiniMessage" } can be used.',
         default: rgbDefaults.format,
       },
@@ -116,17 +99,23 @@ async function getOutput(body: any) {
     },
   };
 
-  // in case stupid
-  // mostly just so people can just send { color: "MiniMessage" }
+  /* in case stupid */
+
+  // make { color: "MiniMessage" } a valid format
   let format = body?.format;
   if (format && !format.char && (!format.bold || !format.italic || !format.underline || !format.strikethrough)) {
     format = v3formats.find(f => f.color == format.color) ?? { ...format, char: '&' };
   }
 
-  const { text, colors, prefixsuffix, trimspaces, bold, italic, underline, strikethrough } = body ?? {};
+  // make string[] a valid color array
+  let colors = body?.colors;
+  if (colors && colors.length && typeof colors[0] == 'string') {
+    if (typeof colors[0] == 'string') colors = colors.map((color: string, i: number) => ({ hex: color, pos: (100 / (colors.length - 1)) * i }));
+  }
+
+  const { text, prefixsuffix, trimspaces, bold, italic, underline, strikethrough } = body ?? {};
   const output = generateOutput(text, colors, format, prefixsuffix, trimspaces, bold, italic, underline, strikethrough);
   return {
-    WARNING: 'This endpoint is deprecated. Please use /api/v3/rgb instead.',
     output,
     ...options,
   };