cozy/src/components/Library.astro

---
export interface Props {
  postDivSelector: string,
  skipSave?: boolean
}

const {postDivSelector, skipSave = false} = Astro.props;
---
<div id="library">
  <span id="heading"></span>
  <ul id="post-list"></ul>
</div>

<input value={postDivSelector} name="postDivSelector" id="postDivSelector" hidden />
<input type="checkbox" id="skipSave" name="skipSave" checked={skipSave} hidden />

<script>
  import { getPostCard, renderPost } from '../utils/library'
  const cache = await caches.open('cozy-reader');
  const url = new URL(window.location.href);
  const response = await cache.match(url)
  const postDivSelector = document.getElementById('postDivSelector') as HTMLInputElement;
  const skipSave = document.getElementById('skipSave') as HTMLInputElement;

  if (!response) {
    if (!skipSave?.checked) {
      await cache.add(url);
    }
  }

  const cachedRequests = (await cache.keys())
    .filter(request => {
      const urlObj = new URL(request.url);
      return urlObj.search !== '' && urlObj.searchParams.get('url') !== '';
    });

  if(cachedRequests?.length) {
    const list = document.querySelector('#post-list');
    const heading = document.querySelector('#library span#heading') as HTMLHeadingElement;
    heading.innerHTML = 'History';

    cachedRequests
    .reverse()
    .forEach(async (request) => {
      const {url} = request;
      const link = document.createElement('a');

      let responseText;

      const fullResponse = await cache.match(url)
      fullResponse?.text().then(data => {
        responseText = data;
        const html = document.createElement('html');
        html.innerHTML = responseText;
        const title = html.querySelector('meta[property="cozy:title"]')?.getAttribute('content');
        if (title === 'Something is not right') {
          cache.delete(url);
          return; // temporary fix for deleting cached errors
        }
        const postCard = getPostCard(html);
        link.innerHTML = postCard;

        link.href = url;
        link.onclick = async (e) => {
          e.preventDefault();
          localStorage.setItem('scrollPosition', window.scrollY.toString());
          scrollTo(0,0);
          renderPost(responseText, url, postDivSelector?.value)
        }
        const item = document.createElement('li');
        item.appendChild(link);
        list?.appendChild(item);
      });
    });

    window.addEventListener('popstate', async (data) => {
      let url = data.state?.url;
      let isHome = false;

      if (!url) {
        url = window.location.href;
        isHome = true;
      } else {
        // replace scrollPosition
        localStorage.setItem('scrollPosition', window.scrollY.toString());
      }

      const fullResponse = await cache.match(url)
      fullResponse?.text().then(data => {
        const responseText = data;
        renderPost(responseText, url, postDivSelector?.value, true);
        if (isHome) {
          const scrollPosition = localStorage.getItem('scrollPosition');
          scrollTo(0, scrollPosition ? parseInt(scrollPosition) : 0);
        }
      });
    });
  }
</script>

<style lang="scss">
  #library {
    :global(span#heading) {
      color: #555;
      font-size: small;
      text-transform: uppercase;
    }
  }
  #post-list {

    :global(li) {
      list-style: none;
      width: calc(100% + 40px);
      margin-left: -40px;

      :global(a) {
        text-decoration: none;
        color: #000;

        :global(h3) {
          text-decoration: underline;
        }

        :global(.post-card) {
          padding-bottom: 1rem;

          :global(.post-card__image) {
            float: left;
            margin: 0.25rem 0.5rem 0.25rem 0;

            :global(img, svg) {
              width: 70px;
              height: 70px;
              object-fit: cover;
              border-radius: 5px;
              border: 1px solid #eee;
            }
            :global(svg) {
              color: #ccc;
              padding: 0.5rem;
            }
          }
        }
        :global(.post-card__content) {
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-height: calc(70px + 0.5rem);
        }
        :global(.post-card__title, .post-card__description) {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;  
          overflow: hidden;
        }
        :global(.post-card__meta, .post-card__description){
          font-size: smaller;
          color: #555;
        }
        :global(.post-card__meta) {
          display: flex;
          justify-content: space-between;

          * {
            flex: 1;
          }

          :global(.post-card__source) {
            font-weight: bold;
          }
        }
      }
    }
  }
</style>