docs: change code command line style
This commit is contained in:
moonrailgun
parent
763810e8b7
commit
8c5c417a19
@ -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
|
||||
|
||||
17
website/components.json
Normal file
17
website/components.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
@ -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()],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
49
website/src/components/ui/border-beam.tsx
Normal file
49
website/src/components/ui/border-beam.tsx
Normal file
@ -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,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
96
website/src/components/ui/shimmer-button.tsx
Normal file
96
website/src/components/ui/shimmer-button.tsx
Normal file
@ -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;
|
||||
63
website/src/components/ui/shine-border.tsx
Normal file
63
website/src/components/ui/shine-border.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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.
|
||||
|
||||
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -5,8 +5,7 @@
|
||||
"baseUrl": ".",
|
||||
"strict": false,
|
||||
"paths": {
|
||||
"@/*": ["./*"],
|
||||
"@/utils/style": ["../src/client/utils/style"]
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user