Examples: Added external tag (mrdoob#24281)

* Examples: Added external tag.

* Examples: Subtler external tag.

* Removed unneeded style.

examples/index.html

@@ -77,18 +77,18 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 			for ( const key in files ) {
 
-				const section = files[ key ];
+				const category = files[ key ];
 
 				const header = document.createElement( 'h2' );
 				header.textContent = key;
 				header.setAttribute( 'data-category', key );
 				container.appendChild( header );
 
-				for ( let i = 0; i < section.length; i ++ ) {
+				for ( let i = 0; i < category.length; i ++ ) {
 
-					const file = section[ i ];
+					const file = category[ i ];
 
-					const link = createLink( file );
+					const link = createLink( file, tags[ file ] );
 					container.appendChild( link );
 
 					links[ file ] = link;
@@ -201,15 +201,17 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 		}
 
-		function createLink( file ) {
+		function createLink( file, tags ) {
+
+			const external = Array.isArray( tags ) && tags.includes( 'external' ) ? ' <span class="tag">external</span>' : '';
 
 			const template = `
 				<div class="card">
-					<a href="${file}.html" target="viewer">
+					<a href="${ file }.html" target="viewer">
 						<div class="cover">
 							<img src="screenshots/${ file }.jpg" loading="lazy" width="400" />
 						</div>
-						<div class="title">${getName( file )}</div>
+						<div class="title">${ getName( file ) }${ external }</div>
 					</a>
 				</div>
 			`;
@@ -319,18 +321,9 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 				link.classList.remove( 'hidden' );
 
-				for ( let i = 0; i < res.length; i ++ ) {
-
-					text = name.replace( res[ i ], '<b>' + res[ i ] + '</b>' );
-
-				}
-
-				link.querySelector( '.title' ).innerHTML = text;
-
 			} else {
 
 				link.classList.add( 'hidden' );
-				link.querySelector( '.title' ).innerHTML = name;
 
 			}
 

examples/tags.json

@@ -33,6 +33,7 @@
 	"webgl_loader_ttf": [ "text", "font" ],
 	"webgl_loader_pdb": [ "molecules", "css2d" ],
 	"webgl_loader_ldraw": [ "lego" ],
+	"webgl_loader_ifc": [ "external" ],
 	"webgl_lod": [ "level", "details" ],
 	"webgl_materials_blending": [ "alpha" ],
 	"webgl_materials_blending_custom": [ "alpha" ],
@@ -88,7 +89,7 @@
 	"webgl_postprocessing_unreal_bloom_selective": [ "glow" ],
 	"webgl_postprocessing_3dlut": [ "color grading" ],
 	"webgl_materials_modified": [ "onBeforeCompile" ],
-	"webgl_raycaster_bvh": [ "three-mesh-bvh", "query", "bounds", "tree", "accelerate", "performance", "community", "extension", "plugin", "library" ],
+	"webgl_raycaster_bvh": [ "external", "query", "bounds", "tree", "accelerate", "performance", "community", "extension", "plugin", "library", "three-mesh-bvh" ],
 	"webgl_shadowmap_csm": [ "cascade" ],
 	"webgl_shadowmap_pcss": [ "soft" ],
 	"webgl_simple_gi": [ "global illumination" ],

files/main.css

@@ -537,6 +537,16 @@ iframe#viewer {
 	line-height: calc(var(--line-height) - 6px);
 }
 
+.card .tag {
+	background-color: var(--background-color);
+	color: var(--color-blue);
+	margin-left: 6px;
+	padding: 1px 6px 2px;
+	border-radius: 2px;
+	font-size: calc(var(--font-size) - 2px);
+	line-height: calc(var(--line-height) - 6px);
+}
+
 /* mobile */
 
 @media all and ( max-width: 640px ) {