refactor www/ for frontmatter interpolation

ProjectEvergreen · Mar 5, 2022 · cb26bea · cb26bea
1 parent 0dd6a7f
commit cb26bea
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 18 deletions.
diff --git a/greenwood.config.js b/greenwood.config.js
@@ -7,25 +7,11 @@ import { greenwoodPluginPostCss } from '@greenwood/plugin-postcss';
 import rollupPluginAnalyzer from 'rollup-plugin-analyzer';
 import { fileURLToPath, URL } from 'url';
 
-const META_DESCRIPTION = 'Your workbench for the web.  Focused on supporting modern web standards and development to help you create your next project.';
-const FAVICON_HREF = '/favicon.ico';
-
 export default {
   workspace: fileURLToPath(new URL('./www', import.meta.url)),
   optimization: 'inline',
   staticRouter: true,
-  title: 'Greenwood',
-  meta: [
-    { name: 'description', content: META_DESCRIPTION },
-    { name: 'twitter:site', content: '@PrjEvergreen' },
-    { property: 'og:title', content: 'Greenwood' },
-    { property: 'og:type', content: 'website' },
-    { property: 'og:url', content: 'https://www.greenwoodjs.io' },
-    { property: 'og:image', content: 'https://www.greenwoodjs.io/assets/greenwood-logo-300w.png' },
-    { property: 'og:description', content: META_DESCRIPTION },
-    { rel: 'shortcut icon', href: FAVICON_HREF },
-    { rel: 'icon', href: FAVICON_HREF }
-  ],
+  interpolateFrontmatter: true,
   plugins: [
     ...greenwoodPluginGraphQL(),
     ...greenwoodPluginPolyfills(),

diff --git a/packages/cli/src/plugins/resource/plugin-standard-html.js b/packages/cli/src/plugins/resource/plugin-standard-html.js
@@ -98,18 +98,31 @@ const getAppTemplate = (contents, templatesDir, customImports = [], contextPlugi
 
     appTemplateContents = appTemplateContents.replace(/<page-outlet><\/page-outlet>/, '');
   } else {
+    const appTitle = appRoot ? appRoot.querySelector('head title') : null;
     const body = root.querySelector('body') ? root.querySelector('body').innerHTML : '';
     const headScripts = root.querySelectorAll('head script');
     const headLinks = root.querySelectorAll('head link');
     const headMeta = root.querySelectorAll('head meta');
     const headStyles = root.querySelectorAll('head style');
     const headTitle = root.querySelector('head title');
     const appTemplateHeadContents = appRoot.querySelector('head').innerHTML;
-    const title = frontmatterTitle || (headTitle ? headTitle.rawText : null);
+    const hasInterpolatedFrontmatter = headTitle && headTitle.rawText.indexOf('${globalThis.page.title}') >= 0
+     || appTitle && appTitle.rawText.indexOf('${globalThis.page.title}') >= 0;
+    const title = hasInterpolatedFrontmatter // favor frontmatter interpolation first
+      ? headTitle && headTitle.rawText
+        ? headTitle.rawText
+        : appTitle.rawText
+      : frontmatterTitle // otherwise, work in order of specificity from page -> page template -> app template
+        ? frontmatterTitle
+        : headTitle && headTitle.rawText
+          ? headTitle.rawText
+          : appTitle && appTitle.rawText
+            ? appTitle.rawText
+            : 'My App';
     appTemplateContents = appTemplateContents.replace(/<page-outlet><\/page-outlet>/, body);
 
     if (title) {
-      if (!appRoot.querySelector('head title')) {
+      if (!appTitle) {
         appTemplateContents = appTemplateContents.replace('<head>', '<head>\n <title></title>');
       }
 

diff --git a/packages/cli/test/cases/build.default.title/build.default.title.spec.js b/packages/cli/test/cases/build.default.title/build.default.title.spec.js
@@ -32,7 +32,7 @@ import { fileURLToPath, URL } from 'url';
 const expect = chai.expect;
 
 describe('Build Greenwood With: ', function() {
-  const LABEL = 'Custom Title Configuration and Default Workspace';
+  const LABEL = 'Custom Title Tag and Default Workspace';
   const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
   const outputPath = fileURLToPath(new URL('.', import.meta.url));
   let runner;

diff --git a/www/pages/index.html b/www/pages/index.html
@@ -2,6 +2,9 @@
 <html lang="en" prefix="og:http://ogp.me/ns#">
 
   <head>
+    <title>Greenwood</title>
+    <meta property="og:title" content="Greenwood"/>
+
     <script type="module" src="../components/banner/banner.js"></script>
     <script type="module" src="../components/card/card.js" data-gwd-opt="static"></script>
 

diff --git a/www/templates/app.html b/www/templates/app.html
@@ -2,12 +2,23 @@
 <html lang="en" prefix="og:http://ogp.me/ns#">
 
   <head>
+    <title>Greenwood - ${globalThis.page.title}</title>
     <meta charset="utf-8">
+    <meta name="description" content="Your workbench for the web, focused on supporting modern web standards and development to help you create your next project."/>
+    <meta name="twitter:site" content="@PrjEvergreen"/>
+    <meta property="og:title" content="Greenwood - ${globalThis.page.title}"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://www.greenwoodjs.io"/>
+    <meta property="og:image" content="https://www.greenwoodjs.io/assets/greenwood-logo-300w.png"/>
+    <meta property="og:description" content="Your workbench for the web, focused on supporting modern web standards and development to help you create your next project."/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta name="mobile-web-app-capable" content="yes"/>
     <meta name="apple-mobile-web-app-capable" content="yes"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 
+    <link rel="shortcut icon" href="/favicon.ico"/>
+    <link rel="icon" href="/favicon.ico"/>
+
     <link rel="stylesheet" href="../assets/fonts/source-sans-pro.css"></link>
     <link rel="stylesheet" href="../styles/theme.css"></link>