Initial commit

.github/workflows/main.yml

@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['10.x', '12.x', '14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build

.github/workflows/size.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,4 @@
+*.log
+.DS_Store
+node_modules
+dist

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 nzambello
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,103 @@
+# TSDX User Guide
+
+Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
+
+> This TSDX setup is meant for developing libraries (not apps!) that can be published to NPM. If you’re looking to build a Node app, you could use `ts-node-dev`, plain `ts-node`, or simple `tsc`.
+
+> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript)
+
+## Commands
+
+TSDX scaffolds your new library inside `/src`.
+
+To run TSDX, use:
+
+```bash
+npm start # or yarn start
+```
+
+This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
+
+To do a one-off build, use `npm run build` or `yarn build`.
+
+To run tests, use `npm test` or `yarn test`.
+
+## Configuration
+
+Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
+
+### Jest
+
+Jest tests are set up to run with `npm test` or `yarn test`.
+
+### Bundle Analysis
+
+[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library with `npm run size` and visualize the bundle with `npm run analyze`.
+
+#### Setup Files
+
+This is the folder structure we set up for you:
+
+```txt
+/src
+  index.tsx       # EDIT THIS
+/test
+  blah.test.tsx   # EDIT THIS
+.gitignore
+package.json
+README.md         # EDIT THIS
+tsconfig.json
+```
+
+### Rollup
+
+TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
+
+### TypeScript
+
+`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
+
+## Continuous Integration
+
+### GitHub Actions
+
+Two actions are added by default:
+
+- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
+- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
+
+## Optimizations
+
+Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
+
+```js
+// ./types/index.d.ts
+declare var __DEV__: boolean;
+
+// inside your code...
+if (__DEV__) {
+  console.log('foo');
+}
+```
+
+You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
+
+## Module Formats
+
+CJS, ESModules, and UMD module formats are supported.
+
+The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
+
+## Named Exports
+
+Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
+
+## Including Styles
+
+There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
+
+For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
+
+## Publishing to NPM
+
+We recommend using [np](https://github.com/sindresorhus/np).

package.json

@@ -0,0 +1,61 @@
+{
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test",
+    "lint": "tsdx lint",
+    "typecheck": "tsc -b",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "peerDependencies": {},
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint && tsc -b"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "link-previewer",
+  "author": "nzambello",
+  "module": "dist/link-previewer.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/link-previewer.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/link-previewer.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "7.0.8",
+    "@types/cheerio": "0.22.31",
+    "husky": "7.0.4",
+    "size-limit": "7.0.8",
+    "tsdx": "0.14.1",
+    "tslib": "2.4.0",
+    "typescript": "4.6.3"
+  },
+  "dependencies": {
+    "cheerio": "1.0.0-rc.10",
+    "cross-fetch": "3.1.5"
+  }
+}

src/index.ts

@@ -0,0 +1,114 @@
+import cheerio from 'cheerio';
+import { fetch } from 'cross-fetch';
+
+export type ILinkPreviewerOptions = {
+  headers?: Record<string, string>;
+  proxyUrl?: string;
+  followRedirects?: boolean;
+};
+
+export type ILinkPreviewInfo = {
+  title?: string | undefined;
+  siteName?: string | undefined;
+  description?: string | undefined;
+  mediaType?: string | undefined;
+  image?: string | undefined;
+  imageWidth?: number | undefined;
+  imageHeight?: number | undefined;
+  favicon?: string | undefined;
+  images?: string[] | undefined;
+  video?: string | undefined;
+  videos?: string[] | undefined;
+};
+
+const getMeta = ($: cheerio.Root, metaName: string) => {
+  return (
+    $("meta[name='" + metaName + "']").attr('content') ||
+    $("meta[property='" + metaName + "']").attr('content')
+  );
+};
+
+const parseUrl = (url?: string, baseUrl?: string) => {
+  if (!url) return undefined;
+  if (!baseUrl || url.startsWith('http')) return url;
+
+  return `${baseUrl}${url}`;
+};
+
+export const parseResponse = (
+  data: string,
+  baseUrl: string
+): ILinkPreviewInfo => {
+  const $ = cheerio.load(data);
+  const siteName = getMeta($, 'og:site_name');
+  const title = getMeta($, 'og:title') || $('title').text();
+  const description = getMeta($, 'og:description') || getMeta($, 'description');
+  const mediaType = getMeta($, 'og:type');
+  const image = parseUrl(
+    getMeta($, 'og:image') || getMeta($, 'og:image:url'),
+    baseUrl
+  );
+  const imageWidth = getMeta($, 'og:image:width');
+  const imageHeight = getMeta($, 'og:image:height');
+  const favicon = parseUrl(
+    $('link[rel="shortcut icon"]').attr('href'),
+    baseUrl
+  );
+  const images = $('img')
+    .map((_i, el) => parseUrl($(el).attr('src'), baseUrl))
+    .get() as string[] | undefined;
+  const video = parseUrl(
+    getMeta($, 'og:video:secure_url') ||
+      getMeta($, 'og:video:url') ||
+      getMeta($, 'og:video'),
+    baseUrl
+  );
+  const videos = $('video')
+    .map((_i, el) => parseUrl($(el).attr('src'), baseUrl))
+    .get() as string[] | undefined;
+
+  return {
+    title,
+    siteName,
+    description,
+    mediaType,
+    image,
+    imageWidth: imageWidth ? parseInt(imageWidth, 10) : undefined,
+    imageHeight: imageHeight ? parseInt(imageHeight, 10) : undefined,
+    favicon,
+    images,
+    video,
+    videos,
+  };
+};
+
+const getLinkPreview = async (url: string, options?: ILinkPreviewerOptions) => {
+  const fetchUrl = options?.proxyUrl ? options.proxyUrl.concat(url) : url;
+
+  const fetchOptions = {
+    headers: options?.headers ?? {},
+    redirect: options?.followRedirects
+      ? ('follow' as 'follow')
+      : ('error' as 'error'),
+  };
+
+  const response = await fetch(fetchUrl, fetchOptions).catch(e => {
+    if (e.name === 'AbortError') {
+      throw new Error('Request timeout');
+    }
+
+    throw e;
+  });
+
+  const data = await response.text();
+
+  const baseUrl = new URL(
+    options?.proxyUrl
+      ? response.url.replace(options.proxyUrl, '')
+      : response.url
+  ).origin;
+
+  return parseResponse(data, baseUrl);
+};
+
+export default getLinkPreview;

test/index.test.ts

@@ -0,0 +1,48 @@
+import getLinkPreview, { ILinkPreviewInfo } from '../src';
+
+const youtubeSample: ILinkPreviewInfo = {
+  description:
+    'How much do we know about the impact of technologies we use everyday? How much the web industry is responsible for carbon emissions? Can we define an ethic d...',
+  favicon: 'https://www.youtube.com/s/desktop/ce262d3b/img/favicon.ico',
+  image: 'https://i.ytimg.com/vi/feH26j3rBz8/maxresdefault.jpg',
+  imageHeight: 720,
+  imageWidth: 1280,
+  images: [],
+  mediaType: 'video.other',
+  siteName: 'YouTube',
+  title: 'A sustainable web: is it possible? - Nicola Zambello',
+  video: 'https://www.youtube.com/embed/feH26j3rBz8',
+  videos: [],
+};
+
+const rawmaterialSample: ILinkPreviewInfo = {
+  description:
+    'RawMaterial is an innovative and emerging company at the forefront of providing sustainable web solutions and environmental consulting services for a sustainable, inclusive, equitable and community future.',
+  favicon: 'https://rawmaterial.it/favicon.ico',
+  image:
+    'https://rawmaterial.it/en/@@images/33b46076-8aca-430e-bdf5-4c6154d4a3a7.png',
+  imageHeight: 295,
+  imageWidth: 800,
+  images: [
+    'https://rawmaterial.it/it/risorse/plone-logo.svg/@@images/image/icon',
+    'https://rawmaterial.it/it/risorse/rawmaterial-it.png/@@images/image/icon',
+    'https://rawmaterial.it/it/risorse/logo_treedom_friend_green.png/@@images/image/icon',
+  ],
+  mediaType: undefined,
+  siteName: undefined,
+  title: 'RawMaterial',
+  video: undefined,
+  videos: [],
+};
+
+it('gets correct info for RawMaterial website', async () => {
+  const info = await getLinkPreview('https://rawmaterial.it/en');
+  expect(info).toEqual(rawmaterialSample);
+});
+
+it('gets correct info for YouTube video link', async () => {
+  const info = await getLinkPreview(
+    'https://www.youtube.com/watch?v=feH26j3rBz8'
+  );
+  expect(info).toEqual(youtubeSample);
+});

tsconfig.json

@@ -0,0 +1,35 @@
+{
+  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    // output .d.ts declaration files for consumers
+    "declaration": true,
+    // output .js.map sourcemap files for consumers
+    "sourceMap": true,
+    // match output dir to input dir. e.g. dist/index instead of dist/src/index
+    "rootDir": "./src",
+    // stricter type-checking for stronger correctness. Recommended by TS
+    "strict": true,
+    // linter checks for common issues
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    // use Node's module resolution algorithm, instead of the legacy TS one
+    "moduleResolution": "node",
+    // transpile JSX to React.createElement
+    "jsx": "react",
+    // interop between ESM and CJS modules. Recommended by TS
+    "esModuleInterop": true,
+    // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
+    "skipLibCheck": true,
+    // error out if import and file system have a casing mismatch. Recommended by TS
+    "forceConsistentCasingInFileNames": true,
+    // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
+    "noEmit": true,
+  }
+}