Website: Auto-generate example header with component title, list of a…

…liases and dependencies.

`overrideExampleHeader` can be used to generate only the component title.

components.js

@@ -44,6 +44,7 @@ var components = {
 		},
 		"markup": {
 			"title": "Markup",
+			"alias": ["html", "xml", "svg", "mathml"],
 			"aliasTitles": {
 				"html": "HTML",
 				"xml": "XML",
@@ -58,12 +59,14 @@ var components = {
 		},
 		"clike": {
 			"title": "C-like",
-			"option": "default"
+			"option": "default",
+			"overrideExampleHeader": true
 		},
 		"javascript": {
 			"title": "JavaScript",
-			"option": "default",
-			"require": "clike"
+			"require": "clike",
+			"alias": "js",
+			"option": "default"
 		},
 		"abap": {
 			"title": "ABAP",
@@ -130,6 +133,7 @@ var components = {
 		},
 		"batch": {
 			"title": "Batch",
+			"alias": "shell",
 			"owner": "Golmote"
 		},
 		"bison": {
@@ -153,6 +157,7 @@ var components = {
 		"csharp": {
 			"title": "C#",
 			"require": "clike",
+			"alias": "dotnet",
 			"owner": "mvalipour"
 		},
 		"cpp": {
@@ -200,6 +205,7 @@ var components = {
 		"django": {
 			"title": "Django/Jinja2",
 			"require": "markup",
+			"alias": "jinja2",
 			"owner": "romanvm"
 		},
 		"docker": {
@@ -433,6 +439,7 @@ var components = {
 		"opencl": {
 			"title": "OpenCL",
 			"require": "cpp",
+			"overrideExampleHeader": true,
 			"owner": "Milania1"
 		},
 		"oz": {
@@ -506,7 +513,7 @@ var components = {
 			"owner": "multipetros"
 		},
 		"q": {
-			"title": "Q",
+			"title": "Q (kdb+ database)",
 			"owner": "Golmote"
 		},
 		"qore": {
@@ -619,6 +626,7 @@ var components = {
 		"typescript": {
 			"title": "TypeScript",
 			"require": "javascript",
+			"alias": "ts",
 			"owner": "vkbansal"
 		},
 		"vbnet": {

examples.js

@@ -104,14 +104,50 @@ function getFileContents(filepath) {
 	});
 }
 
+function buildContentsHeader(id) {
+	var language = languages[id];
+	var header = '<h1>' + language.title + '</h1>';
+	if (language.overrideExampleHeader) {
+		return header;
+	}
+	if (language.alias) {
+		var alias = language.alias;
+		if (Prism.util.type(alias) !== 'Array') {
+			alias = [alias];
+		}
+
+		header += '<p>To use this language, use one of the following classes:</p>';
+		header += '<ul><li><code class="language-none">"language-' + id + '"</code></li>';
+		alias.forEach(function (alias) {
+			header += '<li><code class="language-none">"language-' + alias + '"</code></li>';
+		});
+		header += '</ul>';
+	} else {
+		header += '<p>To use this language, use the class <code class="language-none">"language-' + id + '"</code>.</p>';
+	}
+	if (language.require) {
+		var require = language.require;
+		if (Prism.util.type(require) !== 'Array') {
+			require = [require];
+		}
+
+		header += '<p><strong>Dependencies:</strong> The following dependencies need to be loaded before this component: ';
+		header += require.map(function (dep) {
+			return '<code class="language-none">' + dep + '</code>';
+		}).join(', ');
+		header += '.</p>';
+	}
+	return header;
+}
+
 function update(id) {
 	var language = languages[id];
 	if (language.enabled) {
 		if (!language.examplesPromise) {
 			language.examplesPromise = getFileContents(language.examplesPath);
 		}
 		language.examplesPromise.then(function (contents) {
-			examples[id].innerHTML = contents;
+			examples[id].innerHTML = buildContentsHeader(id) + contents;
 
 			loadLanguage(id).then(function () {
 				var elements = examples[id].querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');

examples/prism-abap.html

@@ -1,6 +1,3 @@
-<h1>ABAP</h1>
-<p>To use this language, use the class "language-abap".</p>
-
 <h2>Comments</h2>
 <pre><code>
 * Line Comments

examples/prism-actionscript.html

@@ -1,6 +1,3 @@
-<h1>ActionScript</h1>
-<p>To use this language, use the class "language-actionscript".</p>
-
 <h2>Comments</h2>
 <pre><code>// Single line comment
 /* Multi-line

examples/prism-ada.html

@@ -1,6 +1,3 @@
-<h1>Ada</h1>
-<p>To use this language, use the class "language-ada".</p>
-
 <h2>Strings</h2>
 <pre><code>"foo ""bar"" baz"
 "Multi-line strings are appended with a " &

examples/prism-apacheconf.html

@@ -1,6 +1,3 @@
-<h1>Apache Configuration</h1>
-<p>To use this language, use the class "language-apacheconf".</p>
-
 <h2>Comments</h2>
 <pre><code># This is a comment
 # &lt;VirtualHost *:80>

examples/prism-apl.html

@@ -1,6 +1,3 @@
-<h1>APL</h1>
-<p>To use this language, use the class "language-apl".</p>
-
 <h2>Comments</h2>
 <pre><code>#!/usr/bin/env runapl
 a←1 2 3 ⍝ this is a comment</code></pre>

examples/prism-applescript.html

@@ -1,6 +1,3 @@
-<h1>AppleScript</h1>
-<p>To use this language, use the class "language-applescript".</p>
-
 <h2>Comments</h2>
 <pre><code>-- Single line comment
 #!/usr/bin/osascript

examples/prism-arduino.html

@@ -1,6 +1,3 @@
-<h1>Arduino</h1>
-<p>To use this language, use the class "language-arduino".</p>
-
 <h2>Strings</h2>
 <pre><code>"foo \"bar\" baz"
 'foo \'bar\' baz'

examples/prism-arff.html

@@ -1,6 +1,3 @@
-<h1>ARFF</h1>
-<p>To use this language, use the class "language-arff".</p>
-
 <h2>Comments</h2>
 <pre><code>%
 % Some comments

examples/prism-asciidoc.html

@@ -1,6 +1,3 @@
-<h1>AsciiDoc</h1>
-<p>To use this language, use the class "language-asciidoc".</p>
-
 <h2>Comments</h2>
 <pre><code>/////
 Comment block

examples/prism-asm6502.html

@@ -1,6 +1,3 @@
-<h1>6502 Assembly</h1>
-<p>To use this language, use the class "language-asm6502".</p>
-
 <h2>Comments</h2>
 <pre><code>; This is a comment</code></pre>
 

examples/prism-aspnet.html

@@ -1,6 +1,3 @@
-<h1>ASP.NET (C#)</h1>
-<p>To use this language, use the class "language-aspnet".</p>
-
 <h2>Comments</h2>
 <pre><code><%-- This is a comment --%>
 <%-- This is a

examples/prism-autohotkey.html

@@ -1,6 +1,3 @@
-<h1>AutoHotkey</h1>
-<p>To use this language, use the class "language-autohotkey".</p>
-
 <h2>Comments</h2>
 <pre><code>; This is a comment</code></pre>
 

examples/prism-autoit.html

@@ -1,6 +1,3 @@
-<h1>AutoIt</h1>
-<p>To use this language, use the class "language-autoit".</p>
-
 <h2>Comments</h2>
 <pre><code>; Single-line comment
 #comments-start

examples/prism-bash.html

@@ -1,6 +1,3 @@
-<h1>Bash</h1>
-<p>To use this language, use the class "language-bash".</p>
-
 <h2>Shebang</h2>
 <pre><code>#!/bin/bash</code></pre>
 

examples/prism-basic.html

@@ -1,6 +1,3 @@
-<h1>BASIC</h1>
-<p>To use this language, use the class "language-basic".</p>
-
 <p>Note: this component focuses on first and second-generation BASICs (such as MSX BASIC, GW-BASIC, SuperBASIC, QuickBASIC, PowerBASIC...).</p>
 
 <h2>Comments</h2>

examples/prism-batch.html

@@ -1,10 +1,3 @@
-<h1>Batch</h1>
-<p>To use this language, use one of the following classes:</p>
-<ul>
-	<li>"language-batch"</li>
-	<li>"language-shell"</li>
-</ul>
-
 <h2>Comments</h2>
 <pre><code>::
 :: Foo bar

examples/prism-bison.html

@@ -1,6 +1,3 @@
-<h1>Bison</h1>
-<p>To use this language, use the class "language-bison".</p>
-
 <h2>Comments</h2>
 <pre><code>// Single-line comment
 /* Multi-line

examples/prism-brainfuck.html

@@ -1,6 +1,3 @@
-<h1>Brainfuck</h1>
-<p>To use this language, use the class "language-brainfuck".</p>
-
 <h2>Full example</h2>
 <pre><code>+++++ +++               Set Cell #0 to 8
 [

examples/prism-bro.html

@@ -1,6 +1,3 @@
-<h1>Bro</h1>
-<p>To use this language, use the class "language-bro".</p>
-
 <h2>Comments</h2>
 <pre><code># Single line comment
 </code></pre>

examples/prism-c.html

@@ -1,6 +1,3 @@
-<h1>C</h1>
-<p>To use this language, use the class "language-c".</p>
-
 <h2>Strings</h2>
 <pre><code>"foo \"bar\" baz"
 'foo \'bar\' baz'

examples/prism-clike.html

@@ -1,7 +1,6 @@
-<h1>C-like</h1>
 <p>The C-like component is not really a language on its own,
 	it is the basis of many other components. To use it directly, however,
-	use the class "language-clike".</p>
+	use the class <code class="language-none">"language-clike"</code>.</p>
 
 <h2>Comments</h2>
 <pre><code>// Single line comment

examples/prism-clojure.html

@@ -1,6 +1,3 @@
-<h1>Clojure</h1>
-<p>To use this language, use the class "language-clojure".</p>
-
 <h2>Full example</h2>
 <pre><code>
 ; This code is copied from https://learnxinyminutes.com/docs/clojure/

examples/prism-coffeescript.html

@@ -1,6 +1,3 @@
-<h1>CoffeeScript</h1>
-<p>To use this language, use the class "language-coffeescript".</p>
-
 <h2>Comments</h2>
 <pre><code># This is a comment
 ### This is a

examples/prism-cpp.html

@@ -1,6 +1,3 @@
-<h1>C++</h1>
-<p>To use this language, use the class "language-cpp".</p>
-
 <h2>Strings</h2>
 <pre><code>"foo \"bar\" baz"
 'foo \'bar\' baz'

examples/prism-crystal.html

@@ -1,6 +1,3 @@
-<h1>Crystal</h1>
-<p>To use this language, use the class "language-crystal".</p>
-
 <h2>Number literals with underscores and postfix</h2>
 <pre><code>1_u32
 123_456.789e-10_f64</code></pre>

examples/prism-csharp.html

@@ -1,10 +1,3 @@
-<h1>C#</h1>
-<p>To use this language, use one of the following classes:</p>
-<ul>
-	<li>"language-csharp"</li>
-	<li>"language-dotnet"</li>
-</ul>
-
 <h2>Comments</h2>
 <pre><code>// Single line comment
 /* Multi-line

examples/prism-csp.html

@@ -1,6 +1,3 @@
-<h1>HTTP Content-Security-Policy header value</h1>
-<p>To use this language, use the class "language-csp".</p>
-
 <h2>A complete policy</h2>
 <pre><code>default-src 'none';
 script-src my.cdn.com;

examples/prism-css.html

@@ -1,6 +1,3 @@
-<h1>CSS</h1>
-<p>To use this language, use the class "language-css".</p>
-
 <h2>Empty rule</h2>
 <pre><code>*{} * {} p {}</code></pre>
 <pre><code>ul,

examples/prism-d.html

@@ -1,6 +1,3 @@
-<h1>D</h1>
-<p>To use this language, use the class "language-d".</p>
-
 <h2>Comments</h2>
 <pre><code>// Single line comment
 /* Multi-line

examples/prism-dart.html

@@ -1,6 +1,3 @@
-<h1>Dart</h1>
-<p>To use this language, use the class "language-dart".</p>
-
 <h2>Comments</h2>
 <pre><code>// Single line comment
 /// Documentation single line comment

examples/prism-diff.html

@@ -1,6 +1,3 @@
-<h1>Diff</h1>
-<p>To use this language, use the class "language-diff".</p>
-
 <h2>Normal Diff</h2>
 <pre><code>7c7
 &lt; qt: core

examples/prism-django.html

@@ -1,10 +1,3 @@
-<h1>Django/Jinja2</h1>
-<p>To use this language, use one of the following classes:</p>
-<ul>
-  <li>"language-django"</li>
-  <li>"language-jinja2"</li>
-</ul>
-
 <h2>Comment</h2>
 <pre><code>{# This is a comment #}</code></pre>
 

examples/prism-docker.html

@@ -1,6 +1,3 @@
-<h1>Docker</h1>
-<p>To use this language, use the class "language-docker".</p>
-
 <h2>Comments</h2>
 <pre><code># These are the comments for a dockerfile.
 # I want to make sure $(variables) don't break out,

examples/prism-eiffel.html

@@ -1,6 +1,3 @@
-<h1>Eiffel</h1>
-<p>To use this language, use the class "language-eiffel".</p>
-
 <h2>Comments</h2>
 <pre><code>-- A comment
 </code></pre>

examples/prism-elixir.html

@@ -1,6 +1,3 @@
-<h1>Elixir</h1>
-<p>To use this language, use the class "language-elixir".</p>
-
 <h2>Comments</h2>
 <pre><code># This is a comment</code></pre>
 

examples/prism-elm.html

@@ -1,6 +1,3 @@
-<h1>Elm</h1>
-<p>To user this language, use the class "language-elm".</p>
-
 <h2>Comments</h2>
 <pre><code>-- Single line comment
 {- Multi-line

examples/prism-erlang.html

@@ -1,6 +1,3 @@
-<h1>Erlang</h1>
-<p>To use this language, use the class "language-erlang".</p>
-
 <h2>Comments</h2>
 <pre><code>% This is a comment
 %% coding: utf-8</code></pre>