Code refactor + Default additions

- Lint code - Removes 'vertical' property--card defaults to vertical now - Adds 'horizontal' property to render card horizontally - Update example & README.md to reflect new functionality
ProjectOpenSea · Jan 25, 2020 · da8efcf · da8efcf
1 parent 4d3e1db
commit da8efcf
Show file tree

Hide file tree

Showing 12 changed files with 480 additions and 451 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,4 @@
 .gitignore
-/dist
+dist
 .git
-/example
+example
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,2 @@
-# .prettierrc
 semi: false
 useTabs: false
diff --git a/README.md b/README.md
@@ -3,24 +3,23 @@ Easily embed OpenSea listings in your website!
 
 ### Component inputs
 
-`vertical` - If this is present the card will be rendered vertically.
+`horizontal` - If this is present, the card will be rendered horizontally.
 
-`width` - The width of the embeddable. Ex. values `100%` `250px`
+`width` - The width of the embeddable. Ex. values `100%` `250px`. Default: `388px`
 
-`height` - The height of the embeddable. Ex. values `40vh` `300px`
+`height` - The height of the embeddable. Ex. values `40vh` `300px`. Default: `560px`
 
-`contractAddress`\*- The token Id of the asset.
+`contractAddress`\*- The token's contract address.
 
 `tokenId`\* - The token Id of the asset.
 
-`network` - The name of the network the asset is on `mainnet` or `rinkeby`. Defaults to `mainnet`.
+`network` - The name of the network the asset is on `mainnet` or `rinkeby`. Default: `mainnet`.
 
 \*Required inputs
 
 Example:
 ```
 <nft-card
-  vertical
   width="100%"
   height="250px"
   contractAddress="0x5caebd3b32e210e85ce3e9d51638b9c445481567"

diff --git a/example/index.html b/example/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
-  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <script src="/dist/nft-card.js" defer></script>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta content="ie=edge" http-equiv="X-UA-Compatible">
+    <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+    <script defer src="/dist/nft-card.js"></script>
 
-  <title>OpenSea Embeddable NFT example</title>
-  <style media="screen">
+    <title>OpenSea Embeddable NFT example</title>
+    <style media="screen">
     h1 {
       font-family: Avenir,Helvetica,Arial,sans-serif;
       -webkit-font-smoothing: antialiased;
@@ -22,31 +22,31 @@
       margin: auto;
       padding-top: 5vh;
     }
-  </style>
+
+    </style>
 </head>
 <body>
-  <h1>OpenSea's Embeddable Nft!</h1>
-  <div class="card-container">
+<h1>OpenSea's Embeddable Nft!</h1>
+<div class="card-container">
     <nft-card
-      vertical
-      contractAddress="0x7dca125b1e805dc88814aed7ccc810f677d3e1db"
-      tokenId="18"
-      network="rinkeby"
-      >
-
+            contractAddress="0x7dca125b1e805dc88814aed7ccc810f677d3e1db"
+            network="rinkeby"
+            tokenId="18"
+    >
     </nft-card>
 
     <div style="padding-top: 5vh;"></div>
 
     <nft-card
-      width="100%"
-      height="250px"
-      contractAddress="0x5caebd3b32e210e85ce3e9d51638b9c445481567"
-      tokenId="2242579050293992223"
-      network="mainnet"
-      >
+            contractAddress="0x5caebd3b32e210e85ce3e9d51638b9c445481567"
+            height="250px"
+            horizontal
+            network="mainnet"
+            tokenId="2242579050293992223"
+            width="100%"
+    >
     </nft-card>
     <div style="padding-top: 5vh;"></div>
-  </div>
+</div>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev:demo": "webpack-dev-server --config ./webpack.dev.config.js",
-    "lint": "xo",
-    "lint:fix": "xo --fix"
+    "lint": "tslint --project . 'src/**/*.ts'",
+    "lint:fix": "tslint --project . 'src/**/*.ts' --fix"
   },
   "repository": {
     "type": "git",
@@ -19,10 +19,10 @@
   },
   "homepage": "https://github.com/ProjectOpenSea/embeddable_nfts#readme",
   "dependencies": {
-    "@types/node": "^13.1.8",
-    "ky": "^0.16.1",
     "opensea-js": "github:ProjectOpenSea/opensea-js",
-    "web3": "^1.2.5-rc.0"
+    "web3": "^1.2.5-rc.0",
+    "lit-element": "^2.2.1",
+    "lit-html": "^2.2.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
@@ -31,41 +31,20 @@
     "@babel/plugin-proposal-decorators": "^7.8.3",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@rollup/plugin-commonjs": "^11.0.1",
-    "@rollup/plugin-json": "^4.0.1",
-    "@rollup/plugin-node-resolve": "^7.0.0",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
     "@typescript-eslint/parser": "^2.16.0",
     "@webcomponents/webcomponentsjs": "^2.4.1",
-    "eslint-config-xo-typescript": "^0.24.1",
+    "@types/node": "^13.1.8",
     "html-webpack-plugin": "^3.2.0",
-    "lit-element": "^2.2.1",
+
     "prettier": "^1.19.1",
-    "rollup": "^1.29.0",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-filesize": "^6.2.1",
-    "rollup-plugin-livereload": "^1.0.4",
-    "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-terser": "^5.2.0",
     "style-loader": "^1.1.3",
     "ts-loader": "^6.2.1",
+    "tslint": "^5.20.1",
+    "tslint-eslint-rules": "^5.4.0",
     "typescript": "^3.7.5",
-    "url-loader": "^3.0.0",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1",
-    "xo": "^0.25.3"
-  },
-  "xo": {
-    "semicolon": false,
-    "space": true,
-    "prettier": true,
-    "extends": "xo-typescript",
-    "extensions": [
-      "ts"
-    ]
+    "webpack-dev-server": "^3.10.1"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js