fix: address blog component review comments

Author: SoonIter

src/blog-back-button/index.module.scss

@@ -1,4 +1,4 @@
-.blog-back-button {
+.blogBackButton {
   margin-bottom: 1rem;
   color: var(--rp-c-text-2);
   transition: color 0.2s ease-out;

src/blog-back-button/index.tsx

@@ -14,7 +14,20 @@ const getClassName = (...classNames: Array<string | undefined>) => {
 };
 
 const getBlogPrefix = (lang: string, blogPrefix = '/blog') => {
-  return !lang || lang === 'en' ? `${blogPrefix}` : `/${lang}${blogPrefix}`;
+  if (lang === 'en') {
+    return blogPrefix;
+  }
+
+  const localizedPrefix = `/${lang}`;
+
+  if (
+    blogPrefix === localizedPrefix ||
+    blogPrefix.startsWith(`${localizedPrefix}/`)
+  ) {
+    return blogPrefix;
+  }
+
+  return `${localizedPrefix}${blogPrefix}`;
 };
 
 const getLabel = (lang?: string) => {

src/blog-list/index.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import { useMemo, useState } from 'react';
 import { type BlogAvatarAuthor, BlogAvatarGroup } from '../blog-avatar';
 import { ALink, type LinkComp } from '../shared';
@@ -9,9 +9,33 @@ import styles from './index.module.scss';
 
 export type BlogDateValue = Date | string | number;
 
+export type RenderInlineMarkdownResult =
+  | HTMLAttributes<HTMLParagraphElement>
+  | {
+      dangerouslySetInnerHTML: {
+        __html: string;
+      };
+      className?: string;
+    };
+
 export type RenderInlineMarkdown = (
   content: string,
-) => HTMLAttributes<HTMLParagraphElement>;
+) => RenderInlineMarkdownResult;
+
+const hasDangerousHtml = (
+  value: RenderInlineMarkdownResult,
+): value is Extract<
+  RenderInlineMarkdownResult,
+  { dangerouslySetInnerHTML: object }
+> => {
+  return 'dangerouslySetInnerHTML' in value;
+};
+
+type LinkLikeProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  className: string;
+  href: string;
+  children: ReactNode;
+};
 
 export type BlogListItem = {
   id?: string | number;
@@ -34,6 +58,7 @@ export type BlogListProps = {
   subtitle?: ReactNode;
   featured?: boolean;
   interactive?: boolean;
+  hideDocLayoutChrome?: boolean;
 };
 
 const DEFAULT_DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
@@ -101,13 +126,23 @@ function MarkdownishText({
 
   if (renderInlineMarkdown) {
     const paragraphProps = renderInlineMarkdown(children);
+    const paragraphChildren = hasDangerousHtml(paragraphProps)
+      ? undefined
+      : paragraphProps.children;
     const paragraphClassName = getClassName(
       styles.descriptionParagraph,
       paragraphProps.className,
     );
 
-    const { children: paragraphChildren, ...restParagraphProps } =
-      paragraphProps;
+    if (hasDangerousHtml(paragraphProps)) {
+      return (
+        <span className={paragraphClassName}>
+          {paragraphChildren ?? children}
+        </span>
+      );
+    }
+
+    const { children: _children, ...restParagraphProps } = paragraphProps;
 
     return (
       <p {...restParagraphProps} className={paragraphClassName}>
@@ -122,7 +157,7 @@ function MarkdownishText({
 type BlogCardProps = {
   post: BlogListItem;
   isFeatured: boolean;
-  Link: LinkComp;
+  Link: (props: LinkLikeProps) => JSX.Element;
   dateFormatter: Intl.DateTimeFormat;
   interactive: boolean;
   renderInlineMarkdown?: RenderInlineMarkdown;
@@ -215,12 +250,13 @@ export function BlogList({
   subtitle,
   featured = true,
   interactive = true,
+  hideDocLayoutChrome = false,
 }: BlogListProps) {
   if (posts.length === 0) {
     return emptyState ? <>{emptyState}</> : null;
   }
 
-  const Link = LinkComp ?? ALink;
+  const Link = (LinkComp ?? ALink) as (props: LinkLikeProps) => JSX.Element;
   const dateFormatter = new Intl.DateTimeFormat(
     lang === 'zh' ? 'zh-CN' : 'en-US',
     dateFormatOptions,
@@ -283,12 +319,14 @@ export function BlogList({
           ))}
         </section>
       ) : null}
-      <style>{`
+      {hideDocLayoutChrome ? (
+        <style>{`
       .rp-doc-layout__sidebar-placeholder { display: none; }
       .rp-doc-layout__outline { display: none; }
       .rp-doc-layout__doc { width: 100% !important; max-width: 100% !important; }
       .rp-doc-layout__doc-container { margin: 0 auto; }
       `}</style>
+      ) : null}
     </div>
   );
 }

stories/BlogBackButton.stories.tsx

@@ -2,35 +2,15 @@ import { BlogBackButton } from '@rstack-dev/doc-ui/blog-back-button';
 import type { ReactNode } from 'react';
 import './index.scss';
 
-type StoryLinkProps = {
-  className: string;
-  href: string;
-  children: ReactNode;
-  target?: string;
-  rel?: string;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
-  [key: `data-${string}`]: string | undefined;
-};
-
-const StoryLink = ({ children, ...props }: StoryLinkProps) => {
-  return <a {...props}>{children}</a>;
-};
-
 export const BlogBackButtonStory = () => (
   <div style={{ margin: '0 auto', maxWidth: 960, padding: 24 }}>
-    <BlogBackButton
-      pathname="/blog/rspress-2-0"
-      blogPrefix="/blog"
-      LinkComp={StoryLink}
-    />
+    <BlogBackButton pathname="/blog/rspress-2-0" lang="en" blogPrefix="/blog" />
     <div style={{ marginBottom: 24 }}>English blog detail page</div>
 
     <BlogBackButton
       pathname="/zh/blog/rspack-roadmap"
       lang="zh"
-      blogPrefix="/zh/blog"
-      LinkComp={StoryLink}
+      blogPrefix="/blog"
     />
     <div>中文博客详情页</div>
   </div>

stories/BlogList.stories.tsx

@@ -74,6 +74,7 @@ export const BlogListStory = () => (
     <BlogList
       posts={posts}
       lang="en"
+      hideDocLayoutChrome
       renderInlineMarkdown={renderInlineMarkdown}
       title="Blog"
       subtitle={
@@ -100,6 +101,7 @@ export const BlogListWithBackgroundStory = () => (
         posts={posts}
         lang="en"
         LinkComp={StoryLink}
+        hideDocLayoutChrome
         renderInlineMarkdown={renderInlineMarkdown}
         title="Blog"
         subtitle={