Skip to content

Commit 42b2133

Browse files
phiro56phiro56
committed
feat(ui): Add FAQ page with styled sections and category navigation
- Create new FAQ template with left sidebar navigation - Add styled FAQ sections with collapsible content - Implement category-based navigation links - Add review notice banner for pages under review Signed-off-by: Daniel Phillips <phiro56@gmail.com>
1 parent 8bb9407 commit 42b2133

File tree

3 files changed

+223
-0
lines changed

3 files changed

+223
-0
lines changed

‎sass/_valkey.scss‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1880,3 +1880,175 @@ pre table {
18801880
height: 18px;
18811881
margin-right: 0.3rem;
18821882
}
1883+
1884+
.help-links {
1885+
margin-bottom: 2rem;
1886+
1887+
li {
1888+
margin: 0.5rem 0;
1889+
}
1890+
1891+
a {
1892+
display: flex;
1893+
align-items: center;
1894+
padding: 0.5rem 0;
1895+
font-weight: 500;
1896+
}
1897+
}
1898+
1899+
.edit-box {
1900+
text-align: left;
1901+
font-size: 1.6rem;
1902+
1903+
span {
1904+
color: #000;
1905+
}
1906+
1907+
.edit-link {
1908+
color: #6983ff;
1909+
1910+
&:hover {
1911+
text-decoration: none;
1912+
}
1913+
}
1914+
}
1915+
1916+
.review-notice {
1917+
background: #fff3cd;
1918+
border: 1px solid #ffeaa7;
1919+
border-radius: 8px;
1920+
padding: 1.5rem;
1921+
margin-bottom: 2rem;
1922+
color: #856404;
1923+
1924+
p {
1925+
margin: 0;
1926+
font-size: 1.4rem;
1927+
}
1928+
}
1929+
1930+
.faq-aside {
1931+
@include respond-min(1024px) {
1932+
flex-direction: row;
1933+
}
1934+
}
1935+
1936+
1937+
1938+
.faq-container {
1939+
max-width: 100%;
1940+
background-color: #fff;
1941+
padding: 2rem 2rem 0.1rem;
1942+
}
1943+
1944+
/* FAQ Section Containers */
1945+
.faq-section {
1946+
background: rgba(104, 147, 255, 0.1);
1947+
margin-bottom: 2rem;
1948+
padding: 2rem;
1949+
}
1950+
1951+
.faq-section h2 {
1952+
font-size: 16px;
1953+
font-weight: 700;
1954+
color: #30176E;
1955+
margin: 0 0 -1rem;
1956+
}
1957+
1958+
.faq-section h3 {
1959+
font-size: 16px;
1960+
background:rgba(104, 147, 255, 0.1);
1961+
font-weight: 600;
1962+
cursor: pointer;
1963+
margin: 2rem 0 0;
1964+
padding: 1.25rem;
1965+
position: relative;
1966+
transition: all 0.2s ease;
1967+
color: #1A2026;
1968+
}
1969+
1970+
.faq-section p,
1971+
.faq-section ul {
1972+
font-size: 16px;
1973+
background-color: #fff;
1974+
padding: 1rem 2rem;
1975+
margin: 0;
1976+
}
1977+
1978+
.faq-section ul, .faq-section ol {
1979+
margin: 0;
1980+
padding-left: 3.5rem;
1981+
}
1982+
1983+
.faq-section li {
1984+
margin-bottom: 0.8rem;
1985+
line-height: 1.6;
1986+
}
1987+
1988+
.faq-section code {
1989+
background-color: #f1f3f4;
1990+
padding: 0.2rem 0.4rem;
1991+
border-radius: 4px;
1992+
font-family: 'Fira Mono', monospace;
1993+
font-size: 1.4rem;
1994+
color: #d63384;
1995+
}
1996+
1997+
.faq-section pre {
1998+
background-color: #f8f9fa;
1999+
padding: 1.6rem;
2000+
border-radius: 4px;
2001+
overflow-x: auto;
2002+
margin: 1.6rem 0;
2003+
border: 1px solid #e1e5e9;
2004+
}
2005+
2006+
.faq-section pre code {
2007+
background: none;
2008+
padding: 0;
2009+
color: #333;
2010+
}
2011+
2012+
.faq-section a {
2013+
color: #30176E;
2014+
text-decoration: underline;
2015+
}
2016+
2017+
.faq-section a:hover {
2018+
text-decoration: underline;
2019+
}
2020+
2021+
.faq-section p + ul,
2022+
.faq-section p + ol,
2023+
.faq-section p + p {
2024+
padding-top: 0;
2025+
}
2026+
2027+
/* Category navigation */
2028+
.category-nav {
2029+
list-style: none;
2030+
padding: 0;
2031+
margin: 0;
2032+
}
2033+
2034+
.category-nav li {
2035+
margin-bottom: 8px;
2036+
}
2037+
2038+
.category-link {
2039+
color: #666;
2040+
text-decoration: none;
2041+
font-weight: 500;
2042+
transition: color 0.2s ease;
2043+
display: block;
2044+
padding: 8px 0;
2045+
}
2046+
2047+
.category-link:hover {
2048+
color: #30176E;
2049+
}
2050+
2051+
.category-link.active {
2052+
color: #30176E;
2053+
font-weight: 600;
2054+
}

‎templates/faq.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{% extends "default.html" %}
2+
3+
{%- block head -%}
4+
{%- endblock head -%}
5+
6+
{% block content %}
7+
<div class="styled-title">
8+
<h1 class="faq-title">Frequently Asked Questions</h1>
9+
</div>
10+
11+
<div class="left-aside faq-aside">
12+
<aside>
13+
<h2>CATEGORIES</h2>
14+
<ul class="category-nav">
15+
<li><a href="#general" class="category-link">General</a></li>
16+
<li><a href="#memory-performance" class="category-link">Memory & Performance</a></li>
17+
<li><a href="#technical" class="category-link">Technical</a></li>
18+
<li><a href="#limitations" class="category-link">Limitations</a></li>
19+
</ul>
20+
21+
<div class="edit-box">
22+
<span>Found an Issue?</span>
23+
<a href="https://github.com/valkey-io/valkey-io.github.io/edit/main/content/topics/faq.md" class="edit-link" target="_blank">
24+
Edit this page on GitHub
25+
</a>
26+
</div>
27+
</aside>
28+
29+
<main class="container">
30+
{% if config.extra.review_list is containing(page.path) %}
31+
<div class="review-notice">
32+
<p><strong>This page is under review.</strong> The page is likely incorrect, contains invalid links, and/or needs technical review.
33+
In the future it may change substantially or be removed entirely.</p>
34+
</div>
35+
{% endif %}
36+
37+
<div class="faq-content">
38+
{% if config.extra.publish_hold is containing(page.path) %}
39+
<p><code>{{ page.path }}</code> may be available after revisions.</p>
40+
{% else %}
41+
<div class="faq-container">
42+
{{ page.content | safe }}
43+
</div>
44+
{% endif %}
45+
</div>
46+
</main>
47+
</div>
48+
{% endblock content %}

‎templates/shortcodes/faq_section.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<section id="{{class}}" class="faq-section faq-{{class}}">
2+
{{body | markdown | safe}}
3+
</section>

0 commit comments

Comments
 (0)