Merge branch 'main' into 17-add-search-and-indexing

best-cigars-guide/blocks/footer/footer.css

@@ -1,14 +1,34 @@
 footer {
-  padding: 2rem;
-  background-color: var(--light-color);
+  padding: 4em 0;
   font-size: var(--body-font-size-s);
 }
 
 footer .footer {
   max-width: var(--content-width);
-  margin: auto;
+  margin: 0 auto;
 }
 
 footer .footer p {
   margin: 0;
+  text-align: center;
+  font-size: 0.75em;
+  font-weight: 300;
+}
+
+footer .footer p a {
+  color: #111;
+}
+
+footer .footer p:first-child {
+  padding-bottom: 2em;
+}
+
+footer .footer .footer-logo-wrap {
+  text-align: center;
+}
+
+footer .footer .footer-logo {
+  margin: 0 auto 30px;
+  width: 120px;
+  height: auto;
 }

best-cigars-guide/blocks/footer/footer.js

@@ -1,5 +1,26 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
+import { isInternal } from '../../scripts/scripts.js';
+
+function getFamousLogo() {
+  // Create the image element
+  const image = document.createElement('img');
+  image.src = '/best-cigars-guide/icons/famous-smoke-shop-logo-gray.png';
+  image.className = 'footer-logo';
+
+  // Add the Famous link, with the logo inside of it
+  const link = document.createElement('a');
+  link.href = 'https://www.famous-smoke.com';
+  link.className = 'footer-logo-link';
+  link.appendChild(image);
+
+  // Wrap it up
+  const wrap = document.createElement('div');
+  wrap.className = 'footer-logo-wrap';
+  wrap.appendChild(link);
+
+  return wrap;
+}
 
 /**
  * loads and decorates the footer
@@ -16,5 +37,20 @@ export default async function decorate(block) {
   const footer = document.createElement('div');
   while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
 
+  // Add the Famous logo
+  footer.prepend(getFamousLogo());
+
+  // Open external links in new tab
+  footer.querySelectorAll('a').forEach((a) => {
+    const href = a.getAttribute('href');
+    if (!isInternal(href)) {
+      a.setAttribute('target', '_blank');
+    }
+  });
+
+  // Set copyright year to current year
+  const currentYear = new Date().getFullYear();
+  footer.innerHTML = footer.innerHTML.replaceAll('{year}', currentYear.toString());
+
   block.append(footer);
 }

best-cigars-guide/scripts/scripts.js

@@ -69,6 +69,20 @@ export function decorateMain(main) {
   decorateBlocks(main);
 }
 
+/**
+ * Checks if the given path is an external URL.
+ * @param {string} path - The path to be checked.
+ * @returns {boolean} - Returns true if the path is an external URL, false otherwise.
+ */
+export function isInternal(path) {
+  try {
+    const url = new URL(path);
+    return (window.location.hostname === url.hostname && url.pathname.startsWith('/best-cigars-guide'));
+  } catch (error) {
+    return true;
+  }
+}
+
 /**
  * Loads everything needed to get to LCP.
  * @param {Element} doc The container element

best-cigars-guide/styles/styles.css

@@ -14,6 +14,8 @@
   /* colors */
   --link-color: #035fe6;
   --link-hover-color: #136ff6;
+  --header-color: #2c2c2c;
+  --paragraph-color: #4a4a4a;
   --background-color: white;
   --header-background-color: #111;
   --light-color: #eee;
@@ -88,6 +90,7 @@ h4, h5, h6 {
   margin-top: 1em;
   margin-bottom: .5em;
   scroll-margin: calc(var(--nav-height) + 1em);
+  color: var(--header-color);
 }
 
 h1 { font-size: var(--heading-font-size-xxl) }
@@ -102,6 +105,10 @@ p, dl, ol, ul, pre, blockquote {
   margin-bottom: 1em;
 }
 
+p {
+  color: var(--paragraph-color);
+}
+
 code, pre {
   font-family: var(--fixed-font-family);
   font-size: var(--body-font-size-s);