docs: update contributing docs and website

docs/01-Users/07-channels.md

@@ -170,6 +170,7 @@ requirements = ["rg", "bat"]  # any binary requirements my channel needs
 command = "rg . --no-heading --line-number"
 display = "[{split:\\::..2}]\t{split:\\::2}"  # what's displayed in the UI
 output = "{split:\\::..2}"  # what's outputed on selection
+ansi = true  # whether the results are ANSI formatted
 ```
 
 #### `[preview]`

docs/01-Users/13-contributing-channels.md

@@ -0,0 +1,35 @@
+# Contributing new channels
+
+***NOTE**: for general setup information before contributing, see [Contributing](../02-Developers/00-contributing.md).*
+
+Contributing a new channel is as you might expect, pretty straightforward.
+
+1. Create a new branch, add and commit your new channel's TOML file under `cable/unix` (or `cable/windows` depending on your usecase).
+2. [OPTIONAL] Add a screenshot of the channel in `assets/channels/<os>/` (e.g. `assets/channels/unix/my_channel.png`).
+3. Push your commit and create a PR.
+4. The ci should automatically generate the documentation for your channel and pick up the screenshot if available.
+5. If 4. fails, you can generate the docs manually by running:
+    ```sh
+    just generate-cable-docs
+    ```
+
+
+### Examples
+#### git-log
+
+```toml
+[metadata]
+name = "git-log"
+description = "A channel to select from git log entries"
+requirements = ["git", "delta"]
+
+[source]
+command = "git log --graph --pretty=format:'%C(yellow)%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --color=always"
+output = "{strip_ansi|split: :1}"
+ansi = true
+
+[preview]
+command = "git show -p --stat --pretty=fuller --color=always '{strip_ansi|split: :1}' | delta"
+```
+
+![tv-ansi-git-log.png](../../website/static/img/tv-ansi-git-log.png)

docs/02-Developers/00-contributing.md

@@ -98,20 +98,11 @@ Running the tests can be done with:
 just test
 ```
 
-### Contributing a new channel
-
-Contributing a new channel is pretty straightforward.
-
-1. create a new branch, add and commit your new channel's TOML file under `cable/unix` (or `cable/windows` depending on your usecase)
-2. [optional] add a screenshot of the channel in `assets/channels/<os>/` (e.g. `assets/channels/unix/my_channel.png`).
-3. push your commit and create a PR
-4. the ci will automatically generate the documentation for your channel and pick up the screenshot if available.
 
 ## Hot Topics
 
+- contributing new channels
+- improving code documentation
 - shell integration (autocomplete, keybindings)
 - packaging for various linux package managers (dnf, ...)
 - sorting options
-- ansi parsing
-- contributing new channels
-- improving code documentation

website/docusaurus.config.ts

@@ -89,21 +89,10 @@ const config: Config = {
         src: "img/tv-icon-80.png",
       },
       items: [
-        {
-          type: "docSidebar",
-          position: "left",
-          label: "docs",
-          sidebarId: "docSidebar",
-        },
         {
           href: "https://github.com/alexpasmantier/television/releases",
           label: "releases",
-          position: "left",
-        },
-        {
-          href: "https://crates.io/crates/television",
-          label: "crates.io",
-          position: "left",
+          position: "right",
         },
         {
           href: "https://github.com/alexpasmantier/television",

website/src/components/HomepageFeatures/index.tsx

@@ -7,6 +7,7 @@ type FeatureItem = {
   title: string;
   imgSrc: string;
   description: ReactNode;
+  link?: string;
 };
 
 const FeatureList: FeatureItem[] = [
@@ -15,29 +16,27 @@ const FeatureList: FeatureItem[] = [
     imgSrc: require("@site/static/img/files-toml.png").default,
     description: (
       <>
-        <a href="/docs/Users/channels">
-          Create your own channels in a simple TOML file and search through
-          files, git repositories, environment variables, docker images, and
-          more.
-        </a>
+        Create your own channels in a simple TOML file and search through
+        files, git repositories, environment variables, docker images, and
+        more.
       </>
     ),
+    link: "/docs/Users/channels",
   },
   {
     title: "Integrates with your shell",
     imgSrc: require("@site/static/img/zsh-integration.png").default,
     description: (
       <>
-        <a href="/docs/Users/shell-integration">
-          Television integrates with your shell and provides autocompletion that
-          is both extensible and configurable to use your own channels.
-        </a>
+        Television integrates with your shell and provides autocompletion that
+        is both extensible and configurable to use your own channels.
       </>
     ),
+    link: "/docs/Users/shell-integration",
   },
 ];
 
-function Feature({ title, imgSrc, description }: FeatureItem) {
+function Feature({ title, imgSrc, description, link }: FeatureItem) {
   return (
     <div className={clsx("col col--6", styles.featureItem)}>
       <div
@@ -46,7 +45,7 @@ function Feature({ title, imgSrc, description }: FeatureItem) {
           styles.titleContainer
         )}
       >
-        <Heading as="h3">{title}</Heading>
+        <Heading as="h3"><a href={link}>{title}</a></Heading>
         <p>{description}</p>
       </div>
       <div className="featureImageContainer">

website/src/components/HomepageFeatures/styles.module.css

@@ -35,6 +35,15 @@ html[data-theme='dark'] .featureSvg {
   text-align: center;
 }
 
+.titleContainer a {
+  color: var(--ifm-color-primary-darkest);
+}
+
+.titleContainer a:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
 .featureItem {
   display: flex;
   flex-direction: column;
@@ -45,4 +54,4 @@ html[data-theme='dark'] .featureSvg {
   .featuresRow {
     gap: 2rem;
   }
-}
+}

website/src/pages/index.module.css

@@ -9,7 +9,7 @@
   position: relative;
   flex-direction: column;
   overflow: hidden;
-  margin-bottom: 6rem;
+  margin-bottom: 3rem;
 }
 
 .heroContent {