@dhaiwat10/react-link-preview - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

index.esm.js

@@ -1,2 +0,2 @@
-import e,{useRef as n,useState as t,useEffect as i}from"react";import r from"html-metadata-parser";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* common */\n.Container {\n  text-align: left;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  border-radius: 7px;\n  border: 1px solid #ccc;\n  color: black;\n  transition: 0.3s all ease;\n  height: fit-content; }\n  .Container:hover {\n    background-color: #f7f7f7;\n    cursor: pointer; }\n\n.Secondary {\n  color: #646464; }\n\n.LowerContainer {\n  padding: 10px; }\n\n.Title {\n  margin-top: 0;\n  margin-bottom: 10px; }\n\n.Image {\n  width: 100%;\n  border-top-left-radius: 7px;\n  border-top-right-radius: 7px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  height: 30vh; }\n\n.SiteDetails {\n  margin-top: 10px; }\n\n/* sm */\n@media (max-width: 640px) {\n  .Description {\n    display: none; } }\n\n/* md */\n@media (min-width: 641px) and (max-width: 768px) {\n  .Description {\n    display: none; } }\n");var a=function(a){var o=a.url,l=a.className,c=void 0===l?"":l,d=a.width,s=a.height,m=a.descriptionLength,p=a.borderRadius,h=a.imageHeight,u=a.textAlign,g=n(!0),f=t(),x=f[0],b=f[1];if(i((function(){return r.parser("https://thingproxy.freeboard.io/fetch/"+o).then((function(e){console.log(e),g.current&&b(e)})).catch((function(e){console.log(e),g.current&&b(null)})),function(){g.current=!1}}),[o]),!x)return null;var y=x.images,v=x.og,w=x.meta,C=v.description?v.description:w.description?w.description:null,E=new URL(o).hostname;return e.createElement("div",{onClick:function(){window.open(o,"_blank")},className:"Container "+c,style:{width:d,height:s,borderRadius:p,textAlign:u}},y&&e.createElement("div",{style:{borderTopLeftRadius:p,borderTopRightRadius:p,backgroundImage:"url("+v.image+")",height:h},className:"Image"}),e.createElement("div",{className:"LowerContainer"},e.createElement("h3",{className:"Title"},v.title?v.title:w.title),C&&e.createElement("span",{className:"Description Secondary"},m&&C.length>m?C.slice(0,m)+"...":C),e.createElement("div",{className:"Secondary SiteDetails"},v.site_name&&e.createElement("span",null,v.site_name," • "),e.createElement("span",null,E))))};export{a as LinkPreview};
+import e,{useRef as n,useState as t,useEffect as i}from"react";import r from"html-metadata-parser";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* common */\n.Container {\n  text-align: left;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  border-radius: 7px;\n  border: 1px solid #ccc;\n  color: black;\n  transition: 0.3s all ease;\n  height: fit-content; }\n  .Container:hover {\n    background-color: #f7f7f7;\n    cursor: pointer; }\n\n.Secondary {\n  color: #646464; }\n\n.LowerContainer {\n  padding: 10px; }\n\n.Title {\n  margin-top: 0;\n  margin-bottom: 10px; }\n\n.Image {\n  width: 100%;\n  border-top-left-radius: 7px;\n  border-top-right-radius: 7px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  height: 30vh; }\n\n.SiteDetails {\n  margin-top: 10px; }\n\n/* sm */\n@media (max-width: 640px) {\n  .Description {\n    display: none; } }\n\n/* md */\n@media (min-width: 641px) and (max-width: 768px) {\n  .Description {\n    display: none; } }\n");var a=function(a){var o=a.url,l=a.className,c=void 0===l?"":l,d=a.width,s=a.height,m=a.descriptionLength,p=a.borderRadius,u=a.imageHeight,h=a.textAlign,g=n(!0),f=t(),x=f[0],b=f[1];if(i((function(){return r.parser("https://thingproxy.freeboard.io/fetch/"+o).then((function(e){console.log(e),g.current&&b(e)})).catch((function(e){console.log(e),g.current&&b(null)})),function(){g.current=!1}}),[o]),!x)return null;var y=x.images,v=x.og,w=x.meta,C=v.image?v.image:y.length>0?y[0].url:null,E=v.description?v.description:w.description?w.description:null,N=new URL(o).hostname;return e.createElement("div",{onClick:function(){window.open(o,"_blank")},className:"Container "+c,style:{width:d,height:s,borderRadius:p,textAlign:h}},C&&e.createElement("div",{style:{borderTopLeftRadius:p,borderTopRightRadius:p,backgroundImage:"url("+C+")",height:u},className:"Image"}),e.createElement("div",{className:"LowerContainer"},e.createElement("h3",{className:"Title"},v.title?v.title:w.title),E&&e.createElement("span",{className:"Description Secondary"},m&&E.length>m?E.slice(0,m)+"...":E),e.createElement("div",{className:"Secondary SiteDetails"},v.site_name&&e.createElement("span",null,v.site_name," • "),e.createElement("span",null,N))))};export{a as LinkPreview};
 //# sourceMappingURL=index.esm.js.map

index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("html-metadata-parser");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(e),r=t(n);!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* common */\n.Container {\n  text-align: left;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  border-radius: 7px;\n  border: 1px solid #ccc;\n  color: black;\n  transition: 0.3s all ease;\n  height: fit-content; }\n  .Container:hover {\n    background-color: #f7f7f7;\n    cursor: pointer; }\n\n.Secondary {\n  color: #646464; }\n\n.LowerContainer {\n  padding: 10px; }\n\n.Title {\n  margin-top: 0;\n  margin-bottom: 10px; }\n\n.Image {\n  width: 100%;\n  border-top-left-radius: 7px;\n  border-top-right-radius: 7px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  height: 30vh; }\n\n.SiteDetails {\n  margin-top: 10px; }\n\n/* sm */\n@media (max-width: 640px) {\n  .Description {\n    display: none; } }\n\n/* md */\n@media (min-width: 641px) and (max-width: 768px) {\n  .Description {\n    display: none; } }\n");exports.LinkPreview=function(n){var t=n.url,a=n.className,o=void 0===a?"":a,l=n.width,d=n.height,c=n.descriptionLength,s=n.borderRadius,u=n.imageHeight,p=n.textAlign,m=e.useRef(!0),f=e.useState(),h=f[0],g=f[1];if(e.useEffect((function(){return r.default.parser("https://thingproxy.freeboard.io/fetch/"+t).then((function(e){console.log(e),m.current&&g(e)})).catch((function(e){console.log(e),m.current&&g(null)})),function(){m.current=!1}}),[t]),!h)return null;var x=h.images,b=h.og,v=h.meta,y=b.description?b.description:v.description?v.description:null,w=new URL(t).hostname;return i.default.createElement("div",{onClick:function(){window.open(t,"_blank")},className:"Container "+o,style:{width:l,height:d,borderRadius:s,textAlign:p}},x&&i.default.createElement("div",{style:{borderTopLeftRadius:s,borderTopRightRadius:s,backgroundImage:"url("+b.image+")",height:u},className:"Image"}),i.default.createElement("div",{className:"LowerContainer"},i.default.createElement("h3",{className:"Title"},b.title?b.title:v.title),y&&i.default.createElement("span",{className:"Description Secondary"},c&&y.length>c?y.slice(0,c)+"...":y),i.default.createElement("div",{className:"Secondary SiteDetails"},b.site_name&&i.default.createElement("span",null,b.site_name," • "),i.default.createElement("span",null,w))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("html-metadata-parser");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(e),r=t(n);!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* common */\n.Container {\n  text-align: left;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  border-radius: 7px;\n  border: 1px solid #ccc;\n  color: black;\n  transition: 0.3s all ease;\n  height: fit-content; }\n  .Container:hover {\n    background-color: #f7f7f7;\n    cursor: pointer; }\n\n.Secondary {\n  color: #646464; }\n\n.LowerContainer {\n  padding: 10px; }\n\n.Title {\n  margin-top: 0;\n  margin-bottom: 10px; }\n\n.Image {\n  width: 100%;\n  border-top-left-radius: 7px;\n  border-top-right-radius: 7px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  height: 30vh; }\n\n.SiteDetails {\n  margin-top: 10px; }\n\n/* sm */\n@media (max-width: 640px) {\n  .Description {\n    display: none; } }\n\n/* md */\n@media (min-width: 641px) and (max-width: 768px) {\n  .Description {\n    display: none; } }\n");exports.LinkPreview=function(n){var t=n.url,a=n.className,o=void 0===a?"":a,l=n.width,d=n.height,c=n.descriptionLength,s=n.borderRadius,u=n.imageHeight,m=n.textAlign,p=e.useRef(!0),f=e.useState(),h=f[0],g=f[1];if(e.useEffect((function(){return r.default.parser("https://thingproxy.freeboard.io/fetch/"+t).then((function(e){console.log(e),p.current&&g(e)})).catch((function(e){console.log(e),p.current&&g(null)})),function(){p.current=!1}}),[t]),!h)return null;var x=h.images,b=h.og,v=h.meta,y=b.image?b.image:x.length>0?x[0].url:null,w=b.description?b.description:v.description?v.description:null,E=new URL(t).hostname;return i.default.createElement("div",{onClick:function(){window.open(t,"_blank")},className:"Container "+o,style:{width:l,height:d,borderRadius:s,textAlign:m}},y&&i.default.createElement("div",{style:{borderTopLeftRadius:s,borderTopRightRadius:s,backgroundImage:"url("+y+")",height:u},className:"Image"}),i.default.createElement("div",{className:"LowerContainer"},i.default.createElement("h3",{className:"Title"},b.title?b.title:v.title),w&&i.default.createElement("span",{className:"Description Secondary"},c&&w.length>c?w.slice(0,c)+"...":w),i.default.createElement("div",{className:"Secondary SiteDetails"},b.site_name&&i.default.createElement("span",null,b.site_name," • "),i.default.createElement("span",null,E))))};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@dhaiwat10/react-link-preview",
   "license": "MIT",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": false,
@@ -6,0 +6,0 @@ "description": "React library to preview links.",

README.md

@@ -1,224 +0,43 @@
-# React Library Boilerplate
+# React Link Preview
+A React component that renders beautiful link previews.
 
-This react library boilerplate uses the following:
+**Note**: This package is stil in its early days. Functionality might not be as expected.
 
-- [Typescript](https://www.typescriptlang.org/)
-- [Rollup](https://rollupjs.org/guide/en/)
-- [Prettier](https://prettier.io/)
-- [ESLint](https://eslint.org/)
-- [StyleLint](https://stylelint.io/)
-- [Storybook](https://storybook.js.org/)
-- [SCSS](https://sass-lang.com/)
-- [Jest](https://jestjs.io/)
-- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
-- [Semantic Release](https://semantic-release.gitbook.io/)
-- [Github Actions](https://github.com/features/actions)
-- [Hygen](https://www.hygen.io/)
+## How to use
 
-## Setup
+Install the package:
+`yarn add @dhaiwat10/react-link-preview`
 
-1. Edit the `package.json` file. Set you app's name, description, version, author, homepage, bugs, and repository fields with the correct information.
-1. Run `yarn` to add all the project's dependencies.
-1. You package.json file version should always be 0.0.0 since Semantic Release will automatically set this upon publishing.
+`npm install @dhaiwat10/react-link-preview`
 
-## Basic Folder Structure
+Import and render the preview:
+```js
+import { LinkPreview } from '@dhaiwat10/react-link-preview';
 
+const Home = () => {
+  return (
+    <LinkPreview url='https://www.youtube.com/watch?v=4pNryX84oWs' />
+  );
+}
 ```
-├── .storybook
-├── src
-│   ├── components
-|   |   ├── Example
-|   |   |   ├── __tests__
-|   |   |   |   ├── Example.test.tsx
-|   |   |   ├── example.scss
-|   |   |   ├── Example.stories.tsx
-|   |   |   ├── Example.tsx
-|   |   |   ├── index.ts
-|   |   ├── index.ts
-|   ├── index.ts
-├── LICENSE
-├── package.json
-├── README.md
-```
 
-## Add a new component
+## API (Available props)
+You can pass the following props to the `LinkPreview` component.
 
-- You can automatically create a new component using the `yarn component:new` command.
-- Or, you can manually add the new component directory in the `src/components` directory following this folder structure
+`url`: string
 
-```
-├── MyComponent
-|   ├── __tests__
-|   |   ├── MyComponent.test.tsx
-|   ├── MyComponent.scss
-|   ├── MyComponent.stories.tsx
-|   ├── MyComponent.tsx
-|   ├── index.ts
+`className?`: string
 
-```
+`width?`: string or number
 
-Once you have created your new component make sure you have exported it in the `src/components/index.ts` file. Doing so allows the component to be compiled into the final bundle using rollup.
+`height?`: string or number
 
-```
-// src/components/index.ts
-export \* from './MyComponent';
-export \* from './SomeOtherComponent';
+`descriptionLength`: number
 
-```
+`borderRadius`: string or number
 
-> You can skip all of this and use the built in component generator. The template for the component is in `_templates/component/with-prompt`. Simply run the following command to automatically create your new component. It will prompt you for the component name and then build out all the files and correct exports.`yarn component:new`
+`imageHeight`: string or number
 
-You can develop your new component using storybook as your playground. Once you have added the `.stories.tsx` file for you new component, you can run `yarn storybook` to start the service.
+`textAlign`: *left*, *right* or *center*
 
-## Tests
-
-```
-
-$ yarn test
-
-```
-
-With coverage
-
-```
-
-$ yarn test:coverage
-
-```
-
-Watch
-
-```
-
-$ yarn test:watch
-
-```
-
-## Prettier
-
-```
-
-$ yarn format
-
-```
-
-Validate project formatting
-
-```
-
-$ yarn format:check
-
-```
-
-## Lint
-
-```
-
-$ yarn lint
-
-```
-
-## Storybook
-
-```
-
-$ yarn storybook
-
-```
-
-## Building your library
-
-```
-
-$ yarn build
-
-```
-
-The build output will go into the `dist` directory
-
-## Github Actions
-
-This project contains a github action workflow called `ci.yaml`. This workflow runs a job that will test, lint, and build the code. If the code passes and you are on the `master` branch it will also run the publish job to send the new version off to npm.
-
-## Publishing your Library on NPM
-
-Once you have created an account on NPM create a publish key and add it to your github secrets as `NPM_TOKEN`. You will also need to create another secret called `SEMANTIC_RELEASE_TOKEN`. This token should be a personal access token that has the following scopes: `repo(all)`. [Semantic Release](https://semantic-release.gitbook.io/) will take care of the publishing and versioning for you via the `.github/workflows/ci.yaml` `Publish` job. In addition to publishing to NPM it will also create a new tag and release with commit messages in the repo.
-
-> Note: You will need to update the package.json name property with the correct name your library will be using on npm.
-
-## Committing Code Changes
-
-The commit messages are critical for allowing the [Semantic Releases](https://semantic-release.gitbook.io/) to work correctly. We use the [Conventional Commit](https://www.conventionalcommits.org/en/v1.0.0/) commit message format.
-
-The commit message should be structured as follows:
-
-```
-<type>[optional scope]: <description>
-
-[optional body]
-
-[optional footer(s)]
-```
-
-Any line of the commit message cannot be longer than 100 characters! This allows the message to be easier
-to read on GitHub as well as in various git tools.
-
-#### Type
-
-Must be one of the following:
-
-- **build**: Changes that affect the build system or external dependencies (this correlates with `PATCH` in semantic versioning)
-- **ci**: Changes to our CI configuration files and scripts (no version changes)
-- **docs**: Documentation only changes (no version changes)
-- **feat**: A new feature (this correlates with `MINOR` in semantic versioning).
-- **fix**: A bug fix (this correlates with `PATCH` in semantic versioning).
-- **perf**: A code change that improves performance (this correlates with `PATCH` in semantic versioning).
-- **refactor**: A code change that neither fixes a bug nor adds a feature (no version changes)
-- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) (no version changes)
-- **test**: Adding missing tests or correcting existing tests (no version changes)
-- **revert**: Reverts a previous commit (this correlates with `PATCH` in semantic versioning).
-
-#### Description
-
-The Description contains a succinct description of the change:
-
-- use the imperative, present tense: "change" not "changed" nor "changes"
-- don't capitalize the first letter
-- no dot (.) at the end
-
-#### Body (optional)
-
-Use the imperative, present tense: "change" not "changed" nor "changes".
-The body should include the motivation for the change and contrast this with previous behavior.
-
-#### Footer (optional)
-
-The footer should contain any information about **Breaking Changes** and is also the place to
-reference GitHub issues that this commit **Closes**.
-
-### Breaking Changes
-
-A commit that has the text `BREAKING CHANGE:` at the beginning of its optional body or footer section introduces a breaking API change (correlating with `MAJOR` in semantic versioning). A BREAKING CHANGE can be part of commits of any type.
-
-should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
-
-### Revert
-
-If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
-
-### Examples
-
-[see examples](https://www.conventionalcommits.org/en/v1.0.0/#examples)
-
----
-
-## Changelog
-
-The changelog.md is automatically generated from the following types of commits:
-
-- `feat`
-- `fix`
-- `perf`
-- `revert`
-
-In addition to these types, any `breaking change` will also be added to the changelog.
+Props marked with **?** are **optional**.

No alert changes

Worsened metrics

Total package byte prevSize

20808

decreased by-21.85%

Number of lines in readme file

44

decreased by-80.44%

No dependency changes