task: documentation added for components

paganotoni · Jan 19, 2024 · e863e51 · e863e51
1 parent 939f679
commit e863e51
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 25 deletions.
diff --git a/docs/assets/content.png b/docs/assets/content.png
diff --git a/docs/assets/search.png b/docs/assets/search.png
diff --git a/docs/assets/sidebar.png b/docs/assets/sidebar.png
diff --git a/docs/getting_started/_meta.md → docs/basics/_meta.md b/docs/getting_started/_meta.md → docs/basics/_meta.md
diff --git a/docs/basics/anatomy_of_doco.md b/docs/basics/anatomy_of_doco.md
@@ -0,0 +1,19 @@
+---
+title: Anatomy of Doco
+index: 0
+---
+
+Before going into the details of how to use Doco, let's take a look at the anatomy of a Doco document.
+A regular doco site looks like this:
+
+![Doco Preview](../assets/preview.png "Preview of Doco")
+
+Which includes the following elements:
+
+- The top navigation bar
+- The sidebar
+- The main content
+
+Each of these contains other components that we will go over in the following sections.
+
+
diff --git a/docs/basics/content.md b/docs/basics/content.md
@@ -0,0 +1,15 @@
+---
+title: Content Section
+index: 3
+---
+
+The content section is probably the most important part of the documentation site. It is the place where the content is displayed. Content is converted from markdown to HTML and displayed in the main content section. It looks like this:
+
+![Content](<../assets/content.png>)
+
+Content can include:
+- Links
+- Images
+- Videos
+
+And is formatted by doco accordingly.
diff --git a/docs/basics/sidebar.md b/docs/basics/sidebar.md
@@ -0,0 +1,34 @@
+---
+index: 2
+---
+
+The sidebar contains three elements:
+
+1. The search component
+2. The quick links
+3. The navigation
+
+![Side Bar](../assets/sidebar.png "Side Bar")
+
+Let's go over each of these:
+
+##### Search component
+
+The search component is composed of a button (on top of the sidebar) that triggers a search box. The search box looks in the entire documentation site and display the results in its modal. 
+
+![Search Component](../assets/search.png "Search Component")
+
+The search bar can be triggered by clicking on the search button or by pressing `Ctrl + K` on the keyboard.
+
+##### Quick links
+
+The quick links are a list of links that are displayed on the sidebar. They are generated from the `quick_links` field in the root `_meta.md` file. It is a list of links that can be used to link to internal resources. Some examples could be:
+
+- Link to the getting started page (`/getting_started.html`)
+- Link to the installation page (`/installation.html`)
+
+##### Navigation
+
+The navigation is a list of links to the pages in your site. It is generated automatically from the pages in your site. It  creates **one level** of navigation based on folders and pages inside. Files starting with underscore (p.e. _meta.md) are ignored by the navigation builder.
+
+
diff --git a/docs/getting_started/anatomy_of_doco.md → docs/basics/top_navigation.md b/docs/getting_started/anatomy_of_doco.md → docs/basics/top_navigation.md
@@ -1,23 +1,15 @@
 ---
-title: Anatomy of Doco
+title: Top navigation bar
+index: 1
 ---
 
-Before going into the details of how to use Doco, let's take a look at the anatomy of a Doco document.
-A regular doco site looks like this:
-
-![Doco Preview](../assets/preview.png "Preview of Doco")
-
-Lets break down the anatomy of a Doco document:
-
-### Top navigation bar
-
 The top navigation bar is a list of links to the pages in your site. It is generated automatically from the pages in your site.
 
 ![Top Navigation Bar](../assets/top-bar.png "Top Bar")
 
 It contains (left to right):
 - The logo of the site
-- The anouncement bar
+- The announcement bar
 - The external links 
 - The project github link
 
@@ -48,15 +40,3 @@ Consider that links are added right to left. So the first link will be the right
 
 ##### Project github link
 As the name indicates, this is a link to the github page of the project. It is generated from the `github` field in the root `_meta.md` file. It can be customized there. It links to the root of the documentation site.
-
-### Sidebar
-
-The sidebar contains three elements:
-
-- The search component
-- The quick links
-- The table of contents
-
-Let's go over each of these:
-
-##### Search component
diff --git a/docs/getting_started/getting_started.md → docs/getting_started.md b/docs/getting_started/getting_started.md → docs/getting_started.md
@@ -1,6 +1,6 @@
 ---
 title: Getting Started
-index: 1
+index: 2
 ---
 Doco is delivered as a self-contained binary, making its usage and integration straightforward. The first step in utilizing Doco's full potential is to install this binary, which enables access to all its features, from converting markdown files to integrating with continuous integration workflows. This binary-focused approach ensures a streamlined and efficient user experience.
 

diff --git a/docs/index.md b/docs/index.md
@@ -1,5 +1,6 @@
 ---
 title: "Doco"
+index: 1
 ---
 
 Introducing Doco: a practical and adaptable documentation generator for entrepreneurs and software developers. Doco streamlines the conversion of markdown files into a clean, static website, focusing on efficiency and ease of use. It's designed to let you concentrate on creating high-quality documentation, removing the hassle of complex publishing processes.
@@ -11,4 +12,4 @@ With user-friendly features like sidebar navigation and a search component, Doco
 ![Doco Preview](assets/preview.png "Preview of Doco")
 
 **Next**:
-[Getting Started](/getting_started/getting_started.html)
+[Getting Started](/getting_started.html)