Examples: Updated content header (#2232)

This changes the automatically generated header of examples on Prism's example page.

The `overrideExampleHeader` option in `components.json` is no longer supported.

components.json

@@ -64,8 +64,7 @@
 		},
 		"clike": {
 			"title": "C-like",
-			"option": "default",
-			"overrideExampleHeader": true
+			"option": "default"
 		},
 		"javascript": {
 			"title": "JavaScript",
@@ -694,7 +693,6 @@
 				"c",
 				"cpp"
 			],
-			"overrideExampleHeader": true,
 			"owner": "Milania1"
 		},
 		"oz": {

examples/prism-clike.html

@@ -1,6 +1,5 @@
-<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 <code class="language-none">"language-clike"</code>.</p>
+<p><strong>Note:</strong> The C-like component is not really a language on its own,
+	it is the basis of many other components.</p>
 
 <h2>Comments</h2>
 <pre><code>// Single line comment
@@ -25,4 +24,4 @@ <h2>Functions</h2>
 <pre><code>foo();
 Bar();
 _456();
-</code></pre>
+</code></pre>

examples/prism-opencl.html

@@ -1,7 +1,6 @@
-<p>
-	To use this language, use the class <code class="language-none">"language-opencl"</code> for OpenCL kernel code.
-	Host code is automatically highlighted in <code class="language-none">"language-c"</code>
-	respectively <code class="language-none">"language-cpp"</code> classes.
+<p><strong>Note:</strong> Use the class <code class="language-none">"language-opencl"</code> for OpenCL kernel code.
+	Host code is automatically highlighted with the <code class="language-none">"language-c"</code>
+	or <code class="language-none">"language-cpp"</code> class.
 </p>
 
 <h2>OpenCL host code</h2>

scripts/examples.js

@@ -110,16 +110,21 @@ function getFileContents(filepath) {
 }
 
 function buildContentsHeader(id) {
+	function toArray(value) {
+		if (Array.isArray(value)) {
+			return value;
+		} else if (value != null) {
+			return [value];
+		} else {
+			return [];
+		}
+	}
+
 	var language = languages[id];
 	var header = '<h1>' + language.title + '</h1>';
-	if (language.overrideExampleHeader) {
-		return header;
-	}
+
 	if (language.alias) {
-		var alias = language.alias;
-		if (!Array.isArray(alias)) {
-			alias = [alias];
-		}
+		var alias = toArray(language.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>';
@@ -130,18 +135,38 @@ function buildContentsHeader(id) {
 	} else {
 		header += '<p>To use this language, use the class <code class="language-none">"language-' + id + '"</code>.</p>';
 	}
+
+	function wrapCode(text) {
+		return '<code class="language-none">' + text + '</code>';
+	}
+
+	var deps = [];
 	if (language.require) {
-		var require = language.require;
-		if (!Array.isArray(require)) {
-			require = [require];
+		deps.push('requires ' + toArray(language.require).map(wrapCode).join(', '));
+	}
+	if (language.optional) {
+		deps.push('optionally uses ' + toArray(language.optional).map(wrapCode).join(', '));
+	}
+	if (language.modify) {
+		deps.push('modifies ' + toArray(language.modify).map(wrapCode).join(', '));
+	}
+	if (deps.length) {
+		header += '<p>';
+		header += '<a href="https://prismjs.com/extending.html#dependencies"><strong>Dependencies:</strong></a>';
+		header += ' This component';
+		if (deps.length === 1) {
+			header += ' ' + deps[0] + '.';
+		} else {
+			header += ':';
+			header += '<ul>';
+			deps.forEach(function (text) {
+				header += '<li>' + text + '.</li>'
+			});
+			header += '</ul>';
 		}
-
-		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>';
+		header += '</p>';
 	}
+
 	return header;
 }