Merge pull request #416 from sylhare/navbar

Enhance navbar

README.md

@@ -307,34 +307,39 @@ Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/po
 
 #### Layout: Post
 
-These are the basic features you can use with the `post` layout.
+These are the basic features you can use with the `post` layout, in the comment the `Opt` means that
+it is optional.
 
 ```yml
 
 ---
 layout: post
 title: Hello World                                # Title of the page
-hide_title: true                                  # Hide the title when displaying the post, but shown in lists of posts
-feature-img: "assets/img/sample.png"              # Add a feature-image to the post
-thumbnail: "assets/img/thumbnails/sample-th.png"  # Add a thumbnail image on blog view
-color: rgb(80,140,22)                             # Add the specified color as feature image, and change link colors in post
-bootstrap: true                                   # Add bootstrap to the page
-tags: [sample, markdown, html]
+hide_title: true                                  # [Opt] Hide the title when displaying the post, but shown in lists of posts
+feature-img: "assets/img/sample.png"              # [Opt] Add a feature-image to the post
+thumbnail: "assets/img/thumbnails/sample-th.png"  # [Opt] Add a thumbnail image on blog view
+color: rgb(80,140,22)                             # [Opt] Add the specified colour as feature image, and change link colors in post
+position: 1                                       # [Opt] Set position on the menu navigation bar
+tags: [sample, markdown, html]                    # [Opt] Add tags to the page
 ---
 ```
 
 With `thumbnail`, you can add a smaller image than the `feature-img`. 
-If you don't have a thumbnail you can still use the same image as the feature one. Or use the gulp task to create it.
+If you don't have a thumbnail, you can still use the same image as the feature one. Or use the gulp task to create it.
+
+If you don't use a feature image, but `color`, the transparent background is set comes from `lineart.png`. 
+You can edit it in the config file (`_config.yml > color_image`). If you want another one, put it in `/assets/img` as well. 
 
-The background used when `color` is set comes from `lineart.png` from [xukimseven](https://github.com/xukimseven) 
-you can edit it in the config file (`_config.yml > color_image`). If you want another one, put it in `/assets/img` as well. 
+For position, if not set on all pages, it will be by alphabetical order without `position` then by `position` order.
+If two pages have the same position number, the order is decided by alphabetical order on the page title.
 
-The **bootstrap** is not mandatory and is only useful if you want to add bootstrapped content in your page. 
+There's also `bootstrap: true` which is not mandatory and only useful if you want to add HTML content in your page that
+requires [bootstrap](http://getbootstrap.com/).
 It will respect the page and theme layout, mind the padding on the sides.
 
 #### Post excerpt
 
-The [excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) are the first lines of an article that is display on the blog page. 
+The [excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) are the first lines of an article that is displayed on the blog page. 
 The length of the excerpt has a default of around `250` characters or can be manually set in the post using:
 
 in `conflig.yml`:
@@ -408,7 +413,7 @@ If your posts are not displaying ensure that you have added the line `paginate:
 
 ### Layout: Page 📄
 
-The page layout have a bit more features explained here.
+The page layout has a bit more features explained here.
 
 ```yml
 
@@ -424,7 +429,7 @@ tags: [sample, markdown, html]
 ---
 ```
 
-The hide only hides your page from the navigation bar, it is however still generated and can be access through its link. 
+The hide only hides your page from the navigation bar, it is, however, still generated and can be accessed through its link. 
 
 ### Feature: Portfolio 🗂
 
@@ -444,9 +449,11 @@ title : Portfolio
 
 #### Portfolio posts
 
-You can format the portfolio posts in the `_portfolio` folder using the `post layout`. Here are little explaination on some of the possible feature you can use and what they will do.
+You can format the portfolio posts in the `_portfolio` folder using the `post layout`. 
+Here is a little explanation on some of the possible features you can use.
 
-If you decide to use a date, please be sure to use one that can be parsed such as `yyyy-mm-dd`. You can see more format example on the demo posts that are available for the theme:
+If you decide to use a date, please be sure to use one that can be parsed such as `yyyy-mm-dd`. 
+You can see more format examples in the demo posts that are available for the theme:
 
 ```yml
 
@@ -475,7 +482,7 @@ This creates the collection for Jekyll, so it can find and display your portfoli
 
 ### Feature: Gallery 🖼
 
-You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures in optimal position 
+You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures at the optimal position 
 based on available vertical space. 
 You need to specify the `gallery_path` which will be used to find the pictures to render. 
 It will take all the pictures under that directory. Then use the `include` to add it in your page. 
@@ -496,7 +503,7 @@ gallery: "assets/img/pexels"
 The search feature is based on [Simple-Jekyll-search](https://github.com/christian-fei/Simple-Jekyll-Search) 
 there is a `search.liquid` file that will create a list of all the site posts, pages and portfolios. 
 
-Then there's a `search.js` displaying the formatted results in the "search page".
+Then there's a `search.js` displaying the formatted results in the "search" page.
 
 The search page can be hidden with the `hide` option. You can remove the icon by removing `icon`:
 
@@ -527,7 +534,7 @@ tags: [sample, markdown, html]
 
 > Tags are case-sensitive `Tag_nAme` ≠ `tag_name`
 
-All the tags will be listed the tags page with a link toward the pages or posts.
+All the tags will be listed on the "tags" page with a link toward the pages or posts.
 The Tag page can be hidden with the `hide` option. You can remove the icon by removing `icon` (like for the search page).
 
 ## Advanced

_data/language.yml

@@ -15,6 +15,8 @@ str_no_result_found: "No result found"
 str_cookie_approve: "Approve"
 str_cookie_disclaimer: "We would like to use third party cookies and scripts to improve the functionality of this website."
 str_months: [January, February, March, April, May, June, July, August, September, October, November, December]
+str_dark: 'Dark'
+str_light: 'Light'
 
-# Localization settings 
+# Localization settings
 cusdis_lang: # zh-cn, es, tr, pt-BR

_data/menu.yml

@@ -0,0 +1,10 @@
+# To add links to the navigation bar.
+- example:
+  title: Example
+  url: https://example.com
+  hide: true
+  position: 2
+- type-on-strap:
+  title: "Type on Strap"
+  url: https://github.com/sylhare/Type-on-Strap
+  position: 1

_includes/default/head.liquid

@@ -3,17 +3,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=5">
 
     <!-- Theme Mode-->
-    {% if site.color_theme == 'auto' %}
     <script>
-        const isAutoTheme = true;
-        document.documentElement.setAttribute('data-theme', sessionStorage.getItem('theme'))
+        const darkBtn = "{{ site.data.language.str_dark | default: "Dark" }}"
+        const lightBtn = "{{ site.data.language.str_light | default: "Light" }}"
+        const isAutoTheme = {% if site.color_theme == 'auto' %}true{% else %}false{% endif %}
+        const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        if (isAutoTheme) {
+            document.documentElement.setAttribute('data-theme', sessionStorage.getItem('theme') ?? preferredTheme)
+        } else {
+            document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}")
+        }
     </script>
-    {% else %}
-    <script>
-        const isAutoTheme = false;
-        document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}")
-    </script>
-    {% endif %}
 
     <!-- Main JS (navbar.js, katex_init.js and masonry_init.js)-->
     <script defer src="{{ '/assets/js/main.min.js' | relative_url }}"></script>

_includes/default/navbar.liquid

@@ -21,18 +21,18 @@
     <!-- Menu -->
     <ul class="hide">
         {% assign name_page = "" %}
-
-        {% for page in site.pages %}
-            {% unless page.title == null or page.hide or name_page contains page.title %}
+        {% assign pages = site.pages | concat: site.data.menu | sort: 'position' %}
+        {% for page in pages %}
+        {% unless page.title == null or page.hide or name_page contains page.title %}
             <li class="separator"> | </li>
             <li>
                 <a class="clear" aria-label="{{ page.title }}" title="{{ page.title }}" href="{{ page.url | relative_url }}">
-                    {% if page.icon %} <i class="fas {{ page.icon }}" aria-hidden="true"></i>
-                    {% else %} {{ page.title }} {% endif%}
+                    {% if page.icon %} <i class="navbar-icon fas {{ page.icon }}" aria-hidden="true"></i>{% endif %}
+                    <span class="navbar-label {% if page.icon %}navbar-label-with-icon{% endif%}">{{ page.title }}</span>
                 </a>
             </li>
-            {% endunless %}
-            {% assign name_page = page.title | append: name_page %}
+        {% endunless %}
+        {% assign name_page = page.title | append: name_page %}
         {% endfor %}
 
         {% if site.color_theme == 'auto' %}

_sass/includes/_navbar.scss

@@ -80,13 +80,11 @@ nav {
 
     &#pull {
       i {
-        margin-top: 13px;
-        margin-right: 10px;
+        margin-top: 22px;
+        margin-right: 18px;
         float: right;
       }
-
     }
-
   }
 }
 
@@ -96,6 +94,10 @@ nav {
   a#pull {
     display: none;
   }
+
+  .navbar-label-with-icon {
+    display: none;
+  }
 }
 
 @media screen and (max-width: $break) {

assets/js/partials/cookie_consent_init.js

@@ -1,4 +1,9 @@
 /* @preserve Cookie Consent Init */
+/*
+ * This script is used to display a cookie consent banner.
+ * The variables isCookieConsent, cookieName, analyticsName are defined in head.liquid from the _config.yml
+ * The variables cookieNotice and cookieNoticeAccept are defined in head.liquid from the _data/translations.yml
+ */
 function createCookie(name, value, days) {
   var expires = "";
   if (days) {

assets/js/partials/dark-mode.js

@@ -1,13 +1,16 @@
 /* @preserve Dark mode Init */
 /*
- * There are two color palettes on CSS for the data-theme: 'light' and 'dark'.
- * Initially the script check if a theme is set in session storage and
+ * There are two colour palettes on CSS for the data-theme: 'light' and 'dark'.
+ * Initially the script checks if a theme is set in session storage and
  * alternatively listens to a MediaQuery callback looking for "prefers-color-scheme: dark".
+ *
+ * The variables darkBtn and lightBtn are defined in head.liquid from the _data/translations.yml
+ * The isAutoTheme is defined in head.liquid from the _config.yml
  */
 
 const themeButton = {
-    'light': '<i class="fas fa-adjust" aria-hidden="true"></i>',
-    'dark': '<i class="fas fa-adjust fa-rotate-180" aria-hidden="true"></i>'
+    'light': `<i class="fas fa-adjust" aria-hidden="true"></i><span class="navbar-label-with-icon"> ${darkBtn}</span>`,
+    'dark': `<i class="fas fa-adjust fa-rotate-180" aria-hidden="true"></i><span class="navbar-label-with-icon"> ${lightBtn}</span>`
 }
 
 const currentTheme = () => localStorage.getItem('theme')
@@ -50,4 +53,4 @@ function bootstrapTheme() {
 // Init
 (function () {
     bootstrapTheme();
-})()
+})()

pages/gallery.md

@@ -4,6 +4,7 @@ title: Gallery
 subtitle: From the pexels folder
 permalink: /gallery/
 gallery_path: "assets/img/pexels"
+position: 3
 tags: [Page]
 ---
 

pages/portfolio.md

@@ -4,6 +4,7 @@ title : Portfolio
 permalink: /portfolio/
 subtitle: "Projects I am working on" 
 feature-img: "assets/img/pexels/computer.jpeg"
+position: 4
 tags: [Page]
 ---
 

pages/search.md

@@ -5,4 +5,5 @@ permalink: /search/
 subtitle: "What are you looking for?"
 feature-img: "assets/img/pexels/search-map.jpeg"
 icon: "fa-search"
+position: 5
 ---

pages/tags.md

@@ -3,5 +3,6 @@ layout: tags
 title: Tags
 permalink: /tags/
 icon: "fa-tags"
+position: 5
 ---