Add Elfsight platform flow

domains/grid/components/AddWidget.vue

@@ -22,6 +22,7 @@ const WIDGET_COMPONENTS: Record<string, string> = {
   [GRID_WIDGET_TYPE.enum.SOUNDCLOUD]: 'Basic',
   [GRID_WIDGET_TYPE.enum.WARPCAST]: 'Basic',
   [GRID_WIDGET_TYPE.enum.YOUTUBE]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.ELFSIGHT]: 'Basic',
 }
 
 const loadComponent = (type?: string): Component | undefined => {

domains/grid/components/AddWidgetSelection.vue

@@ -113,6 +113,20 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
             ></lukso-icon>
           </div>
         </lukso-tooltip>
+
+        <!-- ElfSight -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_elfsight')"
+        >
+          <img
+            src="/images/elfsight.png"
+            alt="Elfsight"
+            class="size-10 cursor-pointer transition hover:scale-105"
+            @click="handleSelectWidget('ELFSIGHT')"
+          />
+        </lukso-tooltip>
       </div>
     </section>
 

domains/grid/components/GridWidget.vue

@@ -64,6 +64,7 @@ const WIDGET_COMPONENTS: Record<string, string> = {
   [GRID_WIDGET_TYPE.enum.SOUNDCLOUD]: 'Iframe',
   [GRID_WIDGET_TYPE.enum.WARPCAST]: 'Iframe',
   [GRID_WIDGET_TYPE.enum.YOUTUBE]: 'Youtube',
+  [GRID_WIDGET_TYPE.enum.ELFSIGHT]: 'Elfsight',
 }
 
 const loadWidgetComponent = (type: string): Component | undefined => {

domains/grid/components/GridWidgetElfsight.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+type Props = {
+  id: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <script src="https://static.elfsight.com/platform/platform.js" async></script>
+  <div :class="`elfsight-app-${id}`" data-elfsight-app-lazy></div>
+</template>

domains/grid/shared/config.ts

@@ -5,6 +5,7 @@ export const GRID_WIDGET_TYPE = z.enum([
   'TEXT',
   'IFRAME',
   'IMAGE',
+  'ELFSIGHT',
 
   // social media
   'X',
@@ -35,6 +36,7 @@ export const WIDGET_SCHEMA_MAP: Partial<
   [GRID_WIDGET_TYPE.enum.SPOTIFY]: spotifyWidgetSchema,
   [GRID_WIDGET_TYPE.enum.SOUNDCLOUD]: soundCloudWidgetSchema,
   [GRID_WIDGET_TYPE.enum.WARPCAST]: warpcastWidgetSchema,
+  [GRID_WIDGET_TYPE.enum.ELFSIGHT]: elfsightWidgetSchema,
 }
 
 // grid breakpoint where the grid switches into mobile mode

domains/grid/utils/gridParser.ts

@@ -13,6 +13,8 @@ export const parsePlatformInput = async (
       return parseSpotifyWidgetInput(input)
     case GRID_WIDGET_TYPE.enum.SOUNDCLOUD:
       return await parseSoundCloudWidgetInput(input)
+    case GRID_WIDGET_TYPE.enum.ELFSIGHT:
+      return parseElfSightWidgetInput(input)
     default:
       throw new Error('Invalid platform')
   }
@@ -196,3 +198,22 @@ const parseInstagramWidgetInput = (
 
   throw new Error('Invalid Instagram input')
 }
+
+const parseElfSightWidgetInput = (
+  input: string
+): GridWidgetExtended | never => {
+  const ELFSIGHT_URL_REGEX = /class="elfsight-app-([\w-]+)"/
+
+  const [, id] = input.match(ELFSIGHT_URL_REGEX) || []
+
+  if (id) {
+    return {
+      type: GRID_WIDGET_TYPE.enum.ELFSIGHT,
+      properties: {
+        id: id,
+      },
+    }
+  }
+
+  throw new Error('Invalid ElfSight input')
+}

domains/schema/elfsightWidgetSchema.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod'
+
+export const elfsightWidgetSchema = z
+  .object({
+    id: z.string(),
+  })
+  .transform((values, ctx) =>
+    platformTransform({ src: values.id }, ctx, GRID_WIDGET_TYPE.enum.ELFSIGHT)
+  )
+
+export type ElfSightWidgetProperties = z.input<typeof elfsightWidgetSchema>

translations/en_US.json

@@ -378,5 +378,10 @@
   "success_missing_assets_description": "The below asset has been added to your profile.",
   "modal_delete_widget_cancel": "Cancel",
   "edit_widget_x_title": "Edit X (Twitter) widget",
-  "asset_filter_collection_placeholder": "Collection"
-}
+  "asset_filter_collection_placeholder": "Collection",
+  "widget_type_elfsight": "Elfsight",
+  "add_widget_elfsight_title": "Add Elfsight widget",
+  "add_widget_elfsight_description": "Allows to embed Elfsight widget.",
+  "add_widget_elfsight_instructions": "1. Go into Elfsight widget settings\r\n2. Copy widget code and paste into textarea",
+  "add_widget_elfsight_input_placeholder": "Embed code"
+}