add fontawesome, start on Card component

docs/features/_category_.json

@@ -0,0 +1,7 @@
+{
+    "label": "Features",
+    "position": 2,
+    "link": {
+        "type": "generated-index"
+    }
+}

docs/index.md

@@ -1,49 +0,0 @@
----
-sidebar_position: 1
----
-
-# Introduction
-
-## Welcome to Wave Terminal
-
-Wave is an open-source terminal that adds the ability to launch graphical widgets, controlled and integrated directly with the CLI.
-
-## Getting Started
-
-Get started by **creating a new site**.
-
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
-
-### What you'll need
-
-* [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
-  * When installing Node.js, you are recommended to check all checkboxes related to dependencies.
-
-## Generate a new site
-
-Generate a new Docusaurus site using the **classic template**.
-
-The classic template will automatically be added to your project after you run the command:
-
-```bash
-npm init docusaurus@latest my-website classic
-```
-
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
-
-The command also installs all necessary dependencies you need to run Docusaurus.
-
-## Start your site
-
-Run the development server:
-
-```bash
-cd my-website
-npm run start
-```
-
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
-
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
-
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

docs/index.mdx

@@ -0,0 +1,15 @@
+---
+sidebar_position: 1
+---
+
+import Card from '@site/src/components/card.tsx';
+
+# Introduction
+
+## Welcome to Wave Terminal
+
+Wave is an open-source terminal that adds the ability to launch graphical widgets, controlled and integrated directly with the CLI.
+
+## Features
+
+<Card />

docusaurus.config.ts

@@ -66,10 +66,10 @@ const config: Config = {
                     label: "Docs",
                 },
                 {
-                    html: "<div/>",
+                    // html: '<div class="fa-github"/>',
                     href: "https://github.com/wavetermdev/waveterm",
                     position: "right",
-                    className: "header-github-link",
+                    className: "fa-github fa-brands navbar-icon",
                     "aria-label": "GitHub repository",
                 },
             ],
@@ -78,6 +78,11 @@ const config: Config = {
             copyright: `Copyright © ${new Date().getFullYear()} Command Line Inc. Built with Docusaurus.`,
         },
     },
+    stylesheets: [
+        "fontawesome/css/fontawesome.min.css",
+        "fontawesome/css/brands.min.css",
+        "fontawesome/css/solid.min.css",
+    ],
     staticDirectories: ["static"],
 };
 

package.json

@@ -25,7 +25,9 @@
         "clsx": "^2.0.0",
         "prism-react-renderer": "^2.3.0",
         "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+        "react-dom": "^18.0.0",
+        "remark-gfm": "^4.0.0",
+        "remark-typescript-code-import": "^1.0.1"
     },
     "devDependencies": {
         "@docusaurus/module-type-aliases": "3.5.2",

src/components/card.tsx

@@ -0,0 +1,9 @@
+interface CardProps {
+    icon: string;
+    title: string;
+    description: string;
+}
+
+export default function Card({ icon, title, description }: CardProps) {
+    return <div className="card"></div>;
+}

src/css/custom.css

@@ -18,15 +18,6 @@
     --ifm-color-primary-lightest: #8cd47d;
 }
 
-.header-github-link div {
-    height: 24px;
-    width: 24px;
-    background-color: var(--ifm-font-color-base);
-    mask: url(/img/Octicons-mark-github.svg) no-repeat center / contain;
-    -webkit-mask: url(/img/Octicons-mark-github.svg) no-repeat center / contain;
-    transition: background-color 0.15s linear;
-}
-
-.header-github-link:hover div {
-    background-color: var(--ifm-color-primary);
+.navbar-icon {
+    font-size: 1.45em;
 }

static/fontawesome/css/solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

yarn.lock

@@ -8198,6 +8198,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mdast@npm:3.0.0"
+  checksum: 10c0/dce2d68e9772705b675e7ebb543640e9f1361ff874eed818677304a351486904f427f87deff8bbd21942e58ed0d2ee3ddcfc1d010aea0de92b4a62ff0f94f0ff
+  languageName: node
+  linkType: hard
+
 "mdn-data@npm:2.0.28":
   version: 2.0.28
   resolution: "mdn-data@npm:2.0.28"
@@ -11356,6 +11363,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-typescript-code-import@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "remark-typescript-code-import@npm:1.0.1"
+  dependencies:
+    mdast: "npm:^3.0.0"
+    typescript: "npm:^5.3.3"
+    unist-util-visit: "npm:^5.0.0"
+  checksum: 10c0/6a7603dafa2cab8740d49caf285f264327401a3473fc6350605bbc575f3c633266f2f1c633083174323bbd35bc58863ff4fac09fea6b35bc37ca781365803f39
+  languageName: node
+  linkType: hard
+
 "remark@npm:^15.0.0":
   version: 15.0.1
   resolution: "remark@npm:15.0.1"
@@ -12669,7 +12687,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.5.2":
+"typescript@npm:^5.3.3, typescript@npm:^5.5.2":
   version: 5.6.2
   resolution: "typescript@npm:5.6.2"
   bin:
@@ -12679,7 +12697,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.5.2#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A^5.3.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.5.2#optional!builtin<compat/typescript>":
   version: 5.6.2
   resolution: "typescript@patch:typescript@npm%3A5.6.2#optional!builtin<compat/typescript>::version=5.6.2&hash=8c6c40"
   bin:
@@ -13195,9 +13213,11 @@ __metadata:
     react-dom: "npm:^18.0.0"
     remark-cli: "npm:^12.0.1"
     remark-frontmatter: "npm:^5.0.0"
+    remark-gfm: "npm:^4.0.0"
     remark-mdx: "npm:^3.0.1"
     remark-preset-lint-consistent: "npm:^6.0.0"
     remark-preset-lint-recommended: "npm:^7.0.0"
+    remark-typescript-code-import: "npm:^1.0.1"
     typescript: "npm:^5.5.2"
     typescript-eslint: "npm:^8.4.0"
   languageName: unknown