Skip to content
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

refactor: render sidebar from data #376

Draft
wants to merge 25 commits into
base: main
Choose a base branch
from
Draft

refactor: render sidebar from data #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
74fb165
feat: sidebar util to read data
imfing Apr 3, 2024
f40c7fd
Merge remote-tracking branch 'origin/main' into sidebar-data-source
imfing Apr 4, 2024
462cc5b
chore: add new sidebar template
imfing Apr 4, 2024
fdfdef6
chore: basic structure using new sidebar data
imfing Apr 5, 2024
c62b1fd
refactor: make sidebar footer work
imfing Apr 14, 2024
63f1539
chore: basic rendering from data
imfing Apr 14, 2024
33f2cf6
feat: generate sidebar json data for rendering
imfing Apr 14, 2024
e444156
refactor: add back mobile and footer for sidebar
imfing Apr 14, 2024
a1c7acd
feat: add params page.sidebar.source and page.sidebar.cache
imfing Apr 14, 2024
8c78962
refactor: move sidebar item styles to css
imfing Apr 28, 2024
68e1e25
feat: caching for sidebar items from data
imfing Apr 29, 2024
b91cc79
Merge remote-tracking branch 'origin/main' into sidebar-data-source
imfing Apr 30, 2024
55af474
chore: update sidebar item list and link class names
imfing Apr 30, 2024
3a2ce0b
fix: class selector in sidebar.js
imfing Apr 30, 2024
a4bfa2d
chore: use utils/title to get title
imfing Apr 30, 2024
0da6f97
fix: pass in the right page link
imfing Apr 30, 2024
2004648
fix: class name in render-data
imfing Apr 30, 2024
66489e5
chore: use index as fallback option
imfing Apr 30, 2024
9e7b13a
chore: add experimental flag for hiding sidebar
imfing Apr 30, 2024
168ecf9
Merge remote-tracking branch 'origin/main' into sidebar-data-source
imfing Nov 11, 2024
783ab1e
Merge remote-tracking branch 'origin/main' into sidebar-data-source
imfing Dec 28, 2024
4d9015a
fix: replace deprecated `site.IsMultiLingual`
imfing Dec 28, 2024
2acfb3b
chore: test new sidebar rendering
imfing Dec 28, 2024
b01c8ee
chore: add example sidebar data file
imfing Dec 29, 2024
f8e02e6
fix: generate mobile nav data
imfing Dec 30, 2024
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
227 changes: 130 additions & 97 deletions assets/css/compiled/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -860,9 +860,6 @@ video {
.hx-justify-center {
justify-content: center;
}
.hx-justify-between {
justify-content: space-between;
}
.hx-justify-items-start {
justify-items: start;
}
Expand Down Expand Up @@ -1028,10 +1025,6 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(255 247 237 / var(--tw-bg-opacity));
}
.hx-bg-primary-100 {
--tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / var(--tw-bg-opacity));
}
.hx-bg-primary-400 {
--tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / var(--tw-bg-opacity));
Expand Down Expand Up @@ -1311,10 +1304,6 @@ video {
--tw-text-opacity: 1;
color: rgb(154 52 18 / var(--tw-text-opacity));
}
.hx-text-primary-800 {
--tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-text-opacity));
}
.hx-text-red-900 {
--tw-text-opacity: 1;
color: rgb(127 29 29 / var(--tw-text-opacity));
Expand Down Expand Up @@ -2483,7 +2472,7 @@ article details > summary::before {
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
}
@media (max-width: 767px) {
.sidebar-container {
.hextra-sidebar-container {
position: fixed;
top: 0px;
bottom: 0px;
Expand All @@ -2494,28 +2483,152 @@ article details > summary::before {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding-top: calc(var(--navbar-height));
}
.sidebar-container:is(html[class~="dark"] *) {
.hextra-sidebar-container:is(html[class~="dark"] *) {
--tw-bg-opacity: 1;
background-color: rgb(17 17 17 / var(--tw-bg-opacity));
}
.sidebar-container {
.hextra-sidebar-container {
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
will-change: transform, opacity;
contain: layout style;
backface-visibility: hidden;
}
}
.sidebar-container li > div {
.hextra-sidebar-container li > div {
height: 0px;
}
.sidebar-container li.open > div {
.hextra-sidebar-container li.open > div {
height: auto;
padding-top: 0.25rem;
}
.sidebar-container li.open > a > span > svg > path {
.hextra-sidebar-container li.open > a > span > svg > path {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hextra-sidebar-container .hextra-sidebar-item-list {
position: relative;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.hextra-sidebar-container .hextra-sidebar-item-list::before {
position: absolute;
top: 0.25rem;
bottom: 0.25rem;
width: 1px;
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.hextra-sidebar-container .hextra-sidebar-item-list:is(html[class~="dark"] *)::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="ltr"], [dir="ltr"] *) {
margin-left: 0.75rem;
padding-left: 0.75rem;
}
.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="ltr"], [dir="ltr"] *)::before {
content: var(--tw-content);
left: 0px;
}
.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="rtl"], [dir="rtl"] *) {
margin-right: 0.75rem;
padding-right: 0.75rem;
}
.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="rtl"], [dir="rtl"] *)::before {
content: var(--tw-content);
right: 0px;
}
.hextra-sidebar-container .hextra-sidebar-item-link {
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
border-radius: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: .875rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.hextra-sidebar-container .hextra-sidebar-item-link.active {
--tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / var(--tw-bg-opacity));
font-weight: 600;
--tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-text-opacity));
}
@media (prefers-contrast: more) {

.hextra-sidebar-container .hextra-sidebar-item-link.active {
border-width: 1px;
--tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
}
}
.hextra-sidebar-container .hextra-sidebar-item-link.active:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / 0.1);
--tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
}
@media (prefers-contrast: more) {

.hextra-sidebar-container .hextra-sidebar-item-link.active:is(html[class~="dark"] *) {
--tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
}
}
.hextra-sidebar-container .hextra-sidebar-item-link.inactive {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
@media (prefers-contrast: more) {

.hextra-sidebar-container .hextra-sidebar-item-link.inactive {
border-width: 1px;
border-color: transparent;
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}

.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover {
--tw-border-opacity: 1;
border-color: rgb(17 24 39 / var(--tw-border-opacity));
}
}
.hextra-sidebar-container .hextra-sidebar-item-link.inactive:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity));
}
.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.05);
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity));
}
@media (prefers-contrast: more) {

.hextra-sidebar-container .hextra-sidebar-item-link.inactive:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity));
}

.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover:is(html[class~="dark"] *) {
--tw-border-opacity: 1;
border-color: rgb(249 250 251 / var(--tw-border-opacity));
}
}
nav .search-wrapper {
display: none;
}
Expand Down Expand Up @@ -2689,11 +2802,6 @@ body:is(html[class~="dark"] *) {
content: var(--tw-content);
inset: 0px;
}
.before\:hx-inset-y-1::before {
content: var(--tw-content);
top: 0.25rem;
bottom: 0.25rem;
}
.before\:hx-mr-1::before {
content: var(--tw-content);
margin-right: 0.25rem;
Expand All @@ -2702,37 +2810,16 @@ body:is(html[class~="dark"] *) {
content: var(--tw-content);
display: inline-block;
}
.before\:hx-w-px::before {
content: var(--tw-content);
width: 1px;
}
.before\:hx-bg-gray-200::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.before\:hx-opacity-25::before {
content: var(--tw-content);
opacity: 0.25;
}
.before\:hx-transition-transform::before {
content: var(--tw-content);
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.before\:hx-content-\[\'\#\'\]::before {
--tw-content: '#';
content: var(--tw-content);
}
.before\:hx-content-\[\'\'\]::before {
--tw-content: '';
content: var(--tw-content);
}
.before\:hx-content-\[\\\"\\\"\]::before {
--tw-content: \"\";
content: var(--tw-content);
}
.first\:hx-mt-0:first-child {
margin-top: 0px;
}
Expand Down Expand Up @@ -2911,15 +2998,6 @@ body:is(html[class~="dark"] *) {
border-color: rgb(163 163 163 / var(--tw-border-opacity));
}

.contrast-more\:hx-border-primary-500 {
--tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
}

.contrast-more\:hx-border-transparent {
border-color: transparent;
}

.contrast-more\:hx-font-bold {
font-weight: 700;
}
Expand Down Expand Up @@ -2958,11 +3036,6 @@ body:is(html[class~="dark"] *) {
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.contrast-more\:hover\:hx-border-gray-900:hover {
--tw-border-opacity: 1;
border-color: rgb(17 24 39 / var(--tw-border-opacity));
}
}
.dark\:hx-block:is(html[class~="dark"] *) {
display: block;
Expand Down Expand Up @@ -3048,9 +3121,6 @@ body:is(html[class~="dark"] *) {
.dark\:hx-bg-primary-300\/10:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
}
.dark\:hx-bg-primary-400\/10:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / 0.1);
}
.dark\:hx-bg-primary-600:is(html[class~="dark"] *) {
--tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-bg-opacity));
Expand Down Expand Up @@ -3109,18 +3179,10 @@ body:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: rgb(229 229 229 / var(--tw-text-opacity));
}
.dark\:hx-text-neutral-400:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity));
}
.dark\:hx-text-orange-300:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: rgb(253 186 116 / var(--tw-text-opacity));
}
.dark\:hx-text-primary-600:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
}
.dark\:hx-text-red-200:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: rgb(254 202 202 / var(--tw-text-opacity));
Expand Down Expand Up @@ -3162,11 +3224,6 @@ body:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.dark\:before\:hx-bg-neutral-800:is(html[class~="dark"] *)::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.dark\:before\:hx-invert:is(html[class~="dark"] *)::before {
content: var(--tw-content);
--tw-invert: invert(100%);
Expand Down Expand Up @@ -3282,11 +3339,6 @@ body:is(html[class~="dark"] *) {
border-color: rgb(163 163 163 / var(--tw-border-opacity));
}

.contrast-more\:dark\:hx-border-primary-500:is(html[class~="dark"] *) {
--tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
}

.dark\:contrast-more\:hx-border-neutral-400:is(html[class~="dark"] *) {
--tw-border-opacity: 1;
border-color: rgb(163 163 163 / var(--tw-border-opacity));
Expand Down Expand Up @@ -3322,11 +3374,6 @@ body:is(html[class~="dark"] *) {
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.contrast-more\:dark\:hover\:hx-border-gray-50:hover:is(html[class~="dark"] *) {
--tw-border-opacity: 1;
border-color: rgb(249 250 251 / var(--tw-border-opacity));
}
}
@media not all and (min-width: 1280px) {

Expand Down Expand Up @@ -3474,9 +3521,6 @@ body:is(html[class~="dark"] *) {
.ltr\:hx-ml-1:where([dir="ltr"], [dir="ltr"] *) {
margin-left: 0.25rem;
}
.ltr\:hx-ml-3:where([dir="ltr"], [dir="ltr"] *) {
margin-left: 0.75rem;
}
.ltr\:hx-ml-auto:where([dir="ltr"], [dir="ltr"] *) {
margin-left: auto;
}
Expand Down Expand Up @@ -3526,10 +3570,6 @@ body:is(html[class~="dark"] *) {
.ltr\:hx-text-right:where([dir="ltr"], [dir="ltr"] *) {
text-align: right;
}
.ltr\:before\:hx-left-0:where([dir="ltr"], [dir="ltr"] *)::before {
content: var(--tw-content);
left: 0px;
}
@media (min-width: 768px) {

.ltr\:md\:hx-left-auto:where([dir="ltr"], [dir="ltr"] *) {
Expand All @@ -3551,9 +3591,6 @@ body:is(html[class~="dark"] *) {
.rtl\:hx-mr-1:where([dir="rtl"], [dir="rtl"] *) {
margin-right: 0.25rem;
}
.rtl\:hx-mr-3:where([dir="rtl"], [dir="rtl"] *) {
margin-right: 0.75rem;
}
.rtl\:hx-mr-auto:where([dir="rtl"], [dir="rtl"] *) {
margin-right: auto;
}
Expand Down Expand Up @@ -3597,10 +3634,6 @@ body:is(html[class~="dark"] *) {
.rtl\:hx-text-left:where([dir="rtl"], [dir="rtl"] *) {
text-align: left;
}
.rtl\:before\:hx-right-0:where([dir="rtl"], [dir="rtl"] *)::before {
content: var(--tw-content);
right: 0px;
}
.rtl\:before\:hx-rotate-180:where([dir="rtl"], [dir="rtl"] *)::before {
content: var(--tw-content);
--tw-rotate: 180deg;
Expand Down
Loading