Inject style and hydrate ID into HTML.

plentico · Apr 24, 2020 · a915a50 · a915a50
1 parent 9c4e08e
commit a915a50
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 18 deletions.
diff --git a/cmd/build/data_source.go b/cmd/build/data_source.go
@@ -62,17 +62,13 @@ func DataSource(buildPath string, siteConfig readers.SiteConfig) (string, string
 
 				// Check for path overrides from plenti.json config file.
 				for configContentType, slug := range siteConfig.Types {
-					fmt.Printf("cct is: %s\n", configContentType)
-					fmt.Printf("ct is: %s\n", contentType)
 					if configContentType == contentType {
 						slug = strings.Replace(slug, ":filename", fileName, -1)
 						slug = strings.Replace(slug, "_", "-", -1)
 						slug = strings.ToLower(slug)
 						slug = strings.TrimSuffix(slug, filepath.Ext(slug))
 						path = slug
 					}
-					fmt.Printf("slug is: %s\n", slug)
-					fmt.Printf("path is: %s\n", path)
 				}
 
 				destPath := buildPath + "/" + path + ".html"

diff --git a/defaults/layout/ejected/build.js b/defaults/layout/ejected/build.js
@@ -7,9 +7,9 @@ import fs from 'fs';
 // Get the arguments from Go command execution.
 const args = process.argv.slice(2)
 
-// -----------------------
-// Start client SPA build:
-// -----------------------
+// -----------------
+// Helper Functions:
+// -----------------
 
 // Create any missing sub folders.
 const ensureDirExists = filePath => {
@@ -21,6 +21,19 @@ const ensureDirExists = filePath => {
 	fs.mkdirSync(dirname);
 }
 
+// Concatenates HTML strings together.
+const injectString = (order, content, element, html) => {
+	if (order == 'prepend') {
+		return html.replace(element, content + element);
+	} else if (order == 'append') {
+		return html.replace(element, element + content);
+	}
+};
+
+// -----------------------
+// Start client SPA build:
+// -----------------------
+
 let clientBuildStr = JSON.parse(args[0]);
 
 clientBuildStr.forEach(arg => {
@@ -44,10 +57,6 @@ clientBuildStr.forEach(arg => {
 // Start static HTML build:
 // ------------------------
 
-//console.log(args[1]);
-//console.log("\n\n");
-//console.log(args[2]);
-
 let staticBuildStr = JSON.parse(args[1]);
 let allNodes = JSON.parse(args[2]);
 
@@ -70,6 +79,16 @@ staticBuildStr.forEach(arg => {
 	// Create the static HTML and CSS.
 	let { html, css } = component.render(props);
 
+	// Inject Style.
+	let style = "<style>" + css.code + "</style>";
+	html = injectString('prepend', style, '</head>', html);
+	// Inject SPA entry point.
+	let entryPoint = '<script type="module" src="https://unpkg.com/dimport?module" data-main="/spa/ejected/main.js"></script><script nomodule src="https://unpkg.com/dimport/nomodule" data-main="/spa/ejected/main.js"></script>';
+	html = injectString('prepend', entryPoint, '</head>', html);
+	// Inject ID used to hydrate SPA.
+	let hydrator = ' id="hydrate-plenti"';
+	html = injectString('append', hydrator, '<html', html);
+
 	// Write .html file to filesystem.
   	ensureDirExists(destPath);
 	fs.promises.writeFile(destPath, html);

diff --git a/generated/defaults.go b/generated/defaults.go
@@ -117,9 +117,9 @@ import fs from 'fs';
 // Get the arguments from Go command execution.
 const args = process.argv.slice(2)
 
-// -----------------------
-// Start client SPA build:
-// -----------------------
+// -----------------
+// Helper Functions:
+// -----------------
 
 // Create any missing sub folders.
 const ensureDirExists = filePath => {
@@ -131,6 +131,19 @@ const ensureDirExists = filePath => {
 	fs.mkdirSync(dirname);
 }
 
+// Concatenates HTML strings together.
+const injectString = (order, content, element, html) => {
+	if (order == 'prepend') {
+		return html.replace(element, content + element);
+	} else if (order == 'append') {
+		return html.replace(element, element + content);
+	}
+};
+
+// -----------------------
+// Start client SPA build:
+// -----------------------
+
 let clientBuildStr = JSON.parse(args[0]);
 
 clientBuildStr.forEach(arg => {
@@ -154,10 +167,6 @@ clientBuildStr.forEach(arg => {
 // Start static HTML build:
 // ------------------------
 
-//console.log(args[1]);
-//console.log("\n\n");
-//console.log(args[2]);
-
 let staticBuildStr = JSON.parse(args[1]);
 let allNodes = JSON.parse(args[2]);
 
@@ -180,6 +189,16 @@ staticBuildStr.forEach(arg => {
 	// Create the static HTML and CSS.
 	let { html, css } = component.render(props);
 
+	// Inject Style.
+	let style = "<style>" + css.code + "</style>";
+	html = injectString('prepend', style, '</head>', html);
+	// Inject SPA entry point.
+	let entryPoint = '<script type="module" src="https://unpkg.com/dimport?module" data-main="/spa/ejected/main.js"></script><script nomodule src="https://unpkg.com/dimport/nomodule" data-main="/spa/ejected/main.js"></script>';
+	html = injectString('prepend', entryPoint, '</head>', html);
+	// Inject ID used to hydrate SPA.
+	let hydrator = ' id="hydrate-plenti"';
+	html = injectString('append', hydrator, '<html', html);
+
 	// Write .html file to filesystem.
   	ensureDirExists(destPath);
 	fs.promises.writeFile(destPath, html);