Skip to content

Docs Layout Update #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Docs Layout Update #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a7be2ca
New JS folder, for scalability and easier maintenance
rxchun Jun 18, 2025
0ef4908
Breadcrumbs
rxchun Jun 18, 2025
ca23687
Page Slugs + Dynamic Sidebar
rxchun Jun 18, 2025
9db085f
Mega Menu
rxchun Jun 18, 2025
1dc1fd6
UI/UX - Scroll To Top Button + Home Popup + HTML5 implementation
rxchun Jun 18, 2025
d11e414
Finishing implementation of the 2020 design + UX + Reordered plugins …
rxchun Jun 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,18 @@ nav:
- name: Code
path: /code/external/
sub: code

second:
- name: Contribute
path: /contribute/
sub: contribute
- name: Add-Ons
path: /addons/
sub: addons

second:
third:
- name: Services
url: /services/
class: main-nav-link-separate
- name: Sites
url: https://www.question2answer.org/sites.php
- name: Q&A
Expand Down Expand Up @@ -103,12 +104,11 @@ nav:
path: /contribute/docs/

addons:
- name: Translations
path: /addons/translations/
- name: Themes
path: /addons/themes/
- name: Plugins
path: /addons/plugins/
- name: Clients
path: /addons/clients/

- name: Translations
path: /addons/translations/
17 changes: 17 additions & 0 deletions _includes/breadcrumbs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<nav class="breadcrumbs-container">
<ul class="breadcrumbs">
{% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
<li class="breadcrumb-item">
<a href="{% if site.baseurl == '/' %}{{ site.baseurl }}{% else %}{{ site.baseurl }}/{% endif %}">Home</a>
</li>
{% for crumb in crumbs offset: 1 %}
{% if forloop.last %}
<li class="breadcrumb-item">{{ page.title }}</li>
{% else %}
<li class="breadcrumb-item">
<a href="{{ site.baseurl }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
28 changes: 20 additions & 8 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
<div class="jump-top-container">
<div id="jump-top" class="jump-top noSelect desktop-only"><span class="material-icons">arrow_upward</span></div>
</div>

<div class="page-status-container"></div>

<footer class="footer">
<nav class="footer-nav">
{% for navpage in site.nav.footer %}
<a class="footer-nav-link" href="{{ navpage.url }}">{{ navpage.name }}</a>
{% endfor %}
</nav>
<div class="credit">
Created by <a href="http://www.gidgreen.com/">Gideon Greenspan</a>, <a href="https://github.com/svivian">Scott Vivian</a>,
and <a href="https://github.com/q2a/question2answer/graphs/contributors">contributors</a>
<div class="footer-container">
<nav class="footer-nav">
<ul>
{% for navpage in site.nav.footer %}
<li>
<a class="footer-nav-link" href="{% if navpage.url contains 'http' %}{{ navpage.url }}{% else %}{{ site.baseurl }}{{ navpage.url }}{% endif %}">{{ navpage.name }}</a>
</li>
{% endfor %}
</ul>
</nav>
<div class="credit">
Created by <a href="http://www.gidgreen.com/">Gideon Greenspan</a>, <a href="https://github.com/svivian">Scott Vivian</a>,
and <a href="https://github.com/q2a/question2answer/graphs/contributors">contributors</a>
</div>
</div>
</footer>
89 changes: 79 additions & 10 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,84 @@
{% if page.slug == 'homepage' %}
<div class="wave-container"></div>
{% endif %}

<header class="header">
<div class="header-logo">
<a href="/"><img class="logo-img normal-logo" src="/images/question2answer-logo-white-350x40.png" alt="Question2Answer logo"></a>
<div class="header-container flex-row">
<div class="flex-item logo-container">
<div id="main-nav-trigger" class="material-icons noSelect mobile-only">menu</div>
<a href="{% if site.baseurl == '/' %}{{ site.baseurl }}{% else %}{{ site.baseurl }}/{% endif %}" class="header-logo">
<img class="logo-img normal-logo" src="{{ site.baseurl }}/images/question2answer-logo-350x40.webp" alt="Question2Answer logo">
{% if page.slug == 'homepage' %}
<img class="logo-img white-logo" src="{{ site.baseurl }}/images/question2answer-logo-white-350x40.webp" alt="Question2Answer logo">
{% endif %}
</a>
</div>

<nav class="nav-container flex-item flex-middle no-select">
<a href="{% if site.baseurl == '/' %}{{ site.baseurl }}{% else %}{{ site.baseurl }}/{% endif %}" class="header-logo mobile-only">
<img class="logo-img normal-logo" src="{{ site.baseurl }}/images/question2answer-logo-350x40.webp" alt="Question2Answer logo">
</a>
<ul class="nav mega-menu flex-item">
<span class="mega-menu-trigger">
<span class="nav-item" tabindex="0">
Documentation
<span class="docs-caret"></span>
</span>
</span>

<ul class="nav nav-main flex-item display-none">
{% for navpage in site.nav.main %}{% capture parent_url %}{{ navpage.path }}{% endcapture %}
<li>
<span class="nav-item toggleChildren{% if page.url == parent_url %} selected-nav{% endif %}" tabindex="0">
{{ navpage.name }}
<span class="docs-caret"></span>
</span>
{% if navpage.sub %}
<ul class="sub-nav display-none">
{% for subnavpage in site.nav[navpage.sub] %}{% capture child_url %}{{ subnavpage.path }}{% endcapture %}
<li><a href="{{ site.baseurl }}{{ subnavpage.path }}"
class="sub-nav-item{% if page.url == child_url %} selected-nav{% endif %}">{{ subnavpage.name }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
<ul class="nav nav-main-second flex-item">
{% for navpage in site.nav.second %}{% capture parent_url %}{{ navpage.path }}{% endcapture %}
<li>
<span class="nav-item toggleChildren{% if page.url == parent_url %} selected-nav{% endif %}" tabindex="0">
{{ navpage.name }}
<span class="docs-caret"></span>
</span>
{% if navpage.sub %}
<ul class="sub-nav display-none">
{% for subnavpage in site.nav[navpage.sub] %}{% capture child_url %}{{ subnavpage.path }}{% endcapture %}
<li><a href="{{ site.baseurl }}{{ subnavpage.path }}"
class="sub-nav-item{% if page.url == child_url %} selected-nav{% endif %}">{{ subnavpage.name }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</ul>
<ul class="nav nav-main-third flex-item">
{% for navpage in site.nav.third %}{% capture parent_url %}{{ navpage.path }}{% endcapture %}
<li>
<a class="nav-item
{% if page.url == parent_url %} selected-nav {% endif %}
{{ navpage.class | default: '' }}"
href="{% if navpage.url contains 'http' %}{{ navpage.url }}{% else %}{{ site.baseurl }}{{ navpage.url }}{% endif %}">{{ navpage.name }}</a>
</li>
{% endfor %}
</ul>
</nav>

<div class="darkPane"></div>
</div>
<nav class="top-nav main-nav">
{% for navpage in site.nav.main %}
<a class="main-nav-link" href="{{ navpage.path }}">{{ navpage.name }}</a>
{% endfor %}
{% for navpage in site.nav.second %}
<a class="main-nav-link {{ navpage.class | default: '' }}" href="{{ navpage.url }}">{{ navpage.name }}</a>
{% endfor %}
</nav>
</header>

{% if page.slug != 'homepage' %}
{% include breadcrumbs.html %}
{% endif %}
15 changes: 0 additions & 15 deletions _includes/nav-sub.html
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions _includes/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<section>
<nav class="page-sidebar-content">
<ul class="docs-nav">
<!-- will populate -->
</ul>
</nav>
</section>
78 changes: 32 additions & 46 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="/css/styles2020.css">

<title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{{ site.description }}">

<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
{% include analytics.html %}
</head>

<body class="page">

{% include header.html %}

<main class="page-container">
{{ content }}
</main>

{% include footer.html %}

<script>
window.addEventListener('load', stickyHeader);
window.addEventListener('scroll', stickyHeader, {passive: true});

// Get the offset position of the navbar
var header = document.querySelector('header.header');
var stickyPos = header ? header.offsetTop : 0;

function stickyHeader() {
if (window.scrollY > stickyPos) {
header.classList.add('sticky');
} else {
header.classList.remove('sticky');
}
}
</script>
</body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="{{ site.baseurl }}/css/styles.css">

<title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{{ site.description }}">

<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/apple-touch-icon.png">
{% include analytics.html %}
</head>

<body class="page{% if page.slug %} template-{{ page.slug }}{% endif %}">

{% include header.html %}

<main class="page-container">
{{ content }}
</main>

{% include footer.html %}

<script src="{{ site.baseurl }}/js/scripts.js"></script>

</body>
</html>
48 changes: 30 additions & 18 deletions _layouts/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,23 @@
layout: default
---

<h1 class="home-intro"><strong>Question2Answer</strong> (Q2A) is a popular open source Q&A platform for PHP/MySQL, currently running on <a href="https://www.question2answer.org/sites.php">24,500+ sites in 40 languages</a>.</h1>
<div class="home-intro-container">
<h1 class="home-intro"><strong>Question2Answer</strong> (Q2A) is a popular open source Q&A platform for PHP/MySQL, currently running on <a href="https://www.question2answer.org/sites.php">24,500+ sites in 40 languages</a>.</h1>
</div>

{{ content }}
<div class="notice-container display-none">
<div class="notice">
<div class="close-notice material-icons">close</div>
<div class="notice-image"></div>
<div class="notice-text home-intro-card">
{{ content }}
</div>
<div class="clear"></div>
</div>
<div class="close-sheet"></div>
</div>

<div class="showcase-cols">
<article class="showcase-cols">

{% capture answerText %}
<p>A Q&amp;A site helps your online community to share knowledge.
Expand All @@ -23,8 +35,8 @@ <h1 class="home-intro"><strong>Question2Answer</strong> (Q2A) is a popular open
{% include card-showcase.html icon="people" title="Why offer Q&amp;A on my site?" answer=answerText %}

{% capture answerText %}
<p><a href="https://www.question2answer.org/question2answer-latest.zip"><b>Download Question2Answer</b></a>, then read <a href="/install/">how to install</a>.
Version 1.8.8 was <a href="/install/versions/">released</a> on July 25th, 2023.
<p><a href="https://www.question2answer.org/question2answer-latest.zip"><b>Download Question2Answer</b></a>, then read <a href="{{ site.baseurl }}/install/">how to install</a>.
Version 1.8.8 was <a href="{{ site.baseurl }}/install/versions/">released</a> on July 25th, 2023.
Also <a href="https://github.com/q2a/question2answer">on GitHub</a>.</p>
<p>Question2Answer is open source, <a href="https://www.question2answer.org/license.php">licensed under GPL v2+</a>.</p>
{% endcapture %}
Expand All @@ -43,9 +55,9 @@ <h1 class="home-intro"><strong>Question2Answer</strong> (Q2A) is a popular open

{% capture answerText %}
<ul>
<li>Q2A takes 5 minutes (or less!) to <a href="/install/">install</a>.</li>
<li>Easy styling with <a href="/themes/">CSS themes</a>.</li>
<li>Supports <a href="/translate/">translation</a> into any language.</li>
<li>Q2A takes 5 minutes (or less!) to <a href="{{ site.baseurl }}/install/">install</a>.</li>
<li>Easy styling with <a href="{{ site.baseurl }}/themes/">CSS themes</a>.</li>
<li>Supports <a href="{{ site.baseurl }}/translate/">translation</a> into any language.</li>
<li>Custom sidebar, widgets, pages and links.</li>
<li>SEO features such as <a href="https://www.sitemaps.org/">XML Sitemap</a> and neat URLs.</li>
</ul>
Expand All @@ -68,35 +80,35 @@ <h1 class="home-intro"><strong>Question2Answer</strong> (Q2A) is a popular open
<li>Create experts, editors, moderators and admins.</li>
<li>User avatars (or <a href="https://en.gravatar.com/">Gravatar</a>) and custom fields.</li>
<li>Private messages and public wall posts.</li>
<li>Log in via Facebook or others (using <a href="/addons/plugins/">plugins</a>).</li>
<li>Log in via Facebook or others (using <a href="{{ site.baseurl }}/addons/plugins/">plugins</a>).</li>
</ul>
{% endcapture %}
{% include card-showcase.html icon="face" title="Built-in user account management ..." answer=answerText %}

{% capture answerText %}
<ul>
<li>Out-of-the-box <a href="/install/wordpress/">WordPress</a> and Joomla integration.</li>
<li>Custom <a href="/install/single-sign-on/">single sign-on</a> support for other sites.</li>
<li>Deep integration and customization via <a href="/plugins/">plugins</a>.</li>
<li>Out-of-the-box <a href="{{ site.baseurl }}/install/wordpress/">WordPress</a> and Joomla integration.</li>
<li>Custom <a href="{{ site.baseurl }}/install/single-sign-on/">single sign-on</a> support for other sites.</li>
<li>Deep integration and customization via <a href="{{ site.baseurl }}/plugins/">plugins</a>.</li>
</ul>
{% endcapture %}
{% include card-showcase.html icon="assignment_ind" title="... or integrate with existing sites" answer=answerText %}

{% capture answerText %}
<ul>
<li>PHP/MySQL <a href="/install/optimize/">scalable</a> to millions of users and posts.</li>
<li><a href="/install/security/">Safe from</a> XSS, CSRF and SQL injection attacks.</li>
<li>PHP/MySQL <a href="{{ site.baseurl }}/install/optimize/">scalable</a> to millions of users and posts.</li>
<li><a href="{{ site.baseurl }}/install/security/">Safe from</a> XSS, CSRF and SQL injection attacks.</li>
<li>Beat spam with captchas, moderation and/or flagging.</li>
</ul>
{% endcapture %}
{% include card-showcase.html icon="policy" title="Fast and secure" answer=answerText %}

{% capture answerText %}
<p>Contribute <a href="https://github.com/q2a/question2answer">via Github</a>,
create a <a href="/themes/">theme</a>,
<a href="/plugins/">plugin</a> or
<a href="/translate/">translation</a>.</p>
create a <a href="{{ site.baseurl }}/themes/">theme</a>,
<a href="{{ site.baseurl }}/plugins/">plugin</a> or
<a href="{{ site.baseurl }}/translate/">translation</a>.</p>
{% endcapture %}
{% include card-showcase.html icon="translate" title="How can I help?" answer=answerText %}

</div>
</article>
Loading