refactor: Go back to Object.keys?

Author: rschristian

plugins/rss-feed.js

@@ -25,8 +25,7 @@ export function rssFeedPlugin() {
 				}
 			});
 
-			for (const postPath in blogPosts) {
-				const post = blogPosts[/** @type {keyof blogPosts} */ (postPath)];
+			Object.entries(blogPosts).map(([postPath, post]) => {
 				const postTranslation = englishTranslations.blogPosts[post.label];
 
 				feed.addItem({
@@ -36,7 +35,7 @@ export function rssFeedPlugin() {
 					description: postTranslation.excerpt,
 					date: new Date(post.date)
 				});
-			}
+			});
 
 			function removeDefaultGenerator(str) {
 				return str

src/components/blog-overview/index.jsx

@@ -3,39 +3,31 @@ import { useTranslate } from '../../lib/i18n';
 import { Time } from '../time';
 import s from './style.module.css';
 
-/**
- * @typedef {import('../../locales/en.json')} Translations
- */
-
 export default function BlogOverview() {
 	const translate = useTranslate();
 
-	const posts = [];
-	for (const post in blogPosts) {
-		const translatedBlog = translate(
-			'blogPosts',
-			/** @type {keyof Translations['blogPosts']} */ (blogPosts[post].label)
-		);
-
-		posts.push(
-			<article class={s.post}>
-				<div class={s.meta}>
-					<Time value={blogPosts[post].date} />
-				</div>
-				<h2 class={s.title}>
-					<a href={post}>{translatedBlog.label}</a>
-				</h2>
-				<p class={s.excerpt}>{translatedBlog.excerpt}</p>
-				<a href={post} class="btn-small">
-					{translate('i18n', 'continueReading')} &rarr;
-				</a>
-			</article>
-		);
-	}
-
 	return (
 		<div>
-			<div class={s.postList}>{posts}</div>
+			<div class={s.postList}>
+				{Object.entries(blogPosts).map(([postPath, post]) => {
+					const translatedBlog = translate('blogPosts', post.label);
+
+					return (
+						<article class={s.post}>
+							<div class={s.meta}>
+								<Time value={post.date} />
+							</div>
+							<h2 class={s.title}>
+								<a href={postPath}>{translatedBlog.label}</a>
+							</h2>
+							<p class={s.excerpt}>{translatedBlog.excerpt}</p>
+							<a href={postPath} class="btn-small">
+								{translate('i18n', 'continueReading')} &rarr;
+							</a>
+						</article>
+					);
+				})}
+			</div>
 		</div>
 	);
 }

src/components/footer/index.jsx

@@ -50,9 +50,9 @@ export default function Footer() {
 					<label class={style.lang}>
 						Language:{' '}
 						<select value={lang || 'en'} onInput={onSelect}>
-							{Object.keys(config.languages).map(id => (
+							{Object.entries(config.locales).map(([id, label]) => (
 								<option selected={id == lang} value={id}>
-									{config.languages[id]}
+									{label}
 								</option>
 							))}
 						</select>

src/components/header/index.jsx

@@ -120,21 +120,6 @@ function LanguagePicker() {
 	const { lang, setLang } = useLanguageContext();
 	const translate = useTranslate();
 
-	const languages = [];
-	if (typeof window !== 'undefined') {
-		for (const language in config.languages) {
-			languages.push(
-				<button
-					class={cx(language == lang && style.current)}
-					data-value={language}
-					onClick={e => setLang(e.currentTarget.dataset.value)}
-				>
-					{config.languages[language]}
-				</button>
-			);
-		}
-	}
-
 	return (
 		<div class={style.translation}>
 			<NavMenu>
@@ -148,7 +133,16 @@ function LanguagePicker() {
 						}
 						aria-label={translate('i18n', 'selectYourLanguage')}
 					>
-						{languages}
+						{typeof window !== 'undefined' &&
+							Object.entries(config.locales).map(([id, label]) => (
+								<button
+									class={cx(id == lang && style.current)}
+									data-locale={id}
+									onClick={e => setLang(e.currentTarget.dataset.locale)}
+								>
+									{label}
+								</button>
+							))}
 					</ExpandableNavLink>
 				)}
 			</NavMenu>

src/components/sidebar/index.jsx

@@ -29,11 +29,13 @@ export default function Sidebar() {
 				),
 				level: 2,
 				href: null,
-				routes: Object.keys(docPages[version][item]).map(nested => ({
-					text: translate('sidebarNav', docPages[version][item][nested].label),
-					level: 3,
-					href: `/guide/${version}${nested}`
-				}))
+				routes: Object.entries(docPages[version][item]).map(
+					([pagePath, page]) => ({
+						text: translate('sidebarNav', page.label),
+						level: 3,
+						href: `/guide/${version}${pagePath}`
+					})
+				)
 			});
 		}
 	}

src/config.json

@@ -1,5 +1,5 @@
 {
-	"languages": {
+	"locales": {
 		"en": "English",
 		"de": "German",
 		"es": "Spanish",

src/lib/i18n.jsx

@@ -72,7 +72,7 @@ export function LanguageProvider({ children }) {
 		const userLang =
 			query.lang ||
 			localStorageGet('lang') ||
-			getNavigatorLanguage(config.languages) ||
+			getNavigatorLanguage(config.locales) ||
 			'en';
 
 		setLang(userLang);