Style blog post pages and autoblocking

.eslintignore

@@ -1,4 +1,5 @@
 helix-importer-ui
 
 /scripts/alloy*.js
-/tools/actions/
+/tools/actions/
+/tools/importer

scripts/scripts.js

@@ -44,13 +44,38 @@ function buildHeroBlock(main) {
   }
 }
 
+function buildBlockPostPage(main) {
+  // Below h1
+  const h1 = main.querySelector('h1');
+  const socialMediaButtons = document.createRange().createContextualFragment('<div class="sharing">Sharing Block Placeholder</div>');
+  if (h1) {
+    h1.parentElement.insertBefore(socialMediaButtons.cloneNode(true), h1.nextSibling);
+  }
+
+  // Below last content
+  const lastContentSection = main.querySelector('* > div:last-of-type');
+  if (lastContentSection) {
+    lastContentSection.appendChild(socialMediaButtons.cloneNode(true));
+
+    const lostPetTeaser = document.createRange().createContextualFragment('<div class="lost-pet-teaser">Lost Pet Teaser Block Placeholder</div>');
+    lastContentSection.appendChild(lostPetTeaser);
+
+    const similarBlogs = document.createRange().createContextualFragment('<div class="similar-blogs">Similar Blogs Block Placeholder</div>');
+    lastContentSection.appendChild(similarBlogs);
+  }
+}
+
 /**
  * Builds all synthetic blocks in a container element.
  * @param {Element} main The container element
  */
 function buildAutoBlocks(main) {
   try {
-    buildHeroBlock(main);
+    if (!document.body.classList.contains('blog-post')) {
+      buildHeroBlock(main);
+    } else {
+      buildBlockPostPage(main);
+    }
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Auto Blocking failed', error);

styles/styles.css

@@ -380,6 +380,27 @@ main .section.highlight p {
   margin-bottom: 0;
 }
 
+/* Blog post styles */
+body.blog-post main h1, body.blog-post main h2, body.blog-post main h3 {
+  text-align: left;
+}
+
+body.blog-post main h1 {
+  font-size: 2.1875rem;
+  line-height: 2.813rem;
+  font-weight: 300;
+}
+
+body.blog-post main h2 {
+  font-size: 1.625rem;
+  line-height: 2.25rem;
+}
+
+body.blog-post .default-content-wrapper {
+  font-size: 1.125rem;
+  padding: 0 0.9375rem;
+}
+
 main .section.highlight p em {
   display: block;
   font-size: 2.5rem;