diff options
| author |  Inverle <inverle@proton.me>
| 2025-12-04 20:06:21 +0100 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2025-12-04 20:06:21 +0100 |
| commit | 5e9c3617cac1e3eac246e2ae7df6f4b71c33d37c (patch) | |
| tree | 435618816d2ccc5d29b21fa0c089f814972a2ce7 /docs/_layouts | |
| parent | 78e40c6fe3afe7f815ef9d32646610e2d5436ba3 (diff) | |
Improve layout of documentation page and add search feature (#8247)
* Improve layout of documentation page and add search feature
Closes https://github.com/FreshRSS/FreshRSS/issues/7915, https://github.com/FreshRSS/FreshRSS/issues/5325
Also: anchor headings and fix building site locally
* Further improvements
* Set color of hyperlinks
* Consistent styling of close aside button across devices
* Mobile layout 600px -> 1200px
* Add suffix to docs `<title>`
* Note: titles of pages probably need to be improved, since currently they are just derived from the names of the first heading on every page
* Add favicon
* Improve font
* Try to fix favicon not loading correctly on GH pages
* Use local font
* Attempt to fix GH pages
* Final improvements
* Copy to clipboard button
* Support for nojs search
* Dark mode
* Load search.json (200KB json) only on search input focus
* Keep scroll state of sidebar across navigations
* Clickable images and CSP
CSP so we avoid hotlinking resources and clickable images are useful for zooming on mobile for example
* Fix typos
* Disable Dark Reader extension if dark mode CSS is loaded
* Support internationalisation (via language dropdown)
* Add Gemfile.lock
* Make CI build work with the custom plugin
* Make menus closable with Esc
* Fix typos CI
* Suggestions
* Use `ruby/setup-ruby` action in workflow for installing and caching gems.
* Run build only when there are changes to `docs/`
See: https://docs.github.com/en/actions/reference/workflows-and-actions/events-that-trigger-workflows?versionId=free-pro-team%40latest&productId=actions#running-your-workflow-only-when-a-push-to-specific-branches-occurs
* Change font to `Open Sans`
* Increase line height
* Fix Liquid syntax error
Diffstat (limited to 'docs/_layouts')
| -rw-r--r-- | docs/_layouts/default.html | 122 |
1 files changed, 78 insertions, 44 deletions
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 9e30b6eae..252e1024d 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -1,50 +1,84 @@ <!DOCTYPE html> -<html lang="{{ site.lang | default: "en-US" }}"> +<html lang="{{ page.lang | default: 'en' }}"> <head> - <meta charset="UTF-8"> - <title>{{ page.title | default: site.title }}</title> - <meta name="description" content="{{ page.description | default: site.description | default: site.github.project_tagline }}"/> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta name="theme-color" content="#157878"> - <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> - <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}"> + <meta charset="UTF-8"> + <title>{{ page.title | default: site.title }} ยท FreshRSS</title> + <meta name="description" content="{{ page.description | default: site.description | default: site.github.project_tagline }}"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self'"> + + <link rel="stylesheet" href="{{ '/assets/css/docs.css?v=' | append: site.github.build_revision | relative_url }}"> + <link rel="stylesheet" href="{{ '/assets/css/highlight.css?v=' | append: site.github.build_revision | relative_url }}"> + <link rel="stylesheet" href="{{ '/assets/css/normalize.css?v=' | append: site.github.build_revision | relative_url }}"> + <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="{{ '/assets/css/darkmode.css?v=' | append: site.github.build_revision | relative_url}}"> + + <link rel="icon" href="{{ '/favicon.ico' | relative_url }}"> + + <script> + var i18n = { + "copy_to_clipboard": "{%t copy_to_clipboard %}" + }; + </script> + <script src="{{ '/assets/js/docs.js?v=' | append: site.github.build_revision | relative_url }}"></script> </head> <body> - <section class="page-header"> - <h1 class="project-name"> - <a href="{{ site.github.url }}">{{ site.title | default: site.github.repository_name }}</a> - </h1> - <h2 class="project-tagline">{{ site.description | default: site.github.project_tagline }}</h2> - {% if site.github.is_project_page %} - <a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a> - {% endif %} - {% if site.show_downloads %} - <a href="{{ site.github.zip_url }}" class="btn">Download .zip</a> - <a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a> - {% endif %} - </section> - - <section class="main-content"> - {{ content }} - - <footer class="site-footer"> - {% if site.github.is_project_page %} - <span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span> - {% endif %} - <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span> - </footer> - </section> - - {% if site.google_analytics %} - <script type="text/javascript"> - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - - ga('create', '{{ site.google_analytics }}', 'auto'); - ga('send', 'pageview'); - </script> - {% endif %} + <nav class="mobile-nav"> + <a class="toggle-aside" href="#aside" title="{%t toggle_aside %}"> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/> + </svg> + </a> + {% include lang_dropdown.html location="mobile" %} + </nav> + + <a class="close" href="#close"></a> + + <aside id="aside"> + <a href="https://freshrss.org/">< {%t back_to_freshrss %}</a> + {% include lang_dropdown.html location="aside" %} + <a class="close" href="#close" title="{%t close %}">×</a> + + <section class="search"> + <noscript> + <style>div.js-search { display: none; }</style> + <div class="nojs-search"> + <form action="https://duckduckgo.com/" method="get"> + <input type="search" name="q" placeholder="{%t search_docs %}"> + <input type="hidden" name="sites" value="freshrss.github.io"> + <button type="submit">{%t search %}</button> + </form> + </div> + </noscript> + + <div class="js-search"> + <input type="text" id="search-input" placeholder="{%t search_docs %}"> + <ul id="results-container"></ul> + + <script src="{{ '/assets/js/simple-jekyll-search.min.js?v=' | append: site.github.build_revision | relative_url }}"></script> + <script> + const search = document.querySelector('#search-input'); + + function init_search() { + search.removeEventListener('focus', init_search); + SimpleJekyllSearch({ + searchInput: search, + resultsContainer: document.querySelector('#results-container'), + json: '{{ "/search." | append: page.lang | append: ".json?v=" | append: site.github.build_revision | relative_url }}', + searchResultTemplate: '<li><a href="{url}">{title}</a></li>' + }); + } + + search.addEventListener('focus', init_search); + </script> + </div> + </section> + <nav class="docs"> + {% include docs_nav.html %} + </nav> + </aside> + + <main> + {% include anchor_headings.html html=content anchorBody="#" %} + </main> </body> </html> |