Nuanced Pterodactyl Monk

    astro-embed

    0.2.1 • Public • Published

    astro-embed

    Embed components for your Astro sites built by the Astro community 🚀

    Install

    npm i astro-embed

    Note Using the <Tweet /> component? add a SECRET_TWITTER_TOKEN environment variable with your Twitter API bearer token. Learn more in the component docs →

    Using the components

    .astro files

    To use components in your .astro files, first import them in the component script.

    ---
    import { Tweet, Vimeo, YouTube } from 'astro-embed';
    ---
    
    <Tweet id="https://twitter.com/astrodotbuild/status/1512144306898976768" />
    
    <Vimeo id="https://vimeo.com/32001208" />
    
    <YouTube id="https://youtu.be/xtTy5nKay_Y" />

    Markdown pages

    You can also import an embed component for use on a Markdown page.

    ---
    setup: |
      import { Tweet, Vimeo, YouTube } from 'astro-embed';
    ---
    
    Hey look! I can embed a tweet _in Markdown_!
    
    <Tweet id="https://twitter.com/astrodotbuild/status/1512144306898976768" />
    
    Vimeo and YouTube videos work too :-)
    
    <Vimeo id="https://vimeo.com/32001208" />
    <YouTube id="https://youtu.be/xtTy5nKay_Y" />

    Warning: This requires the legacy.astroFlavoredMarkdown flag to be turned on in your astro.config.mjs file.

    Using the integration

    You can use the provided integration to automatically convert standalone URLs in Markdown files to embed components.

    To enable the integration, add it to the integrations array in your astro.config.mjs file and enable the legacy.astroFlavoredMarkdown flag to support components in Markdown files.

    import { defineConfig } from 'astro/config';
    import embeds from 'astro-embed/integration';
    
    export default defineConfig({
      integrations: [embeds()],
      legacy: {
        astroFlavoredMarkdown: true,
      },
    });

    With the integration enabled any isolated URL in a Markdown file that matches one of the astro-embed component types will be converted to the appropriate component.

    For example, Markdown like this

    I saw this cool Tweet the other day:
    
    https://twitter.com/astrodotbuild/status/1511750228428435457

    Will render the Tweet component in place of the URL.

    Docs

    See individual packages for how to use the component for each service:

    Install

    npm i astro-embed

    DownloadsWeekly Downloads

    513

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    4.13 kB

    Total Files

    4

    Last publish

    Collaborators

    • sarah11918
    • afuzzybear
    • rafidmuhymin
    • princesseuh
    • lostra01
    • delucis