{"id":256,"date":"2024-12-02T02:27:37","date_gmt":"2024-12-02T02:27:37","guid":{"rendered":"https:\/\/blog.zmh.org\/bookshelf\/"},"modified":"2026-04-15T00:31:53","modified_gmt":"2026-04-15T04:31:53","slug":"bookshelf","status":"publish","type":"page","link":"https:\/\/zmh.org\/bookshelf\/","title":{"rendered":"Bookshelf"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Currently reading<\/h2>\n\n\n\n<div id=\"literal-widget\" handle=\"zmh\" status=\"IS_READING\" layout=\"row\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Want to read<\/h2>\n\n\n\n<div id=\"literal-widget2\" handle=\"zmh\" status=\"WANTS_TO_READ\" layout=\"row\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Finished reading<\/h2>\n\n\n\n<div id=\"literal-widget3\" handle=\"zmh\" status=\"FINISHED\" layout=\"row\"><\/div>\n\n\n\n<style>\n#literal-widget,\n#literal-widget2,\n#literal-widget3 {\n  flex-flow: wrap;\n}\n\n\/* Target the img inside .literal-book-item for all three widgets *\/\n#literal-widget .literal-book-item img,\n#literal-widget2 .literal-book-item img,\n#literal-widget3 .literal-book-item img {\n  border-radius: 0 6px 6px 0;\nmax-width: 100%;\n}\n\n\/* Target the .literal-book-item container for all three widgets *\/\n#literal-widget .literal-book-item,\n#literal-widget2 .literal-book-item,\n#literal-widget3 .literal-book-item {\n  max-width: 140px;\n}\n\n\/* Hover effect for .literal-book-item in all three widgets *\/\n#literal-widget .literal-book-item:hover,\n#literal-widget2 .literal-book-item:hover,\n#literal-widget3 .literal-book-item:hover {\n  transform: scale(1.02);\n}\n\n\/* Target .literal-book-item__info for all three widgets *\/\n#literal-widget .literal-book-item__info,\n#literal-widget2 .literal-book-item__info,\n#literal-widget3 .literal-book-item__info {\n  position: absolute;\n  border-radius: 0 6px 6px 0;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 97%;\nbackground: linear-gradient(\n  to right,\n  rgba(0, 0, 0, 0.02) 0%,\n  rgba(0, 0, 0, 0.05) 1.5%,\n  rgba(255, 255, 255, 0.5) 2%,\n  rgba(255, 255, 255, 0.6) 2.6%,\n  rgba(255, 255, 255, 0.5) 2.8%,\n  rgba(255, 255, 255, 0.3) 3%,\n  rgba(255, 255, 255, 0.3) 4.8%,\n  rgba(0, 0, 0, 0.05) 5.4%,\n  rgba(0, 0, 0, 0.05) 7%,\n  rgba(255, 255, 255, 0.3) 8%,\n  rgba(255, 255, 255, 0.3) 9%,\n  rgba(244, 244, 244, 0.1) 10.8%,\n  rgba(244, 244, 244, 0.1) 99%,\n  rgba(144, 144, 144, 0.2) 100%\n);\nbox-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.12);\n  color: transparent;\n  display: block;\n}\n<\/style>\n<script>\nfunction getListCss(id) {\n  return `\n    #${id} .literal-book-item {\n      display: flex;\n      text-align: left;\n      position: relative;\n      transition: all .2s linear;\n    }\n    #${id} .literal-book-item:hover {\n      border-color: #e1dddd;\n      z-index: 1;\n    }\n    #${id} .literal-book-item a {\n      width: 100%;\n      display: flex;\n      padding: 10px 10px 10px 0;\n    }\n    #${id} .literal-book-item__inner {\n      flex: 1 0;\n      display: flex;\n      align-items: center;\n    }\n    #${id} .literal-book-item__image {\n      width: 40px;\n      flex: 0 0 40px;\n      align-self: flex-start;\n      height: 64px;\n      display: flex;\n      align-items: center;\n      margin-right: 23px;\n    }\n    #${id} .literal-book-item__image_cover__outer {\n      position: relative;\n      display: inline-block;\n      line-height: 100%;\n    }\n    #${id} .literal-book-item__image_cover__outer img {\n      user-select: none;\n      width: auto;\n      height: auto;\n      max-width: 100%;\n      max-height: 100%;\n      border-top-left-radius: 1px;\n      border-bottom-left-radius: 1px;\n      border-top-right-radius: 2px;\n      border-bottom-right-radius: 2px;\n      filter: drop-shadow(0 calc((0 + 0) * 2px) calc((5 + 0) * 2px) rgba(0,0,0,calc((1.5 + 0) * .03)));\n      display: inline-block;\n      vertical-align: middle;\n      -webkit-transform: translateZ(0);\n    }\n    #${id} .literal-book-item__info {\n      flex: 1 0;\n    }\n    #${id} .literal-book-item__title {\n      font-weight: 400;\n      color: #000000;\n      font-size: 14px;\n      line-height: 150%;\n    }\n    #${id} .literal-book-item__authors {\n      font-size: 14px;\n      color: #9a988b;\n      line-height: 145%;\n      margin-top: 4px;\n    }\n  `;\n}\n\nfunction getRowCss(id) {\n  return `\n    #${id} {\n      display: flex;\n    }\n    #${id} .literal-book-item {\n      max-width: 50px;\n      display: flex;\n      align-self: flex-end;\n      margin-right: 20px;\n      text-align: left;\n      position: relative;\n      transition: all .2s linear;\n    }\n    #${id} .literal-book-item__image_cover__outer img {\n      user-select: none;\n      border-top-left-radius: 1px;\n      border-bottom-left-radius: 1px;\n      border-top-right-radius: 2px;\n      border-bottom-right-radius: 2px;\n      filter: drop-shadow(0 calc((0 + 0) * 2px) calc((5 + 0) * 2px) rgba(0,0,0,calc((1.5 + 0) * .03)));\n      display: inline-block;\n      -webkit-transform: translateZ(0);\n    }\n    #${id} .literal-book-item__info {\n      display: none;\n    }\n  `;\n}\n\n\/**\n * Grab all three widgets in a single query.\n * You can simply list them: #literal-widget, #literal-widget2, #literal-widget3\n *\/\ndocument\n  .querySelectorAll('#literal-widget, #literal-widget2, #literal-widget3')\n  .forEach((target) => {\n    \/\/ If a matching element doesn't exist, skip it\n    if (!target) return;\n\n    \/\/ Get attributes from this particular widget\n    const variables = {\n      handle: target.getAttribute('handle'),\n      readingStatus: target.getAttribute('status'),\n      layout: target.getAttribute('layout'),\n      limit: parseInt(target.getAttribute('limit')) || 20,\n    };\n\n    \/\/ Fetch data for this widget\n    fetch('https:\/\/api.literal.club\/', {\n      method: 'POST',\n      mode: 'cors',\n      headers: {\n        'Content-Type': 'application\/json',\n      },\n      body: JSON.stringify({\n        query: `\n          query booksByReadingStateAndHandle($limit: Int!, $offset: Int!, $readingStatus: ReadingStatus!, $handle: String!) {\n            booksByReadingStateAndHandle(\n              limit: $limit\n              offset: $offset\n              readingStatus: $readingStatus\n              handle: $handle\n            ) {\n              ...BookParts\n              __typename\n            }\n          }\n\n          fragment BookParts on Book {\n            id\n            slug\n            title\n            subtitle\n            description\n            isbn10\n            isbn13\n            language\n            pageCount\n            publishedDate\n            publisher\n            physicalFormat\n            cover\n            authors {\n              ...AuthorMini\n              __typename\n            }\n            gradientColors\n            workId\n            __typename\n          }\n\n          fragment AuthorMini on Author {\n            id\n            name\n            slug\n            __typename\n          }\n        `,\n        variables: {\n          handle: variables.handle,\n          readingStatus: variables.readingStatus,\n          limit: variables.limit,\n          offset: 0,\n        },\n      }),\n    })\n      .then((res) => res.json())\n      .then((response) => {\n        const books = response?.data?.booksByReadingStateAndHandle || [];\n        const formatter = new Intl.ListFormat('en', {\n          style: 'short',\n          type: 'conjunction',\n        });\n\n        const bookItems = books.map((book) => {\n          const authors = formatter.format(book.authors.map((a) => a.name));\n\n          const bookItem = document.createElement('div');\n          bookItem.classList.add('literal-book-item');\n          bookItem.innerHTML = `\n            <a href=\"https:\/\/literal.club\/${variables.handle}\/book\/${book.slug}?utm_source=${variables.handle}&#038;utm_medium=widget\"\n               target=\"_blank\">\n              <div class=\"literal-book-item__inner\">\n                <div class=\"literal-book-item__image\">\n                  <div class=\"literal-book-item__image_cover__outer\">\n                    <img decoding=\"async\" src=\"${book.cover}\" alt=\"${book.title}\" \/>\n                  <\/div>\n                <\/div>\n                <div class=\"literal-book-item__info\">\n                  <div class=\"literal-book-item__title\">${book.title}<\/div>\n                  <div class=\"literal-book-item__authors\">${authors}<\/div>\n                <\/div>\n              <\/div>\n            <\/a>\n          `;\n          return bookItem;\n        });\n\n        \/\/ Append all created book items into the current widget container\n        target.append(...bookItems);\n      })\n      .catch((err) => {\n        console.error('Failed to load Literal Club data:', err);\n      });\n\n    \/\/ Insert the appropriate CSS based on the widget's layout\n    const styleSheet = document.createElement('style');\n    if (variables.layout === 'row') {\n      styleSheet.innerHTML = getRowCss(target.id);\n    } else {\n      styleSheet.innerHTML = getListCss(target.id);\n    }\n    document.head.appendChild(styleSheet);\n  });\n\n\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Currently reading Want to read Finished reading<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-256","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/zmh.org\/blog\/wp-json\/wp\/v2\/pages\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zmh.org\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zmh.org\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zmh.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zmh.org\/blog\/wp-json\/wp\/v2\/comments?post=256"}],"version-history":[{"count":1,"href":"https:\/\/zmh.org\/blog\/wp-json\/wp\/v2\/pages\/256\/revisions"}],"predecessor-version":[{"id":2568,"href":"https:\/\/zmh.org\/blog\/wp-json\/wp\/v2\/pages\/256\/revisions\/2568"}],"wp:attachment":[{"href":"https:\/\/zmh.org\/blog\/wp-json\/wp\/v2\/media?parent=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}