build: update markdown-to-html to avoid output conflicts

With the new `ts_project`, or `ng_project` rule, HTML templates of
components are also copied over to the bazel bin. This unveiled a naming
conflict of e.g. `slider.md` being generated as `slider.html`; while
there is a template like `slider.html`.

Author: devversion

material.angular.io/src/app/pages/component-viewer/component-viewer.ts

@@ -168,7 +168,7 @@ export class ComponentOverview extends ComponentBaseView {
     // folder named after the component while the overview file is named similarly. e.g.
     //    `cdk#overlay`     -> `cdk/overlay/overlay.md`
     //    `material#button` -> `material/button/button.md`
-    const overviewPath = doc.overviewPath || `${doc.packageName}/${doc.id}/${doc.id}.html`;
+    const overviewPath = doc.overviewPath || `${doc.packageName}/${doc.id}/${doc.id}.md.html`;
     return `/docs-content/overviews/${overviewPath}`;
   }
 }

tools/markdown-to-html/index.bzl

@@ -30,12 +30,12 @@ def _markdown_to_html(ctx):
     for input_file in input_files:
         # Determine the input file path relatively to the current package path. This is necessary
         # because we want to preserve directories for the input files and `declare_file` expects a
-        # path that is relative to the current package. Also note that we should not use `.replace`
-        # here because the extension can be also in upper case.
-        relative_basepath = _relative_to_label(ctx.label, input_file.short_path)[:-len(".md")]
+        # path that is relative to the current package.
+        relative_basepath = _relative_to_label(ctx.label, input_file.short_path)
 
-        # For each input file "xxx.md", we want to write an output file "xxx.html"
-        expected_outputs += [ctx.actions.declare_file("%s.html" % relative_basepath)]
+        # For each input file "xxx.md", we want to write an output file "xxx.md.html"
+        # Note: we preserve the `.md` text to avoid collisions with real templates.
+        expected_outputs.append(ctx.actions.declare_file("%s.html" % relative_basepath))
 
         # Add the input file to the command line arguments that will be passed to the
         # transform-markdown executable.
@@ -69,7 +69,7 @@ markdown_to_html = rule(
         "_transform_markdown": attr.label(
             default = Label("//tools/markdown-to-html"),
             executable = True,
-            cfg = "host",
+            cfg = "exec",
         ),
     },
 )

tools/markdown-to-html/transform-markdown.ts

@@ -9,9 +9,6 @@ import {join} from 'path';
 import {highlightCodeBlock} from '../highlight-files/highlight-code-block';
 import {DocsMarkdownRenderer} from './docs-marked-renderer';
 
-// Regular expression that matches the markdown extension of a given path.
-const markdownExtension = /.md$/;
-
 // Custom markdown renderer for transforming markdown files for the docs.
 const markdownRenderer = new DocsMarkdownRenderer();
 
@@ -26,7 +23,7 @@ if (require.main === module) {
   // Walk through each input file and write transformed markdown output to the specified
   // Bazel bin directory.
   inputFiles.forEach(inputPath => {
-    const outputPath = join(bazelBinPath, inputPath.replace(markdownExtension, '.html'));
+    const outputPath = join(bazelBinPath, `${inputPath}.html`);
     const htmlOutput = markdownRenderer.finalizeOutput(
       marked(readFileSync(inputPath, 'utf8')),
       inputPath,