✨ Implement PG page UI (#1460)

* 💄 Init Gutenberg page UI

* 💄 Add book list csv

* 💄 Update page UI based on new design

* 📲 Adjust RWD

* 💄 Update button style

* 💄 Update dialog to display book list

* 🎨 Improve style format

* 🎨 Add api to fetch csv

* ➕ Add plyr to display video

* 💄 Add substack embed

* 📲 Adjust phone version margin

* 🚸 Add anchor

* 🎨 Open all redirects in a new page

* 💬 Add line break for zh title

* 💩 Add entrance for gutenberg page

* 🍱 Update list csv

* 🐛 Update fetchGutenbergCsv endpoint

* 💄 Add free download book list & modify UI

* 🐛 Fix swiper breakpoint

* 🐛 Fix plyr not found

* 💄 Adjust blende section UI

* 🐛 Fix swiper broken on phone version

* 🚧 Temporarily hide the download section on mobile

* 💄 Add pointer for table list

functions/package.json

@@ -40,6 +40,7 @@
     "cookie-parser": "^1.4.4",
     "cosmjs-types": "^0.8.0",
     "create-hash": "^1.2.0",
+    "csv-parser": "^3.0.0",
     "date-fns": "^1.30.1",
     "dayjs": "^1.11.9",
     "dompurify": "^3.0.5",
@@ -79,6 +80,7 @@
     "vue-gtag": "^1.16.1",
     "vue-i18n": "^8.9.0",
     "vue-meta": "^2.3.1",
+    "vue-plyr": "^7.0.0",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.1.3",
     "vue-server-renderer": "2.7.15",

src/components/Gutenberg/Button.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    :class="[
+      'flex',
+      'relative',
+      'border-[1px]',
+      'border-like-green',
+      'border-opacity-75',
+      'rounded-[48px]',
+      'py-[8px]',
+      'px-[24px]',
+      'group',
+      'cursor-pointer',
+      hoverBorderClasses,
+    ]"
+    v-on="$listeners"
+  >
+    {{ text }}
+    <div
+      :class="[
+        'absolute',
+        'bg-shade-gray',
+        'text-shade-gray',
+        { '!bg-like-cyan-light !text-like-cyan-light': preset === 'primary' },
+        'whitespace-nowrap',
+        'top-[6px]',
+        'left-[6px]',
+        'rounded-[48px]',
+        'py-[8px]',
+        'px-[24px]',
+        '-z-1',
+
+        hoverClasses,
+        'transition',
+        'duration-200',
+      ]"
+    >
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GutenbergButton',
+  props: {
+    text: {
+      type: String,
+      default: '',
+    },
+    preset: {
+      type: String,
+      default: 'secondary',
+    },
+  },
+  computed: {
+    hoverBorderClasses() {
+      return this.preset === 'primary'
+        ? 'group-hover:border-opacity-50 active:border-opacity-70'
+        : 'group-hover:border-opacity-50 active:border-opacity-70';
+    },
+    hoverClasses() {
+      return this.preset === 'primary'
+        ? 'group-hover:!bg-like-cyan group-hover:!text-like-cyan'
+        : 'group-hover:!bg-medium-gray group-hover:!text-medium-gray ';
+    },
+  },
+};
+</script>

src/components/GutenbergBookListDialog.vue

@@ -0,0 +1,146 @@
+<template>
+  <Dialog
+    :open="isOpenDialog"
+    class="w-full max-w-[900px]"
+    :header-text="$t('gutenberg_dialog_title')"
+    panel-component="CardV2"
+    panel-container-class="!max-w-[920px]"
+    panel-class="overflow-y-scroll shadow-lg"
+    @close="$emit('close')"
+  >
+    <div class="flex w-full">
+      <table class="w-full text-[14px]">
+        <thead class="border-b-shade-gray border-b-[2px]">
+          <tr class="text-medium-gray">
+            <th class="py-[12px] text-[14px] text-left">
+              {{ $t('gutenberg_dialog_title_classTitle') }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(row, rowIndex) in csvData"
+            :key="rowIndex"
+            :class="[
+              'py-[12px] cursor-pointer border-b-shade-gray border-b-[1px] text-dark-gray hover:bg-light-gray transition-colors',
+              {
+                'cursor-not-allowed':
+                  !csvData[rowIndex].classId ||
+                  csvData[rowIndex].classId === 'failed',
+              },
+            ]"
+            @click="
+              () => {
+                handleClickRow(csvData[rowIndex].classId);
+              }
+            "
+          >
+            <td
+              :class="{
+                '!text-shade-gray':
+                  !csvData[rowIndex].classId ||
+                  csvData[rowIndex].classId === 'failed',
+              }"
+            >
+              {{ row.classTitle }}
+            </td>
+            <td>
+              {{ row.editionTitleEn }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import { ellipsis } from '~/util/ui';
+import { fetchGutenbergCsv } from '~/util/api';
+import csvParser from 'csv-parser';
+
+const DISPLAY_COLUMN = ['classTitle', 'classId'];
+
+export default {
+  filters: {
+    ellipsis,
+  },
+  props: {
+    isOpenDialog: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      csvData: [],
+      csvHeader: [],
+    };
+  },
+  async mounted() {
+    await this.loadCSVFile(DISPLAY_COLUMN);
+  },
+  methods: {
+    async loadCSVFile(displayColumn) {
+      this.csvHeader = displayColumn;
+      try {
+        const response = await this.$api.$get(fetchGutenbergCsv());
+        const parsedData = [];
+
+        const csvStream = csvParser({ headers: false });
+
+        csvStream.write(response);
+        csvStream.end();
+
+        csvStream.on('data', record => {
+          parsedData.push(record);
+        });
+
+        csvStream.on('end', () => {
+          const headerValues = Object.values(parsedData[0]);
+          const headerMap = [];
+
+          displayColumn.forEach(name => {
+            const num = headerValues.indexOf(name);
+            if (num !== -1) {
+              headerMap.push(num);
+            }
+          });
+          const selectedData = parsedData.map(row => {
+            const selectedRow = {};
+            headerMap.forEach(index => {
+              const columnName = headerValues[index];
+              selectedRow[columnName] = row[index];
+            });
+            return selectedRow;
+          });
+
+          if (selectedData && selectedData.length) {
+            this.csvData = selectedData.splice(1);
+          } else {
+            this.csvData = [];
+          }
+        });
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error loading CSV file:', error);
+      }
+    },
+
+    handleClickRow(classId) {
+      if (!classId || classId === 'failed') {
+        return;
+      }
+      const url = this.$router.resolve(
+        this.localeLocation({
+          name: 'nft-class-classId',
+          params: {
+            classId,
+          },
+        })
+      ).href;
+      window.open(url, '_blank');
+    },
+  },
+};
+</script>