diff --git a/domains/grid/components/AddWidget.vue b/domains/grid/components/AddWidget.vue index bbf39cc2..adfa5cee 100644 --- a/domains/grid/components/AddWidget.vue +++ b/domains/grid/components/AddWidget.vue @@ -22,6 +22,7 @@ const WIDGET_COMPONENTS: Record = { [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 => { diff --git a/domains/grid/components/AddWidgetSelection.vue b/domains/grid/components/AddWidgetSelection.vue index afed3dea..b59a6473 100644 --- a/domains/grid/components/AddWidgetSelection.vue +++ b/domains/grid/components/AddWidgetSelection.vue @@ -113,6 +113,20 @@ const handleSelectWidget = (widgetType: GridWidgetType) => { > + + + + Elfsight + diff --git a/domains/grid/components/GridWidget.vue b/domains/grid/components/GridWidget.vue index 12902907..7245f4ad 100644 --- a/domains/grid/components/GridWidget.vue +++ b/domains/grid/components/GridWidget.vue @@ -64,6 +64,7 @@ const WIDGET_COMPONENTS: Record = { [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 => { diff --git a/domains/grid/components/GridWidgetElfsight.vue b/domains/grid/components/GridWidgetElfsight.vue new file mode 100644 index 00000000..06b5d9a0 --- /dev/null +++ b/domains/grid/components/GridWidgetElfsight.vue @@ -0,0 +1,12 @@ + + + diff --git a/domains/grid/shared/config.ts b/domains/grid/shared/config.ts index b15f7b18..80ba0a23 100644 --- a/domains/grid/shared/config.ts +++ b/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 diff --git a/domains/grid/utils/gridParser.ts b/domains/grid/utils/gridParser.ts index 49e389a0..8ed7e56e 100644 --- a/domains/grid/utils/gridParser.ts +++ b/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') +} diff --git a/domains/schema/elfsightWidgetSchema.ts b/domains/schema/elfsightWidgetSchema.ts new file mode 100644 index 00000000..ef818257 --- /dev/null +++ b/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 diff --git a/public/images/elfsight.png b/public/images/elfsight.png new file mode 100644 index 00000000..320757a6 Binary files /dev/null and b/public/images/elfsight.png differ diff --git a/translations/en_US.json b/translations/en_US.json index 1bea4f94..f64d4b4a 100644 --- a/translations/en_US.json +++ b/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" -} \ No newline at end of file + "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" +}