chore: Misc cleaning (#1349)

* refactor: Move branding config into branding widget

* refactor: Remove unused code paths in content-region

* refactor: Lazy load images by default

* chore: Fix broken types as of v11

Author: rschristian

plugins/precompile-markdown/index.js

@@ -96,7 +96,7 @@ marked.use({
 			return `<a href="${href}">${text}</a>`;
 		},
 		image({ href, text }) {
-			return `<img decoding="async" src="${href}" alt="${text}" />`;
+			return `<img loading="lazy" decoding="async" src="${href}" alt="${text}" />`;
 		},
 		code({ text, lang }) {
 			const [code, source, runInRepl] = processRepl(text.trim());

src/components/branding/index.jsx

@@ -1,10 +1,28 @@
 import style from './style.module.css';
-import config from '../../config.json';
+
+const LOGOS = [
+	{
+		name: 'logo-text',
+		alt: 'Full Logo'
+	},
+	{
+		name: 'logo-text-inverted',
+		alt: 'Full Logo with Inverted Colors'
+	},
+	{
+		name: 'symbol',
+		alt: 'Preact Symbol'
+	},
+	{
+		name: 'symbol-inverted',
+		alt: 'Preact Symbol with Inverted Colors'
+	}
+];
 
 export default function Branding() {
 	return (
 		<div class={style.logos}>
-			{config.branding.map(asset => (
+			{LOGOS.map(asset => (
 				<LogoVariation name={asset.name} alt={asset.alt} />
 			))}
 		</div>

src/components/content-region/index.jsx

@@ -1,42 +1,13 @@
 import { useEffect } from 'preact/hooks';
 import Markup from 'preact-markup';
 import widgets from '../widgets';
-import style from './style.module.css';
-import { useTranslation } from '../../lib/i18n';
 import { TocContext } from '../table-of-contents';
 
 const COMPONENTS = {
 	...widgets
 };
 
-function SiblingNav({ route, lang, start }) {
-	let title = '';
-	let url = '';
-	if (route) {
-		url = route.path.toLowerCase();
-		title =
-			typeof route.name === 'object'
-				? route.name[lang || 'en']
-				: route.name || route.title;
-	}
-	const label = useTranslation(start ? 'previous' : 'next');
-
-	return (
-		<a class={style.nextLink} data-dir-end={!start} href={url}>
-			{start && <span class={style.icon}>&larr;&nbsp;</span>}
-			{!start && <span class={style.icon}>&nbsp;&rarr;</span>}
-			<span class={style.nextInner}>
-				<span class={style.nextTitle}>
-					<span class={style.nextTitleInner}>{title}</span>
-				</span>
-				<span class={style.nextUrl}>{label}</span>
-			</span>
-		</a>
-	);
-}
-
 export default function ContentRegion({ content, components, ...props }) {
-	const hasNav = !!(props.next || props.prev);
 	components = Object.assign({}, COMPONENTS, components);
 
 	useEffect(() => {
@@ -49,11 +20,7 @@ export default function ContentRegion({ content, components, ...props }) {
 	}, [props.current]);
 
 	return (
-		<content-region
-			name={props.current}
-			data-page-nav={hasNav}
-			can-edit={props.canEdit}
-		>
+		<content-region name={props.current} can-edit={props.canEdit}>
 			{content && (
 				<TocContext.Provider value={{ toc: props.toc }}>
 					<Markup
@@ -64,20 +31,6 @@ export default function ContentRegion({ content, components, ...props }) {
 					/>
 				</TocContext.Provider>
 			)}
-			{hasNav && (
-				<div class={style.nextWrapper}>
-					{props.prev ? (
-						<SiblingNav start lang={props.lang} route={props.prev} />
-					) : (
-						<span />
-					)}
-					{props.next ? (
-						<SiblingNav lang={props.lang} route={props.next} />
-					) : (
-						<span />
-					)}
-				</div>
-			)}
 		</content-region>
 	);
 }

src/components/content-region/style.module.css

@@ -223,7 +223,7 @@ function NavMenu(props) {
 /**
  * Button that expands into a menu when clicked. Pass in label & menu items as children.
  *
- * @param {ExpandableNavLinkProps & import('preact').JSX.ButtonHTMLAttributes} props
+ * @param {ExpandableNavLinkProps & import('preact').ButtonHTMLAttributes} props
  */
 function ExpandableNavLink({ isOpen, label, children, ...rest }) {
 	return (
@@ -247,7 +247,7 @@ function ExpandableNavLink({ isOpen, label, children, ...rest }) {
  */
 
 /**
- * @param {NavLinkProps & import('preact').AnchorHTMLAttributes} props
+ * @param {NavLinkProps & Omit<import('preact').AnchorHTMLAttributes, 'role'>} props
  */
 function NavLink({ href, flair, clsx, isOpen, ...rest }) {
 	const { path } = useLocation();

src/components/header/index.jsx

@@ -1092,23 +1092,5 @@
 				"en": "Congratulations!"
 			}
 		}
-	],
-	"branding": [
-		{
-			"name": "logo-text",
-			"alt": "Full Logo"
-		},
-		{
-			"name": "logo-text-inverted",
-			"alt": "Full Logo with Inverted Colors"
-		},
-		{
-			"name": "symbol",
-			"alt": "Preact Symbol"
-		},
-		{
-			"name": "symbol-inverted",
-			"alt": "Preact Symbol with Inverted Colors"
-		}
 	]
 }

src/config.json

@@ -4,7 +4,7 @@ declare global {
 	namespace preact.JSX {
 		interface IntrinsicElements {
 			'loading-bar': { showing: boolean };
-			'content-region': { name: string; 'data-page-nav': boolean; 'can-edit': boolean, children: any };
+			'content-region': { name: string; 'can-edit': boolean, children: any };
 		}
 	}
 }