From 8c5c417a197531c187452fc4937d034d3bdc05a7 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 12 Oct 2024 20:07:37 +0800
Subject: [PATCH] docs: change code command line style

---
 pnpm-lock.yaml                               | 13 +++
 website/components.json                      | 17 ++++
 website/docusaurus.config.ts                 | 17 +++-
 website/package.json                         |  1 +
 website/src/components/ui/border-beam.tsx    | 49 ++++++++++
 website/src/components/ui/shimmer-button.tsx | 96 ++++++++++++++++++++
 website/src/components/ui/shine-border.tsx   | 63 +++++++++++++
 website/src/pages/index.tsx                  | 27 ++++--
 website/tailwind.config.ts                   | 60 ++++++++++--
 website/tsconfig.json                        |  3 +-
 10 files changed, 328 insertions(+), 18 deletions(-)
 create mode 100644 website/components.json
 create mode 100644 website/src/components/ui/border-beam.tsx
 create mode 100644 website/src/components/ui/shimmer-button.tsx
 create mode 100644 website/src/components/ui/shine-border.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 802312e..7234a1c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -786,6 +786,9 @@ importers:
       ts-node:
         specifier: ^10.9.1
         version: 10.9.1(@types/node@20.12.7)(typescript@5.5.4)
+      tsconfig-paths-webpack-plugin:
+        specifier: ^4.1.0
+        version: 4.1.0
       typescript:
         specifier: 5.5.4
         version: 5.5.4
@@ -11810,6 +11813,10 @@ packages:
   ts-pattern@4.3.0:
     resolution: {integrity: sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg==}
 
+  tsconfig-paths-webpack-plugin@4.1.0:
+    resolution: {integrity: sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==}
+    engines: {node: '>=10.13.0'}
+
   tsconfig-paths@4.2.0:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
@@ -27688,6 +27695,12 @@ snapshots:
 
   ts-pattern@4.3.0: {}
 
+  tsconfig-paths-webpack-plugin@4.1.0:
+    dependencies:
+      chalk: 4.1.2
+      enhanced-resolve: 5.17.1
+      tsconfig-paths: 4.2.0
+
   tsconfig-paths@4.2.0:
     dependencies:
       json5: 2.2.3
diff --git a/website/components.json b/website/components.json
new file mode 100644
index 0000000..88628b2
--- /dev/null
+++ b/website/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "./index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 59cd51f..7237830 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -4,6 +4,7 @@
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 import { themes } from 'prism-react-renderer';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
 const lightTheme = themes.github;
 const darkTheme = themes.dracula;
@@ -74,7 +75,7 @@ const config: Config = {
     ],
   ],
 
-  plugins: [require.resolve('docusaurus-plugin-image-zoom')],
+  plugins: [require.resolve('docusaurus-plugin-image-zoom'), MyAliasPlugin],
 
   themeConfig: {
     // Replace with your project's social card
@@ -210,3 +211,17 @@ const config: Config = {
 };
 
 module.exports = config;
+
+function MyAliasPlugin(context, options) {
+  console.log('MyAliasPlugin', context, options);
+  return {
+    name: 'my-alias-plugin',
+    configureWebpack() {
+      return {
+        resolve: {
+          plugins: [new TsconfigPathsPlugin()],
+        },
+      };
+    },
+  };
+}
diff --git a/website/package.json b/website/package.json
index 68c9d01..8cbb1ab 100644
--- a/website/package.json
+++ b/website/package.json
@@ -48,6 +48,7 @@
     "slick-carousel": "^1.8.1",
     "tailwindcss": "^3.3.5",
     "ts-node": "^10.9.1",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "~5.2.2",
     "url": "^0.11.3"
   },
diff --git a/website/src/components/ui/border-beam.tsx b/website/src/components/ui/border-beam.tsx
new file mode 100644
index 0000000..a720307
--- /dev/null
+++ b/website/src/components/ui/border-beam.tsx
@@ -0,0 +1,49 @@
+import { cn } from "@/lib/utils";
+
+interface BorderBeamProps {
+  className?: string;
+  size?: number;
+  duration?: number;
+  borderWidth?: number;
+  anchor?: number;
+  colorFrom?: string;
+  colorTo?: string;
+  delay?: number;
+}
+
+export const BorderBeam = ({
+  className,
+  size = 200,
+  duration = 15,
+  anchor = 90,
+  borderWidth = 1.5,
+  colorFrom = "#ffaa40",
+  colorTo = "#9c40ff",
+  delay = 0,
+}: BorderBeamProps) => {
+  return (
+    <div
+      style={
+        {
+          "--size": size,
+          "--duration": duration,
+          "--anchor": anchor,
+          "--border-width": borderWidth,
+          "--color-from": colorFrom,
+          "--color-to": colorTo,
+          "--delay": `-${delay}s`,
+        } as React.CSSProperties
+      }
+      className={cn(
+        "pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
+
+        // mask styles
+        "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
+
+        // pseudo styles
+        "after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
+        className,
+      )}
+    />
+  );
+};
diff --git a/website/src/components/ui/shimmer-button.tsx b/website/src/components/ui/shimmer-button.tsx
new file mode 100644
index 0000000..909497e
--- /dev/null
+++ b/website/src/components/ui/shimmer-button.tsx
@@ -0,0 +1,96 @@
+import React, { CSSProperties } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface ShimmerButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  shimmerColor?: string;
+  shimmerSize?: string;
+  borderRadius?: string;
+  shimmerDuration?: string;
+  background?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
+  (
+    {
+      shimmerColor = '#ffffff',
+      shimmerSize = '0.05em',
+      shimmerDuration = '3s',
+      borderRadius = '100px',
+      background = 'rgba(0, 0, 0, 1)',
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        style={
+          {
+            '--spread': '90deg',
+            '--shimmer-color': shimmerColor,
+            '--radius': borderRadius,
+            '--speed': shimmerDuration,
+            '--cut': shimmerSize,
+            '--bg': background,
+          } as CSSProperties
+        }
+        className={cn(
+          'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black',
+          'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px',
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {/* spark container */}
+        <div
+          className={cn(
+            '-z-30 blur-[2px]',
+            'absolute inset-0 overflow-visible [container-type:size]'
+          )}
+        >
+          {/* spark */}
+          <div className="animate-shimmer-slide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]">
+            {/* spark before */}
+            <div className="animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]" />
+          </div>
+        </div>
+        {children}
+
+        {/* Highlight */}
+        <div
+          className={cn(
+            'insert-0 absolute size-full',
+
+            'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
+
+            // transition
+            'transform-gpu transition-all duration-300 ease-in-out',
+
+            // on hover
+            'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
+
+            // on click
+            'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]'
+          )}
+        />
+
+        {/* backdrop */}
+        <div
+          className={cn(
+            'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]'
+          )}
+        />
+      </button>
+    );
+  }
+);
+
+ShimmerButton.displayName = 'ShimmerButton';
+
+export default ShimmerButton;
diff --git a/website/src/components/ui/shine-border.tsx b/website/src/components/ui/shine-border.tsx
new file mode 100644
index 0000000..3539c01
--- /dev/null
+++ b/website/src/components/ui/shine-border.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+type TColorProp = string | string[];
+
+interface ShineBorderProps {
+  borderRadius?: number;
+  borderWidth?: number;
+  duration?: number;
+  color?: TColorProp;
+  className?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * @name Shine Border
+ * @description It is an animated background border effect component with easy to use and configurable props.
+ * @param borderRadius defines the radius of the border.
+ * @param borderWidth defines the width of the border.
+ * @param duration defines the animation duration to be applied on the shining border
+ * @param color a string or string array to define border color.
+ * @param className defines the class name to be applied to the component
+ * @param children contains react node elements.
+ */
+export default function ShineBorder({
+  borderRadius = 8,
+  borderWidth = 1,
+  duration = 14,
+  color = '#000000',
+  className,
+  children,
+}: ShineBorderProps) {
+  return (
+    <div
+      style={
+        {
+          '--border-radius': `${borderRadius}px`,
+        } as React.CSSProperties
+      }
+      className={cn(
+        'tw-relative tw-grid tw-min-h-[60px] tw-w-fit tw-min-w-[300px] tw-place-items-center tw-rounded-[--border-radius] tw-bg-white tw-p-3 tw-text-black dark:tw-bg-black dark:tw-text-white',
+        className
+      )}
+    >
+      <div
+        style={
+          {
+            '--border-width': `${borderWidth}px`,
+            '--border-radius': `${borderRadius}px`,
+            '--duration': `${duration}s`,
+            '--mask-linear-gradient': `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
+            '--background-radial-gradient': `radial-gradient(transparent,transparent, ${color instanceof Array ? color.join(',') : color},transparent,transparent)`,
+          } as React.CSSProperties
+        }
+        className={
+          'before:bg-shine-size motion-safe:before:animate-shine pointer-events-none before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[box-sizing:border-box] before:[mask:--mask-linear-gradient]'
+        }
+      ></div>
+      {children}
+    </div>
+  );
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 085987b..2842697 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -11,6 +11,7 @@ import { HomepageHeaderLight } from '../components/homepage/HeaderLight';
 import { HomepageFeatures } from '../components/homepage/Features';
 import { HomepageSimpleLight } from '../components/homepage/SimpleLight';
 import { LuGithub } from 'react-icons/lu';
+import ShineBorder from '@/components/ui/shine-border';
 
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 
@@ -49,18 +50,26 @@ function HomepageHeader() {
         </Link> */}
 
         <div
-          className="m-auto w-min max-w-full overflow-auto rounded-lg bg-neutral-100 p-2 text-left dark:bg-neutral-800"
+          className="m-auto w-min max-w-full overflow-auto rounded-lg bg-neutral-100 text-left dark:bg-neutral-800"
           style={{ boxShadow: '0px 0px 100px 0px rgba(0, 119, 230, 0.40)' }}
         >
-          <div className="whitespace-nowrap">
-            <span className="mr-1 select-none opacity-50">$</span>wget
-            https://raw.githubusercontent.com/msgbyte/tianji/master/docker-compose.yml
-          </div>
-          <div>
-            <span className="mr-1 select-none opacity-50">$</span>docker compose
-            up -d
-          </div>
+          <ShineBorder
+            className="relative flex w-full flex-col items-center justify-center overflow-hidden rounded-lg border p-2 md:shadow-xl"
+            color={['#A07CFE', '#FE8FB5', '#FFBE7B']}
+          >
+            <div>
+              <div className="whitespace-nowrap">
+                <span className="mr-1 select-none opacity-50">$</span>wget
+                https://raw.githubusercontent.com/msgbyte/tianji/master/docker-compose.yml
+              </div>
+              <div>
+                <span className="mr-1 select-none opacity-50">$</span>docker
+                compose up -d
+              </div>
+            </div>
+          </ShineBorder>
         </div>
+
         <small className="opacity-50">
           Default account is <b>admin</b>/<b>admin</b>, please change password
           ASAP.
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index 6bb65b1..a6983c0 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -64,8 +64,8 @@ export default {
         },
       },
       borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
       fontFamily: {
@@ -73,17 +73,65 @@ export default {
       },
       keyframes: {
         'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          from: {
+            height: '0',
+          },
+          to: {
+            height: 'var(--radix-accordion-content-height)',
+          },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
+          from: {
+            height: 'var(--radix-accordion-content-height)',
+          },
+          to: {
+            height: '0',
+          },
+        },
+        'shimmer-slide': {
+          to: {
+            transform: 'translate(calc(100cqw - 100%), 0)',
+          },
+        },
+        'spin-around': {
+          '0%': {
+            transform: 'translateZ(0) rotate(0)',
+          },
+          '15%, 35%': {
+            transform: 'translateZ(0) rotate(90deg)',
+          },
+          '65%, 85%': {
+            transform: 'translateZ(0) rotate(270deg)',
+          },
+          '100%': {
+            transform: 'translateZ(0) rotate(360deg)',
+          },
+        },
+        shine: {
+          '0%': {
+            'background-position': '0% 0%',
+          },
+          '50%': {
+            'background-position': '100% 100%',
+          },
+          to: {
+            'background-position': '0% 0%',
+          },
+        },
+        'border-beam': {
+          '100%': {
+            'offset-distance': '100%',
+          },
         },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        'shimmer-slide':
+          'shimmer-slide var(--speed) ease-in-out infinite alternate',
+        'spin-around': 'spin-around calc(var(--speed) * 2) infinite linear',
+        shine: 'shine var(--duration) infinite linear',
+        'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear',
       },
     },
   },
diff --git a/website/tsconfig.json b/website/tsconfig.json
index 681da39..2e51a69 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -5,8 +5,7 @@
     "baseUrl": ".",
     "strict": false,
     "paths": {
-      "@/*": ["./*"],
-      "@/utils/style": ["../src/client/utils/style"]
+      "@/*": ["./src/*"]
     }
   }
 }