Skip to content

fix(compare): support for Windows newlines and improve formatting #167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
erickzhao wants to merge 5 commits into
base: main
Choose a base branch
from
+65 −27
Open

fix(compare): support for Windows newlines and improve formatting #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33f5858
fix(compare): support for Windows newlines and improve formatting
erickzhao May 1, 2025
1d9a408
fix tests
erickzhao May 1, 2025
9eb23f3
upshift levels in rendered markdown
erickzhao May 1, 2025
457021e
tweak heading sizes
erickzhao May 1, 2025
33467d3
Merge branch 'main' into fix/windows-newline
erickzhao Sep 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions app/data/markdown-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export const makeMD = (opts: {
tailwindLists: boolean;
md?: MarkdownIt;
inlineCodeSmall?: boolean;
levelShift?: number;
}) => {
const md =
opts.md ||
Expand All @@ -21,15 +22,19 @@ export const makeMD = (opts: {

// Headings
const headingSizes = {
'1': 'text-xl font-bold mb-3',
'2': 'text-xl font-semibold mb-3',
'3': 'text-xl font-semibold mb-3',
'4': 'text-xl font-semibold mb-3',
'5': 'text-lg font-medium mb-2',
'6': 'text-base font-medium mb-1',
Comment on lines -24 to -29
Copy link
Member

@MarshallOfSound MarshallOfSound May 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did we drop the text size classes?

Copy link
Member Author

@erickzhao erickzhao May 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MarshallOfSound some of the headings in the PR details have text-lg set to them so I wanted to make the heading level appearances more consistent:

release-status/app/routes/pr/details.tsx

Lines 263 to 266 in 566e0fa

<h3 className="text-lg font-semibold text-[#2f3241] dark:text-white flex items-center gap-2">
<GitBranch className="w-5 h-5" />
Backport Information
</h3>

With the PR in the state it is now, I don't actually think we need this change necessarily (headings generated by markdown-renderer in the compare view are h5 after 9eb23f3), but we could instead do the following to match the non-MD heading styles:

h1: text-xl
h2: text-xl
h3: text-lg
h4: text-lg
h5: text-base
h6: text-base

Copy link
Member Author

@erickzhao erickzhao May 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

457021e

'1': 'text-xl font-bold my-3',
'2': 'text-xl font-semibold my-3',
'3': 'text-lg font-semibold my-3',
'4': 'text-lg font-semibold my-3',
'5': 'text-base font-medium my-2',
'6': 'text-base font-medium my-1',
} as const;
md.renderer.rules.heading_open = (tokens, idx) => {
const level = tokens[idx].tag.slice(1) as '1' | '2' | '3' | '4' | '5' | '6';
let level = tokens[idx].tag.slice(1) as '1' | '2' | '3' | '4' | '5' | '6';
if (opts.levelShift) {
const newLevel = Math.min(Math.max(parseInt(level) + opts.levelShift, 1), 6);
level = newLevel.toString() as '1' | '2' | '3' | '4' | '5' | '6';
}
return `<h${level} class="${headingSizes[level]} text-gray-900 dark:text-gray-100">`;
};

Expand Down
38 changes: 36 additions & 2 deletions app/data/markdown.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ import {
describe('renderMarkdownSafely', () => {
test('renders headers correctly', () => {
expect(renderMarkdownSafely('# Foo')).toMatchInlineSnapshot(`
"<h1 class="text-xl font-bold mb-3 text-gray-900 dark:text-gray-100">Foo</h1>
"<h1 class="text-xl font-bold my-3 text-gray-900 dark:text-gray-100">Foo</h1>
"
`);
});

test('renders absurd headers correctly', () => {
expect(renderMarkdownSafely('###### Foo')).toMatchInlineSnapshot(`
"<h6 class="text-base font-medium mb-1 text-gray-900 dark:text-gray-100">Foo</h6>
"<h6 class="text-base font-medium my-1 text-gray-900 dark:text-gray-100">Foo</h6>
"
`);
});
Expand Down Expand Up @@ -210,4 +210,38 @@ describe('renderGroupedReleaseNotes', () => {
}
`);
});

test('renders version grouped release notes correctly (Windows newlines)', () => {
const releaseNotes = [
{
version: 'v1.0.0',
content: '## New Feature\r\n\r\n* Added new feature',
},
{
version: 'v1.1.0',
content: '## New Feature\r\n\r\n* Added another feature',
},
];

expect(renderGroupedReleaseNotes(releaseNotes)).toMatchInlineSnapshot(`
{
"New Feature": [
{
"content": "<ul>
<li><p class="mb-2 text-base text-gray-800 dark:text-gray-200">Added another feature</p></li>
</ul>
",
"version": "v1.1.0",
},
{
"content": "<ul>
<li><p class="mb-2 text-base text-gray-800 dark:text-gray-200">Added new feature</p></li>
</ul>
",
"version": "v1.0.0",
},
],
}
`);
});
});
4 changes: 2 additions & 2 deletions app/data/markdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const titleMdIt = new MarkdownIt('zero', {
});
titleMdIt.inline.ruler.enable(['backticks']);
const listMD = makeMD({ tailwindLists: true, inlineCodeSmall: true });
const noListMD = makeMD({ tailwindLists: false, inlineCodeSmall: true });
const noListMD = makeMD({ tailwindLists: false, inlineCodeSmall: true, levelShift: 2 });
const titleMD = makeMD({
tailwindLists: false,
md: titleMdIt,
Expand Down Expand Up @@ -50,7 +50,7 @@ export const renderGroupedReleaseNotes = (versions: { version: string; content:
groups[key] = [];
}
for (const { version, content } of versions) {
const headers = content.split(/^## ([A-Za-z ]+)\n/gm).slice(1);
const headers = content.split(/^## ([A-Za-z ]+)(?:\r\n|\n)/gm).slice(1);
for (let i = 0; i < headers.length; i += 2) {
const groupName = headers[i];
const groupContent = headers[i + 1];
Expand Down
31 changes: 15 additions & 16 deletions app/routes/release/compare.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,22 +72,21 @@ export const loader = async (args: LoaderFunctionArgs) => {
return redirect('/release');
}

const grouped = renderGroupedReleaseNotes(
versionsForNotes.map((version, i) => {
let releaseNotes = githubReleaseNotes[i]!;
const parsed = semverParse(version);
if (parsed?.prerelease.length) {
releaseNotes = releaseNotes?.split(new RegExp(`@${escapeRegExp(version)}\`?.`))[1];
}
releaseNotes =
releaseNotes?.replace(/# Release Notes for [^\r\n]+(?:(?:\n)|(?:\r\n))/i, '') ||
'Missing...';
return {
version,
content: releaseNotes,
};
}),
);
const rawGroupedNotes = versionsForNotes.map((version, i) => {
let releaseNotes = githubReleaseNotes[i]!;
const parsed = semverParse(version);
if (parsed?.prerelease.length) {
releaseNotes = releaseNotes?.split(new RegExp(`@${escapeRegExp(version)}\`?.`))[1];
}
releaseNotes =
releaseNotes?.replace(/# Release Notes for [^\r\n]+(?:(?:\n)|(?:\r\n))/i, '') || 'Missing...';
return {
version,
content: releaseNotes,
};
});

const grouped = renderGroupedReleaseNotes(rawGroupedNotes);

args.context.cacheControl = 'private, max-age=300';

Expand Down