Book Covers

_pilingjs.json

{
  "title": "Book Covers",
  "thumbnail": "https://user-images.githubusercontent.com/932103/89745160-d952b780-da7f-11ea-9af4-54a3fd205e07.jpg"
}

aggregators.js

const coverAggregator = (items) => items[items.length - 1].src;
const previewAggregator = (items) => items.map((item) => item.edge);

export { coverAggregator, previewAggregator };

data.json

[
  {
    "src": "https://storage.googleapis.com/pilingjs/books/visual-complexity-cover.jpg",
    "edge": "https://storage.googleapis.com/pilingjs/books/visual-complexity-edge.jpg",
    "scale": 1.0
  },
  {
    "src": "https://storage.googleapis.com/pilingjs/books/isotype-cover.jpg",
    "edge": "https://storage.googleapis.com/pilingjs/books/isotype-edge.jpg",
    "scale": 0.9
  },
  {
    "src": "https://storage.googleapis.com/pilingjs/books/a-mind-at-play-cover.jpg",
    "edge": "https://storage.googleapis.com/pilingjs/books/a-mind-at-play-edge.jpg",
    "scale": 1.0
  },
  {
    "src": "https://storage.googleapis.com/pilingjs/books/dont-make-me-think-cover.jpg",
    "edge": "https://storage.googleapis.com/pilingjs/books/dont-make-me-think-edge.jpg",
    "scale": 0.9
  },
  {
    "src": "https://storage.googleapis.com/pilingjs/books/universal-principles-of-design-cover.jpg",
    "edge": "https://storage.googleapis.com/pilingjs/books/universal-principles-of-design-edge.jpg",
    "scale": 1.0
  },
  {
    "src": "https://storage.googleapis.com/pilingjs/books/ambient-findability-cover.jpg",
    "edge": "https://storage.googleapis.com/pilingjs/books/ambient-findability-edge.jpg",
    "scale": 0.85
  },
  {
    "src": "https://storage.googleapis.com/pilingjs/books/graphesis-cover.jpg",
    "edge": "https://storage.googleapis.com/pilingjs/books/graphesis-edge.jpg",
    "scale": 0.7
  },
  {
    "src": "https://storage.googleapis.com/pilingjs/books/articulating-design-decisions-cover.jpg",
    "edge": "https://storage.googleapis.com/pilingjs/books/articulating-design-decisions-edge.jpg",
    "scale": 0.85
  },
  {
    "src": "https://storage.googleapis.com/pilingjs/books/search-patterns-cover.jpg",
    "edge": "https://storage.googleapis.com/pilingjs/books/search-patterns-edge.jpg",
    "scale": 0.85
  }
]

renderers.js

import { createImageRenderer } from 'piling.js'

const itemRenderer = createImageRenderer();

export { itemRenderer };

styles.js

const style = {
  columns: 3,
  cellPadding: 16,
  itemSizeRange: [1, 1],
  pileCellAlignment: 'center',
  pileBorderSize: 1,
  pileVisibilityItems: true,
  previewAlignment: 'left',
  previewScaleToCover: ['auto', true],
};

export default style;