Implement navigator

This commit is contained in:
Nathan Upchurch 2025-04-08 16:47:21 -05:00
parent 7f2dd128c3
commit 8762c9c977
11 changed files with 377 additions and 82 deletions

View File

@ -19,6 +19,43 @@ export default {
defaultPostImageAlt: "The logo for this blog: a capital letter N.", defaultPostImageAlt: "The logo for this blog: a capital letter N.",
mastodonHost: "lounge.town", mastodonHost: "lounge.town",
mastodonUser: "nathanu", mastodonUser: "nathanu",
navigatorLinks: [
{
iconURL: "/img/icons/breeze/typewriter.svg",
linkDisplay: "Blog",
linkURL: "/blog/",
},
{
iconURL: "/img/icons/breeze/view-preview.svg",
linkDisplay: "Galleries",
linkURL: "/galleries/",
},
{
iconURL: "/img/icons/breeze/document-edit-sign.svg",
linkDisplay: "Quizzes",
linkURL: "/quizzes/",
},
{
iconURL: "/img/icons/breeze/news-subscribe.svg",
linkDisplay: "Life Updates",
linkURL: "/now/",
},
{
iconURL: "/img/icons/breeze/map-globe.svg",
linkDisplay: "Sitemap",
linkURL: "/sitemap/",
},
{
iconURL: "/img/icons/breeze/view-list-text.svg",
linkDisplay: "Blogroll",
linkURL: "/blogroll/",
},
{
iconURL: "/img/icons/breeze/tag.svg",
linkDisplay: "Topics",
linkURL: "/tags/",
},
],
postlistHeaderText: "Latest blog posts:", postlistHeaderText: "Latest blog posts:",
socialLinks: [ socialLinks: [
{ {

10
_includes/navigator.njk Normal file
View File

@ -0,0 +1,10 @@
<section class="navigator">
{% for link in metadata.navigatorLinks %}
<div class="navigatorItem">
<a href="{{ link.linkURL }}">
<img src="{{ link.iconURL }}">
<p>{{ link.linkDisplay }}</p>
</a>
</div>
{% endfor %}
</section>

View File

@ -9,84 +9,4 @@ numberOfGalleriesToShow: 1
numberOfQuizzesToShow: 1 numberOfQuizzesToShow: 1
hideGalleryDescriptions: 1 hideGalleryDescriptions: 1
--- ---
<section class="indexFeature"> {% include "navigator.njk" %}
<h2>Latest gallery:</h2>
{% set postsCount = galleries | length %}
{% set latestPostsCount = postsCount | min(numberOfGalleriesToShow) %}
{% set postslist = galleries | head(-1 * numberOfGalleriesToShow) %}
{% set postslistCounter = postsCount %}
{% set showPostListHeader = false %}
{% include "gallerieslist.njk" %}
{% set morePosts = postsCount - numberOfGalleriesToShow %}
{% if morePosts > 0 %}
<a href="/galleries/">
<button type="button">
See {{ morePosts }} more »
</button>
</a>
{% endif %}
</section>
<section class="indexFeature">
<h2>Latest quiz:</h2>
{% set postsCount = collections.quiz | length %}
{% set latestPostsCount = postsCount | min(numberOfQuizzesToShow) %}
{% set postslist = collections.quiz | head(-1 * numberOfQuizzesToShow) %}
{% set postslistCounter = postsCount %}
{% set showPostListHeader = false %}
{% include "postslist.njk" %}
{% set morePosts = postsCount - numberOfQuizzesToShow %}
{% if morePosts > 0 %}
<a href="/quizzes/">
<button type="button">
See {{ morePosts }} more »
</button>
</a>
{% endif %}
</section>
<section class="indexFeature">
<div class="now">
<h2>Life updates:</h2>
{% set postsCount = collections.now | length %}
{% set latestPostsCount = postsCount | min(numberOfNowPostsToShow) %}
{% set postslist = collections.now | head(-1 * numberOfNowPostsToShow) %}
{% set postslistCounter = postsCount %}
{% set showPostListHeader = false %}
{% include "postslist.njk" %}
{% set morePosts = postsCount - numberOfNowPostsToShow %}
{% if morePosts > 0 %}
<a href="/now/">
<button type="button">
See {{ morePosts }} more »
</button>
</a>
{% endif %}
</div>
</section>
<section class="indexFeature">
{% set postsCount = collections.posts | length %}
{% set latestPostsCount = postsCount | min(numberOfLatestPostsToShow) %}
{% set postslist = collections.posts | head(-1 * numberOfLatestPostsToShow) %}
{% set postslistCounter = postsCount %}
{% set showPostListHeader = true %}
{% include "postslist.njk" %}
{% set morePosts = postsCount - numberOfLatestPostsToShow %}
{% if morePosts > 0 %}
<div class="buttonContainer">
<a href="/blog/">
<button type="button">
See {{ morePosts }} more »
</button>
</a>
{% endif %}
<a href="/tags/">
<button type="button">Topics »</button>
</a>
</div>
</section>

View File

@ -721,8 +721,49 @@ nav ul {
); /* Compensate for border thickness */ ); /* Compensate for border thickness */
} }
/* Posts list */ /* Navigator */
.navigator {
display: grid;
gap: var(--space-2xs) var(--space-2xs);
grid-template-columns: repeat(auto-fill, minmax(var(--space-6xl), 1fr));
width: 100%;
.navigatorItem {
background-color: var(--background-color);
border: 1.5px solid var(--text-color);
border-radius: var(--border-radius);
color: var(--text-color);
display: flex;
flex-flow: column wrap;
height: var(--space-3xl);
text-align: center;
a {
height: 100%;
padding: var(--space-s) var(--space-xs);
text-decoration: none;
width: 100%;
img {
filter: var(--logo-filter);
width: var(--space-m);
}
}
&:hover {
background-color: var(--text-color);
border: 1.5px solid var(--text-color);
transition: var(--transition-normal);
a {
color: var(--background-color);
transition: var(--transition-normal);
img {
filter: none;
transition: var(--transition-normal);
}
}
}
}
}
/* Posts list */
.postlist, .postlist,
.links-nextprev { .links-nextprev {
container: postlist / inline-size; container: postlist / inline-size;

View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 22 22"
version="1.1"
id="svg1"
sodipodi:docname="document-edit-sign.svg"
inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="41.5"
inkscape:cx="11"
inkscape:cy="11"
inkscape:window-width="2048"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<defs
id="defs1">
<style
type="text/css"
id="current-color-scheme">.ColorScheme-Text { color: #fcfcfc; } </style>
</defs>
<path
class="ColorScheme-Text"
style="fill:#faf5f5;fill-opacity:1;stroke:none"
d="M 4 3 L 4 19 L 9 19 L 9 18 L 5 18 L 5 4 L 13 4 L 13 8 L 17 8 L 17 11 L 18 11 L 18 7 L 14 3 L 4 3 Z M 18.0002 12.9961 L 16 11 L 10.0079 16.9893 L 9.9999 18.9825 L 12.0139 18.9805 L 18.0002 12.9961 Z M 16.2951 13.293 L 11.3049 18.2754 L 10.7112 17.6836 L 15.7034 12.6992 L 16.2951 13.293 Z"
id="path1" />
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 22 22"
version="1.1"
id="svg1"
sodipodi:docname="map-globe.svg"
inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="41.5"
inkscape:cx="11"
inkscape:cy="11"
inkscape:window-width="2048"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<defs
id="defs3051">
<style
type="text/css"
id="current-color-scheme">.ColorScheme-Text { color: #fcfcfc; } </style>
</defs>
<path
style="fill:#faf5f5;fill-opacity:1;stroke:none"
d="M 11.117188 3 A 8.0000029 8.0000095 0 0 0 5.34375 5.34375 A 8.0000029 8.0000095 0 0 0 5.34375 16.65625 A 8.0000029 8.0000095 0 0 0 16.65625 16.65625 A 8.0000029 8.0000095 0 0 0 16.65625 5.34375 A 8.0000029 8.0000095 0 0 0 11.117188 3 z M 10.898438 4 A 7 7 0 0 1 15.578125 5.7148438 L 14.173828 7.1191406 A 8 5 45 0 0 8.75 4.3769531 A 7 7 0 0 1 10.898438 4 z M 7.8710938 5.3066406 A 7 4 45 0 1 13.464844 7.828125 L 11 10.292969 L 6.4492188 5.7421875 A 7 4 45 0 1 7.8710938 5.3066406 z M 16.291016 6.4160156 A 7 7 0 0 1 17.626953 13.226562 A 8 5 45 0 0 14.876953 7.8300781 L 16.291016 6.4160156 z M 5.7402344 6.4472656 L 10.292969 11 L 7.8261719 13.466797 A 7 4 45 0 1 5.7402344 6.4472656 z M 14.173828 8.5332031 A 7 4 45 0 1 16.259766 15.552734 L 11.707031 11 L 14.173828 8.5332031 z M 4.3730469 8.7734375 A 8 5 45 0 0 7.1230469 14.169922 L 5.7089844 15.583984 A 7 7 0 0 1 4.3730469 8.7734375 z M 11 11.707031 L 15.550781 16.257812 A 7 4 45 0 1 8.5351562 14.171875 L 11 11.707031 z M 7.8261719 14.880859 A 8 5 45 0 0 13.25 17.623047 A 7 7 0 0 1 6.421875 16.285156 L 7.8261719 14.880859 z "
class="ColorScheme-Text"
id="path1" />
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 22 22"
version="1.1"
id="svg1"
sodipodi:docname="news-subscribe.svg"
inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="41.5"
inkscape:cx="11"
inkscape:cy="11"
inkscape:window-width="2048"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<defs
id="defs3051">
<style
type="text/css"
id="current-color-scheme">.ColorScheme-Text { color: #fcfcfc; } </style>
</defs>
<path
style="fill:#faf5f5;fill-opacity:1;stroke:none"
d="M 4 3 L 4 5 L 3 5 L 3 6 L 3 19 L 4 19 L 19 19 L 19 18 L 19 6 L 19 5 L 18 5 L 18 3 L 5 3 L 4 3 z M 5 4 L 17 4 L 17 5 L 5 5 L 5 4 z M 4 6 L 18 6 L 18 18 L 4 18 L 4 6 z M 5 7 L 5 11 L 9 11 L 9 7 L 5 7 z M 11 7 L 11 8 L 17 8 L 17 7 L 11 7 z M 11 10 L 11 11 L 17 11 L 17 10 L 11 10 z M 5 12 L 5 17 L 17 17 L 17 12 L 5 12 z "
class="ColorScheme-Text"
id="path1" />
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 22 22"
version="1.1"
id="svg1"
sodipodi:docname="tag.svg"
inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="41.5"
inkscape:cx="11"
inkscape:cy="11"
inkscape:window-width="2048"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<defs
id="defs3051">
<style
type="text/css"
id="current-color-scheme">.ColorScheme-Accent { color: #3daee9; } .ColorScheme-Text { color: #fcfcfc; } </style>
</defs>
<path
style="fill:#faf5f5;fill-opacity:1;stroke:none"
d="M 9 3 L 3 5 L 5 11 L 15 16 L 19 8 L 9 3 z M 3 5 L 3 11 L 11 19 L 13.705078 16.294922 L 4 11 L 3 5 z M 6.5 5 C 7.331 5 8 5.669 8 6.5 C 8 7.331 7.331 8 6.5 8 C 5.669 8 5 7.331 5 6.5 C 5 5.669 5.669 5 6.5 5 z "
class="ColorScheme-Text"
id="path1" />
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 22 22"
version="1.1"
id="svg1"
sodipodi:docname="typewriter.svg"
inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="41.5"
inkscape:cx="11"
inkscape:cy="11"
inkscape:window-width="2048"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<defs
id="defs3051">
<style
type="text/css"
id="current-color-scheme">.ColorScheme-Text { color: #fcfcfc; } </style>
</defs>
<path
style="fill:#faf5f5;fill-opacity:1;stroke:none"
d="M 3 3 L 3 4 L 3 6 L 4 6 L 4 4 L 10 4 L 10 18 L 8 18 L 7 18 L 7 19 L 15 19 L 15 18 L 14 18 L 12 18 L 12 4 L 18 4 L 18 6 L 19 6 L 19 4 L 19 3 L 3 3 z "
class="ColorScheme-Text"
id="path1" />
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 22 22"
version="1.1"
id="svg1"
sodipodi:docname="view-list-text.svg"
inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="41.5"
inkscape:cx="11"
inkscape:cy="11"
inkscape:window-width="2048"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<defs
id="defs3051">
<style
type="text/css"
id="current-color-scheme">.ColorScheme-Text { color: #fcfcfc; } </style>
</defs>
<path
style="fill:#faf5f5;fill-opacity:1;stroke:none"
d="M 3 3 L 3 4 L 19 4 L 19 3 L 3 3 z M 3 5 L 3 6 L 12 6 L 12 5 L 3 5 z M 3 9 L 3 10 L 19 10 L 19 9 L 3 9 z M 3 11 L 3 12 L 13 12 L 13 11 L 3 11 z M 3 15 L 3 16 L 19 16 L 19 15 L 3 15 z M 3 17 L 3 18 L 16 18 L 16 17 L 3 17 z M 17 18 L 17 19 L 19 19 L 19 18 L 17 18 z "
class="ColorScheme-Text"
id="path1" />
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 16 16"
version="1.1"
id="svg1"
sodipodi:docname="view-preview.svg"
inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="57.0625"
inkscape:cx="8"
inkscape:cy="8"
inkscape:window-width="2048"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<defs
id="defs3051">
<style
type="text/css"
id="current-color-scheme">.ColorScheme-Text { color: #fcfcfc; } </style>
</defs>
<path
style="fill:#faf5f5;fill-opacity:1;stroke:none"
d="M 2 2 L 2 13.28125 L 2 14 L 14 14 L 14 13 L 14 12 L 14 11 L 14 10 L 14 2 L 2 2 z M 3 3 L 13 3 L 13 9 L 11 7 L 7.65625 10.34375 L 6.3125 9 L 6.28125 9 L 3 12.28125 L 3 3 z M 6 4 C 4.8954305 4 4 4.8954305 4 6 C 4 7.1045695 4.8954305 8 6 8 C 7.1045695 8 8 7.1045695 8 6 C 8 4.8954305 7.1045695 4 6 4 z "
class="ColorScheme-Text"
id="path1" />
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB