Merge pull request #335 from spences10/feat/add-toot

Author: spences10

README.md

@@ -1,7 +1,9 @@
 # SvelteKit Embed
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/3786-shield.svg)](https://madewithsvelte.com/p/sveltekit-embed/shield-link)
@@ -11,9 +13,9 @@ packaged up for use.
 
 ![sveltekit embed cover](.github/sveltekit-embed.jpg)
 
-Each component is wrapped in an intersection observer
-`GeneralObserver` which will load up the component when it scrolls
-into the viewport.
+Each component with the exception of `Toot` and `Tweet` is wrapped in
+an intersection observer `GeneralObserver` which will load up the
+component when it scrolls into the viewport.
 
 ## Use
 
@@ -81,6 +83,31 @@ Credit to [@pauliescanlon](https://github.com/pauliescanlon) for the
 original version of this project in
 [MDX Embed](https://github.com/pauliescanlon/mdx-embed).
 
+## Packaging for NPM
+
+Scott, this is here for you to remember how to do this 🙃
+
+Although I detailed this in
+[Making npm Packages with SvelteKit](https://scottspence.com/posts/making-npm-packages-with-sveltekit)
+I think it's best to put it here as I always come to the README and
+the instructions are never there! 😅
+
+**Publish the project to NPM**
+
+```bash
+# authenticate with npm
+npm login
+# bump version with npm
+npm version 0.0.2
+# package with sveltkit
+pnpm run package
+# publish from package directory
+cd package
+npm publish
+# push tags to github
+git push --tags
+```
+
 ## Contributors ✨
 
 Thanks goes to these wonderful people

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-embed",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": {
     "name": "Scott Spence",
     "email": "yo@scottspence.dev",

src/lib/components/toot.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  export let instance: string = ''
+  export let username: string = ''
+  export let tootId: string = ''
+</script>
+
+<svelte:head>
+  <script
+    async
+    src="https://mas.to/embed.js"
+    charset="utf-8"
+  ></script>
+</svelte:head>
+
+<div class="flex justify-center mb-12">
+  <iframe
+    title=""
+    src={`https://${instance}/${
+      username.slice(0, 1) === `@` ? username : `@` + username
+    }/${tootId}/embed`}
+    class="mastodon-embed"
+    style="max-width: 100%; border: 0"
+    width="400"
+    allowfullscreen
+  />
+</div>

src/lib/index.ts

@@ -8,6 +8,7 @@ export { default as SimpleCast } from './components/simple-cast.svelte'
 export { default as SoundCloud } from './components/sound-cloud.svelte'
 export { default as Spotify } from './components/spotify.svelte'
 export { default as StackBlitz } from './components/stackblitz.svelte'
+export { default as Toot } from './components/toot.svelte'
 export { default as Tweet } from './components/tweet.svelte'
 export { default as Vimeo } from './components/vimeo.svelte'
 export { default as YouTube } from './components/you-tube.svelte'

src/routes/+page.md

@@ -9,6 +9,7 @@
     SoundCloud,
     Spotify,
     StackBlitz,
+    Toot,
     Tweet,
     Vimeo,
     YouTube,
@@ -287,6 +288,34 @@ Output:
 
 <StackBlitz id="vitejs-vite-yyoood" hideNavigation />
 
+## Toot
+
+Props:
+
+```ts
+instance: string = ''
+username: string = ''
+tootId: string = ''
+```
+
+Usage:
+
+```html
+<Toot
+  instance="mas.to"
+  username="@spences10"
+  tootId="109252587760962553"
+/>
+```
+
+Output:
+
+<Toot 
+  instance="mas.to" 
+  username="@spences10" 
+  tootId="109252587760962553"
+/>
+
 ## Tweet
 
 Props: