Add Docsify web viewer and search functionality for PostgreSQL docs (#23)

mathncode-sid · web-flow · commit d63fcabc1d61 · 2025-10-04T14:01:32.000+06:00
* Added exercise directory and beginner questions on PostgreSQL

* [feat]: Add Docsify web viewer and search functionality for PostgreSQL docs

- Added  for Docsify web view
- Added  for sidebar navigation
- Added  for styling
- Enabled search functionality
- PDF download explored but not implemented
- Prepared repo for GitHub Pages hosting
diff --git a/_sidebar.md b/_sidebar.md
@@ -0,0 +1,23 @@
+* [Home](README.md)
+* [Declaration](declaration.md)
+* [Learning Path](LEARNING-PATH.md)
+* **Installation**
+  * [Installation](psql/installation.md)
+* **Basics**
+  * [Data Types](psql/data-types.md)
+  * [Database](psql/database.md)
+  * [Functions](psql/functions.md)
+  * [Queries](psql/query.md)
+  * [Table & Schema](psql/table-schema.md)
+  * [Window Functions](psql/Window.md)
+* **Advanced**
+  * [Clauses](psql/clauses.md)
+  * [CTE](psql/CTE.md)
+  * [Advance](psql/advance.md)
+* **JSON / APIs**
+  * [JSON Guide](psql/json-jsonb-guide.md)
+  * [psql in ExpressJS](psql/psql-in-expressJS-guide.md)
+  * [my-sql-query](my-sql-query.md)
+  * [psql-query](psql-query.md)
+* **Exercises**
+  * [Beginner Exercises](exercises/beginner-exercises.md)
diff --git a/assets/custom.css b/assets/custom.css
@@ -0,0 +1,16 @@
+/* Example styling for branding */
+body::before {
+  content: "Learn PostgreSQL";
+  display: block;
+  text-align: center;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 10px;
+  background-color: #3F51B5;
+  color: white;
+}
+
+a[href$=".pdf"] {
+  color: #ff5722;
+  font-weight: bold;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Learn PostgreSQL</title>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css" />
+  <link rel="stylesheet" href="assets/custom.css" />
+</head>
+<body>
+  <!-- Docsify container -->
+  <div id="app"></div>
+
+  <!-- Docsify Core -->
+  <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
+
+  <!-- Docsify Configuration -->
+  <script>
+    window.$docsify = {
+      name: 'Learn PostgreSQL',
+      repo: 'fahimahammed/learn-postgresql',
+      loadSidebar: '_sidebar.md',  // Ensure _sidebar.md exists in the repo root
+      subMaxLevel: 2,
+      search: 'auto',
+      themeColor: '#3F51B5'
+    }
+  </script>
+
+  <!-- Docsify Plugins -->
+  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
+</body>
+</html>
