docs: Made the landing page more responsive (#605)

.github/workflows/cd.yml

@@ -285,7 +285,7 @@ jobs:
             "aarch64-unknown-linux-gnu:arm64"
           )
           ROOT_DIR=$(pwd)
-          APT_DIR=$ROOT_DIR/apt
+          APT_DIR=$ROOT_DIR/website/static/apt
           REPREPRO_DIR=$APT_DIR/reprepro
           DISTS_STABLE_DIR=$APT_DIR/dists/stable
           DEB_STABLE_DIR=$APT_DIR/deb/stable

CONTRIBUTING.md

@@ -6,6 +6,10 @@ Please make sure to read and follow our [Code of Conduct](CODE_OF_CONDUCT.md) to
 
 If you're not sure where to start, take a look at the [Hot Topics](#hot-topics) section for some ideas on what you could work on.
 
+# Docs contributing
+
+To contribute to the docs, please refer to [Contributing to Docs](website/CONTRIBUTING.md) in the `website` directory. This will guide you through the process of setting up the documentation environment and making changes.
+
 ## Getting started
 
 ### Prerequisites

docs/01-Users/04-keybindings.md

@@ -23,8 +23,9 @@ These keybindings are all configurable via tv's configuration file (see [Configu
 
 Following this are some configuration presets you can use for your bindings. Most of these will probably match an existing program.
 
-> [!NOTE]
-> **This list is maintained by the community, so feel free to contribute your own ideas too! 😊**
+:::note
+**This list is maintained by the community, so feel free to contribute your own ideas too! 😊**
+:::
 
 ## Emacs
 

website/CONTRIBUTING.md

@@ -0,0 +1,36 @@
+# Contributing to Docs
+
+Thank you for your interest in contributing to the documentation! Here are some guidelines to help you get started.
+
+## Pre-requisites
+
+Before contributing, please ensure you have the following set up:
+
+1. Make sure you are in the `website` directory of the project. (`cd website`)
+2. We are using a specific version of Node, just to make sure everything works as expected. You can use [nvm](https://github.com/nvm-sh/nvm) to use the correct version:
+   ```bash
+   nvm use
+   ```
+3. We are using [pnpm](https://pnpm.io/) as our package manager. You can install it, and use the expected version, via `corepack`:
+   ```bash
+   corepack enable
+   ```
+4. Now you are ready to install the project dependencies:
+   ```bash
+   pnpm install
+   ```
+
+## Making Changes
+
+Once you have the pre-requisites set up, you can run the app:
+
+```bash
+pnpm start
+```
+
+> [!NOTE]
+> If you're using VSCode, you should add the website directory to your workspace. File -> Add Folder to Workspace... - Select the `website` directory. This will make TypeScript work correctly, since it will read the `tsconfig.json` file from the `website` directory, as if it were the root of the project.
+
+The landing page is located at [`src/pages/index.tsx`](./src/pages/index.tsx). You can edit this file to make changes to the landing page.
+
+And to change the docs, you can edit the files in the [`docs`](../docs) directory. The documentation is written in Markdown, so you can use standard Markdown syntax to format your content, or you can use MDX to include React components in your documentation.

website/README.md

@@ -1,41 +1,3 @@
 # Website
 
 This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
-
-## Installation
-
-```bash
-pnpm
-```
-
-## Local Development
-
-```bash
-pnpm start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-## Build
-
-```bash
-pnpm build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-## Deployment
-
-Using SSH:
-
-```bash
-USE_SSH=true pnpm deploy
-```
-
-Not using SSH:
-
-```bash
-GIT_USER=<Your GitHub username> pnpm deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website/package.json

@@ -1,7 +1,6 @@
 {
   "name": "television-website",
-  "version": "0.1.0",
-  "private": true,
+  "version": "1.0.0",
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",

website/src/css/custom.css

@@ -54,25 +54,10 @@
     "ROND" 0;
 }
 
-.navbar__logo {
-  margin-left: 1rem;
-}
-
-.navbar__title {
-  color: var(--ifm-color-primary-darkest);
-  margin-right: 2rem;
-  margin-left: 0.5rem;
-}
-
-.navbar__item {
-  color: var(--ifm-color-primary-lightest);
-  font-size: 1.3rem;
-  font-weight: 400;
-}
-
-.navbar__item:hover {
-  color: var(--ifm-color-primary-darker);
-  text-decoration: none;
+@media screen and (max-width: 576px) {
+  .navbar {
+    font-size: 1.2rem;
+  }  
 }
 
 .hero {
@@ -80,61 +65,12 @@
   margin-bottom: 4rem;
 }
 
-.hero__title {
-  color: var(--ifm-font-color-base);
-  margin-bottom: 0;
-  font-family: "Doto", sans-serif;
-  font-size: 3rem;
-  font-optical-sizing: auto;
-  font-weight: 800;
-  font-style: normal;
-  font-variation-settings:
-    "ROND" 0;
-}
-
-.hero__subtitle {
-  color: var(--ifm-font-color-secondary);
-
-  font-family: "Ubuntu Mono", monospace;
-  font-weight: 400;
-  font-style: italic;
-  font-size: 1.3rem;
-  margin-bottom: 6rem;
-  margin-top: 0rem;
-}
-
 .footer {
   background-color: var(--ifm-background-color);
   color: var(--ifm-font-color-base);
   border-top: 3px solid var(--ifm-color-primary-darkest);
 }
 
-.button-mainpage {
-  border: 1px solid var(--ifm-color-primary-darker);
-  outline: none;
-  background-color: var(--ifm-background-color);
-  padding: 10px 20px;
-  margin: auto;
-  font-weight: 800;
-  font-family: "Doto", sans-serif;
-  font-size: 1.2rem;
-  color: var(--ifm-font-color-base);
-  border-radius: 6px;
-  transition: all ease 0.1s;
-  box-shadow: 0px 5px 0px 0px var(--ifm-color-primary-darker);
-}
-
-.button-mainpage:hover {
-  text-decoration: none;
-  background-color: var(--ifm-font-color-base);
-  color: var(--ifm-background-color);
-}
-
-.button-mainpage:active {
-  box-shadow: 0px 0px 0px 0px var(--ifm-font-color-base);
-  transform: translateY(5px);
-}
-
 nav.menu {
   border-right: 1px solid var(--ifm-color-primary-darkest);
   padding-right: 1rem;

website/src/pages/index.module.css

@@ -4,10 +4,12 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 4rem 2rem 0 2rem;
   text-align: center;
   position: relative;
+  flex-direction: column;
   overflow: hidden;
+  margin-bottom: 6rem;
 }
 
 .heroContent {
@@ -15,19 +17,31 @@
   align-items: stretch;
   justify-content: center;
   gap: 2rem;
-  flex-wrap: wrap; /* Allows stacking on small screens */
   margin-top: 2rem;
-}
-
-.heroImage {
-  flex: 0 0 auto;
-  max-width: 70%;
+  padding: 0 2rem;
 }
 
 .heroImageImg {
   width: 100%;
   height: auto;
   display: block;
+  max-width: 900px;
+}
+
+@media screen and (max-width: 1440px) {
+  .heroContent {
+    flex-direction: column;
+  }
+
+  .heroImageImg {
+    max-width: 100%;
+  }
+}
+
+.heroImage {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 900px;
 }
 
 .heroAbout {
@@ -36,7 +50,6 @@
   flex-direction: column;
   justify-content: space-between;
   flex: 1 1 0;
-  max-width: 65%;
   min-width: 350px;
   color: var(--ifm-color-primary);
   font-family: "Ubuntu Mono", monospace;
@@ -54,11 +67,70 @@
   font-weight: 600;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
+.heroTitle {
+  color: var(--ifm-font-color-base);
+  margin-bottom: 0;
+  font-family: "Doto", sans-serif;
+  font-size: 3rem;
+  font-optical-sizing: auto;
+  font-weight: 800;
+  font-style: normal;
+  font-variation-settings:
+    "ROND" 0;
+}
+
+.heroSubtitle {
+  color: var(--ifm-font-color-secondary);
+  font-family: "Ubuntu Mono", monospace;
+  font-weight: 400;
+  font-style: italic;
+  font-size: 1.3rem;
+  margin-top: 0rem;
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 576px) {
+  .heroTitle {
+    font-size: 2.5rem;
   }
 
+  .heroSubtitle {
+    font-size: 1.1rem;
+  }
+
+  .heroContent {
+    padding: 0;
+  }
+}
+
+.buttonGettingStarted {
+  border: 1px solid var(--ifm-color-primary-darker);
+  outline: none;
+  background-color: var(--ifm-background-color);
+  padding: 10px 20px;
+  margin: auto;
+  font-weight: 800;
+  font-family: "Doto", sans-serif;
+  font-size: 1.2rem;
+  color: var(--ifm-font-color-base);
+  border-radius: 6px;
+  transition: all ease 0.1s;
+  box-shadow: 0px 5px 0px 0px var(--ifm-color-primary-darker);
+}
+
+.buttonGettingStarted:hover {
+  text-decoration: none;
+  background-color: var(--ifm-font-color-base);
+  color: var(--ifm-background-color);
+}
+
+.buttonGettingStarted:active {
+  box-shadow: 0px 0px 0px 0px var(--ifm-font-color-base);
+  transform: translateY(5px);
+}
+
+
+@media screen and (max-width: 996px) {
   .heroAbout {
     padding-bottom: 0;
   }
@@ -80,3 +152,7 @@
   text-align: center;
   display: block;
 }
+
+.main {
+  margin-bottom: 3rem;
+}

website/src/pages/index.tsx

@@ -6,57 +6,15 @@ import Layout from "@theme/Layout";
 import Heading from "@theme/Heading";
 
 import styles from "./index.module.css";
-import HomepageFeatures from "../components/HomepageFeatures";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.heroContent}>
-          <div className={styles.heroImage}>
-            <img
-              src={require("@site/static/img/tv-transparent.png").default}
-              alt="Television"
-              className={styles.heroImageImg}
-            />
-          </div>
-          <div className={styles.heroAbout}>
-            <div>
-              <p>
-                Television is a cross-platform, fast and extensible fuzzy finder
-                for the terminal.
-              </p>
-              <p>
-                It integrates with your shell and lets you quickly search
-                through any kind of data source (files, git repositories,
-                environment variables, docker images, you name it) using a fuzzy
-                matching algorithm and is designed to be extensible.
-              </p>
-              <p>
-                It is inspired by the neovim{" "}
-                <a href="https://github.com/nvim-telescope/telescope.nvim">
-                  telescope
-                </a>{" "}
-                plugin and leverages{" "}
-                <a href="https://github.com/tokio-rs/tokio">tokio</a> and the
-                nucleo matcher used by{" "}
-                <a href="https://helix-editor.com/">helix</a> to ensure optimal
-                performance.
-              </p>
-            </div>
-            <div className={styles.buttons}>
-              <Link className="button-mainpage" to="/docs/Users/installation">
-                Getting Started
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
+      <Heading as="h1" className={styles.heroTitle}>
+        {siteConfig.title}
+      </Heading>
+      <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
     </header>
   );
 }
@@ -64,8 +22,51 @@ function HomepageHeader() {
 export default function Home(): ReactNode {
   return (
     <Layout description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>{/* <HomepageFeatures /> */}</main>
+      <div className={clsx("container", styles.main)}>
+        <HomepageHeader />
+        <main>
+          <div className={styles.heroContent}>
+            <img
+              src={require("@site/static/img/tv-transparent.png").default}
+              alt="Television"
+              className={styles.heroImageImg}
+            />
+            <div className={styles.heroAbout}>
+              <div>
+                <p>
+                  Television is a cross-platform, fast and extensible fuzzy
+                  finder for the terminal.
+                </p>
+                <p>
+                  It integrates with your shell and lets you quickly search
+                  through any kind of data source (files, git repositories,
+                  environment variables, docker images, you name it) using a
+                  fuzzy matching algorithm and is designed to be extensible.
+                </p>
+                <p>
+                  It is inspired by the neovim{" "}
+                  <a href="https://github.com/nvim-telescope/telescope.nvim">
+                    telescope
+                  </a>{" "}
+                  plugin and leverages{" "}
+                  <a href="https://github.com/tokio-rs/tokio">tokio</a> and the
+                  nucleo matcher used by{" "}
+                  <a href="https://helix-editor.com/">helix</a> to ensure
+                  optimal performance.
+                </p>
+              </div>
+              <div className={styles.buttons}>
+                <Link
+                  className={styles.buttonGettingStarted}
+                  to="/docs/Users/installation"
+                >
+                  Getting Started
+                </Link>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
     </Layout>
   );
 }