@hackclub/scrapbook-grid - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.js

@@ -462,3 +462,2 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   }))), /*#__PURE__*/React__default.createElement("style", {
-    jsx: true,
     key: "masonry-style"
@@ -465,0 +464,0 @@ }, "\n    .masonry-posts {\n      display: flex;\n      width: 100%;\n      max-width: 100%;\n    }\n    .masonry-posts-column {\n      background-clip: padding-box;\n    }\n    .post {\n      margin-bottom: 2px;\n    }\n    @media (min-width: 32em) {\n      .masonry-posts {\n        padding-right: 12px;\n      }\n      .masonry-posts-column {\n        padding-left: 12px;\n      }\n      .post {\n        border-radius: 12px;\n        margin-bottom: 12px;\n      }\n    }\n    @media (min-width: 64em) {\n      .masonry-posts {\n        padding-right: 24px;\n      }\n      .masonry-posts-column {\n        padding-left: 24px;\n      }\n      .post {\n        margin-bottom: 24px;\n      }\n    }\n    /* add css module styles here (optional) */\n\n    *,\n    *::before,\n    *::after {\n      margin: 0;\n      padding: 0;\n      box-sizing: inherit;\n    }\n\n    :root {\n      color-scheme: light dark;\n      --fonts-scrapbook-body: system-ui, -apple-system, BlinkMacSystemFont,\n        'Segoe UI', Roboto, sans-serif;\n      --fonts-scrapbook-display: system-ui, -apple-system, BlinkMacSystemFont,\n        'Segoe UI', Roboto, sans-serif;\n      --fonts-scrapbook-mono: monospace;\n\n      --colors-scrapbook-darker: #151613;\n      --colors-scrapbook-dark: #20201d;\n      --colors-scrapbook-darkless: #2b2b27;\n      --colors-scrapbook-black: #151613;\n      --colors-scrapbook-slate: #3b413a;\n      --colors-scrapbook-muted: #777f76;\n      --colors-scrapbook-smoke: #d5d8d5;\n      --colors-scrapbook-snow: #f5f5f4;\n      --colors-scrapbook-white: #ffffff;\n      --colors-scrapbook-pink: #ff62dc;\n      --colors-scrapbook-orange: #ff5b00;\n      --colors-scrapbook-yellow: #f7ff00;\n      --colors-scrapbook-green: #28ff00;\n      --colors-scrapbook-cyan: #00ffff;\n      --colors-scrapbook-blue: #00a4ff;\n      --colors-scrapbook-purple: #c210ff;\n      --colors-scrapbook-red: #ec3750;\n\n      --colors-scrapbook-text: var(--colors-scrapbook-black);\n      --colors-scrapbook-background: var(--colors-scrapbook-snow);\n      --colors-scrapbook-sheet: var(--colors-scrapbook-white);\n      --colors-scrapbook-elevated: var(--colors-scrapbook-white);\n      --colors-scrapbook-sunken: var(--colors-scrapbook-smoke);\n      --colors-scrapbook-progress: var(--colors-scrapbook-red);\n\n      " + Object.keys(colors).map(function (x) {

dist/index.modern.js

@@ -459,3 +459,2 @@ import React, { memo, Fragment, useState, useEffect, useRef } from 'react';
   }))), /*#__PURE__*/React.createElement("style", {
-    jsx: true,
     key: "masonry-style"
@@ -462,0 +461,0 @@ }, "\n    .masonry-posts {\n      display: flex;\n      width: 100%;\n      max-width: 100%;\n    }\n    .masonry-posts-column {\n      background-clip: padding-box;\n    }\n    .post {\n      margin-bottom: 2px;\n    }\n    @media (min-width: 32em) {\n      .masonry-posts {\n        padding-right: 12px;\n      }\n      .masonry-posts-column {\n        padding-left: 12px;\n      }\n      .post {\n        border-radius: 12px;\n        margin-bottom: 12px;\n      }\n    }\n    @media (min-width: 64em) {\n      .masonry-posts {\n        padding-right: 24px;\n      }\n      .masonry-posts-column {\n        padding-left: 24px;\n      }\n      .post {\n        margin-bottom: 24px;\n      }\n    }\n    /* add css module styles here (optional) */\n\n    *,\n    *::before,\n    *::after {\n      margin: 0;\n      padding: 0;\n      box-sizing: inherit;\n    }\n\n    :root {\n      color-scheme: light dark;\n      --fonts-scrapbook-body: system-ui, -apple-system, BlinkMacSystemFont,\n        'Segoe UI', Roboto, sans-serif;\n      --fonts-scrapbook-display: system-ui, -apple-system, BlinkMacSystemFont,\n        'Segoe UI', Roboto, sans-serif;\n      --fonts-scrapbook-mono: monospace;\n\n      --colors-scrapbook-darker: #151613;\n      --colors-scrapbook-dark: #20201d;\n      --colors-scrapbook-darkless: #2b2b27;\n      --colors-scrapbook-black: #151613;\n      --colors-scrapbook-slate: #3b413a;\n      --colors-scrapbook-muted: #777f76;\n      --colors-scrapbook-smoke: #d5d8d5;\n      --colors-scrapbook-snow: #f5f5f4;\n      --colors-scrapbook-white: #ffffff;\n      --colors-scrapbook-pink: #ff62dc;\n      --colors-scrapbook-orange: #ff5b00;\n      --colors-scrapbook-yellow: #f7ff00;\n      --colors-scrapbook-green: #28ff00;\n      --colors-scrapbook-cyan: #00ffff;\n      --colors-scrapbook-blue: #00a4ff;\n      --colors-scrapbook-purple: #c210ff;\n      --colors-scrapbook-red: #ec3750;\n\n      --colors-scrapbook-text: var(--colors-scrapbook-black);\n      --colors-scrapbook-background: var(--colors-scrapbook-snow);\n      --colors-scrapbook-sheet: var(--colors-scrapbook-white);\n      --colors-scrapbook-elevated: var(--colors-scrapbook-white);\n      --colors-scrapbook-sunken: var(--colors-scrapbook-smoke);\n      --colors-scrapbook-progress: var(--colors-scrapbook-red);\n\n      " + Object.keys(colors).map(function (x) {

package.json

 {
   "name": "@hackclub/scrapbook-grid",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "📸 Embed your Scrapbook in your React site",
@@ -5,0 +5,0 @@ "author": "@sampoder",

README.md

@@ -5,3 +5,3 @@ # scrapbook-grid
 
-[![NPM](https://img.shields.io/npm/v/scrapbook-grid.svg)](https://www.npmjs.com/package/scrapbook-grid) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![NPM](https://img.shields.io/npm/v/@hackclub/scrapbook-grid.svg)](https://www.npmjs.com/package/@hackclub/scrapbook-grid)
 
@@ -11,5 +11,9 @@ ## Install
 ```bash
-npm install --save scrapbook-grid
+npm install --save @hackclub/scrapbook-grid
 ```
 
+```bash
+yarn add @hackclub/scrapbook-grid
+```
+
 ## Usage
@@ -20,14 +24,17 @@
 
-import MyComponent from 'scrapbook-grid'
-import 'scrapbook-grid/dist/index.css'
+import ScrapbookGrid from '@hackclub/scrapbook-grid'
 
-class Example extends Component {
-  render() {
-    return <MyComponent />
-  }
+function App() {
+  return (
+    <ScrapbookGrid
+      posts={postsData} // You can get this data from the Scrapbook api
+      hideReactions={true}
+      profile // If you are attempting to simulate a profile page
+      fonts={{ body: '"Baloo 2"' }} // Should be a string that you would have with css after `font-family:`
+      colors={{ red: '#ec3750'}} // View colors at: https://github.com/hackclub/summer-scrapbook#colors--fonts
+    />
+  )
 }
 ```
 
-## License
-
-MIT © [@sampoder](https://github.com/@sampoder)
+Made by [@sampoder](https://github.com/@sampoder)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

127360

increased by0.16%

Number of lines in readme file

38

increased by22.58%

Worsened metrics

Lines of code

897

decreased by-0.22%

No dependency changes