feat: ✨ add guild card

add mount test

Author: spences10

src/lib/components/guild.svelte

@@ -0,0 +1,72 @@
+<!-- 
+  Examples for guilds, users, events and presentations
+  Guilds:
+  https://beta.guild.host/embeds/guild/svelte-society-london/card
+  https://beta.guild.host/embeds/guild/svelte-society-london/events/latest
+  https://beta.guild.host/embeds/guild/svelte-society-london/events/upcoming
+  https://beta.guild.host/embeds/guild/svelte-society-london/events/past
+  https://beta.guild.host/embeds/guild/svelte-society-london/presentations/latest
+  https://beta.guild.host/embeds/guild/svelte-society-london/presentations/upcoming
+  https://beta.guild.host/embeds/guild/svelte-society-london/presentations/other 
+  Users:
+  https://beta.guild.host/embeds/user/spences10/card
+  https://beta.guild.host/embeds/user/spences10/events/latest
+  https://beta.guild.host/embeds/user/spences10/events/upcoming
+  https://beta.guild.host/embeds/user/spences10/events/past
+  https://beta.guild.host/embeds/user/spences10/presentations/latest
+  https://beta.guild.host/embeds/user/spences10/presentations/upcoming
+  https://beta.guild.host/embeds/user/spences10/presentations/other
+  Events:
+  https://beta.guild.host/embeds/event/svelte-london-february-h0ghig/card
+  https://beta.guild.host/embeds/event/svelte-london-february-h0ghig/item
+  Presentations:
+  https://beta.guild.host/embeds/presentation/microfrontends-with-e6mtnf/card
+  https://beta.guild.host/embeds/presentation/microfrontends-with-e6mtnf/item
+-->
+<script lang="ts">
+  import GeneralObserver from './general-observer.svelte'
+
+  export let height: string = '350'
+  export let width: string = '100'
+  export let card_id: string
+  export let type: 'guild' | 'user' | 'event' | 'presentation' =
+    'guild'
+  export let display_type:
+    | 'card'
+    | 'item'
+    | 'events/latest'
+    | 'events/upcoming'
+    | 'events/past'
+    | 'presentations/latest'
+    | 'presentations/upcoming'
+    | 'presentations/other' = 'card'
+</script>
+
+<GeneralObserver>
+  <div
+    class="guild-card"
+    style={`
+      position: relative;
+      height: ${height}px;
+      width: ${width}%;
+    `}
+  >
+    <iframe
+      data-testid="guild-card"
+      title={`guild-card-${card_id}`}
+      src={`https://beta.guild.host/embeds/${type}/${card_id}/${display_type}`}
+      {height}
+      {width}
+      frameborder="0"
+      scrolling="no"
+      style={`
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 0.5rem;
+      `}
+    />
+  </div>
+</GeneralObserver>

src/lib/components/guild.test.ts

@@ -0,0 +1,18 @@
+import Guild from '$lib/components/guild.svelte'
+import { cleanup, render } from '@testing-library/svelte'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+globalThis.IntersectionObserver = vi.fn(() => ({
+  observe: () => null,
+  unobserve: () => null,
+  disconnect: () => null,
+})) as unknown as typeof globalThis.IntersectionObserver
+
+describe('Guild', () => {
+  afterEach(() => cleanup())
+
+  it('mounts', () => {
+    const { container } = render(Guild)
+    expect(container).toBeTruthy()
+  })
+})

src/lib/index.ts

@@ -5,6 +5,7 @@ export { default as Deezer } from './components/deezer.svelte'
 export { default as GeneralObserver } from './components/general-observer.svelte'
 export { default as GenericEmbed } from './components/generic-embed.svelte'
 export { default as Gist } from './components/gist.svelte'
+export { default as Guild } from './components/guild.svelte'
 export { default as Relive } from './components/relive.svelte'
 export { default as SimpleCast } from './components/simple-cast.svelte'
 export { default as Slides } from './components/slides.svelte'

src/routes/+page.md

@@ -6,6 +6,7 @@
     Deezer,
     GenericEmbed,
     Gist,
+    Guild,
     Relive,
     SimpleCast,
     Slides,
@@ -71,6 +72,7 @@ or open a [PR](https://github.com/spences10/sveltekit-embed/pulls).
 - [Deezer](#deezer)
 - [GenericEmbed](#genericembed)
 - [Gist](#gist)
+- [Guild](#guild)
 - [Relive](#relive)
 - [SimpleCast](#simplecast)
 - [Slides](#slides)
@@ -255,6 +257,45 @@ Output:
 
 <Gist gistUri="Ennoriel/8c89dc3615292f0a40b04f4f876afd77" />
 
+## Guild
+
+Props:
+
+```ts
+height: string = '350'
+width: string = '100'
+card_id: string
+type: 'guild' | 'user' | 'event' | 'presentation' =
+  'guild'
+display_type:
+  | 'card'
+  | 'item'
+  | 'events/latest'
+  | 'events/upcoming'
+  | 'events/past'
+  | 'presentations/latest'
+  | 'presentations/upcoming'
+  | 'presentations/other' = 'card'
+```
+
+Usage:
+
+```html
+<Guild
+  type="guild"
+  card_id="svelte-society-london"
+  display_type="events/latest"
+/>
+```
+
+Output:
+
+<Guild
+  type="guild"
+  card_id="svelte-society-london"
+  display_type="card"
+/>
+
 ## Relive
 
 Props: