{"id":19475922,"url":"https://github.com/flo-bit/astro-custom-embeds","last_synced_at":"2025-04-15T08:57:00.574Z","repository":{"id":261314147,"uuid":"883959587","full_name":"flo-bit/astro-custom-embeds","owner":"flo-bit","description":"astro integration that allows you to easily add custom embeds that replace URLs (or directives) in mdx files with your custom components","archived":false,"fork":false,"pushed_at":"2024-12-20T02:01:14.000Z","size":32486,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T08:56:53.835Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flo-bit.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-05T22:06:12.000Z","updated_at":"2025-01-03T14:53:07.000Z","dependencies_parsed_at":"2024-11-05T22:26:38.133Z","dependency_job_id":null,"html_url":"https://github.com/flo-bit/astro-custom-embeds","commit_stats":null,"previous_names":["flo-bit/astro-custom-embeds"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fastro-custom-embeds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fastro-custom-embeds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fastro-custom-embeds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fastro-custom-embeds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flo-bit","download_url":"https://codeload.github.com/flo-bit/astro-custom-embeds/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249040047,"owners_count":21202813,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T19:35:40.336Z","updated_at":"2025-04-15T08:57:00.555Z","avatar_url":"https://github.com/flo-bit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Astro Custom Embeds Integration\n\nThis Astro integration allows you to easily add custom embeds that replace URLs (or directives) in `mdx` files with your custom components.\n\nSo for example you can replace a YouTube URL with an embedded youtube player, or a Twitter URL with an embedded tweet.\n\nThis integration is based on the [astro-embed](https://github.com/delucis/astro-embed) integration by delucis, with the ability to easily add your own custom embeds (and the option to use directives).\n\n\u003e [!WARNING]\n\u003e This integration is still in early development and might have some bugs or might change in the future.\n\n## Installation\n\nFirst, install the integration via npm:\n\n```bash\nnpm install astro-custom-embeds\n```\n\n## Usage\n\nTo use the custom embeds integration, add it to your `astro.config.ts` file (**BEFORE** the `mdx` integration):\n\n```ts\nimport { defineConfig } from 'astro/config';\nimport customEmbeds from 'astro-custom-embeds';\n\nexport default defineConfig({\n    integrations: [customEmbeds( ...options ), mdx()],\n});\n```\n\nThe `customEmbeds` function takes an options object with the following properties:\n\n```ts\n{\n    embeds: [{\n        componentName: string;\n\n        /**\n         * path to import component from (default is 'src/components/embeds')\n         */\n        importPath?: string;\n\n        /**\n         * for matching single urls on a single line\n         * function that should return a string with the argument to pass to the component or undefined if it doesn't match\n         */\n        urlMatcher?: (url: string) =\u003e string | undefined;\n\n        /**\n         * what argument to pass the matched part of the url as to the component (default is 'href')\n         */\n        urlArgument?: string;\n\n        /**\n         * for matching a directive, name of the directive, can also be an array of names\n         */\n        directiveName?: string | string[];\n    }]\n}\n```\n\nso for example, to replace YouTube URLs with a youtube embed, you could install [`astro-embed`](https://github.com/delucis/astro-embed) and then change your `astro.config.ts` to:\n\n```ts\n// returns id of youtube video url or undefined if it's not a youtube url\nimport youtubeMatcher from '@astro-community/astro-embed-youtube/matcher';\nimport customEmbeds from 'astro-custom-embeds';\n\n// https://astro.build/config\nexport default defineConfig({\n  integrations: [customEmbeds({\n    embeds: [\n      {\n        componentName: 'YouTube',\n        urlArgument: 'id',\n        urlMatcher: youtubeMatcher,\n        importPath: 'astro-embed',\n        directiveName: 'youtube'\n      }\n    ]\n  }), mdx()],\n});\n```\n\nThen in your `mdx` files you can add a YouTube video by just adding a youtube link (as long as it's on its own line):\n\n```md\n\nhttps://www.youtube.com/watch?v=dQw4w9WgXcQ\n\n```\n\nOr you can use the `youtube` directive:\n\n```md\n\n:youtube[https://www.youtube.com/watch?v=dQw4w9WgXcQ]\n\n```\n\n## Making your own custom embeds\n\nTo make your own custom embeds, you need first a function that takes a URL and returns the argument to pass to the component, or `undefined` if it doesn't match (e.g. by using a regex).\n\nFor a simple example, here's a function that matches all `https://` URLs:\n\n```ts\n// src/components/urlMatcher.ts\nexport default function urlMatcher(url: string): string | undefined {\n    if (url.startsWith('https://')) {\n        return url;\n    }\n    return undefined;\n}\n```\n\nAnd a component that renders this URL:\n\n```astro\n---\n// src/components/Link.astro\nconst { href } = Astro.props;\n---\n\n\u003ca {href}\u003eClick me!\u003c/a\u003e\n```\n\nYou also need to export this component as a named export, recommend is having a `embeds.ts` file in your `src/components` folder, where you export all your embeds:\n\n```ts\n// src/components/embeds.ts\nexport { default as Link } from './Link.astro';\n```\n\nThen you can use this in your `astro.config.ts`:\n\n```ts\nimport urlMatcher from './src/components/urlMatcher';\nimport customEmbeds from 'astro-custom-embeds';\n\nexport default defineConfig({\n    integrations: [customEmbeds({\n        embeds: [\n            {\n                componentName: 'Link',\n                urlArgument: 'href', // this is the default\n                urlMatcher,\n                importPath: 'src/components/embeds', // this is the default\n            }\n        ]\n    }), mdx()],\n});\n```\n\nNow all paragraphs with just one link in your `mdx` files will be replaced with the `Link` component.\n\n### Notes\n\n- all components must be exported as named exports, so for example these options **WOULD NOT** work:\n\n```ts\n{\n    componentName: 'Link',\n    urlArgument: 'href',\n    urlMatcher,\n    importPath: 'src/components/Link.astro',\n}\n```\n\n- embeds will process in the order they are defined in the `embeds` array, so if you have multiple embeds that could match the same URL, the first one will be used (so a general URL matcher should always be the last one)\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflo-bit%2Fastro-custom-embeds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflo-bit%2Fastro-custom-embeds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflo-bit%2Fastro-custom-embeds/lists"}