beachcomber 0.4.0

A centralized daemon that caches shell state (git, battery, hostname, etc.) so every consumer reads from one fast cache instead of independently forking shells
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

import {useState} from 'react';
import {useIntersectionObserver} from '../hooks/useIntersectionObserver';
import styles from './SDKs.module.css';

interface InstallTab {
  id: string;
  label: string;
  command: string;
}

const installTabs: InstallTab[] = [
  {id: 'brew', label: 'Homebrew', command: 'brew install navistau/tap/beachcomber'},
  {id: 'npm', label: 'npm', command: 'npm install -g beachcomber'},
  {id: 'pip', label: 'pip', command: 'pip install beachcomber'},
  {id: 'cargo', label: 'Cargo', command: 'cargo install beachcomber'},
];

export default function SDKs(): JSX.Element {
  const [ref, isVisible] = useIntersectionObserver(0.1);
  const [activeTab, setActiveTab] = useState('brew');

  const activeInstall = installTabs.find(t => t.id === activeTab);

  return (
    <>
    <section className={styles.section}>
      <div
        className={`${styles.container} ${isVisible ? styles.visible : ''}`}
        ref={ref as React.RefObject<HTMLDivElement>}
      >
        <div className={styles.label}>Get started</div>
        <h2 className={styles.heading}>Get started</h2>
        <p className={styles.subheading}>
          The daemon starts automatically on first query. Integrate with your prompt, status bar, or
          editor to start seeing the benefits.
        </p>

        <div className={styles.terminalWrapper}>
          <div className={styles.terminalHeader}>
            <div className={styles.dots}>
              <span className={`${styles.dot} ${styles.dotRed}`} />
              <span className={`${styles.dot} ${styles.dotYellow}`} />
              <span className={`${styles.dot} ${styles.dotGreen}`} />
            </div>
            <div className={styles.tabs}>
              {installTabs.map(tab => (
                <button
                  key={tab.id}
                  className={`${styles.tab} ${activeTab === tab.id ? styles.tabActive : ''}`}
                  onClick={() => setActiveTab(tab.id)}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          </div>
          <div className={styles.terminalBody}>
            <span className={styles.prompt}>$</span>
            <span className={styles.command}> {activeInstall?.command}</span>
          </div>
        </div>

        <div className={styles.links}>
          <a className={styles.link} href="/docs/getting-started/quick-start">
            Quick Start
          </a>
          <a className={styles.link} href="/docs/getting-started/installation">
            Docs
          </a>
          <a
            className={styles.link}
            href="https://github.com/NavistAu/beachcomber"
            target="_blank"
            rel="noopener noreferrer"
          >
            GitHub
          </a>
          <a
            className={styles.link}
            href="https://crates.io/crates/beachcomber"
            target="_blank"
            rel="noopener noreferrer"
          >
            cargo install
          </a>
        </div>

      </div>
    </section>

    <section className={styles.pageFooter}>
      <div className={styles.pageFooterInner}>
        <div className={styles.footerCol}>
          <div className={styles.footerColTitle}>Docs</div>
          <a className={styles.footerColLink} href="/docs/getting-started/installation">Getting Started</a>
          <a className={styles.footerColLink} href="/docs/reference/cli-commands">CLI Reference</a>
          <a className={styles.footerColLink} href="/docs/reference/built-in-providers">Providers</a>
        </div>
        <div className={styles.footerCol}>
          <div className={styles.footerColTitle}>Ecosystem</div>
          <a className={styles.footerColLink} href="/docs/ecosystem/overview">SDKs</a>
          <a className={styles.footerColLink} href="https://github.com/NavistAu/beachcomber" target="_blank" rel="noopener noreferrer">GitHub</a>
          <a className={styles.footerColLink} href="https://crates.io/crates/beachcomber" target="_blank" rel="noopener noreferrer">crates.io</a>
        </div>
      </div>
    </section>
    </>
  );
}