fix: generated Stackblitz examples not working when forked to a repo (#901)

crisbeto · web-flow · commit 9cf54bcd3046 · 2021-01-12T07:25:25.000+01:00
We weren't generating a full valid HTML file when creating the `index.html` for Stackblitz which meant that if somebody creates a repository out of it, it won't work. These changes resolve the issue by providing the full HTML file. Providing the full HTML also allows us to represent a real app better and to fix some issues like the one where the app background doesn't cover the whole page. Fixes #21461.
diff --git a/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.ts b/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.ts
@@ -241,8 +241,10 @@ export class StackBlitzWriter {
       // Replace the component selector in `index,html`.
       // For example, <material-docs-example></material-docs-example> will be replaced as
       // <button-demo></button-demo>
-      fileContent = fileContent.replace(/material-docs-example/g, data.selectorName);
-      fileContent = fileContent.replace(/{{version}}/g, VERSION.full);
+      fileContent = fileContent
+        .replace(/material-docs-example/g, data.selectorName)
+        .replace(/{{title}}/g, data.description)
+        .replace(/{{version}}/g, VERSION.full);
     } else if (fileName === 'src/main.ts') {
       const joinedComponentNames = data.componentNames.join(', ');
       // Replace the component name in `main.ts`.
diff --git a/material.angular.io/src/assets/stack-blitz/src/index.html b/material.angular.io/src/assets/stack-blitz/src/index.html
@@ -1,5 +1,13 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
-<div class="mat-app-background basic-container">
-  <material-docs-example>loading</material-docs-example>
-</div>
-<span class="version-info">Current build: {{version}}</span>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
+  <title>{{title}}</title>
+</head>
+<body class="mat-app-background">
+  <material-docs-example>Loading</material-docs-example>
+  <span class="version-info">Current build: {{version}}</span>
+</body>
+</html>
diff --git a/material.angular.io/src/assets/stack-blitz/src/styles.scss b/material.angular.io/src/assets/stack-blitz/src/styles.scss
@@ -3,10 +3,9 @@
 body {
   font-family: Roboto, Arial, sans-serif;
   margin: 0;
-}
-.basic-container {
   padding: 30px;
 }
+
 .version-info {
   font-size: 8pt;
   float: right;
