终端命令行面板

一个模拟出来的终端界面，字体很优雅，特别是闪动的光标才是灵魂。

Console

→ ~/timfan $ list github --user="fantingsheng"

+ 27 Open Source repositories on Github (total size: 782.0 Mb)

+ 20.34K Contributions since 2023 in last year)

→ ~/timfan $ contact --discord

+ User: Timfan
+ Link: https://spacexcode.com/author

→ ~/timfan $

代码实现

JSX

import Link from '@docusaurus/Link';
import styles from './style.module.scss';

const TerminalLine = ({ children, blinking = false }) => (
 <div>
  <span className={styles.rightArrow} aria-hidden="true">
   →{"  "}
  </span>
  <span className={styles.userName} aria-hidden="true">
   ~/{'timfan'}{" "}
  </span>
  {blinking ? (
   <span className={styles.blinkCursor} aria-hidden="true">
    ${" "}
   </span>
  ) : (
   <span className={styles.dolar}>$</span>
  )}{" "}
  <span style={{ fontStyle: 'italic' }}>{children}</span>
 </div>
);

const TerminalResponse = ({ children }) => <div style={{ lineHeight: '1.5rem' }}>{children}</div>;

export default function Terminal({}) {
 return (
  <div className={styles.card}>
   <div className={styles.toolBar}>
    <div className={styles.dot} style={{ backgroundColor: '#fb5f57' }} />
    <div className={styles.dot} style={{ backgroundColor: '#fdbf2d' }} />
    <div className={styles.dot} style={{ backgroundColor: '#27cb3f' }} />
    <div className={styles.title} aria-hidden="true">
     Console
    </div>
   </div>
   <div className={styles.main}>
    <TerminalLine>
      list github --user=
      <Link href={`https://github.com/${'fantingsheng'}`} target="_blank" aria-label={`See ${'fantingsheng'} github`}>
      <>"{'fantingsheng'}"</>
      </Link>
    </TerminalLine>
    <TerminalResponse>
      <div>
      <span aria-hidden="true"> + </span>
      <span className={styles.fontBold}>{27} Open Source </span>repositories on Github (total size: 782.0 Mb)
      </div>
      <div>
      <span aria-hidden="true"> + </span>
      <span className={styles.fontBold}>20.34K Contributions</span> since 2023 in last year)
      </div>
    </TerminalResponse>
    
    <TerminalLine>contact --discord</TerminalLine>
    <TerminalResponse>
      + <span className={styles.fontBold}>User:</span>{" "}
      <Link href={`https://spacexcode.com/author}`} target="_blank">
      {'Timfan'}
      </Link>
      <br />+ <span className={styles.fontBold}>Link:</span>{" "}
      <Link href="https://spacexcode.com/author" target="_blank">
      { 'https://spacexcode.com/author' }
      </Link>
    </TerminalResponse>
    <TerminalLine blinking={true} />
   </div>
  </div>
 );
}

CSS

@font-face {
  font-family: __GeistMono_8a4d12;
  src: url(/fonts/Geist-Regular.woff2) format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
@font-face {
  font-family: __GeistSans_ac79ff;
  src: url(/fonts/Geist-Black.woff2) format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
.card {
  width: 100%;
  font-size: .875rem;
  line-height: 1.25rem;
  background-color: rgb(255 255 254/1);
  border: 1px solid #e5e7eb;
  border-bottom-color: #00000026;
  border-radius: 0.375rem;
  box-shadow: 0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 30px 100px -4px #336fef33;;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
  font-family: "__GeistSans_ac79ff",ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
}
.toolBar {
  padding: 0.5rem;
  background-color: hsla(0,0%,100%,.001);
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  position: relative;
  gap: 6px;

  .dot {
    border-radius: 9999px;
    cursor: no-drop;
    width: 0.875rem;
    height: 0.875rem;
  }

  .title {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
  }
}
.main {
  padding: 1rem;
  white-space: nowrap;
  overflow-x: hidden;
  min-height: 200px;

  .rightArrow {
    color: rgb(234 74 170/1);
    line-height: 1.5rem;
    font-weight: 700;
  }
  .userName {
    color: rgb(102 231 119/1);
    font-weight: 700;
  }
  .dolar {
    font-style: italic;
    font-weight: 700;
    color: rgb(55 65 81/1);
    transition-duration: 0.2s;
  }
  .fontBold {
    font-weight: 700;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  .blinkCursor {
    font-weight: 700;
    position: relative;
    transition-duration: 0.2s;
    color: rgb(55 65 81/1);

    &::after {
      content: "▌";
      font-style: normal;
      font-size: 1em;
      animation: cursor .75s infinite;
      margin-top: auto;
      margin-bottom: auto;
      top: -0.2em;
      right: -1.5em;
      bottom: 0;
      position: absolute;
    }
  }
}
@keyframes cursor {
  0%, 45% {
    content: "▌";
    opacity: 1;
  }
  50%, 100% {
    content: "▌";
    opacity: 0;
  }
}