chore: news block

blocks/header/header.css

@@ -3,7 +3,7 @@ header nav {
   display: grid;
   grid-template:
     'hamburger brand tools' var(--nav-height)
-    'sections sections sections' 1fr / 50px 1fr 50px;
+    'sections sections sections' 1fr / 50px 1fr 90px;
   align-items: center;
   padding-left: 2rem;
   position: fixed;
@@ -34,8 +34,8 @@ header .nav-brand {
   font-size: 22px;
   font-weight: 700;
   line-height: 1em;
-  padding: 0 20px;
-  width: 100px;
+  padding: 0 15px;
+  width: 110px;
   background-color: #003360;
   align-self: flex-start;
   margin-top: 0;
@@ -49,12 +49,12 @@ header nav .nav-brand p {
 }
 
 header nav .nav-brand img {
-  width: 100px;
+  width: 110px;
 }
 
 header nav .nav-partners {
   position: relative;
-  padding-bottom: 30px;
+  padding-bottom: 40px;
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 400;
@@ -68,14 +68,15 @@ header nav .nav-partners-line {
 
 header nav .nav-partners span {
   background-color: #003360;
-  padding: 0 10px;
+  padding: 0 5px;
 }
 
 header nav .nav-partner {
   position: absolute;
   opacity: 0;
+  top: 20px;
   transition: opacity 1s linear;
-  width: 100px;
+  width: 110px;
 }
 
 header nav .nav-partner-appear {
@@ -197,6 +198,7 @@ header nav .nav-tools svg {
   height: 16px;
   width: 16px;
   margin: 0 5px;
+  display: none;
 }
 
 
@@ -338,4 +340,9 @@ header nav[aria-expanded='true'] .nav-tools li {
     padding: 16px;
     box-shadow: 0 10px 10px 5px #00000040;
   }
+
+  header nav .nav-tools svg {
+    display: unset;
+  }
+
 }

blocks/news/news.css

@@ -1,8 +1,80 @@
 .news {
-    margin: 64px auto;
-    background-color: lightgray;
-    min-height: 256px;
+    margin: 16px;
+}
+
+.news > ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-gap: 16px;
+}
+
+.news > ul > li {
+    position: relative;
+}
+
+.news .news-item-body a:any-link {
+    color: inherit;
+}
+
+.news .news-item-body {
+    padding: 16px;
+    aspect-ratio: 1;
+    color: white;
     display: flex;
-    align-items: center;
-    justify-content: center;
-}
+    align-items: flex-end;
+    background: linear-gradient( #0000, #0008)
+}
+
+.news .news-item-image {
+    line-height: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+}
+
+.news .news-item-image img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}
+
+.news .news-item-play {
+    color: white;
+    line-height: 0;
+    position: absolute;
+    top: 50%;
+    bottom: 0;
+    left: 50%;
+    right: 0;
+    box-sizing: border-box;
+    display: block;
+    width: 100px;
+    height: 100px;
+    border: 2px solid;
+    border-radius: 100px;
+    transform: translate(-50%, -50%)
+    }
+
+.news-item-play::before {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    width: 0;
+    height: 50px;
+    border-top: 25px solid transparent;
+    border-bottom: 25px solid transparent;
+    border-left: 36px solid;
+    top: 24px;
+    left: 38px;
+} 
+
+.news .news-item-body > *:first-child {
+    margin-top: 0;
+}

blocks/news/news.js

@@ -1,5 +1,28 @@
-export default function decorate(block) {
-  const newsURL = block.querySelector('a').href;
-  console.log('news URL:', newsURL);
-  block.innerHTML = `<a href="${newsURL}">News from ${newsURL}</a>`;
+import { readBlockConfig } from '../../scripts/scripts.js';
+
+export default async function decorate(block) {
+  const videoPrefix = 'https://pga-tour-res.cloudinary.com/image/upload/c_fill,f_auto,g_face,h_311,q_auto,w_425/v1/';
+  const damPrefix = 'https://www.pgatour.com';
+  const config = readBlockConfig(block);
+  const newsURL = config.source;
+  const limit = config.limit || 12;
+  block.textContent = '';
+  /* add CORS header, to be replaced with direct API */
+  const directURL = `${newsURL}/lang=LANG_NOT_DEFINED&path=/content&tags=PGATOUR:Tournaments/2018/r011+PGATOUR:Tournaments/2020/r011+PGATOUR:Tournaments/2019/r011+PGATOUR:Tournaments/2021/r011+PGATOUR:Tournaments/2022/r011&size=${limit}`;
+  const resp = await fetch(`https://little-forest-58aa.david8603.workers.dev/?url=${encodeURIComponent(directURL)}`);
+  const json = await resp.json();
+  const ul = document.createElement('ul');
+  json.items.forEach((item) => {
+    const prefix = item.image.startsWith('brightcove') ? videoPrefix : damPrefix;
+    const li = document.createElement('li');
+    li.className = 'news-item';
+    const video = item.videoId ? '<div class="news-item-play"></div>' : '';
+    li.innerHTML = `
+      <div class="news-item-image"><img src="${prefix}${item.image}"></div>
+      <div class="news-item-body"><a href="${item.link}">${item.title}</a></div>
+      ${video}
+    `;
+    ul.append(li);
+  });
+  block.append(ul);
 }