From 42b213378a69a978d2e8c33af6a1056470544dbf Mon Sep 17 00:00:00 2001 From: Daniel Phillips Date: Sat, 5 Jul 2025 19:19:53 -0600 Subject: [PATCH 1/6] 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 --- sass/_valkey.scss | 172 ++++++++++++++++++++++++++ templates/faq.html | 48 +++++++ templates/shortcodes/faq_section.html | 3 + 3 files changed, 223 insertions(+) create mode 100644 templates/faq.html create mode 100644 templates/shortcodes/faq_section.html diff --git a/sass/_valkey.scss b/sass/_valkey.scss index 7d86f510..ff2a1698 100644 --- a/sass/_valkey.scss +++ b/sass/_valkey.scss @@ -1880,3 +1880,175 @@ pre table { height: 18px; margin-right: 0.3rem; } + +.help-links { + margin-bottom: 2rem; + + li { + margin: 0.5rem 0; + } + + a { + display: flex; + align-items: center; + padding: 0.5rem 0; + font-weight: 500; + } +} + +.edit-box { + text-align: left; + font-size: 1.6rem; + + span { + color: #000; + } + + .edit-link { + color: #6983ff; + + &:hover { + text-decoration: none; + } + } +} + +.review-notice { + background: #fff3cd; + border: 1px solid #ffeaa7; + border-radius: 8px; + padding: 1.5rem; + margin-bottom: 2rem; + color: #856404; + + p { + margin: 0; + font-size: 1.4rem; + } +} + +.faq-aside { + @include respond-min(1024px) { + flex-direction: row; + } +} + + + +.faq-container { + max-width: 100%; + background-color: #fff; + padding: 2rem 2rem 0.1rem; +} + +/* FAQ Section Containers */ +.faq-section { + background: rgba(104, 147, 255, 0.1); + margin-bottom: 2rem; + padding: 2rem; +} + +.faq-section h2 { + font-size: 16px; + font-weight: 700; + color: #30176E; + margin: 0 0 -1rem; +} + +.faq-section h3 { + font-size: 16px; + background:rgba(104, 147, 255, 0.1); + font-weight: 600; + cursor: pointer; + margin: 2rem 0 0; + padding: 1.25rem; + position: relative; + transition: all 0.2s ease; + color: #1A2026; +} + +.faq-section p, +.faq-section ul { + font-size: 16px; + background-color: #fff; + padding: 1rem 2rem; + margin: 0; +} + +.faq-section ul, .faq-section ol { + margin: 0; + padding-left: 3.5rem; +} + +.faq-section li { + margin-bottom: 0.8rem; + line-height: 1.6; +} + +.faq-section code { + background-color: #f1f3f4; + padding: 0.2rem 0.4rem; + border-radius: 4px; + font-family: 'Fira Mono', monospace; + font-size: 1.4rem; + color: #d63384; +} + +.faq-section pre { + background-color: #f8f9fa; + padding: 1.6rem; + border-radius: 4px; + overflow-x: auto; + margin: 1.6rem 0; + border: 1px solid #e1e5e9; +} + +.faq-section pre code { + background: none; + padding: 0; + color: #333; +} + +.faq-section a { + color: #30176E; + text-decoration: underline; +} + +.faq-section a:hover { + text-decoration: underline; +} + +.faq-section p + ul, +.faq-section p + ol, + .faq-section p + p { + padding-top: 0; +} + +/* Category navigation */ +.category-nav { + list-style: none; + padding: 0; + margin: 0; +} + +.category-nav li { + margin-bottom: 8px; +} + +.category-link { + color: #666; + text-decoration: none; + font-weight: 500; + transition: color 0.2s ease; + display: block; + padding: 8px 0; +} + +.category-link:hover { + color: #30176E; +} + +.category-link.active { + color: #30176E; + font-weight: 600; +} diff --git a/templates/faq.html b/templates/faq.html new file mode 100644 index 00000000..bf69a606 --- /dev/null +++ b/templates/faq.html @@ -0,0 +1,48 @@ +{% extends "default.html" %} + +{%- block head -%} +{%- endblock head -%} + +{% block content %} +
+

Frequently Asked Questions

+
+ +
+ + +
+ {% if config.extra.review_list is containing(page.path) %} +
+

This page is under review. The page is likely incorrect, contains invalid links, and/or needs technical review. + In the future it may change substantially or be removed entirely.

+
+ {% endif %} + +
+ {% if config.extra.publish_hold is containing(page.path) %} +

{{ page.path }} may be available after revisions.

+ {% else %} +
+ {{ page.content | safe }} +
+ {% endif %} +
+
+
+{% endblock content %} diff --git a/templates/shortcodes/faq_section.html b/templates/shortcodes/faq_section.html new file mode 100644 index 00000000..aaeb3bae --- /dev/null +++ b/templates/shortcodes/faq_section.html @@ -0,0 +1,3 @@ +
+ {{body | markdown | safe}} +
\ No newline at end of file From 1bb87b873fb48a005606f53eac598c74ffdb3ca9 Mon Sep 17 00:00:00 2001 From: Daniel Phillips Date: Thu, 24 Jul 2025 16:03:19 -0600 Subject: [PATCH 2/6] feat(faq): migrate FAQ page to local repository domain - Move FAQ content from external source to local repository - Update FAQ styling and layout for better readability Signed-off-by: Daniel Phillips --- build/init-topics-and-clients.sh | 5 + sass/_valkey.scss | 159 ++++++++++++++++++------------- templates/faq.html | 21 +++- 3 files changed, 117 insertions(+), 68 deletions(-) diff --git a/build/init-topics-and-clients.sh b/build/init-topics-and-clients.sh index de02f0c5..b2193310 100755 --- a/build/init-topics-and-clients.sh +++ b/build/init-topics-and-clients.sh @@ -40,6 +40,11 @@ do base=${fname##*/} topic=${base%.*} + # Skip faq.md so it is never overwritten + if [[ "$topic" == "faq" ]]; then + continue + fi + if [[ "$topic" != "index" ]]; then if [ -f "./build/custom-frontmatter/topics/$topic.toml" ]; then echo "+++" >> "./content/topics/$topic.md" diff --git a/sass/_valkey.scss b/sass/_valkey.scss index ff2a1698..72053085 100644 --- a/sass/_valkey.scss +++ b/sass/_valkey.scss @@ -1933,95 +1933,120 @@ pre table { } } - - .faq-container { max-width: 100%; background-color: #fff; padding: 2rem 2rem 0.1rem; } -/* FAQ Section Containers */ -.faq-section { - background: rgba(104, 147, 255, 0.1); - margin-bottom: 2rem; - padding: 2rem; -} - -.faq-section h2 { +.faq-container h2 { font-size: 16px; font-weight: 700; color: #30176E; - margin: 0 0 -1rem; + margin: 0 0 0.25rem; } -.faq-section h3 { - font-size: 16px; - background:rgba(104, 147, 255, 0.1); - font-weight: 600; - cursor: pointer; - margin: 2rem 0 0; - padding: 1.25rem; - position: relative; - transition: all 0.2s ease; - color: #1A2026; -} -.faq-section p, -.faq-section ul { - font-size: 16px; - background-color: #fff; - padding: 1rem 2rem; - margin: 0; +/* FAQ Section Containers */ +.faq-section { + background: rgba(104, 147, 255, 0.1); + margin-bottom: 2rem; + padding: 2rem; } -.faq-section ul, .faq-section ol { - margin: 0; - padding-left: 3.5rem; -} +.faq-item { + margin: 0 0 1rem; -.faq-section li { - margin-bottom: 0.8rem; - line-height: 1.6; -} + &:last-child { + margin: 0; + } -.faq-section code { - background-color: #f1f3f4; - padding: 0.2rem 0.4rem; - border-radius: 4px; - font-family: 'Fira Mono', monospace; - font-size: 1.4rem; - color: #d63384; -} + h3 { + font-size: 16px; + background:rgba(104, 147, 255, 0.1); + font-weight: 600; + cursor: pointer; + margin: 0 0 1px; + padding: 1.25rem; + position: relative; + transition: all 0.2s ease; + color: #1A2026; -.faq-section pre { - background-color: #f8f9fa; - padding: 1.6rem; - border-radius: 4px; - overflow-x: auto; - margin: 1.6rem 0; - border: 1px solid #e1e5e9; -} + &:hover { + background:rgba(58, 67, 88, 0.1); -.faq-section pre code { - background: none; - padding: 0; - color: #333; -} + } + } -.faq-section a { - color: #30176E; - text-decoration: underline; -} + .faq-answer { + padding: 1rem; + font-size: 16px; + } -.faq-section a:hover { - text-decoration: underline; -} + &.open { + + h3, + .faq-answer { + background: #fff; + } + } -.faq-section p + ul, -.faq-section p + ol, - .faq-section p + p { + p, + ul { + font-size: 16px; + background-color: #fff; + padding: 1rem 2rem; + margin: 0; + } + + ul, ol { + margin: 0; + padding-left: 3.5rem; + } + + li { + margin-bottom: 0.8rem; + line-height: 1.6; + } + + code { + background-color: #f1f3f4; + padding: 0.2rem 0.4rem; + border-radius: 4px; + font-family: 'Fira Mono', monospace; + font-size: 1.4rem; + color: #d63384; + } + + pre { + background-color: #f8f9fa; + padding: 1.6rem; + border-radius: 4px; + overflow-x: auto; + margin: 1.6rem 0; + border: 1px solid #e1e5e9; + } + + pre code { + background: none; + padding: 0; + color: #fff; + } + + a { + color: #30176E; + text-decoration: underline; + } + + a:hover { + text-decoration: underline; + } + + ul, + ol, + p { padding-top: 0; + } } /* Category navigation */ diff --git a/templates/faq.html b/templates/faq.html index bf69a606..f522bba4 100644 --- a/templates/faq.html +++ b/templates/faq.html @@ -45,4 +45,23 @@

CATEGORIES

-{% endblock content %} + +{% endblock content %} \ No newline at end of file From b9974f0d801c9703b4be132eb92851918f967d1a Mon Sep 17 00:00:00 2001 From: Daniel Phillips Date: Thu, 24 Jul 2025 18:12:01 -0600 Subject: [PATCH 3/6] feat(faq): add caret icon and new background color Signed-off-by: Daniel Phillips --- sass/_valkey.scss | 18 ++++++++ static/img/icon-caret-down.svg | 3 ++ templates/faq.html | 78 ++++++++++++++++++++-------------- 3 files changed, 66 insertions(+), 33 deletions(-) create mode 100644 static/img/icon-caret-down.svg diff --git a/sass/_valkey.scss b/sass/_valkey.scss index 72053085..739ab5ba 100644 --- a/sass/_valkey.scss +++ b/sass/_valkey.scss @@ -1974,7 +1974,21 @@ pre table { &:hover { background:rgba(58, 67, 88, 0.1); + } + .faq-caret { + position: absolute; + right: 1rem; + top: 50%; + transform: translateY(-50%); + width: 12px; + height: 12px; + transition: transform 0.2s ease; + opacity: 0.7; + + &:hover { + opacity: 1; + } } } @@ -1989,6 +2003,10 @@ pre table { .faq-answer { background: #fff; } + + h3 .faq-caret { + transform: translateY(-50%) rotate(180deg); + } } p, diff --git a/static/img/icon-caret-down.svg b/static/img/icon-caret-down.svg new file mode 100644 index 00000000..096e4868 --- /dev/null +++ b/static/img/icon-caret-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/templates/faq.html b/templates/faq.html index f522bba4..fb4cba00 100644 --- a/templates/faq.html +++ b/templates/faq.html @@ -8,46 +8,56 @@

Frequently Asked Questions

-
- - -
- {% if config.extra.review_list is containing(page.path) %} -
-

This page is under review. The page is likely incorrect, contains invalid links, and/or needs technical review. - In the future it may change substantially or be removed entirely.

+
+
+ -
- {% if config.extra.publish_hold is containing(page.path) %} -

{{ page.path }} may be available after revisions.

- {% else %} -
- {{ page.content | safe }} +
+ {% if config.extra.review_list is containing(page.path) %} +
+

This page is under review. The page is likely incorrect, contains invalid links, and/or needs technical review. + In the future it may change substantially or be removed entirely.

{% endif %} -
-
+ +
+ {% if config.extra.publish_hold is containing(page.path) %} +

{{ page.path }} may be available after revisions.

+ {% else %} +
+ {{ page.content | safe }} +
+ {% endif %} +
+ +
+