Skip to content

Commit f452fc8

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 <[email protected]>
1 parent aee0fa4 commit f452fc8

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

‎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)