Merge pull request #737 from adobe/blog-list-page

Updated layout for blog list home page

Author: asthabh23

blocks/feed/feed.css

@@ -2,6 +2,18 @@
   text-align: left;
 }
 
+.feed.blog h1 {
+  font-size: var(--type-heading-xl-size);
+  line-height: var(--type-heading-xl-lh);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.feed-container.blog .default-content-wrapper h1 {
+  text-align: center;
+  margin-top: 20px;
+}
+
 .feed-hidden {
   display: none;
 }
@@ -89,13 +101,6 @@
   padding-top: var(--spacing-s);
 }
 
-.feed.blog h1 {
-  font-size: var(--type-heading-xl-size);
-  line-height: var(--type-heading-xl-lh);
-  font-weight: 700;
-  letter-spacing: -0.04em;
-}
-
 .feed.blog h2 {
   font-size: var(--type-heading-l-size);
   line-height: var(--type-heading-l-lh);
@@ -189,6 +194,18 @@
     padding-top: unset;
   }
 
+  .feed-container.blog .default-content-wrapper {
+    margin-top: 0;
+  }
+
+  .feed.blog h1 {
+    margin-top: 0;
+  }
+
+  .feed-container.blog .default-content-wrapper h1 {
+    margin-top: 0;
+  }
+
   .feed.recent h3,
   .feed.blog h3 {
     margin-bottom: var(--spacing-s);
@@ -217,10 +234,6 @@
     font-size: var(--type-body-m-size);
     line-height: var(--type-body-s-lh);
   }
-
-  .feed.blog h1 {
-    margin-top: 0;
-  }
 }
 
 @media screen and (width >= 1200px) {

blocks/feed/feed.js

@@ -57,6 +57,12 @@ export async function fetchBlogContent(url) {
     const text = await response.text();
     const parser = new DOMParser();
     const doc = parser.parseFromString(text, 'text/html');
+    doc.querySelectorAll('h1, h2, h3, h4, h5').forEach((heading) => {
+      const nextLevel = `h${parseInt(heading.tagName[1], 10) + 1}`;
+      const newHeading = document.createElement(nextLevel);
+      newHeading.innerHTML = heading.innerHTML;
+      heading.replaceWith(newHeading);
+    });
     const content = doc.querySelector('body > main > div');
     return content ? content.innerHTML : '';
   } catch (error) {