Fix QA-718 page regressions and broken host page links

Author: justin808

public/favicon.ico

@@ -19,10 +19,11 @@ interface Props {
 const { post, compact = false } = Astro.props;
 const href = post.data.path;
 const hasImage = Boolean(post.data.featuredImage);
-const categorySlug = post.data.categories[0];
-const categoryLabel = categorySlug
-  ? taxonomy.categories[categorySlug as keyof typeof taxonomy.categories] ?? categorySlug
-  : '';
+const categoryChips = post.data.categories.map((slug) => ({
+  slug,
+  label: taxonomy.categories[slug as keyof typeof taxonomy.categories] ?? slug
+}));
+const summary = post.data.description?.replace(/\s+/g, ' ').trim() ?? '';
 ---
 
 <article class:list={['post-card', compact && 'post-card--compact']}>
@@ -44,15 +45,24 @@ const categoryLabel = categorySlug
   }
 
   <div class="post-card__body">
-    {categorySlug && (
-      <a class="post-card__category" href={`/category/${categorySlug}/`}>
-        {categoryLabel}
-      </a>
+    {categoryChips.length > 0 && (
+      <div class="post-card__categories">
+        {categoryChips.map((category) => (
+          <a class="post-card__category" href={`/category/${category.slug}/`}>
+            {category.label}
+          </a>
+        ))}
+      </div>
     )}
     <h2 class="post-card__title">
       <a href={href}>{post.data.title}</a>
     </h2>
     <p class="meta">{post.data.date.toISOString().slice(0, 10)}</p>
-    {!compact && post.data.description && <p class="post-card__summary">{post.data.description}</p>}
+    {!compact && summary && <p class="post-card__summary">{summary}</p>}
+    {!compact && (
+      <p class="post-card__readmore">
+        <a href={href}>Read More →</a>
+      </p>
+    )}
   </div>
 </article>

src/components/PostCard.astro

@@ -45,6 +45,7 @@ const isActive = (href: string) => {
     <meta property="og:type" content="website" />
     <meta property="og:url" content={canonicalUrl ?? Astro.url.toString()} />
     <meta name="twitter:card" content="summary_large_image" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
     {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
     <slot name="head" />
     <title>{title}</title>
@@ -66,7 +67,11 @@ const isActive = (href: string) => {
           {
             navLinks.map((link) => (
               <a
-                class:list={['top-nav__link', isActive(link.href) && 'is-active']}
+                class:list={[
+                  'top-nav__link',
+                  isActive(link.href) && 'is-active',
+                  link.href.startsWith('http') && 'is-external'
+                ]}
                 href={link.href}
                 target={link.href.startsWith('http') ? '_blank' : undefined}
                 rel={link.href.startsWith('http') ? 'noreferrer' : undefined}

src/layouts/BaseLayout.astro

@@ -14,6 +14,7 @@ export async function getStaticPaths() {
 
   const byPath = new Map(allEntries.map((entry) => [entry.data.path, entry] as const));
   const aliasPathToCanonicalPath = new Map<string, string>([
+    ['/hichee-blog-for-hosts/page/2/', '/hichee-blog-for-hosts/'],
     ['/where-am-i-24-2/', '/where-am-i-24/'],
     [
       '/best-cheap-flights-websites-nobody-is-talking-about-how-to-find-cheap-flights-2022\uFFFC/',

src/pages/[...slug].astro

@@ -6,6 +6,7 @@ const pages = (await getCollection('pages')).filter((entry) => !entry.data.draft
 const homePage = pages.find((entry) => entry.data.wordpressId === 156 || entry.data.path === '/the-hichee-blog/');
 
 const legacyHomeHtml = homePage ? rewriteHomeHtml(homePage.body) : '';
+const homeShareHtml = buildHomeShareHtml(homePage?.data.title ?? 'The HiChee Blog');
 
 function rewriteHomeHtml(body: string): string {
   const hrefPattern = /href=(["'])https?:\/\/blog\.hichee\.com([^"']*)\1/gi;
@@ -31,14 +32,36 @@ function rewriteInternalHref(pathValue: string): string | null {
   const withLeadingSlash = withoutQuery.startsWith('/') ? withoutQuery : `/${withoutQuery}`;
   return withLeadingSlash.endsWith('/') ? withLeadingSlash : `${withLeadingSlash}/`;
 }
+
+function buildHomeShareHtml(title: string): string {
+  const shareUrl = 'https://blog.hichee.com/';
+  const linkUrl = encodeURIComponent(shareUrl);
+  const linkName = encodeURIComponent(title);
+  const escapedTitle = title.replace(/&/g, '&').replace(/"/g, '"');
+  const channels = [
+    { channel: 'facebook', label: 'Facebook' },
+    { channel: 'twitter', label: 'Twitter' },
+    { channel: 'pinterest', label: 'Pinterest' },
+    { channel: 'whatsapp', label: 'WhatsApp' },
+    { channel: 'email', label: 'Email' }
+  ];
+
+  const socialLinks = channels
+    .map(
+      (item) =>
+        `<a class="a2a_button_${item.channel}" href="https://www.addtoany.com/add_to/${item.channel}?linkurl=${linkUrl}&linkname=${linkName}" title="${item.label}" rel="nofollow noopener" target="_blank"></a>`
+    )
+    .join('');
+
+  return `<div class="addtoany_share_save_container addtoany_content addtoany_content_bottom"><div class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="${shareUrl}" data-a2a-title="${escapedTitle}">${socialLinks}<a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share"></a></div></div>`;
+}
 ---
 
 <BaseLayout
   title="The HiChee Blog and Travel Guide"
   description="Insider travel tips and destination guides from HiChee."
   canonical="/"
   bodyClass="legacy-home home wp-theme-kadence wp-custom-logo"
-  suppressFooter={true}
 >
   <Fragment slot="head">
     <link rel="stylesheet" href="/wp-legacy/wp-block-library.min.css" />
@@ -55,7 +78,10 @@ function rewriteInternalHref(pathValue: string): string | null {
 
   {
     homePage ? (
-      <article class="legacy-home-content" set:html={legacyHomeHtml} />
+      <article class="legacy-home-content">
+        <Fragment set:html={legacyHomeHtml} />
+        <Fragment set:html={homeShareHtml} />
+      </article>
     ) : (
       <section class="listing-hero">
         <p class="eyebrow">Missing Source</p>