feat(blog-list): add BlogList BlogBackground BlogBackButton components as lynx-website (#74)

Author: SoonIter

package.json

@@ -53,6 +53,18 @@
     "./blog-avatar": {
       "types": "./dist/blog-avatar/index.d.ts",
       "import": "./dist/blog-avatar/index.js"
+    },
+    "./blog-back-button": {
+      "types": "./dist/blog-back-button/index.d.ts",
+      "import": "./dist/blog-back-button/index.js"
+    },
+    "./blog-list": {
+      "types": "./dist/blog-list/index.d.ts",
+      "import": "./dist/blog-list/index.js"
+    },
+    "./blog-background": {
+      "types": "./dist/blog-background/index.d.ts",
+      "import": "./dist/blog-background/index.js"
     }
   },
   "repository": {

rslib.config.ts

@@ -26,6 +26,9 @@ export default defineConfig({
           'nav-icon': './src/nav-icon/index.tsx',
           benchmark: './src/benchmark/index.tsx',
           'blog-avatar': './src/blog-avatar/index.tsx',
+          'blog-back-button': './src/blog-back-button/index.tsx',
+          'blog-list': './src/blog-list/index.tsx',
+          'blog-background': './src/blog-background/index.tsx',
           'tool-stack': './src/tool-stack/index.tsx',
           hero: './src/hero/index.tsx',
           'section-style': './src/section-style/index.tsx',

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

@@ -0,0 +1,20 @@
+.blogBackButton {
+  margin-bottom: 1rem;
+  color: var(--rp-c-text-2);
+  transition: color 0.2s ease-out;
+
+  .link {
+    font-size: 14px;
+    text-decoration: none;
+  }
+
+  &::before {
+    content: '←';
+    margin-right: 0.5rem;
+  }
+
+  &:hover,
+  &:focus-visible {
+    color: var(--rp-c-brand);
+  }
+}

src/blog-back-button/index.tsx

@@ -0,0 +1,72 @@
+import { ALink, type LinkComp } from '../shared';
+import styles from './index.module.scss';
+
+export type BlogBackButtonProps = {
+  pathname: string;
+  lang: string;
+  blogPrefix?: string;
+  className?: string;
+  LinkComp?: LinkComp;
+};
+
+const getClassName = (...classNames: Array<string | undefined>) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
+const getBlogPrefix = (lang: string, blogPrefix = '/blog') => {
+  if (lang === 'en') {
+    return blogPrefix;
+  }
+
+  const localizedPrefix = `/${lang}`;
+
+  if (
+    blogPrefix === localizedPrefix ||
+    blogPrefix.startsWith(`${localizedPrefix}/`)
+  ) {
+    return blogPrefix;
+  }
+
+  return `${localizedPrefix}${blogPrefix}`;
+};
+
+const getLabel = (lang?: string) => {
+  return lang === 'zh' ? '返回博客' : 'Back to blog';
+};
+
+const trimTrailingSlashes = (value: string) => {
+  let end = value.length;
+
+  while (end > 1 && value.charCodeAt(end - 1) === 47) {
+    end -= 1;
+  }
+
+  return value.slice(0, end) || '/';
+};
+
+export function BlogBackButton({
+  pathname,
+  lang,
+  blogPrefix,
+  className,
+  LinkComp,
+}: BlogBackButtonProps) {
+  const resolvedBlogPrefix = getBlogPrefix(lang, blogPrefix);
+  const normalizedPathname = trimTrailingSlashes(pathname);
+  const blogIndexPath = `${resolvedBlogPrefix}/`;
+  const isBlogSubpage = normalizedPathname.startsWith(`${resolvedBlogPrefix}/`);
+
+  if (!isBlogSubpage) {
+    return null;
+  }
+
+  const Link = LinkComp ?? ALink;
+
+  return (
+    <div className={getClassName(styles.blogBackButton, className)}>
+      <Link href={blogIndexPath} className={styles.link}>
+        {getLabel(lang)}
+      </Link>
+    </div>
+  );
+}

src/blog-background/index.module.scss

@@ -0,0 +1,34 @@
+:global {
+  html:not(.dark) {
+    --rs-blog-list-frame-bg:
+      linear-gradient(180deg, rgba(15, 23, 42, 0.02), transparent 72%),
+      linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px),
+      linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px);
+  }
+
+  html.dark {
+    --rs-blog-list-frame-bg:
+      linear-gradient(180deg, rgba(148, 163, 184, 0.04), transparent 72%),
+      linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
+      linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px);
+  }
+}
+
+.blogBackground {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.blogFrame {
+  position: absolute;
+  inset: 0;
+  background: var(--rs-blog-list-frame-bg);
+  background-size: 1200px;
+  opacity: 0.45;
+}
+
+:global(.dark) .blogFrame {
+  opacity: 0.35;
+}

src/blog-background/index.tsx

@@ -0,0 +1,28 @@
+import { MeteorsBackground } from '../blog-list/MeteorsBackground';
+import styles from './index.module.scss';
+
+export type BlogBackgroundProps = {
+  showBackground?: boolean;
+  backgroundGridSize?: number;
+  backgroundMeteorCount?: number;
+};
+
+export function BlogBackground({
+  showBackground = true,
+  backgroundGridSize = 120,
+  backgroundMeteorCount = 3,
+}: BlogBackgroundProps) {
+  if (!showBackground) {
+    return null;
+  }
+
+  return (
+    <div className={styles.blogBackground}>
+      <div className={styles.blogFrame} />
+      <MeteorsBackground
+        gridSize={backgroundGridSize}
+        meteorCount={backgroundMeteorCount}
+      />
+    </div>
+  );
+}

src/blog-list/BorderBeam.module.scss

@@ -0,0 +1,11 @@
+.frame {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.canvas {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}