New Docs: Updated templates with old design. (#32002)

* New Docs: Updated templates with old design.

* New Docs: Remove (nullable) from methods that return null.

* New Docs: Improved parameters table.

* New Docs: Removed unused code from templates.

* New Docs: Fixed h2/h3 in dark mode.

* New Docs: Fixed Import.

* New Docs: Fixed navigation scroll resetting.

utils/docs/template/publish.js

@@ -106,7 +106,20 @@ function updateItemName( item ) {
 
 function addParamAttributes( params ) {
 
-	return params.filter( ( { name } ) => name && ! name.includes( '.' ) ).map( updateItemName );
+	return params.filter( ( { name } ) => name && ! name.includes( '.' ) ).map( param => {
+
+		let itemName = updateItemName( param );
+
+		if ( param.type && param.type.names && param.type.names.length ) {
+
+			const escapedTypes = param.type.names.map( name => htmlsafe( name ) );
+			itemName += ' : <span class="param-type">' + escapedTypes.join( ' | ' ) + '</span>';
+
+		}
+
+		return itemName;
+
+	} );
 
 }
 
@@ -182,41 +195,16 @@ function addSignatureParams( f ) {
 
 	const params = f.params ? addParamAttributes( f.params ) : [];
 
-	f.signature = util.format( '%s(%s)', ( f.signature || '' ), params.join( ', ' ) );
+	f.signature = util.format( '%s( %s )', ( f.signature || '' ), params.join( ', ' ) );
 
 }
 
 function addSignatureReturns( f ) {
 
-	const attribs = [];
-	let attribsString = '';
 	let returnTypes = [];
 	let returnTypesString = '';
 	const source = f.yields || f.returns;
 
-	// jam all the return-type attributes into an array. this could create odd results (for example,
-	// if there are both nullable and non-nullable return types), but let's assume that most people
-	// who use multiple @return tags aren't using Closure Compiler type annotations, and vice-versa.
-	if ( source ) {
-
-		source.forEach( item => {
-
-			helper.getAttribs( item ).forEach( attrib => {
-
-				if ( ! attribs.includes( attrib ) ) {
-
-					attribs.push( attrib );
-
-				}
-
-			} );
-
-		} );
-
-		attribsString = buildAttribsString( attribs );
-
-	}
-
 	if ( source ) {
 
 		returnTypes = addNonParamAttributes( source );
@@ -225,7 +213,7 @@ function addSignatureReturns( f ) {
 
 	if ( returnTypes.length ) {
 
-		returnTypesString = util.format( ' &rarr; %s{%s}', attribsString, returnTypes.join( '|' ) );
+		returnTypesString = util.format( ' : %s', returnTypes.join( ' | ' ) );
 
 	}
 
@@ -237,13 +225,13 @@ function addSignatureTypes( f ) {
 
 	const types = f.type ? buildItemTypeStrings( f ) : [];
 
-	f.signature = `${f.signature || ''}<span class="type-signature">${types.length ? ` :${types.join( '|' )}` : ''}</span>`;
+	f.signature = `${f.signature || ''}<span class="type-signature">${types.length ? ` : ${types.join( ' | ' )}` : ''}</span>`;
 
 }
 
 function addAttribs( f ) {
 
-	const attribs = helper.getAttribs( f );
+	const attribs = helper.getAttribs( f ).filter( attrib => attrib !== 'static' );
 	const attribsString = buildAttribsString( attribs );
 
 	f.attribs = util.format( '<span class="type-signature">%s</span>', attribsString );
@@ -287,7 +275,8 @@ function generate( title, docs, filename, resolveLinks ) {
 	const docData = {
 		env: env,
 		title: title,
-		docs: docs
+		docs: docs,
+		augments: docs && docs[0] ? docs[0].augments : null
 	};
 
 	const outpath = path.join( outdir, filename );

utils/docs/template/static/scripts/page.js

@@ -42,20 +42,42 @@
 
 ( function loadNavigation() {
 
-	const navContainer = document.querySelector( '#content nav' );
+	const content = document.getElementById( 'content' );
+	const navContainer = content.querySelector( 'nav' );
 
-	if ( navContainer ) {
+	fetch( 'nav.html' )
+		.then( response => response.text() )
+		.then( html => {
 
-		fetch( 'nav.html' )
-			.then( response => response.text() )
-			.then( html => {
+			navContainer.innerHTML = html;
 
-				navContainer.innerHTML = html;
+			const savedScrollTop = sessionStorage.getItem( 'navScrollTop' );
 
-			} )
-			.catch( err => console.error( 'Failed to load navigation:', err ) );
+			if ( savedScrollTop !== null ) {
 
-	}
+				content.scrollTop = parseInt( savedScrollTop, 10 );
+
+			}
+
+			// Save scroll position when clicking nav links
+			navContainer.addEventListener( 'click', function ( event ) {
+
+				const link = event.target.closest( 'a' );
+
+				if ( link ) {
+
+					sessionStorage.setItem( 'navScrollTop', content.scrollTop );
+
+				}
+
+			} );
+
+			updateNavigation();
+
+			sessionStorage.removeItem( 'navScrollTop' );
+
+		} )
+		.catch( err => console.error( 'Failed to load navigation:', err ) );
 
 } )();
 
@@ -163,7 +185,6 @@ clearSearchButton.onclick = function () {
 
 //
 
-window.addEventListener( 'DOMContentLoaded', updateNavigation );
 window.addEventListener( 'hashchange', updateNavigation );
 
 function updateNavigation() {
@@ -194,7 +215,14 @@ function updateNavigation() {
 
 	if ( aElement !== null ) {
 
-		aElement.scrollIntoView( { block: 'center' } );
+		const savedScrollTop = sessionStorage.getItem( 'navScrollTop' );
+
+		if ( savedScrollTop === null ) {
+
+			aElement.scrollIntoView( { block: 'center' } );
+
+		}
+
 		aElement.classList.add( 'selected' );
 
 	}

utils/docs/template/static/styles/page.css

@@ -1,6 +1,22 @@
-h3 {
-	margin-top: 16px;
-	margin-bottom: 16px;
+@font-face {
+	font-family: 'Roboto Mono';
+	src: local('Roboto Mono'), local('RobotoMono-Regular'), url('/files/RobotoMono-Regular.woff2') format('woff2');
+	font-style: normal;
+	font-weight: 400;
+}
+
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	src: local('Inter-Regular'), url("/files/Inter-Regular.woff2?v=3.6") format("woff2");
+}
+
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 600;
+	src: local('Inter-SemiBold'), url("/files/Inter-SemiBold.woff2?v=3.6") format("woff2");
 }
 
 /* Below CSS should only affect the page section */
@@ -13,38 +29,19 @@ h3 {
 	--max-width: 960px;
 	--icon-size: 20px;
 	--border-style: 1px solid #E8E8E8;
-	
+	--text-color: #444;
+
+	font-family: 'Inter', sans-serif;
 	color: var(--text-color);
 	tab-size: 4;
 	overflow: auto;
-	max-width: var(--max-width);
+	max-width: 760px;
 	margin: 0 auto;
 	padding-top: var(--page-padding);
 	padding-bottom: var(--page-padding);
 	padding-right: var(--page-padding);
 	padding-left: var(--page-padding);
 	word-break: break-word;
-	
-	@font-face {
-		font-family: 'Roboto Mono';
-		src: local('Roboto Mono'), local('RobotoMono-Regular'), url('/files/RobotoMono-Regular.woff2') format('woff2');
-		font-style: normal;
-		font-weight: 400;
-	}
-	
-	@font-face {
-		font-family: 'Inter';
-		font-style: normal;
-		font-weight: 400;
-		src: local('Inter-Regular'), url("/files/Inter-Regular.woff2?v=3.6") format("woff2");
-	}
-	
-	@font-face {
-		font-family: 'Inter';
-		font-style: normal;
-		font-weight: 600;
-		src: local('Inter-SemiBold'), url("/files/Inter-SemiBold.woff2?v=3.6") format("woff2");
-	}
 
 	a {
 		color: var(--color-blue);
@@ -58,22 +55,25 @@ h3 {
 		font-weight: normal;
 		margin-left: -2px;
 		margin-top: 16px;
+		margin-bottom: -8px;
 	}
-	
+
 	h2 {
 		font-size: 28px;
 		line-height: 36px;
 		font-weight: normal;
 		margin-left: -1px;
 		margin-top: 28px;
+		margin-bottom: -8px;
+		color: #000;
 	}
-	
+
 	h3 {
 		font-size: 20px;
 		line-height: 28px;
 		font-weight: normal;
-		margin-top: 32px;
-		margin-bottom: 32px;
+		margin-top: 24px;
+		margin-bottom: -8px;
 	}
 
 	p,
@@ -105,8 +105,10 @@ h3 {
 	}
 
 	table {
-		width: 100%;
+		width: calc(100% - 40px);
 		border-collapse: collapse;
+		margin-left: 20px;
+		margin-right: 20px;
 	}
 	
 	.desc {
@@ -117,10 +119,13 @@ h3 {
 	table td {
 		text-align: left;
 		vertical-align: top;
-		padding: 16px 8px;
-		border-bottom: var(--border-style);
-		max-width: 480px;
-		min-width: 120px;
+		padding: 8px 6px;
+	}
+
+	table td.name,
+	table th.name {
+		white-space: nowrap;
+		width: 150px;
 	}
 	
 	table th {
@@ -154,9 +159,14 @@ h3 {
 		color: var(--text-color);
 	}
 
+	.inheritance {
+		color: #999;
+		margin-bottom: 0;
+	}
+
 	.method,
 	.member {
-		margin-bottom: 64px;
+		margin-bottom: 32px;
 	}
 
 	ol.linenums {
@@ -192,13 +202,35 @@ h3 {
 		padding: 0px 5px;
 	}
 
-	.link-anchor {
-		color: #ddd;
-		visibility: hidden;
+	h3.name {
+		color: #000;
+	}
+
+	h3.name a {
+		color: var(--color-blue);
+		text-decoration: none;
+	}
+
+	h3.name .signature {
+		color: #000;
+		font-weight: normal;
+	}
+
+	h3.name .type-signature {
+		color: #999;
+		font-weight: normal;
 	}
 
-	.name:hover .link-anchor {
-		visibility: visible;
+	h3.name .type-signature a {
+		color: #999;
+	}
+
+	h3.name .param-type {
+		color: #999;
+	}
+
+	h3.name .param-type a {
+		color: #999;
 	}
 
 	.search-result-item {
@@ -206,11 +238,15 @@ h3 {
 		display: block;
 		padding: 16px 0;
 	}
-	
+
 	.search-result-item-description {
 		color: var(--text-color);
 	}
 
+	h2.subsection-title + p {
+		margin-top: 24px;
+	}
+
 	.copy-btn {
 		cursor: pointer;
 		position: absolute;
@@ -240,11 +276,23 @@ h3 {
 }
 
 @media (prefers-color-scheme: dark) {
-	
+
 	#page {
 		--text-color: #bbb;
 		--border-style: 1px solid #444;
 
+		h2 {
+			color: var(--text-color);
+		}
+
+		h3.name {
+			color: var(--text-color);
+		}
+
+		h3.name .signature {
+			color: var(--text-color);
+		}
+
 		.link-anchor {
 			color: #555;
 		}
@@ -256,20 +304,20 @@ h3 {
 		code {
 			background-color: #444;
 		}
-	
+
 	}
 
 }
 
 @media all and ( min-width: 1700px ) {
-	
+
 	#page {
 		--panel-width: 360px;
 		--font-size: 18px;
 		--line-height: 28px;
-		--max-width: 1080px;
 		--page-padding: 28px;
 		--icon-size: 24px;
+		max-width: 880px;
 
 		h1 {
 			font-size: 42px;

utils/docs/template/tmpl/container.tmpl

@@ -59,32 +59,18 @@
 	<?js } ?>
 	</div>
 
-	<?js if (doc.augments && doc.augments.length) { ?>
-		<h3 class="subsection-title">Extends</h3>
-
-		<?js= self.partial('augments.tmpl', doc) ?>
-	<?js } ?>
-
 	<?js if (doc.import) { ?>
-		<h3 class="subsection-title">Import</h3>
-		<?js= doc.name ?> is an addon, and must be imported explicitly, see <a href="https://threejs.org/manual/#en/installation" target="_blank">Installation#Addons</a>.
+		<h2 class="subsection-title">Import</h2>
+		<p><?js= doc.name ?> is an addon, and must be imported explicitly, see <a href="https://threejs.org/manual/#en/installation" target="_blank">Installation#Addons</a>.</p>
 		<pre class="prettyprint source lang-js"><code><?js= doc.import ?></code></pre>
 	<?js } ?>
 
-	<?js if (doc.requires && doc.requires.length) { ?>
-		<h3 class="subsection-title">Requires</h3>
-
-		<ul><?js doc.requires.forEach(function(r) { ?>
-			<li><?js= self.linkto(r, r) ?></li>
-		<?js }); ?></ul>
-	<?js } ?>
-
 	<?js
 		var ignoreInheritedSymbols = { ...(self.ignoreInheritedSymbols ? { inherited: {isUndefined: true} } : {}) };
 		var classes = self.find({kind: 'class', memberof: doc.longname});
 		if (!isGlobalPage && classes && classes.length) {
 	?>
-		<h3 class="subsection-title">Classes</h3>
+		<h2 class="subsection-title">Classes</h2>
 
 		<dl><?js classes.forEach(function(c) { ?>
 			<dt><?js= self.linkto(c.longname, c.name) ?></dt>
@@ -92,42 +78,6 @@
 		<?js }); ?></dl>
 	<?js } ?>
 
-	<?js
-		var interfaces = self.find({kind: 'interface', memberof: doc.longname, ...ignoreInheritedSymbols});
-		if (!isGlobalPage && interfaces && interfaces.length) {
-	?>
-		<h3 class="subsection-title">Interfaces</h3>
-
-		<dl><?js interfaces.forEach(function(i) { ?>
-			<dt><?js= self.linkto(i.longname, i.name) ?></dt>
-			<dd><?js if (i.summary) { ?><?js= i.summary ?><?js } ?></dd>
-		<?js }); ?></dl>
-	<?js } ?>
-
-	<?js
-		var mixins = self.find({kind: 'mixin', memberof: doc.longname, ...ignoreInheritedSymbols});
-		if (!isGlobalPage && mixins && mixins.length) {
-	?>
-		<h3 class="subsection-title">Mixins</h3>
-
-		<dl><?js mixins.forEach(function(m) { ?>
-			<dt><?js= self.linkto(m.longname, m.name) ?></dt>
-			<dd><?js if (m.summary) { ?><?js= m.summary ?><?js } ?></dd>
-		<?js }); ?></dl>
-	<?js } ?>
-
-	<?js
-		var namespaces = self.find({kind: 'namespace', memberof: doc.longname, ...ignoreInheritedSymbols});
-		if (!isGlobalPage && namespaces && namespaces.length) {
-	?>
-		<h3 class="subsection-title">Namespaces</h3>
-
-		<dl><?js namespaces.forEach(function(n) { ?>
-			<dt><?js= self.linkto(n.longname, n.name) ?></dt>
-			<dd><?js if (n.summary) { ?><?js= n.summary ?><?js } ?></dd>
-		<?js }); ?></dl>
-	<?js } ?>
-
 	<?js
 		var members = self.find({kind: 'member', memberof: isGlobalPage ? {isUndefined: true} : doc.longname, ...ignoreInheritedSymbols});
 
@@ -139,7 +89,7 @@
 		}
 		if (members && members.length && members.forEach) {
 	?>
-		<h3 class="subsection-title">Members</h3>
+		<h2 class="subsection-title">Properties</h2>
 
 		<?js members.forEach(function(p) { ?>
 			<?js= self.partial('members.tmpl', p) ?>
@@ -148,11 +98,22 @@
 
 	<?js
 		var methods = self.find({kind: 'function', memberof: isGlobalPage ? {isUndefined: true} : doc.longname, ...ignoreInheritedSymbols});
-		if (methods && methods.length && methods.forEach) {
+		var staticMethods = methods.filter(function(m) { return m.scope === 'static'; });
+		var instanceMethods = methods.filter(function(m) { return m.scope !== 'static'; });
+
+		if (instanceMethods.length) {
 	?>
-		<h3 class="subsection-title">Methods</h3>
+		<h2 class="subsection-title">Methods</h2>
+
+		<?js instanceMethods.forEach(function(m) { ?>
+			<?js= self.partial('method.tmpl', m) ?>
+		<?js }); ?>
+	<?js } ?>
+
+	<?js if (staticMethods.length) { ?>
+		<h2 class="subsection-title">Static Methods</h2>
 
-		<?js methods.forEach(function(m) { ?>
+		<?js staticMethods.forEach(function(m) { ?>
 			<?js= self.partial('method.tmpl', m) ?>
 		<?js }); ?>
 	<?js } ?>
@@ -161,7 +122,7 @@
 		var typedefs = self.find({kind: 'typedef', memberof: isGlobalPage ? {isUndefined: true} : doc.longname, ...ignoreInheritedSymbols});
 		if (typedefs && typedefs.length && typedefs.forEach) {
 	?>
-		<h3 class="subsection-title">Type Definitions</h3>
+		<h2 class="subsection-title">Type Definitions</h2>
 
 		<?js typedefs.forEach(function(e) {
 				if (e.signature) {
@@ -181,7 +142,7 @@
 		var events = self.find({kind: 'event', memberof: isGlobalPage ? {isUndefined: true} : doc.longname, ...ignoreInheritedSymbols});
 		if (events && events.length && events.forEach) {
 	?>
-		<h3 class="subsection-title">Events</h3>
+		<h2 class="subsection-title">Events</h2>
 
 		<?js events.forEach(function(e) { ?>
 			<?js= self.partial('method.tmpl', e) ?>
@@ -189,8 +150,10 @@
 	<?js } ?>
 
 	<?js if (doc.meta && doc.meta.shortpath) { ?>
-		<h3 class="subsection-title">Source</h3>
-		<a href="https://github.com/mrdoob/three.js/blob/master/<?js= doc.meta.shortpath ?>" target="_blank" rel="noopener"><?js= doc.meta.shortpath ?></a>
+		<h2 class="subsection-title">Source</h2>
+		<p>
+			<a href="https://github.com/mrdoob/three.js/blob/master/<?js= doc.meta.shortpath ?>" target="_blank" rel="noopener"><?js= doc.meta.shortpath ?></a>
+		</p>
 	<?js } ?>
 </article>
 

utils/docs/template/tmpl/details.tmpl

@@ -22,93 +22,15 @@ if (data.defaultvalue && (data.defaultvaluetype === 'object' || data.defaultvalu
 
 <dl class="details">
 
-	<?js if (data.version) {?>
-	<dt class="tag-version">Version:</dt>
-	<dd class="tag-version"><?js= version ?></dd>
-	<?js } ?>
-
-	<?js if (data.since) {?>
-	<dt class="tag-since">Since:</dt>
-	<dd class="tag-since"><?js= since ?></dd>
-	<?js } ?>
-
-	<?js if (data.inherited && data.inherits && !data.overrides) { ?>
-	<dt class="inherited-from">Inherited From:</dt>
-	<dd class="inherited-from"><?js= this.linkto(data.inherits, this.htmlsafe(data.inherits)) ?></dd>
-	<?js } ?>
-
 	<?js if (data.overrides) { ?>
-	<dt class="tag-overrides">Overrides:</dt>
-	<dd class="tag-overrides"><?js= this.linkto(data.overrides, this.htmlsafe(data.overrides)) ?></dd>
-	<?js } ?>
-
-	<?js if (data.implementations && data.implementations.length) { ?>
-	<dt class="implementations">Implementations:</dt>
-	<dd class="implementations"><ul>
-		<?js data.implementations.forEach(function(impl) { ?>
-			<li><?js= self.linkto(impl, self.htmlsafe(impl)) ?></li>
-		<?js }); ?>
-	</ul></dd>
-	<?js } ?>
-
-	<?js if (data.implements && data.implements.length) { ?>
-	<dt class="implements">Implements:</dt>
-	<dd class="implements"><ul>
-		<?js data.implements.forEach(function(impl) { ?>
-			<li><?js= self.linkto(impl, self.htmlsafe(impl)) ?></li>
-		<?js }); ?>
-	</ul></dd>
-	<?js } ?>
-
-	<?js if (data.mixes && data.mixes.length) { ?>
-		<dt class="mixes">Mixes In:</dt>
-
-		<dd class="mixes"><ul>
-		<?js data.mixes.forEach(function(a) { ?>
-			<li><?js= self.linkto(a, a) ?></li>
-		<?js }); ?>
-		</ul></dd>
+	<dt class="tag-overrides"><strong>Overrides:</strong> <?js= this.linkto(data.overrides, this.htmlsafe(data.overrides)) ?></dt>
 	<?js } ?>
 
 	<?js if (data.deprecated) { ?>
-		<dt class="important tag-deprecated">Deprecated:</dt><?js
-			if (data.deprecated === true) { ?><dd class="yes-def tag-deprecated">Yes</dd><?js }
-			else { ?><dd><?js= data.deprecated ?></dd><?js }
-		?>
-	<?js } ?>
-
-	<?js if (data.author && author.length) {?>
-	<dt class="tag-author">Author:</dt>
-	<dd class="tag-author">
-		<ul><?js author.forEach(function(a) { ?>
-			<li><?js= self.resolveAuthorLinks(a) ?></li>
-		<?js }); ?></ul>
-	</dd>
-	<?js } ?>
-
-	<?js if (data.copyright) {?>
-	<dt class="tag-copyright">Copyright:</dt>
-	<dd class="tag-copyright"><?js= copyright ?></dd>
-	<?js } ?>
-
-	<?js if (data.license) {?>
-	<dt class="tag-license">License:</dt>
-	<dd class="tag-license"><?js= license ?></dd>
-	<?js } ?>
-
-	<?js if (data.defaultvalue) {?>
-	<dt class="tag-default">Default:</dt>
-	<dd class="tag-default"<?js= defaultObjectClass ?>><?js= data.defaultvalue ?></dd>
-	<?js } ?>
-
-
-	<?js if (data.tutorials && tutorials.length) {?>
-	<dt class="tag-tutorial">Tutorials:</dt>
-	<dd class="tag-tutorial">
-		<ul><?js tutorials.forEach(function(t) { ?>
-			<li><?js= self.tutoriallink(t) ?></li>
-		<?js }); ?></ul>
-	</dd>
+		<dt class="important tag-deprecated"><strong>Deprecated:</strong> <?js
+			if (data.deprecated === true) { ?>Yes<?js }
+			else { ?><?js= data.deprecated ?><?js }
+		?></dt>
 	<?js } ?>
 
 	<?js if (data.see && see.length) {?>
@@ -119,13 +41,4 @@ if (data.defaultvalue && (data.defaultvaluetype === 'object' || data.defaultvalu
 		<?js }); ?></ul>
 	</dd>
 	<?js } ?>
-
-	<?js if (data.todo && todo.length) {?>
-	<dt class="tag-todo">To Do:</dt>
-	<dd class="tag-todo">
-		<ul><?js todo.forEach(function(t) { ?>
-			<li><?js= t ?></li>
-		<?js }); ?></ul>
-	</dd>
-	<?js } ?>
 </dl>

utils/docs/template/tmpl/layout.tmpl

@@ -48,6 +48,11 @@
 <div id="viewer">
 	<div id="page">
 		<div id="page-content">
+			<?js if (augments && augments.length) {
+				var self = this;
+			?>
+				<p class="inheritance"><?js augments.forEach(function(a, i) { ?><?js= self.linkto(a, a) ?><?js if (i < augments.length - 1) { ?> → <?js } ?><?js }); ?> → </p>
+			<?js } ?>
 			<h1><?js= title ?></h1>
 			<?js= content ?>
 		</div>

utils/docs/template/tmpl/members.tmpl

@@ -3,9 +3,7 @@ var data = obj;
 var self = this;
 ?>
 <div class="member">
-	<h4 class="name" id="<?js= id ?>"><?js= data.attribs + name + (data.signature ? data.signature : '') ?>
-	<a href="#<?js= id ?>" class="link-anchor">#</a>
-	</h4>
+	<h3 class="name" id="<?js= id ?>">.<a href="#<?js= id ?>"><?js= name ?></a><?js= (data.signature ? data.signature : '') ?> <?js= data.attribs ?></h3>
 
 	<?js if (data.summary) { ?>
 	<p class="summary"><?js= summary ?></p>
@@ -13,7 +11,18 @@ var self = this;
 
 	<?js if (data.description) { ?>
 	<div class="description">
-		<?js= data.description ?>
+		<?js
+		var desc = data.description;
+		if (typeof data.defaultvalue !== 'undefined') {
+			var defaultText = '<br/>Default is <code>' + self.htmlsafe(data.defaultvalue) + '</code>.';
+			// If description ends with </p>, insert default before closing tag
+			if (desc.trim().endsWith('</p>')) {
+				desc = desc.trim().slice(0, -4) + defaultText + '</p>';
+			} else {
+				desc = desc + defaultText;
+			}
+		}
+		?><?js= desc ?>
 	</div>
 	<?js } ?>
 

utils/docs/template/tmpl/method.tmpl

@@ -8,10 +8,7 @@ var self = this;
 	<?js } ?>
 
 	<?js if (data.kind !== 'namespace') { ?>
-	<h4 class="name name-method" id="<?js= id ?>"><?js= data.attribs + (kind === 'class' ? 'new ' : '') +
-	name + (data.signature || '') ?>
-	<a href="#<?js= id ?>" class="link-anchor">#</a>
-	</h4>
+	<h3 class="name name-method" id="<?js= id ?>"><?js= (kind === 'class' ? 'new ' : '.') ?><a href="#<?js= id ?>"><?js= name ?></a><?js= (data.signature || '') ?> <?js= data.attribs ?></h3>
 	<?js } ?>
 
 	<?js if (data.summary) { ?>
@@ -40,25 +37,12 @@ var self = this;
 		</ul>
 	<?js } ?>
 
-	<?js if (data['this']) { ?>
-		<h5>This:</h5>
-		<ul><li><?js= this.linkto(data['this'], data['this']) ?></li></ul>
-	<?js } ?>
-
 	<?js if (data.params && params.length && !data.hideconstructor) { ?>
-		<h5>Parameters:</h5>
 		<?js= this.partial('params.tmpl', params) ?>
 	<?js } ?>
 
 	<?js= this.partial('details.tmpl', data) ?>
 
-	<?js if (data.kind !== 'module' && data.requires && data.requires.length) { ?>
-	<h5>Requires:</h5>
-	<ul><?js data.requires.forEach(function(r) { ?>
-		<li><?js= self.linkto(r) ?></li>
-	<?js }); ?></ul>
-	<?js } ?>
-
 	<?js if (data.fires && fires.length) { ?>
 	<h5>Fires:</h5>
 	<ul><?js fires.forEach(function(f) { ?>
@@ -66,55 +50,19 @@ var self = this;
 	<?js }); ?></ul>
 	<?js } ?>
 
-	<?js if (data.listens && listens.length) { ?>
-	<h5>Listens to Events:</h5>
-	<ul><?js listens.forEach(function(f) { ?>
-		<li><?js= self.linkto(f) ?></li>
-	<?js }); ?></ul>
-	<?js } ?>
-
-	<?js if (data.listeners && listeners.length) { ?>
-	<h5>Listeners of This Event:</h5>
-	<ul><?js listeners.forEach(function(f) { ?>
-		<li><?js= self.linkto(f) ?></li>
-	<?js }); ?></ul>
-	<?js } ?>
-
-	<?js if (data.modifies && modifies.length) {?>
-	<h5>Modifies:</h5>
-	<?js if (modifies.length > 1) { ?><ul><?js
-		modifies.forEach(function(m) { ?>
-			<li><?js= self.partial('modifies.tmpl', m) ?></li>
-		<?js });
-	?></ul><?js } else {
-		modifies.forEach(function(m) { ?>
-			<?js= self.partial('modifies.tmpl', m) ?>
-		<?js });
-	} } ?>
-
-	<?js if (data.exceptions && exceptions.length) { ?>
-	<h5>Throws:</h5>
-	<?js if (exceptions.length > 1) { ?><ul><?js
-		exceptions.forEach(function(r) { ?>
-			<li><?js= self.partial('exceptions.tmpl', r) ?></li>
-		<?js });
-	?></ul><?js } else {
-		exceptions.forEach(function(r) { ?>
-			<?js= self.partial('exceptions.tmpl', r) ?>
-		<?js });
-	} } ?>
-
 	<?js if (data.returns && returns.length) { ?>
-	<h5>Returns:</h5>
-	<?js if (returns.length > 1) { ?><ul><?js
-		returns.forEach(function(r) { ?>
+	<?js if (returns.length > 1) { ?>
+		<h5>Returns:</h5>
+		<ul><?js returns.forEach(function(r) { ?>
 			<li><?js= self.partial('returns.tmpl', r) ?></li>
-		<?js });
-	?></ul><?js } else {
-		returns.forEach(function(r) { ?>
-			<?js= self.partial('returns.tmpl', r) ?>
-		<?js });
-	} } ?>
+		<?js }); ?></ul>
+	<?js } else { ?>
+		<dl class="details">
+		<?js returns.forEach(function(r) { ?>
+			<dt class="tag-returns"><strong>Returns:</strong> <?js= self.partial('returns.tmpl', r) ?></dt>
+		<?js }); ?>
+		</dl>
+	<?js } } ?>
 
 	<?js if (data.yields && yields.length) { ?>
 	<h5>Yields:</h5>

utils/docs/template/tmpl/params.tmpl

@@ -36,48 +36,18 @@
 	});
 
 	/* determine if we need extra columns, "attributes" and "default" */
-	params.hasAttributes = false;
-	params.hasDefault = false;
 	params.hasName = false;
 
 	params.forEach(function(param) {
 		if (!param) { return; }
 
-		if (param.optional || param.nullable || param.variable) {
-			params.hasAttributes = true;
-		}
-
 		if (param.name) {
 			params.hasName = true;
 		}
-
-		if (typeof param.defaultvalue !== 'undefined') {
-			params.hasDefault = true;
-		}
 	});
 ?>
 
 <table class="params">
-	<thead>
-	<tr>
-		<?js if (params.hasName) {?>
-		<th>Name</th>
-		<?js } ?>
-
-		<th>Type</th>
-
-		<?js if (params.hasAttributes) {?>
-		<th>Attributes</th>
-		<?js } ?>
-
-		<?js if (params.hasDefault) {?>
-		<th>Default</th>
-		<?js } ?>
-
-		<th class="last">Description</th>
-	</tr>
-	</thead>
-
 	<tbody>
 	<?js
 		var self = this;
@@ -90,37 +60,18 @@
 				<td class="name"><code><?js= param.name ?></code></td>
 			<?js } ?>
 
-			<td class="type">
-			<?js if (param.type && param.type.names) {?>
-				<?js= self.partial('type.tmpl', param.type.names) ?>
-			<?js } ?>
-			</td>
-
-			<?js if (params.hasAttributes) {?>
-				<td class="attributes">
-				<?js if (param.optional) { ?>
-					&lt;optional><br>
-				<?js } ?>
-
-				<?js if (param.nullable) { ?>
-					&lt;nullable><br>
-				<?js } ?>
-
-				<?js if (param.variable) { ?>
-					&lt;repeatable><br>
-				<?js } ?>
-				</td>
-			<?js } ?>
-
-			<?js if (params.hasDefault) {?>
-				<td class="default">
-				<?js if (typeof param.defaultvalue !== 'undefined') { ?>
-					<?js= self.htmlsafe(param.defaultvalue) ?>
-				<?js } ?>
-				</td>
-			<?js } ?>
-
-			<td class="description last"><?js= param.description ?><?js if (param.subparams) { ?>
+			<td class="description last"><?js
+				var desc = param.description;
+				if (typeof param.defaultvalue !== 'undefined') {
+					var defaultText = '<br/>Default is <code>' + self.htmlsafe(param.defaultvalue) + '</code>.';
+					// If description ends with </p>, insert default before closing tag
+					if (desc.trim().endsWith('</p>')) {
+						desc = desc.trim().slice(0, -4) + defaultText + '</p>';
+					} else {
+						desc = desc + defaultText;
+					}
+				}
+			?><?js= desc ?><?js if (param.subparams) { ?>
 				<h6>Properties</h6>
 				<?js= self.partial('params.tmpl', param.subparams) ?>
 			<?js } ?></td>

utils/docs/template/tmpl/returns.tmpl

@@ -1,8 +1,9 @@
 <?js
 var data = obj || {};
 if (data.description) {
-?>
-<div class="param-desc">
-	<?js= description ?>
-</div>
-<?js } ?>
+	var desc = description;
+	// Remove wrapping <p> tags if present to allow inline display
+	if (desc.trim().startsWith('<p>') && desc.trim().endsWith('</p>')) {
+		desc = desc.trim().slice(3, -4);
+	}
+?><?js= desc ?><?js } ?>