[Feature Request / Suggestion]: Add Book Option

[MarketingPip]

Suggestion / Feature Request

Add "book" option for showing off your favorite books via Open Library API

To achieve this we can use the song card theme + one end point.

Tho I will be honest @annoyingmouse struggling reading some of our own project & implementing it myself. :sob:

API Documentation can be found here

And example API usage can be found here

To filter / limit results use a param like so limit=1

Book example

Note API calls should only fetch 1 result. As it's un-needed bandwidth / data we are consuming. I do believe the TheMovieDB api does provide an option for this.

Documenting this so I do not forget both!

[annoyingmouse]

Aye, just playing with postman at the minute, seems simple enough TBH. We can add author and title as fields and convert them into query variables. I'm pretty busy myself at the minute but will likely need a distraction sooner rather than later.

[annoyingmouse]

I've taken a wee stab this afternoon while needing a break from writing - I've not made a PR yet, but you can check out my version.

[MarketingPip]

@annoyingmouse lol that was quick for getting bored!

Thing's look good to me :+1:

I am embarrassed to say I don't know why I couldn't get it to work properly when just doing a quick playing around and swapping song end point with book and just trying to console log the data. Now I wish I saved my play code for a quick refresher lol. When I removed everything tho in template and just returned the JSON data. The data returned successfully.

So it had to been my own stupidity somewhere :woman_shrugging:

I don't know what you think about adding the genres, etc subtitles instead of page count. But I am sure we can touch it up obviously!

I will possibly add a anime route too if I can find a good API that doesn't require a API key + I got some other cool things (this project related) to share with you + get your feedback about. And as mentioned countless of times (my apologizes lol) I will be adding you to some other web component based projects if you are still interested.

On a side note tho > you do approve of Media-Card.js for a rename of this project?

Edit: ps if you need a good read! That book is awesome! Tho may I ask what you write assuming you mean literal writing?

[MarketingPip]

Not that I am personally an anime fan (yet that I know of) -

leaving this here for documenting anime API usage

or

another anime api

both do not require API keys (top one looks best).

I will try and get this one done myself & merge into your current commit! Unless you want to get to it first!

[MarketingPip]

Code required to start anime

this.data = data // 🤞
       return console.log(data.data[0].attributes.synopsis)

[annoyingmouse]

@MarketingPip - I'll make the PR now for the book, I also need to work on adding descriptions if they're there I guess. And sure Media-Card works for me.

[MarketingPip]

Some progress on Polyfill loader

// Set Debug to true - to debug errors and more  
let Debug = true

  /// Small Debugger
  function DEBUG(message){
    if (Debug === true){
      console.log(message)
    }
  }
 // Constructed CSS Polyfill is REQUIRED for ALL BROWSERS for Media-Card.js
let CSSPolyFillAdded = false;
function addConstructedCSSPolyfill(src){

   /// avoid adding the CSS stylesheet pollyfill more than once... 
  if (CSSPolyFillAdded == false){
      let head = document.head;
let script = document.createElement("script");

  script.src = src;

  head.appendChild(script);
  CSSPolyFillAdded = true

  // On Error Loading Markdown Parser
script.onerror = function () {

  console.error("Error: Constructed Stylesheet Polyfill")

}

  /// CSS Stylesheet Polyfill Load Successful 
script.onload = function () {

  DEBUG("Constructed Stylesheet Polyfill Was Loaded")
DEBUG("Now loading Media Card Web Component")

    // Load the Media-Card.js Component 

};
  } 

}

// Dynamically poly-fill loader (check if browser support for pollyfill need)

  // Slightly-modified version of - https://github.com/PascalAOMS/dynamic-polyfill

function polyfill({
  fills,
  options = '',
  minify = true,
  rum = true,
  agent,
  agentFallback,
  afterFill
}) {
  if (!fills) {
    throw new Error('No fills specified.');
  }

  const fillAnyway = options.indexOf('always') >= 0 || agent; // check if 'always' flag or agent is set
  const neededPolyfills = fillAnyway ? fills : checkSupport(fills);

  if (neededPolyfills.length > 0) {
    return loadScript({
      neededPolyfills, minify, fills, options, rum, agent, agentFallback, afterFill
    });
  }

  return afterFill();
}

function checkSupport(fills) {
   DEBUG("Checking if Polyfills are needed")
  let unsupportedFills = [];
let isSupported = false;
  for (let i = 0; i < fills.length; i++) {
    const fill = fills[i];
    const parts = fill.split('.'); // i.e. ['Array', 'prototype', 'includes']
    const type = parts[0];
    const prototype = parts[1] === 'prototype';
    const method = parts[2];

    // check for special test cases, otherwise use regular reduce function against window
    switch (type) {
      case 'Intl':
        isSupported = window[type];
        break;

      case 'Element':
        isSupported = 'Element' in window;
        if (prototype && isSupported) {
          isSupported = method in Element.prototype;
        }
        break;

      default:
        isSupported = parts.reduce((key, value) => key[value], window);
    }

    if (!isSupported) {
      unsupportedFills.push(fill);
      DEBUG("Polyfill support is needed -loading extra Polyfills")
    } 

  }
    if (isSupported){
      DEBUG("Polyfill support not needed for your browser - not loading extra Polyfills")
   }
  return unsupportedFills;
}

function loadScript(args) {
  const min      = args.minify  ? '.min' : '';
  const features = args.fills   ? `features=${args.neededPolyfills.join(',')}` : '';
  const flags    = args.options ? `\&flags=${args.options.join(',')}` : '';
  const monitor  = args.rum     ? '\&rum=1' : ''; // not set to rum=0 since it loads RUM scripts anyway
  const agent    = args.agent   ? `\&ua=${args.agent}` : '';
  const fallback = args.agentFallback ? `\&unknown=${args.agentFallback}` : '';

  const js = document.createElement('script');

  js.src = `https://polyfill.io/v3/polyfill${min}.js?${features + flags + monitor + agent + fallback}`;
  js.async = true;

  document.body.appendChild(js);

  js.onload = () => args.afterFill();
  js.onerror = () => { throw new Error('Error loading polyfills. Open a ticket: https://github.com/PascalAOMS/dynamic-polyfill/issues'),    DEBUG("Error Loading Polyfills") };
}

// Check if poly-fills are needed

polyfill({
  // fills needed for all browsers support 
  fills: ['Array.prototype.map','fetch','Promise'],
  // after checking if fills are needed to be added
  afterFill() {

    //  Load Constructed Stylesheet Polyfill (Required)
     DEBUG("Loading Constructed Stylesheet Polyfill") 
    addConstructedCSSPolyfill('https://unpkg.com/construct-style-sheets-polyfill')

  }
});

[MarketingPip]

Note: scrap that polyfill loaded. Does not work on iOS. (plus really not needed code - stupidity on my part)

[MarketingPip]

6 addresses the fix for this issue. Closing.