Add Seo logger (#400)

* Add SEO logger

* Add SEO logger

* wrap json parse

packages/hydrogen/src/seo/log-seo-tags.test.ts

@@ -0,0 +1,98 @@
+import {expect, describe, it, vi} from 'vitest';
+import {logSeoTags} from './log-seo-tags';
+import {HeadTag} from './generate-seo-tags';
+
+describe('logSeoTags', () => {
+  const consoleMock = {
+    log: vi.fn(),
+    table: vi.fn(),
+  };
+
+  vi.stubGlobal('console', consoleMock);
+
+  const lineBreak: [string] = [' '];
+  const banner: ([string] | [string, number])[] = [
+    lineBreak,
+    ['SEO Meta Tags', 1],
+    lineBreak,
+  ];
+
+  it('outputs the given meta tag objects in console logs', () => {
+    // Given
+    const input: HeadTag[] = [
+      {
+        key: 'meta-og:title',
+        tag: 'meta',
+        props: {
+          property: 'og:type',
+          content: 'Snowdevil',
+        },
+      },
+      {
+        key: 'meta-og:description',
+        tag: 'meta',
+        props: {
+          property: 'og:description',
+          content: 'A description',
+        },
+      },
+    ];
+
+    // When
+    logSeoTags(input);
+
+    expectLogFixture([
+      ...banner,
+      ['meta', 1],
+      ['og:type'],
+      ['Snowdevil'],
+      lineBreak,
+      ['meta', 1],
+      ['og:description'],
+      ['A description'],
+      lineBreak,
+    ]);
+  });
+
+  it('outputs the JSON LD as a console table', () => {
+    const jsonLdContent = {
+      name: 'name',
+      content: 'Snowdevil',
+    };
+
+    // Given
+    const input: HeadTag[] = [
+      {
+        key: 'ld-json',
+        tag: 'script',
+        props: {},
+        children: JSON.stringify(jsonLdContent),
+      },
+    ];
+
+    // When
+    logSeoTags(input);
+
+    expect(console.table).toHaveBeenCalledWith(
+      expect.objectContaining(jsonLdContent),
+      ['name', 'content'],
+    );
+  });
+});
+
+function expectLogFixture(
+  expectedOutput: ([string, number] | [string])[],
+  styles = expect.any(String),
+) {
+  expectedOutput.forEach(([line, numStyles], index) => {
+    const styleLines = numStyles
+      ? Array.from({length: numStyles}).map(() => styles)
+      : [];
+
+    expect(console.log).toHaveBeenNthCalledWith(
+      index + 1,
+      expect.stringContaining(line),
+      ...styleLines,
+    );
+  });
+}

packages/hydrogen/src/seo/log-seo-tags.ts

@@ -0,0 +1,46 @@
+import {HeadTag} from './generate-seo-tags';
+
+export function logSeoTags(headTags: HeadTag[]) {
+  const style = 'text-transform: uppercase;';
+  const style2 =
+    'text-transform: uppercase; font-weight: bold; text-transform: uppercase;font-weight: bold';
+
+  console.log(' ');
+  console.log('%cSEO Meta Tags', `${style2}`);
+  console.log(' ');
+
+  headTags.forEach((tag) => {
+    if (tag.tag === 'script') {
+      console.log(`%c• JSON LD `, style);
+
+      if (tag.children) {
+        try {
+          console.table(JSON.parse(tag.children), ['name', 'content']);
+        } catch {
+          console.log(tag.children);
+        }
+      }
+    } else {
+      console.log(`%c• ${tag.tag} `, style);
+
+      if (tag.children) {
+        if (typeof tag.children === 'string') {
+          console.log(`↳ ${tag.children}`);
+        } else {
+          try {
+            Object.entries(JSON.parse(tag.children)).map(([key, val]) =>
+              console.log(`↳ ${val}`),
+            );
+          } catch {
+            console.log(tag.children);
+          }
+        }
+      }
+
+      Object.entries(tag.props).map(([key, val]) =>
+        console.log(`↳ ${key} → ${val}`),
+      );
+    }
+    console.log(' ');
+  });
+}

packages/hydrogen/src/seo/seo.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import {useMatches, useLocation, type Params, type Location} from '@remix-run/react';
 import {generateSeoTags, type Seo as SeoType} from './generate-seo-tags';
+import {logSeoTags} from './log-seo-tags';
 
 import type {
   LoaderFunction,
@@ -22,7 +23,11 @@ export interface SeoHandleFunction<
   }): Partial<SeoType>;
 }
 
-export function Seo() {
+interface SeoProps {
+  debug?: boolean;
+}
+
+export function Seo({debug}: SeoProps) {
   const matches = useMatches();
   const location = useLocation();
 
@@ -47,6 +52,8 @@ export function Seo() {
 
   const headTags = generateSeoTags(seoConfig);
 
+  if (debug) logSeoTags(headTags);
+
   const html = headTags.map((tag) => {
     if (tag.tag === 'script') {
       return React.createElement(tag.tag, {

templates/demo-store/app/root.tsx

@@ -77,7 +77,7 @@ export default function App() {
   return (
     <html lang={locale.language}>
       <head>
-        <Seo />
+        <Seo debug />
         <Meta />
         <Links />
       </head>