Group color under same model devices

Group color under same model devices

astro.config.mjs

@@ -1,8 +1,13 @@
 import { defineConfig } from "astro/config";
 
 import image from "@astrojs/image";
+import redirects from "./src/scripts/redirect.json";
 
 // https://astro.build/config
 export default defineConfig({
+  redirects,
+  experimental: {
+    redirects: true,
+  },
   integrations: [image()],
 });

src/components/ListItem.astro

@@ -2,7 +2,7 @@
 import { DEVICE_MANAGER } from "../scripts/deviceManager";
 import type { Device } from "../scripts/model";
 const { type } = Astro.props;
-const deviceArray: Device[] = DEVICE_MANAGER.getDeviceListByModel(type);
+const deviceArray: Device[] = DEVICE_MANAGER.getDeviceListByLegacyType(type);
 ---
 
 <h2>{type}</h2>

src/pages/device/[device].astro → src/pages/model/[model]/color/[color].astro

@@ -1,27 +1,48 @@
 ---
-import DeviceBaseLayout from "../../layouts/BaseLayout.astro";
+import DeviceBaseLayout from "../../../../layouts/BaseLayout.astro";
 import "/src/styles/upload.css";
 import "/src/styles/pyscript.css";
-import deviceJson from "../../scripts/device_info.json";
-import { DEVICE_MANAGER } from "../../scripts/deviceManager";
-import type { Device } from "../../scripts/model";
-import ErrorPage from "../../components/ErrorPage.astro";
+import deviceJson from "../../../../scripts/device_info.json";
+import { DEVICE_MANAGER } from "../../../../scripts/deviceManager";
+import type { Device } from "../../../../scripts/model";
+import ErrorPage from "../../../../components/ErrorPage.astro";
+import { ModelEnum } from "../../../../scripts/parse";
 
 export async function getStaticPaths() {
-  const deviceAll: any = [];
-  deviceJson["devices"].forEach(function (device: any) {
-    var deviceInfo = {
-      params: { device: device["device_id"] },
-      props: { targetDevice: device["device_id"] },
-    };
-    deviceAll.push(deviceInfo);
+  const modelColorAll: {
+    params: { model: ModelEnum; color: string };
+    props: { targetModel: ModelEnum; targetColor: string };
+  }[] = [];
+
+  Object.keys(DEVICE_MANAGER.allDeviceModels).forEach((modelId: string) => {
+    const _modelId = ModelEnum.parse(modelId);
+    const allModelDevices: Device[] =
+      DEVICE_MANAGER.getDeviceListByModel(_modelId);
+    allModelDevices.forEach((d: Device) => {
+      const modelColorInfo = {
+        params: { model: _modelId, color: d.color.id },
+        props: { targetModel: _modelId, targetColor: d.color.id },
+      };
+      modelColorAll.push(modelColorInfo);
+    });
   });
-  return deviceAll;
+  return modelColorAll;
 }
 
-const { targetDevice } = Astro.props;
-// @ts-expect-error // astro will not show `page not found` if target device does not exist
-const deviceDetail: Device = DEVICE_MANAGER.getDeviceById(targetDevice);
+const { targetModel, targetColor } = Astro.props;
+const _targetModel = ModelEnum.parse(targetModel);
+
+const deviceDetail: Device | undefined = DEVICE_MANAGER.getModelColorDevice(
+  _targetModel,
+  targetColor,
+);
+
+const sameModelDevices: Device[] =
+  DEVICE_MANAGER.getDeviceListByModel(_targetModel);
+
+if (deviceDetail == null) {
+  return Astro.redirect("/404");
+}
 ---
 
 <script>
@@ -121,6 +142,27 @@ const deviceDetail: Device = DEVICE_MANAGER.getDeviceById(targetDevice);
           }px, We support jpg, png and psd
         </p>
         <ul class="file-list"></ul>
+        <div class="color-section">
+          <h3 class="color-section__heading">COLOR</h3>
+          <p class="color-section__description">{deviceDetail.color.name}</p>
+          <ul class="color-picker">
+            {
+              sameModelDevices.map((d) => (
+                <li class="color-picker-item-container">
+                  <a
+                    href={`/model/${targetModel}/color/${d.color.id}`}
+                    style={{ backgroundColor: d.color.hexcode }}
+                    class={`color-picker-item ${
+                      d.color.id === targetColor
+                        ? "color-picker-item--selected"
+                        : ""
+                    }`}
+                  />
+                </li>
+              ))
+            }
+          </ul>
+        </div>
         <button disabled class="generate-btn">Generate product mockups</button>
         <button style="display:none" class="start-mockup-btn"
           >Generate product mockups</button

src/pages/type/[type].astro

@@ -3,7 +3,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 import "/src/styles/device.css";
 
 import { DEVICE_MANAGER } from "../../scripts/deviceManager";
-import type { Device, DeviceType } from "../../scripts/model";
+import type { ModelThumbnail } from "../../scripts/model";
 import { BrandEnum, DeviceTypeEnum } from "../../scripts/parse";
 
 export async function getStaticPaths() {
@@ -19,14 +19,15 @@ export async function getStaticPaths() {
 const { type } = Astro.params;
 const { deviceType } = Astro.props;
 
-const deviceList: Device[] = DEVICE_MANAGER.getDeviceListByType(deviceType);
-const brandDeviceList: Partial<Record<BrandEnum, Device[]>> =
-  DEVICE_MANAGER.getBrandDeviceList(deviceType);
-const nonEmptyBrands: BrandEnum[] = Object.keys(brandDeviceList)
+const thumbnailList: ModelThumbnail[] =
+  DEVICE_MANAGER.getModelThumbnailListByType(deviceType);
+const brandThumbnailList: Partial<Record<BrandEnum, ModelThumbnail[]>> =
+  DEVICE_MANAGER.getBrandModelThumbnailList(deviceType);
+const nonEmptyBrands: BrandEnum[] = Object.keys(brandThumbnailList)
   .filter((b) => {
     const brand = BrandEnum.parse(b);
-    const devices: Device[] | undefined = brandDeviceList[brand];
-    return devices != null && devices.length > 0;
+    const thumbnails: ModelThumbnail[] | undefined = brandThumbnailList[brand];
+    return thumbnails != null && thumbnails.length > 0;
   })
   .map((b) => BrandEnum.parse(b));
 const brandList: string[] = ["all", ...nonEmptyBrands];
@@ -39,9 +40,9 @@ const brandList: string[] = ["all", ...nonEmptyBrands];
     content="MockUPhone supports devices including iPhone mockup, iPad mockup, Android mockup and TV mockup. You can check out the whole device list via this page."
   />
   <script type="text/javascript" src="/scripts/device.js"></script>
-  <script define:vars={{ deviceList, brandDeviceList }}>
-    window.deviceList = deviceList;
-    window.brandDeviceList = brandDeviceList;
+  <script define:vars={{ thumbnailList, brandThumbnailList }}>
+    window.thumbnailList = thumbnailList;
+    window.brandThumbnailList = brandThumbnailList;
   </script>
   <section class="device-type">
     <header>
@@ -154,10 +155,10 @@ const brandList: string[] = ["all", ...nonEmptyBrands];
   <section class="select-device">
     <ul class="device-section-list">
       {
-        Object.keys(brandDeviceList).map((b: string) => {
+        Object.keys(brandThumbnailList).map((b: string) => {
           const brand = BrandEnum.parse(b);
-          const devices = brandDeviceList[brand];
-          if (devices == null || devices.length === 0) {
+          const thumbnails = brandThumbnailList[brand];
+          if (thumbnails == null || thumbnails.length === 0) {
             return undefined;
           }
           return (
@@ -176,25 +177,25 @@ const brandList: string[] = ["all", ...nonEmptyBrands];
                 </h3>
                 {
                   <ul class="device-grid-list">
-                    {devices.map((deviceDetail: Device) => (
+                    {thumbnails.map((thumbnail: ModelThumbnail) => (
                       <div
                         class="device-grid-container"
-                        data-device-id={deviceDetail.device_id}
+                        data-device-id={thumbnail.device.device_id}
                       >
                         <h3 class="device-grid-container-header">
-                          {deviceDetail.name}
+                          {thumbnail.modelName}
                         </h3>
                         <li
                           class="device-grid"
                           data-image-index="0"
-                          data-n-image={deviceDetail.imagePath?.length}
-                          id={deviceDetail.device_id}
+                          data-n-image={thumbnail.device.imagePath?.length}
+                          id={thumbnail.device.device_id}
                         >
                           <a
                             class="device-grid__link"
-                            href={"/device/" + deviceDetail.device_id}
+                            href={"/device/" + thumbnail.device.device_id}
                           >
-                            {deviceDetail.imagePath?.map(
+                            {thumbnail.device.imagePath?.map(
                               (image: [string, string], index: number) => {
                                 if (index == 0)
                                   return (
@@ -218,10 +219,11 @@ const brandList: string[] = ["all", ...nonEmptyBrands];
                             <div class="device-grid__overlay d-none">
                               <header class="device-grid__overlay-header">
                                 <h3 class="device-grid__overlay-device-name">
-                                  {deviceDetail.short_name ?? deviceDetail.name}
+                                  {thumbnail.device.short_name ??
+                                    thumbnail.device.name}
                                 </h3>
                                 <p class="device-grid__overlay-device-desc">
-                                  {deviceDetail.desc}
+                                  {thumbnail.device.desc}
                                 </p>
                               </header>
                               <button class="device-grid__overlay-pick-btn">

src/scripts/brand.json

@@ -1,57 +1,54 @@
 {
   "apple": [
-    "apple-iphone14-blue",
-    "apple-iphone14plus-blue",
-    "apple-iphone14pro-deeppurple",
-    "apple-iphone14promax-deeppurple",
-    "apple-iphone13-blue",
-    "apple-iphone13mini-blue",
-    "apple-iphone13pro-gold",
-    "apple-iphone13promax-gold",
-    "apple-ipadpro11-spacegrey",
-    "apple-ipadpro13-spacegrey",
-    "apple-ipadair5-spacegrey",
-    "apple-ipad-silver",
-    "apple-ipadmini-starlight",
-    "apple-applewatchultra",
-    "apple-applewatch41mm-goldstainlesssteel",
-    "apple-applewatch45mm-goldstainlesssteel",
-    "apple-macbook-gold",
-    "apple-macbook-grey",
-    "apple-macbookair13",
-    "apple-macbookpro14",
-    "apple-macbookpro16",
-    "apple-imac2013",
-    "apple-imac2015",
-    "apple-imac2015retina"
+    "iphone-14",
+    "iphone-14-plus",
+    "iphone-14-pro",
+    "iphone-14-pro-max",
+    "iphone-13",
+    "iphone-13-mini",
+    "iphone-13-pro",
+    "iphone-13-pro-max",
+    "ipad-pro-11-inch",
+    "ipad-pro-13-inch",
+    "ipad-air-5",
+    "ipad",
+    "ipad-mini",
+    "apple-watch-ultra",
+    "apple-watch-series-8-41mm",
+    "apple-watch-series-8-45mm",
+    "macbook-12-inch",
+    "macbook-pro-14-inch",
+    "macbook-pro-16-inch",
+    "macbook-air-13-inch",
+    "imac-2013",
+    "imac-2015",
+    "imac-2015-retina"
   ],
   "google": [
-    "google-pixel5-justblack",
-    "google-pixel4xl-clearlywhite",
-    "google-pixel4-clearlywhite",
-    "google-pixel-quite-black"
+    "google-pixel-1",
+    "google-pixel-4",
+    "google-pixel-4-xl",
+    "google-pixel-5"
   ],
-  "motorola": ["motorola-motoe-black", "motorola-motog"],
+  "motorola": ["moto-e", "moto-g"],
   "samsung": [
-    "samsung-galaxys21plus-black",
-    "samsung-galaxys21ultra-black",
-    "samsung-galaxys21-black",
-    "samsung-galaxys20plus-cloudblue",
-    "samsung-galaxys20ultra-cosmicblack",
-    "samsung-galaxys20-cloudblue",
-    "samsung-galaxynote5-black",
-    "samsung-galaxyy-black",
-    "samsung-galaxysduos",
-    "samsung-galaxys4-white",
-    "samsung-es8000",
-    "samsung-d8000"
+    "galaxy-s21-plus",
+    "galaxy-s21-ultra",
+    "galaxy-s21",
+    "galaxy-s20-plus",
+    "galaxy-s20",
+    "galaxy-s20-ultra",
+    "galaxy-s-duos",
+    "galaxy-s4",
+    "galaxy-note-5",
+    "galaxy-y"
   ],
-  "dell": ["dell-xps13", "dell-xps15"],
+  "dell": ["dell-xps-13", "dell-xps-15"],
   "lg": ["lg-55lw5600", "lg-tm2792"],
   "microsoft": [
-    "microsoft-surfacebook",
-    "microsoft-surfacepro4",
-    "microsoft-surfacepro3"
+    "microsoft-surface-book",
+    "microsoft-surface-pro-4",
+    "microsoft-surface-pro-3"
   ],
-  "oneplus": ["oneplus-oneplus8pro"]
+  "oneplus": ["oneplus-8-pro"]
 }