Componente Modal

Si quieren agregar el botón de whatsapp:

en Share.svelte:

//en el css  
.Share-content i {
    margin: 0 0.5em 0 0;
    font-size: 20px;
  }
  .Share-facebook i {
    color: #3b5998;
  }
  .Share-whatsapp i {
     color: #1bd741;
  }

// en el html

    <div class="Share-content">
        <div class="Share-facebook">
            <a href="https://www.facebook.com/sharer/sharer.php?&u=https://pugstagram.co/" target="_blank">
            <i class="fab fa-facebook-square" />
            Compartir en Facebook!
        </a>
        </div>
        <div class="Share-whatsapp">
            <a href="https://api.whatsapp.com/send?&text=mira%20este%20hermoso%20pug%20https://pugstagram.co/" target="_blank">
            <i class="fab fa-whatsapp-square" />
            Compartir en Whatsapp!
        </a>          
        </div>
    </div>

Resultado:

Al importar los componentes en svelte se puede hacer sin la extensión de la siguiente manera:

Para los que no les anduvo el efecto Blur, tanto al abrir el modal, como al cerrar el modal, teniendo está version de svelte:

"dependencies": {
    "svelte": "^3.18.2"
}

Solo tuve que editar al import del blur lo siguiente y funcionó correctamente:

// Segun documentación oficial de Svelte
import { blur } from 'svelte/transition';

Éxitos!

Una vez que compartimos en facebook al volver a la página hay que cerrar la ventana modal…
Para que eso no suceda en el <a … facebook… </a> agrega on:click

Estilo para poder hacer scroll y permanezca el modal

.Modal {
      position: fixed;
      z-index: 100;
      
    }

https://www.facebook.com/sharer/sharer.php?&u=htttps://pugstagram.co

Lo hice hahahah sin estilos pero hice la logica. La verdad que me esta gustando muchisimo, casi como React.

Hola profesor, ningún momento explicas que transición hace blur, sería bueno que lo explicaras

<style>
  .share {
    border-radius: 4px;
    background-color: var(--white-color);
    margin: 0 0 2em 0;
    width: 300px;
    position: absolute;
    top: 300px;
    left: 25%;
    z-index: 3;
    padding: 1em;
  }
  .share__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .share__title {
    font-size: 16px;
  }
  .share__exit {
    cursor: pointer;
  }
  .share__link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 14px;
    margin: 2em 0 0 0;
  }
  .share__icon-social {
    color: #3b5998;
    margin: 0 0.5em 0 0;
    font-size: 20px;
  }
</style>

<div class="share">
  <div class="share__head">
    <h2 class="share__title">Compartir</h2>
    <i class="fas fa-times-circle share__exit" on:click />
  </div>
  <div class="share__content">
    <a
      href="https://www.facebook.com/sharer.php?&t=Aprendiendo%20a%20crear%20un%20enlace%20para%20compartir%20en%20Facebook%20https://devstagram.com/&u=https://devstagtam.com"
      target="_blank"
      class="share__link">
      <i class="fab fa-facebook-square share__icon-social" />
      Compartir en Facebook
    </a>
    <a
      href="https://twitter.com/intent/tweet?text=Aprendiendo%20a%20crear%20un%20enlace%20para%20compartir%20en%20Twitter&url=devstagram.com"
      target="_blank"
      class="share__link">
      <i class="fab fa-twitter-square share__icon-social" />
      Compartir en Twitter
    </a>
    <a
      href="https://api.whatsapp.com/send?&text=Aprendiendo%20a%20crear%20un%20enlace%20para%20compartir%20en%20Whatsapp%20https://devstagram.com/"
      target="_blank"
      class="share__link">
      <i class="fab fa-whatsapp-square share__icon-social" />
      Compartir en Whatsapp
    </a>
  </div>
</div>

👌

Se pierde mucho tiempo explicando cosas de HTML y no explica bien las partes de svelte…