diff --git a/CONFIG.md b/CONFIG.md
index ceda4e6d..ce1cd85a 100644
--- a/CONFIG.md
+++ b/CONFIG.md
@@ -57,6 +57,9 @@ If "y", clicking on graph link replaces current tab. Else, page is opened in new
### `STRICT_LINE_BREAKS`
Whether to use standard Markdown strict line breaks (single line breaks ignored unless followed by 2 whitespaces), or to use Obsidian-style line breaks. If "y", strict line break is used, else, Obsidian-style is used. Users who use LaTEX must set this to "y" for equations to render properly. Default: "y".
+### `SIDEBAR_COLLAPSED`
+Whether sidebar sections should be collapsed by default. Default: "".
+
## Animations
`Animate.css`, `Hover.css` and `CSShake` classes can be used in all fields where HTML + CSS are supported. Refer to example repo's setup on how to do so.
diff --git a/README.md b/README.md
index c970bbb9..a82bb5c2 100644
--- a/README.md
+++ b/README.md
@@ -9,58 +9,72 @@ A free (but better?) alternative to Obsidian Publish.
> This repo contains an easy-to-use (read: simplistic) solution for converting an Obsidian Personal Knowledge Management System (read: bunch of random Markdowns) into a Zola site.
Credits: This repo was forked from [Adidoks](https://github.com/aaranxu/adidoks).
+
Special Thanks: Wikilink parsing is powered by [obsidian-export](https://github.com/zoni/obsidian-export).
# Announcements
-**v1.2.0 More Features! 🥳**
+
+**v1.2.2 Collapsible Sidebar! 📄**
Bug Fixes:
-- Added the ability to deal with empty links (re-directed to 404 page)
-- Added the ability to deal with special characters in filenames
-- Added the ability to cope with overlapping name between sections and pages (so now u can have both `repeated/` and `repeated.md` in the same directory)
+- Breadcrumb List Schema had error (from Adidoks), now its fixed
+- Added instructions on automatic sitemap update to Google for search indexing
Improvements:
-- Ability to configure tab-opening behaviour when clicking on graph node (same / new tab)
-- Ability to configure line break parsing (strict vs Obsidian-style)
-- Ability to configure graph display preference, you can now choose to display only directly connected nodes!
-
-
-**v1.1.0 Thanks for the support and Feedback 💓**
-
-I never expected to receive such attention from my Reddit post. Thank you for supporting this project! I have heard your feedback and made some minor but urgent improvements. I will continue to implement the rest of the crucial requests over the next few days!
-- Subsections / subfolders are now supported up to 3 levels! And you can choose a cute symbol / emoji / HTML code to represent a subsection on your sidebar!
-- All page and section titles (i.e. file / folder names) can now contain HTML code. Not sure what's the use case but why not :)
-
-
-**v1.0.0 Big Release**
-- Graph view is now supported! I assume this is a highly sought-after feature, hence it would be turned on by default 🙂.
-- URLs are now slugified by deafult (to adhere to best practices)! This will change the links to some pages. For those who wish to keep your shared links valid, please disable slugify in `netlify.toml`. Sorry for the inconvenience 🙇.
-- Shameless promotion 😳. Sorry for adding a `Powered by obsidian-zola` line on your home page. But I believe most people who use this repo think that it should be made known to those who need it. I don't make any 💰 from this anyways.
-- Markdown link parsing bug fixes.
-- Major refactoring. Everything is typed and commented and properly wrapped in classes. It should be much more maintainable and forkable now 🍴.
-- Local development setup (on WSL) is provided. Just provide a `.data_path` that points to your Obsidian folder, install the dependencies and run `./local-run.sh`.
-
+- Sidebar collapse + option to set default collapse state (implemented for those few crazy people with over a thousand notes...)
# Setup
**Step 1: Setup Netlify**
+
- Turn your Obsidian vault folder into a Git repository
- Create a Netlify site pointing to that Git repository
**Step 2: Edit `netlify.toml`**
+
- Create `netlify.toml` in your Obsidian vault folder
- Copy the content from `netlify.example.toml` in this repo and replace the appropriate settings (`SITE_URL`, `REPO_URL` and `LANDING_PAGE` cannot be left empty).
**Step 3: You're Done 🎉!**
+
- Push your changes and get ready to become famous!
- Be Fancy: All text field settings in `netlify.toml` (e.g. `LANDING_TITLE`) supports HTML syntax. And I added `Animate.css` + `Hover.css` + `CSShake` for those of you who want to add a personal touch~
**Step 4: Issues & Feature Requests**
+
- If you encounter any issues, first refer to [Config+FAQ](https://github.com/ppeetteerrs/obsidian-zola/blob/main/CONFIG.md). If still unsolved, just post in the `Issues` tab. It would be good to include a copy of the error log found in the Netlify panel if the issue is related to deployment.
- If you have any feature request, do post an issue also. However, please this repo is intended as a one-file setup. Advanced features / detailed configurability will not be supported unless it is wanted by most users. However, I can provide help for you to implement a fork that suits your needs 🥂.
+**Step 5: (Optional Enhancement) Auto Sitemap Submit**
+
+To make your site more friendly to search engines, you can add a netlify plugin to automatically submit the new sitemap everytime you re-deploy the site. Just add the following to your `netlify.toml`. Remember to replace `baseUrl` with your `SITE_URL`.
+
+```toml
+[[plugins]]
+package = "netlify-plugin-submit-sitemap"
+
+[plugins.inputs]
+
+# The base url of your site (optional, default = main URL set in Netlify)
+baseUrl = "https://peteryuen.netlify.app/"
+
+# Path to the sitemap URL (optional, default = /sitemap.xml)
+sitemapPath = "/sitemap.xml"
+
+# Time in seconds to not submit the sitemap after successful submission
+ignorePeriod = 0
+
+# Enabled providers to submit sitemap to (optional, default = 'google', 'bing', 'yandex'). Possible providers are currently only 'google', 'bing', 'yandex'.
+providers = [
+ "google",
+ "bing",
+ "yandex",
+]
+```
+
+
# Example Site
> Do not copy `netlify.toml` from example site, it is unstable. Please reference from `netlify.example.toml`.
@@ -105,3 +119,4 @@ The [example site](https://peteryuen.netlify.app/) shows the capabilities of `ob
# WIPs / Ideas
- (Probably will do) Backlinks / Mentioned in
- (Maybe) Lottie animations?
+- (Dunno) Configurable collapse icon
diff --git a/convert.py b/convert.py
index df386968..7f6eaf98 100644
--- a/convert.py
+++ b/convert.py
@@ -1,7 +1,8 @@
import re
from typing import Dict, List, Tuple
-from utils import DocLink, DocPath, Settings, parse_graph, pp, raw_dir, site_dir
+from utils import (DocLink, DocPath, Settings, parse_graph, pp, raw_dir,
+ site_dir, write_settings)
if __name__ == "__main__":
@@ -72,3 +73,4 @@
pp(nodes)
pp(edges)
parse_graph(nodes, edges)
+ write_settings()
diff --git a/local-run.sh b/local-run.sh
index ddce1a4b..7cbb2dd6 100755
--- a/local-run.sh
+++ b/local-run.sh
@@ -5,11 +5,12 @@ export SITE_URL=local
export REPO_URL=local
export LANDING_PAGE=home
export SLUGIFY=y
-export HOME_GRAPH=
+export HOME_GRAPH=y
export PAGE_GRAPH=y
export LOCAL_GRAPH=y
export GRAPH_LINK_REPLACE=y
export STRICT_LINE_BREAKS=y
+export SIDEBAR_COLLAPSED=y
# Remove previous build and sync Zola template contents
rm -rf build
diff --git a/netlify.example.toml b/netlify.example.toml
index 820cc4f1..8dc22520 100644
--- a/netlify.example.toml
+++ b/netlify.example.toml
@@ -33,3 +33,5 @@ SLUGIFY = "y"
HOME_GRAPH = "y"
# (Optional, default true) Shows knowledge graph on every page. Put "" to disable.
PAGE_GRAPH = "y"
+# (Optional, default false) Whether sidebar sections should be collapsed by default.
+SIDEBAR_COLLAPSED = ""
diff --git a/utils.py b/utils.py
index abf2e81e..10820650 100644
--- a/utils.py
+++ b/utils.py
@@ -283,6 +283,7 @@ class Settings:
"LOCAL_GRAPH": "",
"GRAPH_LINK_REPLACE": "",
"STRICT_LINE_BREAKS": "y",
+ "SIDEBAR_COLLAPSED": "",
}
@classmethod
@@ -422,3 +423,22 @@ def parse_graph(nodes: Dict[str, str], edges: List[Tuple[str, str]]):
]
)
)
+
+
+# ---------------------------------------------------------------------------- #
+# Write Settings to Javascript #
+# ---------------------------------------------------------------------------- #
+def write_settings():
+ """
+ Writes settings to Javascript file.
+ """
+
+ with open(site_dir / "static/js/settings.js", "w") as f:
+ sidebar_collapsed = "true" if Settings.is_true("SIDEBAR_COLLAPSED") else "false"
+ f.write(
+ "\n".join(
+ [
+ f"var sidebar_collapsed={sidebar_collapsed}",
+ ]
+ )
+ )
diff --git a/zola/sass/common/_dark.scss b/zola/sass/common/_dark.scss
index 07899391..98f0e178 100644
--- a/zola/sass/common/_dark.scss
+++ b/zola/sass/common/_dark.scss
@@ -12,146 +12,146 @@ $link-color-dark: $blue-300;
$button-color-dark: $link-color-dark;
$focus-color-dark: lighten($link-color-dark, 2.5%);
-$navbar-dark-color: $body-color-dark;
-$navbar-dark-hover-color: $link-color-dark;
-$navbar-dark-active-color: $link-color-dark;
+$navbar-dark-color: $body-color-dark;
+$navbar-dark-hover-color: $link-color-dark;
+$navbar-dark-active-color: $link-color-dark;
/** Theme styles */
body.dark {
- background: $body-bg-dark;
- color: $body-color-dark;
+ background: $body-bg-dark;
+ color: $body-color-dark;
}
body.dark a {
- color: $link-color-dark;
+ color: $link-color-dark;
}
body.dark a.text-body {
- color: $body-color-dark !important;
+ color: $body-color-dark !important;
}
body.dark .btn-primary {
- @include button-variant($button-color-dark, $button-color-dark);
+ @include button-variant($button-color-dark, $button-color-dark);
- color: $body-bg-dark !important;
+ color: $body-bg-dark !important;
}
body.dark .btn-outline-primary {
- @include button-outline-variant($button-color-dark, $button-color-dark);
+ @include button-outline-variant($button-color-dark, $button-color-dark);
- color: $link-color-dark;
+ color: $link-color-dark;
}
body.dark .btn-outline-primary:hover {
- color: $body-bg-dark;
+ color: $body-bg-dark;
}
body.dark .navbar {
- background: $body-bg-dark;
- opacity: 0.975;
- border-bottom: 1px solid $border-dark;
+ background: $body-bg-dark;
+ opacity: 0.975;
+ border-bottom: 1px solid $border-dark;
}
body.dark.home .navbar {
- border-bottom: 0;
+ border-bottom: 0;
}
body.dark .navbar-light .navbar-brand {
- color: $navbar-dark-color !important;
+ color: $navbar-dark-color !important;
}
body.dark .navbar-light .navbar-nav .nav-link {
- color: $navbar-dark-color;
+ color: $navbar-dark-color;
}
body.dark .navbar-light .navbar-nav .nav-link:hover,
body.dark .navbar-light .navbar-nav .nav-link:focus {
- color: $navbar-dark-hover-color;
+ color: $navbar-dark-hover-color;
}
body.dark .navbar-light .navbar-nav .nav-link.disabled {
- color: $navbar-dark-disabled-color;
+ color: $navbar-dark-disabled-color;
}
body.dark .navbar-light .navbar-nav .show > .nav-link,
body.dark .navbar-light .navbar-nav .active > .nav-link,
body.dark .navbar-light .navbar-nav .nav-link.show,
body.dark .navbar-light .navbar-nav .nav-link.active {
- color: $navbar-dark-active-color;
+ color: $navbar-dark-active-color;
}
body.dark .navbar-light .navbar-text {
- color: $navbar-dark-color;
+ color: $navbar-dark-color;
}
body.dark .alert-primary a {
- color: $body-bg-dark;
+ color: $body-bg-dark;
}
body.dark .alert-warning {
- background: $body-overlay-dark;
- color: $body-color-dark;
+ background: $body-overlay-dark;
+ color: $body-color-dark;
}
body.dark .page-links a {
- color: $body-color-dark;
+ color: $body-color-dark;
}
body.dark .showcase-meta a {
- color: $body-color-dark;
+ color: $body-color-dark;
}
body.dark .showcase-meta a:hover,
body.dark .showcase-meta a:focus {
- color: $link-color-dark;
+ color: $link-color-dark;
}
body.dark .docs-link:hover,
body.dark .docs-link.active,
body.dark .page-links a:hover {
- text-decoration: none;
- color: $link-color-dark;
+ text-decoration: none;
+ color: $link-color-dark;
}
body.dark .navbar-light .navbar-text a {
- color: $navbar-dark-active-color;
+ color: $navbar-dark-active-color;
}
body.dark .docs-links h3.sidebar-link a,
body.dark .page-links h3.sidebar-link a {
- color: $body-color-dark;
+ color: $body-color-dark;
}
body.dark .navbar-light .navbar-text a:hover,
body.dark .navbar-light .navbar-text a:focus {
- color: $navbar-dark-active-color;
+ color: $navbar-dark-active-color;
}
body.dark .navbar .btn-link {
- color: $navbar-dark-color;
+ color: $navbar-dark-color;
}
body.dark .content .btn-link {
- color: $link-color-dark;
+ color: $link-color-dark;
}
body.dark .content .btn-link:hover {
- color: $link-color-dark;
+ color: $link-color-dark;
}
body.dark .navbar .btn-link:hover {
- color: $navbar-dark-hover-color;
+ color: $navbar-dark-hover-color;
}
body.dark .navbar .btn-link:active {
- color: $navbar-dark-active-color;
+ color: $navbar-dark-active-color;
}
body.dark .form-control.is-search {
- background: $body-overlay-dark;
+ background: $body-overlay-dark;
- /*
+ /*
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
@@ -160,174 +160,174 @@ body.dark .form-control.is-search {
}
body.dark .navbar-form::after {
- color: $gray-600;
- border: 1px solid $gray-800;
+ color: $gray-600;
+ border: 1px solid $gray-800;
}
body.dark .form-control {
- color: $gray-500;
+ color: $gray-500;
}
body.dark .form-control:focus {
- box-shadow: 0 0 0 0.2rem $focus-color-dark;
+ box-shadow: 0 0 0 0.2rem $focus-color-dark;
}
body.dark .border-top {
- border-top: 1px solid $border-dark !important;
+ border-top: 1px solid $border-dark !important;
}
@include media-breakpoint-up(lg) {
- body.dark .docs-sidebar {
- order: 0;
- border-right: 1px solid $border-dark;
- }
+ body.dark .docs-sidebar {
+ order: 0;
+ border-right: 1px solid $border-dark;
+ }
}
body.dark .docs-navigation {
- border-top: 1px solid $border-dark;
+ border-top: 1px solid $border-dark;
}
body.dark pre code::-webkit-scrollbar-thumb {
- background: $border-dark;
+ background: $border-dark;
}
body.dark code:not(.hljs) {
- background: $body-overlay-dark;
- color: $body-color-dark;
+ background: $body-overlay-dark;
+ color: $body-color-dark;
}
body.dark pre code:hover {
- scrollbar-width: thin;
- scrollbar-color: $border-dark transparent;
+ scrollbar-width: thin;
+ scrollbar-color: $border-dark transparent;
}
body.dark pre code::-webkit-scrollbar-thumb:hover {
- background: $border-dark;
+ background: $border-dark;
}
body.dark blockquote {
- border-left: 3px solid $border-dark;
+ border-left: 3px solid $border-dark;
}
body.dark .footer {
- border-top: 1px solid $border-dark;
+ border-top: 1px solid $border-dark;
}
body.dark .docs-links,
body.dark .docs-toc {
- scrollbar-width: thin;
- scrollbar-color: $body-bg-dark $body-bg-dark;
+ scrollbar-width: thin;
+ scrollbar-color: $body-bg-dark $body-bg-dark;
}
body.dark .docs-links::-webkit-scrollbar,
body.dark .docs-toc::-webkit-scrollbar {
- width: 5px;
+ width: 5px;
}
body.dark .docs-links::-webkit-scrollbar-track,
body.dark .docs-toc::-webkit-scrollbar-track {
- background: $body-bg-dark;
+ background: $body-bg-dark;
}
body.dark .docs-links::-webkit-scrollbar-thumb,
body.dark .docs-toc::-webkit-scrollbar-thumb {
- background: $body-bg-dark;
+ background: $body-bg-dark;
}
body.dark .docs-links:hover,
body.dark .docs-toc:hover {
- scrollbar-width: thin;
- scrollbar-color: $border-dark $body-bg-dark;
+ scrollbar-width: thin;
+ scrollbar-color: $border-dark $body-bg-dark;
}
body.dark .docs-links:hover::-webkit-scrollbar-thumb,
body.dark .docs-toc:hover::-webkit-scrollbar-thumb {
- background: $border-dark;
+ background: $border-dark;
}
body.dark .docs-links::-webkit-scrollbar-thumb:hover,
body.dark .docs-toc::-webkit-scrollbar-thumb:hover {
- background: $border-dark;
+ background: $border-dark;
}
body.dark .docs-links h3:not(:first-child) {
- border-top: 1px solid $border-dark;
+ border-top: 1px solid $gray-700;
}
body.dark a.docs-link {
- color: $body-color-dark;
+ color: $body-color-dark;
}
body.dark .page-links li:not(:first-child) {
- border-top: 1px dashed $border-dark;
+ border-top: 1px dashed $border-dark;
}
body.dark .card {
- background: $body-bg-dark;
- border: 1px solid $border-dark;
+ background: $body-bg-dark;
+ border: 1px solid $border-dark;
}
body.dark .card.bg-light {
- background: $body-overlay-dark !important;
+ background: $body-overlay-dark !important;
}
body.dark .navbar .menu-icon .navicon {
- background: $navbar-dark-color;
+ background: $navbar-dark-color;
}
body.dark .navbar .menu-icon .navicon::before,
body.dark .navbar .menu-icon .navicon::after {
- background: $navbar-dark-color;
+ background: $navbar-dark-color;
}
body.dark .logo-light {
- display: none !important;
+ display: none !important;
}
body.dark .logo-dark {
- display: inline-block !important;
+ display: inline-block !important;
}
body.dark .bg-light {
- background: darken($body-bg-dark, 1.5%) !important;
+ background: darken($body-bg-dark, 1.5%) !important;
}
body.dark .bg-dots {
- background-image: radial-gradient($dots-dark 15%, transparent 15%);
+ background-image: radial-gradient($dots-dark 15%, transparent 15%);
}
body.dark .text-muted {
- color: darken($body-color-dark, 7.5%) !important;
+ color: darken($body-color-dark, 7.5%) !important;
}
body.dark .alert-primary {
- background: $link-color-dark;
- color: $body-bg-dark;
+ background: $link-color-dark;
+ color: $body-bg-dark;
}
body.dark .figure-caption {
- color: $body-color-dark;
+ color: $body-color-dark;
}
body.dark table {
- @extend .table-dark;
+ @extend .table-dark;
}
body.dark .copy-status::after {
- content: "Copy";
- display: block;
- color: $body-color-dark;
+ content: "Copy";
+ display: block;
+ color: $body-color-dark;
}
body.dark .copy-status:hover::after {
- content: "Copy";
- display: block;
- color: $link-color-dark;
+ content: "Copy";
+ display: block;
+ color: $link-color-dark;
}
body.dark .copy-status:focus::after,
body.dark .copy-status:active::after {
- content: "Copied";
- display: block;
- color: $link-color-dark;
+ content: "Copied";
+ display: block;
+ color: $link-color-dark;
}
diff --git a/zola/sass/custom.scss b/zola/sass/custom.scss
new file mode 100644
index 00000000..e18ecc1f
--- /dev/null
+++ b/zola/sass/custom.scss
@@ -0,0 +1,25 @@
+.collapsible-section:hover {
+ cursor: pointer;
+ text-decoration: underline;
+}
+
+.collapsible-section:after {
+ content: "➕"; /* Unicode character for "plus" sign (+) */
+ font-size: 0.8rem;
+ float: right;
+}
+
+.collapsible-section.open:after {
+ content: "➖"; /* Unicode character for "minus" sign (-) */
+}
+
+.dark .collapsible-section:after,
+.dark .collapsible-section.open:after {
+ filter: brightness(150%);
+}
+
+/* Style the collapsible content. Note: hidden by default */
+.docs-links .collapsible-wrapper {
+ overflow: hidden;
+ transition: height 0.5s ease-out;
+}
diff --git a/zola/sass/layouts/_sidebar.scss b/zola/sass/layouts/_sidebar.scss
index 4878b58f..3449520e 100644
--- a/zola/sass/layouts/_sidebar.scss
+++ b/zola/sass/layouts/_sidebar.scss
@@ -1,121 +1,121 @@
.docs-links,
.docs-toc {
- scrollbar-width: thin;
- scrollbar-color: $white $white;
+ scrollbar-width: thin;
+ scrollbar-color: $white $white;
}
.docs-links::-webkit-scrollbar,
.docs-toc::-webkit-scrollbar {
- width: 5px;
+ width: 5px;
}
.docs-links::-webkit-scrollbar-track,
.docs-toc::-webkit-scrollbar-track {
- background: $white;
+ background: $white;
}
.docs-links::-webkit-scrollbar-thumb,
.docs-toc::-webkit-scrollbar-thumb {
- background: $white;
+ background: $white;
}
.docs-links:hover,
.docs-toc:hover {
- scrollbar-width: thin;
- scrollbar-color: $gray-200 $white;
+ scrollbar-width: thin;
+ scrollbar-color: $gray-200 $white;
}
.docs-links:hover::-webkit-scrollbar-thumb,
.docs-toc:hover::-webkit-scrollbar-thumb {
- background: $gray-200;
+ background: $gray-200;
}
.docs-links::-webkit-scrollbar-thumb:hover,
.docs-toc::-webkit-scrollbar-thumb:hover {
- background: $gray-200;
+ background: $gray-200;
}
.docs-links h3,
.page-links h3 {
- text-transform: uppercase;
- font-size: $font-size-base;
- margin: 1.25rem 0 0.5rem 0;
- padding: 1.5rem 0 0 0;
+ text-transform: uppercase;
+ font-size: $font-size-base;
+ margin: 1.25rem 0 0.5rem 0;
+ padding: 1.5rem 0 0 0;
}
.docs-links h4,
.page-links h4 {
- text-transform: uppercase;
- font-size: $font-size-base;
- margin: 1.50rem 0 0.5rem 0;
- padding: 0 0 0 0;
+ text-transform: uppercase;
+ font-size: $font-size-base;
+ margin: 1.5rem 0 0.5rem 0;
+ padding: 0 0 0 0;
}
.docs-links h5,
.page-links h5 {
- text-transform: uppercase;
- font-size: $font-size-base;
- margin: 1.25rem 0 0.5rem 0;
- padding: 0 0 0 0;
+ text-transform: uppercase;
+ font-size: $font-size-base;
+ margin: 1.25rem 0 0.5rem 0;
+ padding: 0 0 0 0;
}
@include media-breakpoint-up(lg) {
- .docs-links h3,
- .page-links h3 {
- margin: 1.125rem 1.5rem 0.75rem 0;
- padding: 1.375rem 0 0 0;
- }
- .docs-links h4,
- .page-links h4 {
- margin: 1.125rem 1.5rem 0.75rem 0;
- padding: 0 0 0 0;
- }
- .docs-links h5,
- .page-links h5 {
- margin: 1.125rem 1.5rem 0.75rem 0;
- padding: 0 0 0 0;
- }
+ .docs-links h3,
+ .page-links h3 {
+ margin: 1.125rem 1.5rem 0.75rem 0;
+ padding: 1.375rem 0 0 0;
+ }
+ .docs-links h4,
+ .page-links h4 {
+ margin: 1.125rem 1.5rem 0.75rem 0;
+ padding: 0 0 0 0;
+ }
+ .docs-links h5,
+ .page-links h5 {
+ margin: 1.125rem 1.5rem 0.75rem 0;
+ padding: 0 0 0 0;
+ }
}
.docs-links h3:not(:first-child) {
- border-top: 1px solid $gray-200;
+ border-top: 1px solid $gray-200;
}
a.docs-link {
- color: $body-color;
- display: block;
- padding: 0.125rem 0;
- font-size: $font-size-base;
+ color: $body-color;
+ display: block;
+ padding: 0.125rem 0;
+ font-size: $font-size-base;
}
.page-links li {
- margin-top: 0.375rem;
- padding-top: 0.375rem;
+ margin-top: 0.375rem;
+ padding-top: 0.375rem;
}
.page-links ul ul li {
- border-top: none;
- padding-left: 1rem;
- margin-top: 0.125rem;
- padding-top: 0.125rem;
+ border-top: none;
+ padding-left: 1rem;
+ margin-top: 0.125rem;
+ padding-top: 0.125rem;
}
.page-links li:not(:first-child) {
- border-top: 1px dashed $gray-200;
+ border-top: 1px dashed $gray-200;
}
.page-links a {
- color: $body-color;
- display: block;
- padding: 0.125rem 0;
- font-size: $font-size-base * 0.9375;
+ color: $body-color;
+ display: block;
+ padding: 0.125rem 0;
+ font-size: $font-size-base * 0.9375;
}
.docs-link:hover,
.docs-link.active,
.page-links a:hover {
- text-decoration: none;
- color: $link-color;
+ text-decoration: none;
+ color: $link-color;
}
.docs-links h3.sidebar-link,
@@ -124,9 +124,9 @@ a.docs-link {
.page-links h3.sidebar-link,
.page-links h4.sidebar-link,
.page-links h5.sidebar-link {
- text-transform: none;
- font-size: $font-size-md;
- font-weight: normal;
+ text-transform: none;
+ font-size: $font-size-md;
+ font-weight: normal;
}
.docs-links h3.sidebar-link a,
@@ -135,7 +135,7 @@ a.docs-link {
.page-links h3.sidebar-link a,
.page-links h4.sidebar-link a,
.page-links h5.sidebar-link a {
- color: $body-color;
+ color: $body-color;
}
.docs-links h3.sidebar-link a:hover,
@@ -144,6 +144,5 @@ a.docs-link {
.page-links h3.sidebar-link a:hover,
.page-links h4.sidebar-link a:hover,
.page-links h5.sidebar-link a:hover {
- text-decoration: underline;
+ text-decoration: underline;
}
-
diff --git a/zola/sass/main.scss b/zola/sass/main.scss
index 4230fc72..f2642dbe 100644
--- a/zola/sass/main.scss
+++ b/zola/sass/main.scss
@@ -30,3 +30,4 @@
/* @import custom styles */
@import "graph.scss";
+@import "custom.scss";
diff --git a/zola/static/js/main.js b/zola/static/js/main.js
index 825aab5d..9e66d7b0 100644
--- a/zola/static/js/main.js
+++ b/zola/static/js/main.js
@@ -1,32 +1,72 @@
// Set darkmode
function isDark() {
- return document.body.classList.contains('dark')
+ return document.body.classList.contains("dark");
}
-document.getElementById('mode').addEventListener('click', () => {
+document.getElementById("mode").addEventListener("click", () => {
+ document.body.classList.toggle("dark");
- document.body.classList.toggle('dark');
-
- localStorage.setItem('theme', isDark() ? 'dark' : 'light');
-
- // Update graph colors if exists
- if (graph) {
- graph.setOptions({
- nodes: {
- color: isDark() ? "#8c8e91" : "#dee2e6",
- font: {
- color: isDark() ? "#c9cdd1" : "#616469",
- strokeColor: isDark() ? "#c9cdd1" : "#616469",
- }
- }
- });
- }
+ localStorage.setItem("theme", isDark() ? "dark" : "light");
+ // Update graph colors if exists
+ if (graph) {
+ graph.setOptions({
+ nodes: {
+ color: isDark() ? "#8c8e91" : "#dee2e6",
+ font: {
+ color: isDark() ? "#c9cdd1" : "#616469",
+ strokeColor: isDark() ? "#c9cdd1" : "#616469",
+ },
+ },
+ });
+ }
});
// enforce local storage setting but also fallback to user-agent preferences
-if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+if (localStorage.getItem("theme") === "dark" || (!localStorage.getItem("theme") && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+ document.body.classList.add("dark");
+}
+
+// Collapsible sidebar code (it's ugly but I don't care)
+var sections = $(".collapsible-section");
+if (!sidebar_collapsed) {
+ sections.addClass("open");
+}
+
+// Add click listener to all collapsible sections
+for (let i = 0; i < sections.length; i++) {
+ // Initial setup
+ let wrapper = $(sections[i].nextElementSibling);
+ let wrapper_children = wrapper.find("> ul");
+
+ if (wrapper_children.length > 0) {
+ let page_list = $(wrapper_children[0]);
+ if (sidebar_collapsed) {
+ wrapper.height(0);
+ } else {
+ wrapper.addClass("open");
+ wrapper.height(page_list.outerHeight(true));
+ }
+ }
+
+ // Click listener
+ sections[i].addEventListener("click", function () {
+ // Toggle class
+ this.classList.toggle("open");
- document.body.classList.add('dark');
+ // Change wrapper height and class
+ let wrapper = $(sections[i].nextElementSibling);
+ let wrapper_children = wrapper.find("> ul");
+ if (wrapper_children.length > 0) {
+ let page_list = $(wrapper_children[0]);
+ if (wrapper.hasClass("open")) {
+ wrapper.removeClass("open");
+ wrapper.height(0);
+ } else {
+ wrapper.addClass("open");
+ wrapper.height(page_list.outerHeight(true));
+ }
+ }
+ });
}
diff --git a/zola/templates/macros/docs-sidebar.html b/zola/templates/macros/docs-sidebar.html
index e2bda6b1..c1f942fb 100644
--- a/zola/templates/macros/docs-sidebar.html
+++ b/zola/templates/macros/docs-sidebar.html
@@ -4,45 +4,53 @@
{% set index_path = current_section ~ "/_index.md" | trim_start_matches(pat="/") %}
{% set index = get_section(path=index_path) %}
{% if index.pages %}
- {{ index.title }}
-
+ {{ index.title }}
+
{% endif %}
{% if index.subsections %}
{% for s in index.subsections %}
{% set subsection = get_section(path=s) %}
{% if subsection.pages %}
- {{ subsection.extra.sidebar | safe }}
-
+ {{ subsection.extra.sidebar | safe }}
+
{% endif %}
{% if subsection.subsections %}
{% for s in subsection.subsections %}
{% set subsubsection = get_section(path=s) %}
{% if subsubsection.pages %}
- {{ subsubsection.extra.sidebar | safe }}
-
+ {{ subsubsection.extra.sidebar | safe }}
+
{% endif %}
{% if subsubsection.subsections %}
{% for s in subsubsection.subsections %}
{% set subsubsubsection = get_section(path=s) %}
{% if subsubsubsection.pages %}
- {{ subsubsubsection.extra.sidebar | safe }}
-
+ {{ subsubsubsection.extra.sidebar | safe }}
+
{% endif %}
{% endfor %}
{% endif %}
diff --git a/zola/templates/macros/head.html b/zola/templates/macros/head.html
index 229f5132..5d89ffab 100644
--- a/zola/templates/macros/head.html
+++ b/zola/templates/macros/head.html
@@ -199,50 +199,14 @@
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
- {% if page_path == "/" %}
- {
- "@type": "ListItem",
- "position": 1 ,
- "name": "Home",
- "item": "{{ url_item | safe }}"
- },
- {% else %}
- {% set paths = page_path | trim_start_matches(pat="/") | trim_end_matches(pat="/") | split(pat="/") %}
- {% for val in paths %}
- {% set name_array = val | split(pat="-") %}
- {% set_global str = "" %}
- {% for val in name_array %}
- {% set cap_val = val | capitalize %}
- {% set_global str = str ~ cap_val ~ " " %}
- {% endfor %}
- {% set name = str | trim_end_matches(pat=" ") | title %}
- {% if not index %}
- {
- "@type": "ListItem",
- "position": 1 ,
- "name": "Home",
- "item": "{{ url_item | safe }}"
- },
- {% set_global index = 2 %}
- {% set_global url_item = url_item ~ val ~ "/" %}
- {
- "@type": "ListItem",
- "position": {{ index }} ,
- "name": "{{ name }}",
- "item": "{{ url_item | safe }}"
- },
- {% else %}
- {% set_global index = index + 1 %}
- {% set_global url_item = url_item ~ val ~ "/" %}
- {
- "@type": "ListItem",
- "position": {{ index }} ,
- "name": "{{ name }}",
- "item": "{{ url_item | safe }}"
- },
- {% endif %}
- {% endfor %}
- {% endif %}
+ "itemListElement": [
+ {
+ "@type": "ListItem",
+ "position": 1 ,
+ "name": "Home",
+ "item": "{{ url_item | safe }}"
+ }
+ ]
}
diff --git a/zola/templates/macros/javascript.html b/zola/templates/macros/javascript.html
index 6d00f56b..37321839 100644
--- a/zola/templates/macros/javascript.html
+++ b/zola/templates/macros/javascript.html
@@ -1,4 +1,6 @@
{% macro javascript() %}
+
+
{% if config.build_search_index %}