feat(scully): better handiling of missing <scully-content> (#462)

Author: SanderElias

.vscode/settings.json

@@ -22,7 +22,9 @@
     "statusBar.foreground": "#e7e7e7",
     "panel.border": "#1b2c8f",
     "sideBar.border": "#1b2c8f",
-    "editorGroup.border": "#1b2c8f"
+    "editorGroup.border": "#1b2c8f",
+    "statusBar.border": "#131f64",
+    "titleBar.border": "#131f64"
   },
   "files.exclude": {
     "**/scully/bin/**/*": true

scully/renderPlugins/content-render-utils/insertContent.ts

@@ -5,9 +5,10 @@ export function insertContent(startTag: string, endTag: string, html: string, in
     const [takeout, endText] = rest.split(endTag);
     return [openingText, startTag, insertText, endTag, ...extras, endText].join('');
   } catch (e) {}
-  logWarn(`missing "${yellow('<scully-content>')}" or "${yellow('httpClientModule')}"`);
+  /** warning is already handled, only put in stub content. */
+  // logWarn(`missing "${yellow('<scully-content>')}"`);
   return `<h1>Scully could not find the &lt.scully-content&gt. tag in this page.</h1>
   <p>This error can happen when you forgot to put the  mandatory "scully-content" in the component that is rendering this page?</p>
-  <p>It may also occur if the 'httpClientModule' is not load in your app.module</p>
+  <p>Or when the tag is not shown on page load. Did you put it inside an \`*ngIf\`?</p>
   `;
 }

scully/renderPlugins/content-render-utils/readFileAndCheckPrePublishSlug.ts

@@ -1,6 +1,7 @@
 import {readFileSync, writeFileSync} from 'fs';
 import {stringify} from 'yamljs';
 import {randomString} from '../../utils/randomString';
+import {logWarn, yellow} from '../../utils';
 const fm = require('front-matter');
 
 export interface ContentMetaData {
@@ -19,6 +20,9 @@ export async function readFileAndCheckPrePublishSlug(file) {
   const originalFile = readFileSync(file, 'utf-8');
   const {attributes: meta, body: fileContent}: {attributes: ContentMetaData; body: string} = fm(originalFile);
   let prePublished = false;
+  if (fileContent.trim() === '') {
+    logWarn(`Content file "${yellow(file)}" has no content!`);
+  }
   if (meta.hasOwnProperty('published') && meta.published === false) {
     /** this post needs an pre-publish slug */
     const slugs = Array.isArray(meta.slugs) ? meta.slugs : [];

scully/renderPlugins/contentRenderPlugin.ts

@@ -7,6 +7,7 @@ import {insertContent} from './content-render-utils/insertContent';
 import {readFileAndCheckPrePublishSlug} from './content-render-utils/readFileAndCheckPrePublishSlug';
 import {JSDOM} from 'jsdom';
 import {customMarkdownOptions} from './customMarkdownOptions';
+import {ssl} from '../utils';
 
 registerPlugin('render', 'contentFolder', contentRenderPlugin);
 
@@ -18,18 +19,36 @@ export async function contentRenderPlugin(html: string, route: HandledRoute) {
   try {
     const extension = file.split('.').pop();
     const {fileContent} = await readFileAndCheckPrePublishSlug(file);
-    // TODO: create additional "routes" for every slug
-    const attr = getIdAttrName(
-      html
-        .split('<scully-content')[1]
-        .split('>')[0]
-        .trim()
-    );
-    const additionalHTML = await customMarkdownOptions(await handleFile(extension, fileContent));
+    let attr = '';
+    try {
+      attr = getIdAttrName(
+        html
+          .split('<scully-content')[1]
+          .split('>')[0]
+          .trim()
+      );
+    } catch (e) {
+      logWarn(`
+----------------
+Error, missing "${yellow('<scully-content>')}" in route "${yellow(route.route)}"
+   without <scully-content> we can not render this route.
+   Make sure it is in there, and not inside any conditionals (*ngIf)
+   You can check this by opening "${yellow(`http${ssl ? 'S' : ''}://localhost:4200/${route.route}`)}"
+   when you serve your app with ${yellow('ng serve')} and then in the browsers console run:
+   ${yellow(`document.querySelector('scully-content')`)}
+----------------
+        `);
+    }
+    let additionalHTML = '';
+    try {
+      additionalHTML = await customMarkdownOptions(await handleFile(extension, fileContent));
+    } catch (e) {
+      logWarn(`Error, while reading content for "${yellow(route.route)}" from file: "${yellow(file)}"`);
+    }
     const htmlWithNgAttr = addNgIdAttribute(additionalHTML, attr);
     return insertContent(scullyBegin, scullyEnd, html, htmlWithNgAttr, getScript(attr));
   } catch (e) {
-    logWarn(`Error, probably missing "${yellow('<scully-content>')}" for ${yellow(file)}`);
+    logWarn(`Error, while rendering content for "${yellow(route.route)}" from file: "${yellow(file)}"`);
     console.error(e);
   }
 }