diff --git a/README.md b/README.md index 432ba34..a43ce18 100644 --- a/README.md +++ b/README.md @@ -10,19 +10,21 @@ When added to a webpage, hovering links displays a wikipedia-style dynamic page There are two parts to this project: -- A script that inserts page previews on your webpage, written as a Svelte web component. +- A script that inserts page previews on your webpage, written as a web component. - A serverless worker function that fetches and serves the links' meta information. The worker is required because CORs prevents cross-origin client requests. For example, trying to directly `fetch` a url like `https://matrix.org` from your webpage will fail since most servers are configured to reject cross-origin requests. As a result, it's necessary to make the request outside the browser. -Since the task of fetching a page and parsing out the meta information is so simple, it can be accomplished with a single serverless function that's very quick to deploy. I'm using [Cloudflare Workers](https://workers.cloudflare.com/) but you could probably rewrite it for some other service like AWS Lambda. +Since the task of fetching a page and parsing out the meta information is so simple, it can be accomplished with a single serverless function. I'm using [Cloudflare Workers](https://workers.cloudflare.com/) but you could probably rewrite it for some other service like AWS Lambda. ### Deploy the worker -Follow the instructions in [the worker's readme](worker/README.md). Once complete, you should have a url like `https://worker.[something].workers.dev`, or a custom domain if you've opted to set one up. +Follow the instructions in [the worker's readme](worker/README.md) to deploy the worker. Once complete, you should have a url like `https://worker.[something].workers.dev`, or a custom domain if you've opted to set one up. ### Add the script and instantiate +The latest build can be found in [`client/dist`](/client/dist/). + Add the script to the end of your site's `body`: ```html @@ -43,7 +45,6 @@ Then, call `linkPreview` for each link you'd like to add a preview to: @@ -58,32 +59,34 @@ You can customize the preview element through the `options` in the constructor: ```js linkPreview("#myLink", { backend: "https://link-to-worker.workers.dev", - template: "basic", - position: "below", // below, above, or follow - title: "An interesting link", + template: "#my-cool-template", // a custom template for rendering the preview + position: "below", // "below" or "above" the link, or "follow" the cursor + title: "An interesting link", // setting the title or desc overrides the link's data description: "I think is worth clicking", }); ``` Here's the full list of options: -| Option | Value | Default | Required? | -| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | --------- | -| `backend` | A string with the URL of the deployed worker (see [Deploy the worker](#deploy-the-worker).) | `null` | `false` | -| `template` | The selector of the template element to use to render the preview (see [Custom styles and markup](#custom-styles-and-markup).) You can also use the built-in template by passing in `"basic"`. | `basic` | `false` | -| `fetchUrl` | Fetch the url's content from the worker? | `true` | `false` | -| `position` | Where the preview will be placed relative to the link. `"below"`, `"above"` or `"follow"` to follow the cursor | `"below"` | `false` | -| `title` | The preview title. Overrides the title produced by the worker if it finds one. | `null` | `false` | -| `description` | The preview description. Overrides the description produced by the worker if it finds one. | `null` | `false` | -| `url` | The url of the link. Overrides the provided element's `href`. | `null` | `false` | -| `img` | The preview image `src`. Overrides the image `src` produced by the worker if it finds one. | `null` | `false` | +| Option | Value | Default | Required? | +| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | --------- | +| `backend` | A string with the URL of the deployed worker (see [Deploy the worker](#deploy-the-worker).) | `null` | `false` | +| `template` | The selector of the template element to use to render the preview (see [Custom styles and markup](#custom-styles-and-markup).) The default `"basic"` uses a provided template. | `"basic"` | `false` | +| `fetchUrl` | Fetch the url's content from the worker? | `true` | `false` | +| `position` | Where the preview will be placed relative to the link. `"below"`, `"above"` or `"follow"` to follow the cursor | `"below"` | `false` | +| `title` | The preview title. Overrides the title produced by the worker if it finds one. | `null` | `false` | +| `description` | The preview description. Overrides the description produced by the worker if it finds one. | `null` | `false` | +| `url` | The url of the link. Overrides the provided element's `href`. | `null` | `false` | +| `img` | The preview image `src`. Overrides the image `src` produced by the worker if it finds one. | `null` | `false` | + +### Custom previews -### Custom styles and markup +The link preview is totally customizable through an [html template](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) with [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot). The template that's used by default can be found at [`client/templates/basic.js`](/client/templates/basic.js). -The link preview is totally customizable through an [html template](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) with [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot). Add a template to your page (the `template` element is invisible, so this can be anywhere in the document): +Add a custom template to your page (the `template` element is invisible, so this can be anywhere in the document): ```html -