Skip to content

Commit a8e038f

Browse files
JoshuaKGoldbergJoshuaKGoldberg
authored
docs: overhaul homepage (typescript-eslint#11345)
* docs: overhaul homepage * Update packages/website/plugins/recent-blog-posts/index.ts * recent-blog-posts/index.ts in knip * Remove unused variable * Deduplicate Zod * Small CSS tweaks * Better balanced .details
1 parent 5b378e2 commit a8e038f

File tree

26 files changed

+568
-279
lines changed

26 files changed

+568
-279
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ docs/packages/*/generated
1010
packages/website/.docusaurus
1111
packages/website/.cache-loader
1212
packages/website/build
13+
packages/website/data/recent-blog-posts.json
1314
packages/website/static/sandbox
1415

1516
# Runtime data

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h1 align="center">typescript-eslint</h1>
22

3-
<p align="center">Monorepo for the tooling that enables ESLint and Prettier to support TypeScript</p>
3+
<p align="center">Monorepo for typescript-eslint: powerful static analysis for JavaScript and TypeScript</p>
44

55
<p align="center">
66
<img src="https://github.com/typescript-eslint/typescript-eslint/workflows/CI/badge.svg" alt="CI" />

‎docs/maintenance/Branding.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Combining lowercase with a dash helps differentiate us.
2222

2323
### Slogan
2424

25-
> The tooling that enables ESLint and Prettier to support TypeScript.
25+
> Powerful static analysis for JavaScript and TypeScript.
2626

2727
## Visuals
2828

‎knip.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ export default {
151151
'src/components/**/*.tsx',
152152

153153
// used by Docusaurus
154+
'plugins/recent-blog-posts/index.ts',
154155
'src/theme/**/*.tsx',
155156
'src/theme/prism-include-languages.js',
156157
],

‎packages/website/docusaurus.config.mts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -351,8 +351,7 @@ const redirects: PluginRedirectOptions = {
351351

352352
const config: Config = {
353353
baseUrl: '/',
354-
tagline:
355-
'The tooling that enables ESLint and Prettier to support TypeScript.',
354+
tagline: 'Powerful static analysis for JavaScript and TypeScript.',
356355
title: 'typescript-eslint',
357356
url: 'https://typescript-eslint.io',
358357

@@ -368,6 +367,7 @@ const config: Config = {
368367
onBrokenMarkdownLinks: 'throw',
369368
organizationName: 'typescript-eslint',
370369
plugins: [
370+
'./plugins/recent-blog-posts/index.ts',
371371
...['ast-spec', 'project-service', 'tsconfig-utils', 'type-utils'].map(
372372
packageName => [
373373
'docusaurus-plugin-typedoc',

‎packages/website/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"clsx": "^2.1.0",
4040
"docusaurus-plugin-typedoc": "^1.4.0",
4141
"eslint": "^9.15.0",
42+
"gray-matter": "^4.0.3",
4243
"json5": "^2.2.3",
4344
"konamimojisplosion": "^0.5.2",
4445
"lz-string": "^1.5.0",
@@ -48,10 +49,12 @@
4849
"react-dom": "^18.2.0",
4950
"react-markdown": "^10.0.0",
5051
"react-resizable-panels": "^3.0.0",
52+
"reading-time": "^1.5.0",
5153
"semver": "^7.6.0",
5254
"typedoc": "^0.28.4",
5355
"typedoc-plugin-markdown": "^4.6.3",
54-
"typescript": "*"
56+
"typescript": "*",
57+
"zod": "^3.25.67"
5558
},
5659
"devDependencies": {
5760
"@docusaurus/module-type-aliases": "~3.7.0",

‎packages/website/plugins/recent-blog-posts/index.ts

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import type { Plugin } from '@docusaurus/types';
2+
3+
import matter from 'gray-matter';
4+
import * as fs from 'node:fs/promises';
5+
import readingTime from 'reading-time';
6+
import { z } from 'zod';
7+
8+
const storageFile = `data/recent-blog-posts.json`;
9+
10+
const matterSchema = z.object({
11+
description: z.string(),
12+
slug: z.string(),
13+
title: z.string(),
14+
});
15+
16+
export default async function blogPluginEnhanced(): Promise<Plugin> {
17+
const blogHandles = (await fs.readdir('blog', { withFileTypes: true }))
18+
.filter(handle => handle.isFile() && /.mdx?$/.test(handle.name))
19+
.map(handle => ({
20+
date: new Date(/\d+-\d+-\d+/.exec(handle.name)?.[0] || '1970-01-01'),
21+
handle,
22+
}))
23+
.sort((a, b) => b.date.getTime() - a.date.getTime())
24+
.slice(0, 3);
25+
26+
const blogPosts = await Promise.all(
27+
blogHandles.map(async ({ date, handle }) => {
28+
const content = await fs.readFile(`blog/${handle.name}`, 'utf-8');
29+
const data = matterSchema.parse(matter(content).data);
30+
31+
return {
32+
date,
33+
description: data.description,
34+
readingTime: Math.round(readingTime(content).minutes),
35+
slug: data.slug,
36+
title: data.title,
37+
};
38+
}),
39+
);
40+
41+
await fs.writeFile(storageFile, JSON.stringify(blogPosts, null, 2));
42+
43+
return {
44+
name: 'recent-blog-posts',
45+
};
46+
}

‎packages/website/src/components/FinancialContributors/index.tsx

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎packages/website/src/components/home/ExplainerSpotlight/index.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Heading from '@theme/Heading';
2+
import React from 'react';
3+
4+
import styles from './styles.module.css';
5+
6+
export interface ExplainerSpotlightProps extends React.PropsWithChildren {
7+
header: string;
8+
emoji: string;
9+
href: string;
10+
}
11+
12+
export function ExplainerSpotlight({
13+
children,
14+
emoji,
15+
header,
16+
href,
17+
}: ExplainerSpotlightProps): React.JSX.Element {
18+
return (
19+
<a className={styles.explainerSpotlight} href={href}>
20+
<Heading as="h3" className={styles.heading}>
21+
{header} <span className={styles.emoji}>{emoji}</span>
22+
</Heading>
23+
<div>{children}</div>
24+
</a>
25+
);
26+
}

‎packages/website/src/components/home/ExplainerSpotlight/styles.module.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.explainerSpotlight {
2+
background: var(--ifm-color-emphasis-100);
3+
border-radius: var(--ifm-global-radius);
4+
color: var(--ifm-heading-color);
5+
padding: 1rem 1.5rem;
6+
text-decoration: none;
7+
transition: box-shadow 0.3s ease;
8+
width: 100%;
9+
}
10+
11+
[data-theme='dark'] .explainerSpotlight {
12+
background: var(--ifm-color-emphasis-200);
13+
}
14+
15+
.explainerSpotlight:hover {
16+
color: var(--ifm-heading-color);
17+
text-decoration: none;
18+
box-shadow: 0 3px 3px 0 var(--gray-border-shadow);
19+
}
20+
21+
.heading {
22+
display: flex;
23+
justify-content: space-between;
24+
}
25+
26+
.emoji {
27+
user-select: none;
28+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy