modify 404 page, header layout and nav layout for multi-version support

l0gicgate · Sep 16, 2018 · 2dae7f0 · 2dae7f0
1 parent 5dcc4f4
commit 2dae7f0
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 117 deletions.
diff --git a/404.html b/404.html
@@ -10,7 +10,13 @@
 Page not found! :(
 
 <script>
-    if (window.location.pathname.indexOf('/docs/') >= 0 && window.location.pathname.indexOf('/v3/') <= 0) {
+    if (window.location.pathname.indexOf('/docs/') !== -1) {
+      if (window.location.pathname.indexOf('/v4/') !== -1) {
+        window.location = '/docs/v4' + window.location.pathname.substr(5);
+      } else if (window.location.pathname.indexOf('/v3/') !== -1) {
         window.location = '/docs/v3' + window.location.pathname.substr(5);
+      } else if (window.location.pathname.indexOf('/v2/') !== -1) {
+        window.location = '/docs/v2' + window.location.pathname.substr(5);
+      }
     }
-</script>
+</script>
diff --git a/_includes/header.html b/_includes/header.html
@@ -47,7 +47,7 @@
                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                     <ul class="nav navbar-nav">
                         <li{% if page.url contains "/blog" %} class="active"{% endif %}><a href="/blog">Blog</a></li>
-                        <li{% if page.url contains "/docs" %} class="active"{% endif %}><a href="/docs">User Guide</a></li>
+                        <li{% if page.url contains "/docs" %} class="active"{% endif %}><a href="/docs/{{ site.slim_version }}">User Guide</a></li>
                         <li><a href="http://discourse.slimframework.com/">Support</a></li>
                         <li{% if page.url contains "/contribute" %} class="active"{% endif %}><a href="/contribute">Contribute</a></li>
                     </ul>

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -4,7 +4,7 @@
     </div>
 
     <div class="col-md-3 slim-button-wrapper">
-        <a class="slim-button" href="/docs"><i class="fa fa-book"></i><span>User Guide</span></a>
+        <a class="slim-button" href="/docs/{{ site.slim_version }}"><i class="fa fa-book"></i><span>User Guide</span></a>
     </div>
 
     <div class="col-md-3 slim-button-wrapper">

diff --git a/_includes/version-selector.html b/_includes/version-selector.html
@@ -0,0 +1,10 @@
+<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
+    {% assign versions = site.slim_docs_versions | split: ", " %}
+    {% for version in versions %}
+        {% assign selected = "" %}
+        {% if page.url contains version %}
+            {% assign selected = " selected" %}
+        {% endif %}
+        <option value="/docs/{{ version }}"{{ selected }}>{{ version }}</option>
+    {% endfor %}
+</select>
diff --git a/_layouts/docs-v2.html b/_layouts/docs-v2.html
@@ -53,10 +53,7 @@ <h3 class="toc-title{% if isCurrentSection %} active{% endif %}">{{ section.titl
                 <h1 class="page-header">{{ page.title }}</h1>
                 <div class="edit-panel" style="margin: 0 0 1em 0;">
                     <a href="{{ site.slim_website_repo }}{{page.path}}" target="_blank" class="btn btn-default btn-xs"><i class="fa fa-github"></i> Edit This Page</a>
-                    <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
-                        <option value="/docs/v2" selected>v2</option>
-                        <option value="/docs/">v3</option>
-                    </select>
+                    {% include version-selector.html %}
                 </div>
                 {{ content }}
 

diff --git a/_layouts/docs-v3.html b/_layouts/docs-v3.html
@@ -0,0 +1,113 @@
+{% include header.html %}
+<div class="wrapper docs">
+    <div class="container-fluid">
+        <header class="site-header">
+            <div class="site-title"><a href="/">Slim</a></div>
+            <div class="site-slogan">a micro framework for PHP</div>
+        </header>
+
+        <div class="row">
+            <div class="col-md-3">
+                <form novalidate="novalidate" onsubmit="return false;" class="searchbox" style="visibility:hidden;height:0">
+                    <div role="search" class="searchbox__wrapper">
+                        <input id="docsearch" type="search" name="search" placeholder="Search in the doc" autocomplete="off" required="required" class="searchbox__input">
+                        <button type="submit" title="Submit your search query." class="searchbox__submit" >
+                            <svg role="img" aria-label="Search">
+                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
+                            </svg>
+                        </button>
+                        <button type="reset" title="Clear the search query." class="searchbox__reset hide">
+                            <svg role="img" aria-label="Reset">
+                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use>
+                            </svg>
+                        </button>
+                    </div>
+                </form>
+
+                <div class="svg-icons" style="height: 0; width: 0; position: absolute; visibility: hidden">
+                    <svg xmlns="http://www.w3.org/2000/svg">
+                        <symbol id="sbx-icon-clear-3" viewBox="0 0 40 40"><path d="M16.228 20L1.886 5.657 0 3.772 3.772 0l1.885 1.886L20 16.228 34.343 1.886 36.228 0 40 3.772l-1.886 1.885L23.772 20l14.342 14.343L40 36.228 36.228 40l-1.885-1.886L20 23.772 5.657 38.114 3.772 40 0 36.228l1.886-1.885L16.228 20z" fill-rule="evenodd"/></symbol>
+                        <symbol id="sbx-icon-search-13" viewBox="0 0 40 40"><path d="M26.806 29.012a16.312 16.312 0 0 1-10.427 3.746C7.332 32.758 0 25.425 0 16.378 0 7.334 7.333 0 16.38 0c9.045 0 16.378 7.333 16.378 16.38 0 3.96-1.406 7.593-3.746 10.426L39.547 37.34c.607.608.61 1.59-.004 2.203a1.56 1.56 0 0 1-2.202.004L26.807 29.012zm-10.427.627c7.322 0 13.26-5.938 13.26-13.26 0-7.324-5.938-13.26-13.26-13.26-7.324 0-13.26 5.936-13.26 13.26 0 7.322 5.936 13.26 13.26 13.26z" fill-rule="evenodd"/></symbol>
+                    </svg>
+                </div>
+
+                {% for section in page.docs-v3 %}
+                    {% assign isCurrentSection = false %}
+                    {% for item in section.items %}
+                        {% capture itemUrl %}{{ item[0] | replace: '.md', '.html' }}{% unless item[0] contains ".md" %}/{% endunless %}{% endcapture %}
+                        {% if itemUrl == page.url %}
+                            {% assign isCurrentSection = true %}
+                        {% endif %}
+                    {% endfor %}
+                    <h3 class="toc-title{% if isCurrentSection %} active{% endif %}">{{ section.title }}</h3>
+                    <ul class="toc-links">
+                        {% for item in section.items %}
+                            {% capture itemUrl %}{{ item[0] | replace: '.md', '.html' }}{% unless item[0] contains ".md" %}/{% endunless %}{% endcapture %}
+                            <li><a href="{{ itemUrl }}">{{ item[1] }}</a></li>
+                        {% endfor %}
+                    </ul>
+                {% endfor %}
+            </div>
+
+            <div class="col-md-8 docs-content">
+                <h1 class="page-header">{{ page.title }}</h1>
+                <div class="edit-panel" style="margin: 0 0 1em 0;">
+                    <a href="{{ site.slim_website_repo }}{{page.path}}" target="_blank" class="btn btn-default btn-xs"><i class="fa fa-github"></i> Edit This Page</a>
+                    {% include version-selector.html %}
+                </div>
+                {{ content }}
+
+                <nav>
+                    <ul class="nav pager">
+                        {% for section in page.docs-v3 %}
+                            {% assign isCurrentSection = false %}
+                            {% for item in section.items %}
+
+                                {% comment %}skip menu items that point to a page fragment{% endcomment %}
+                                {% if item[0] contains '#' %}
+                                  {% break %}
+                                {% endif %}
+
+                                {% capture itemUrl %}{{ item[0] | replace: '.md', '.html' }}{% unless item[0] contains ".md" %}/{% endunless %}{% endcapture %}
+                                {% if itemUrl == page.url %}
+                                    {% if prevSection and prevItem %}
+                                        <li class="previous">
+                                            <a href="{{ prevItemUrl }}" rel="prev"><i class="fa fa-arrow-left"></i> <small>{{ prevSection.title }}: </small> {{ prevItem[1] }}</a>
+                                        </li>
+                                    {% endif %}
+                                {% endif %}
+
+                                {% if prevItemUrl == page.url %}
+                                    <li class="next">
+                                        <a href="{{ itemUrl }}" rel="next"><small>{{ section.title }}: </small> {{ item[1] }} <i class="fa fa-arrow-right"></i></a>
+                                    </li>
+                                {% endif %}
+
+                                {% assign prevSection = section %}
+                                {% assign prevItem = item %}
+                                {% assign prevItemUrl = itemUrl %}
+                            {% endfor %}
+                        {% endfor %}
+                    </ul>
+                </nav>
+            </div>
+        </div>
+
+        <footer class="site-footer">
+            <p>
+                Created and maintained by <br/>
+                <a href="http://joshlockhart.com">Josh Lockhart</a>,
+                <a href="http://www.silentworks.co.uk" target="_blank">Andrew Smith</a>,
+                <a href="http://akrabat.com/" target="_blank">Rob Allen</a>, and the
+                <a href="https://github.com/orgs/slimphp/people" target="_blank">Slim Framework Team</a>
+            </p>
+            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" style="margin: 0; padding-top: 20px">
+                <input type="hidden" name="cmd" value="_s-xclick">
+                <input type="hidden" name="hosted_button_id" value="9YRVXHRZT6H3L">
+                <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
+                <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
+            </form>
+        </footer>
+    </div>
+</div>
+{% include footer.html %}
diff --git a/docs/index.md b/docs/index.md