nfreear/pinboard-feed-js.html

## pinboard-feed-js.html
<!doctype html> <title> Pinboard JSON feed test </title>

<style>
  body { font: 1rem/1.7rem sans-serif; margin: 1rem auto; max-width: 40rem; }
  .pinboard-js li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>

<h1> Pinboard JSON feed test </h1>


<div
  id="pinboard-feed"
  data-pinboard-url="/u:ndf/t:chagos/"
  > <p class="no-js"> Javascript required. </div>


<script>

((W, D, configSelector) => {

  const DEFAULTS = {
    pinboardUrl: '/u:ndf/t:youtube',
    selector: '#pinboard-feed',
    count: 4,
    corsProxy: 'https://cors-anywhere.herokuapp.com/',
    authorUrl: 'https://pinboard.in/u:ndf',
    via: 'Via pinboard.in',
    className: 'pinboard-js'
  };

  const CFG = extend(DEFAULTS, D.querySelector(configSelector).dataset);
  const $ELEM = D.querySelector(CFG.selector);
  const URL = `${ CFG.corsProxy }https://feeds.pinboard.in/json${ CFG.pinboardUrl }?count=${ CFG.count }`;

  W.fetch(URL, {
    headers: { 'Accept': 'application/json' },
    cache: 'default',
    mode: 'cors'
  })
  .then(response => response.json())
  .then(listItems => assignListTo`<ul>${ listItems }</ul> ${ $ELEM }`)
  .catch(error => console.error(error));

  console.warn('Pinboard config:', CFG, $ELEM);

  function listItemTemplate (strings, it) {
    const STR_0 = strings[ 0 ];
    return `${ STR_0 }<a href="${it.u}" title="${it.d}.\n\nSaved: ${it.dt}">${it.d}</a>`;
  }

  function assignListTo (strings, items, $element) { // Was: listTemplate
    const STR_0 = strings[ 0 ];
    const STR_1 = strings[ 1 ];
    let list = [];

    items.forEach(it => list.push(listItemTemplate`<li>${ it }\n`));

    $element.innerHTML = `${ STR_0 } ${ list.join('') } ${ STR_1 } <a href="${ CFG.authorUrl }">${ CFG.via }</a>`;
    $element.className = CFG.className;

    console.warn('Pinboard response:', items);
  }

  // https://gist.github.com/cferdinandi/4f8a0e17921c5b46e6c4
  function extend (defaults, options) {
    let extended = {};
    for (var prop in defaults) {
      extended[ prop ] = options[ prop ] || defaults[ prop ];
    }
    return extended;
};

})(window, document, '[ data-pinboard-url ]');

</script>


<pre>


© Nick Freear, 08-Oct-2018.

 * https://gist.github.com/nfreear/5f06bce55ac8d003981647a1e35055c4
 * https://pinboard.in/howto/#rss

 $$ live-server --port=9001 ~/Dropbox/js/

</pre>
	<!doctype html> <title> Pinboard JSON feed test </title>

	<style>
	body { font: 1rem/1.7rem sans-serif; margin: 1rem auto; max-width: 40rem; }
	.pinboard-js li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	</style>

	<h1> Pinboard JSON feed test </h1>


	<div
	id="pinboard-feed"
	data-pinboard-url="/u:ndf/t:chagos/"
	> <p class="no-js"> Javascript required. </div>


	<script>

	((W, D, configSelector) => {

	const DEFAULTS = {
	pinboardUrl: '/u:ndf/t:youtube',
	selector: '#pinboard-feed',
	count: 4,
	corsProxy: 'https://cors-anywhere.herokuapp.com/',
	authorUrl: 'https://pinboard.in/u:ndf',
	via: 'Via pinboard.in',
	className: 'pinboard-js'
	};

	const CFG = extend(DEFAULTS, D.querySelector(configSelector).dataset);
	const $ELEM = D.querySelector(CFG.selector);
	const URL = `${ CFG.corsProxy }https://feeds.pinboard.in/json${ CFG.pinboardUrl }?count=${ CFG.count }`;

	W.fetch(URL, {
	headers: { 'Accept': 'application/json' },
	cache: 'default',
	mode: 'cors'
	})
	.then(response => response.json())
	.then(listItems => assignListTo`<ul>${ listItems }</ul> ${ $ELEM }`)
	.catch(error => console.error(error));

	console.warn('Pinboard config:', CFG, $ELEM);

	function listItemTemplate (strings, it) {
	const STR_0 = strings[ 0 ];
	return `${ STR_0 }<a href="${it.u}" title="${it.d}.\n\nSaved: ${it.dt}">${it.d}</a>`;
	}

	function assignListTo (strings, items, $element) { // Was: listTemplate
	const STR_0 = strings[ 0 ];
	const STR_1 = strings[ 1 ];
	let list = [];

	items.forEach(it => list.push(listItemTemplate`<li>${ it }\n`));

	$element.innerHTML = `${ STR_0 } ${ list.join('') } ${ STR_1 } <a href="${ CFG.authorUrl }">${ CFG.via }</a>`;
	$element.className = CFG.className;

	console.warn('Pinboard response:', items);
	}

	// https://gist.github.com/cferdinandi/4f8a0e17921c5b46e6c4
	function extend (defaults, options) {
	let extended = {};
	for (var prop in defaults) {
	extended[ prop ] = options[ prop ] \|\| defaults[ prop ];
	}
	return extended;
	};

	})(window, document, '[ data-pinboard-url ]');

	</script>


	<pre>


	© Nick Freear, 08-Oct-2018.

	* https://gist.github.com/nfreear/5f06bce55ac8d003981647a1e35055c4
	* https://pinboard.in/howto/#rss

	$$ live-server --port=9001 ~/Dropbox/js/

	</pre>