Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleanup duplicate README docs and update documentation links #100

Merged
merged 4 commits into from
Mar 30, 2024
Merged

Cleanup duplicate README docs and update documentation links #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b494a02
Updates documentation links
delucis Mar 30, 2024
78e7360
Ignore docs & demo in Changesets
delucis Mar 30, 2024
1dc637c
Avoid duplicate content and link to docs site from package READMEs
delucis Mar 30, 2024
31dbc35
Fix lock file
delucis Mar 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .changeset/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": []
"ignore": ["@astro-community/astro-embed-demo", "@astro-community/astro-embed-docs"]
}
9 changes: 9 additions & 0 deletions .changeset/metal-clouds-vanish.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
'@astro-community/astro-embed-integration': patch
'@astro-community/astro-embed-twitter': patch
'@astro-community/astro-embed-youtube': patch
'@astro-community/astro-embed-vimeo': patch
'astro-embed': patch
---

Simplifies README.md to link to docs site
9 changes: 9 additions & 0 deletions .changeset/twenty-humans-nail.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
'@astro-community/astro-embed-integration': patch
'@astro-community/astro-embed-twitter': patch
'@astro-community/astro-embed-youtube': patch
'@astro-community/astro-embed-vimeo': patch
'astro-embed': patch
---

Updates documentation links in `package.json`
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Welcome! This project aims to collect easy-to-use and lightweight ways to embed

Want to get started using some embed components?

[Check out the README for the `astro-embed` package ](packages/astro-embed/README.md)
Check out the [`astro-embed` documentation](https://astro-embed.netlify.app/)

## 🚀 Project Structure

Expand Down
3 changes: 2 additions & 1 deletion docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{
"name": "docs",
"name": "@astro-community/astro-embed-docs",
"type": "module",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
Expand Down
11 changes: 6 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

32 changes: 2 additions & 30 deletions packages/astro-embed-integration/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,5 @@
# @astro-community/astro-embed-integration

This is an experimental Astro integration that allows you to auto-convert URLs in MDX files to a corresponding embed component.
This is an Astro integration that allows you to auto-convert URLs in MDX files to corresponding embed components.

## Install

```bash
npm i @astro-community/astro-embed-integration
```

## Usage

To enable the integration, add it to the `integrations` array in your `astro.config.mjs` file:

```js
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import embeds from '@astro-community/astro-embed-integration';

export default defineConfig({
integrations: [embeds(), mdx()],
});
```

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

For example, MDX like this will render an optimised YouTube player component in place of the URL.

```mdx
I saw this cool video the other day:

http://www.youtube.com/watch?v=Hoe-woAhq_k
```
[See the docs for usage instructions](https://astro-embed.netlify.app/getting-started/#auto-embed-urls-in-mdx).
5 changes: 3 additions & 2 deletions packages/astro-embed-integration/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,15 @@
],
"repository": {
"type": "git",
"url": "git+https://github.com/delucis/astro-embed.git"
"url": "https://github.com/delucis/astro-embed",
"directory": "packages/astro-embed-integration"
},
"author": "delucis",
"license": "MIT",
"bugs": {
"url": "https://github.com/delucis/astro-embed/issues"
},
"homepage": "https://github.com/delucis/astro-embed/tree/main/packages/astro-embed-integration#readme",
"homepage": "https://astro-embed.netlify.app/getting-started/#auto-embed-urls-in-mdx",
"dependencies": {
"@astro-community/astro-embed-twitter": "^0.5.3",
"@astro-community/astro-embed-vimeo": "^0.3.2",
Expand Down
51 changes: 1 addition & 50 deletions packages/astro-embed-twitter/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,53 +2,4 @@

This package contains a component for embedding tweets in Astro projects.

## Install

```bash
npm i @astro-community/astro-embed-twitter
```

## Usage

### `<Tweet id={tweetUrl} />`

The **Tweet** component generates a static Twitter card for a single Tweet using [Twitter’s oEmbed API](https://developer.twitter.com/en/docs/twitter-for-websites/oembed-api).

```astro
---
import { Tweet } from '@astro-community/astro-embed-twitter';
---

<Tweet id="https://twitter.com/astrodotbuild/status/1511750228428435457" />
```

### Loading Twitter’s JavaScript

By design, this is a minimal component and loads zero JavaScript, only rendering some static HTML content.
However, this HTML is compatible with Twitter’s widget system.
Loading Twitter‘s large bundle of widget JavaScript will convert each `<Tweet />` into an interactive embed.

You can do this by including a `<script>` tag in your Astro layout file:

```html
<script async src="https://platform.twitter.com/widgets.js"></script>
```

### Styling

By default the card has minimal styling, which should adapt to your site’s font settings etc.

You can customise it by targeting the `.twitter-tweet` class, for example:

```css
.twitter-tweet {
background: floralwhite;
font-family: sans-serif;
border: 0;
}

.twitter-tweet a {
color: purple;
font-weight: bold;
}
```
[Read the `<Tweet>` component docs](https://astro-embed.netlify.app/components/twitter/).
7 changes: 4 additions & 3 deletions packages/astro-embed-twitter/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
],
"repository": {
"type": "git",
"url": "git+https://github.com/delucis/astro-embed.git"
"url": "https://github.com/delucis/astro-embed",
"directory": "packages/astro-embed-twitter"
},
"keywords": [
"astro",
Expand All @@ -28,11 +29,11 @@
"bugs": {
"url": "https://github.com/delucis/astro-embed/issues"
},
"homepage": "https://github.com/delucis/astro-embed/tree/main/packages/astro-embed-twitter#readme",
"homepage": "https://astro-embed.netlify.app/components/twitter/",
"dependencies": {
"@astro-community/astro-embed-utils": "^0.1.0"
},
"peerDependencies": {
"astro": "^2.0.0 || ^3.0.0-beta || ^4.0.0-beta"
}
}
}
56 changes: 1 addition & 55 deletions packages/astro-embed-vimeo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,58 +2,4 @@

This package contains a component for embedding Vimeo videos in Astro projects.

## Install

```bash
npm i @astro-community/astro-embed-vimeo
```

## Usage

### `<Vimeo id={video_id_or_url} />`

The **Vimeo** component generates an embed using a `lite-vimeo` custom element. Vimeo embeds will always require some JavaScript, but this is one of the most minimal and performant ways to embed a Vimeo video.

```astro
---
import { Vimeo } from '@astro-community/astro-embed-vimeo';
---

<Vimeo id="32001208" />
```

You can also pass in the full URL for the video:

```astro
<Vimeo id="https://vimeo.com/32001208" />
```

#### Optional props

##### `poster`

You can provide an alternative poster image by passing in a URL to the `poster` prop.

```astro
<Vimeo
id="32001208"
poster="https://images-assets.nasa.gov/image/0302063/0302063~orig.jpg"
/>
```

##### `params`

You can pass a `params` prop to set the [player parameters supported by Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Player-parameters-overview). This looks like a series of URL search params.

```astro
<!-- Example: Set the UI color to red and mute by default. -->
<Vimeo id="32001208" params="color=ff0000&muted=1" />
```

##### `playlabel`

By default, the play button in the embed has an accessible label set to “Play”. If you want to customise this, you can set the `playlabel` prop.

```astro
<Vimeo id="32001208" playlabel="Play the video" />
```
[Read the `<Vimeo>` component docs](https://astro-embed.netlify.app/components/vimeo/).
7 changes: 4 additions & 3 deletions packages/astro-embed-vimeo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
],
"repository": {
"type": "git",
"url": "git+https://github.com/delucis/astro-embed.git"
"url": "https://github.com/delucis/astro-embed",
"directory": "packages/astro-embed-vimeo"
},
"keywords": [
"astro",
Expand All @@ -28,8 +29,8 @@
"bugs": {
"url": "https://github.com/delucis/astro-embed/issues"
},
"homepage": "https://github.com/delucis/astro-embed/tree/main/packages/astro-embed-vimeo#readme",
"homepage": "https://astro-embed.netlify.app/components/vimeo/",
"peerDependencies": {
"astro": "^2.0.0 || ^3.0.0-beta || ^4.0.0-beta"
}
}
}
55 changes: 1 addition & 54 deletions packages/astro-embed-youtube/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,4 @@

This package contains a component for embedding YouTube videos in Astro projects.

## Install

```bash
npm i @astro-community/astro-embed-youtube
```

## Usage

### `<YouTube id={video_id} />`

The **YouTube** component generates an embed using [the `lite-youtube-embed` custom element](https://github.com/paulirish/lite-youtube-embed). YouTube embeds will always require some JavaScript, but this is one of the most minimal and performant ways to embed a YouTube video.

```astro
---
import { YouTube } from '@astro-community/astro-embed-youtube';
---

<YouTube id="xtTy5nKay_Y" />
```

You can also pass in a URL in one of the various YouTube formats.

```astro
<YouTube id="https://youtu.be/xtTy5nKay_Y" />
```

#### Optional props

##### `poster`

You can provide an alternative poster image by passing in a URL to the `poster` prop.

```astro
<YouTube
id="xtTy5nKay_Y"
poster="https://images-assets.nasa.gov/image/0302063/0302063~orig.jpg"
/>
```

##### `params`

As when using `lite-youtube-embed` directly, you can pass in a `params` prop to set the [YouTube player parameters](https://developers.google.com/youtube/player_parameters#Parameters). This looks like a series of URL search params.

```astro
<YouTube id="xtTy5nKay_Y" params="start=10&end=30" />
```

##### `playlabel`

By default, the play button in the embed has an accessible label set to “Play”. If you want to customise this, you can set the `playlabel` prop.

```astro
<YouTube id="xtTy5nKay_Y" playlabel="Play the video" />
```
[Read the `<YouTube>` component docs](https://astro-embed.netlify.app/components/youtube/).
5 changes: 3 additions & 2 deletions packages/astro-embed-youtube/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
],
"repository": {
"type": "git",
"url": "git+https://github.com/delucis/astro-embed.git"
"url": "https://github.com/delucis/astro-embed",
"directory": "packages/astro-embed-youtube"
},
"keywords": [
"astro",
Expand All @@ -27,7 +28,7 @@
"bugs": {
"url": "https://github.com/delucis/astro-embed/issues"
},
"homepage": "https://github.com/delucis/astro-embed/tree/main/packages/astro-embed-youtube#readme",
"homepage": "https://astro-embed.netlify.app/components/youtube/",
"dependencies": {
"lite-youtube-embed": "^0.3.2"
},
Expand Down
Loading
Loading