From 3bf38cbf7c5a36a19ff48c442e10ef9af19649ab Mon Sep 17 00:00:00 2001 From: uncenter <47499684+uncenter@users.noreply.github.com> Date: Wed, 18 Oct 2023 09:22:34 -0400 Subject: [PATCH] feat: v6 redesign (#38) --- src/_includes/projectslist.njk | 48 ++-- src/_layouts/base.njk | 302 ++++++++++++----------- src/assets/scripts/theme-init.js | 4 +- src/assets/styles.scss | 133 +++++----- src/posts/index.njk | 2 +- src/posts/spellchecking-with-eleventy.md | 16 +- src/privacy.md | 4 +- tailwind.config.js | 6 - utils/plugins/md.library.js | 1 - 9 files changed, 263 insertions(+), 253 deletions(-) diff --git a/src/_includes/projectslist.njk b/src/_includes/projectslist.njk index 093f46a6..ccfb9ae2 100644 --- a/src/_includes/projectslist.njk +++ b/src/_includes/projectslist.njk @@ -1,37 +1,33 @@
{%- for project in projectslist -%} -
-

- - {{ project.name }} - -

-

- {{ project.description }} -

-
+ +
+

{{ project.name }}

+

{{ project.description }}

+
+
{{ project.language }}
- +
{%- icon "si:github", class='block w-5 h-5 text-fg align-baseline' -%} - - {% if project.live %} - {%- if project.live.startsWith("https://discord.gg") -%} - {%- set liveIcon = 'si:discord' -%} - {%- elif project.live.startsWith("https://npmjs.com") or project.live.startsWith("https://www.npmjs.com") -%} - {%- set liveIcon = 'si:npm' -%} - {%- else -%} - {%- set liveIcon = 'lucide:globe' -%} - {%- endif -%} - - {%- icon liveIcon, class='block w-5 h-5 text-fg align-baseline' -%} - - {% endif %} +
+ {% if project.live %} + {%- if project.live.startsWith("https://discord.gg") -%} + {%- set liveIcon = 'si:discord' -%} + {%- elif project.live.startsWith("https://npmjs.com") or project.live.startsWith("https://www.npmjs.com") -%} + {%- set liveIcon = 'si:npm' -%} + {%- else -%} + {%- set liveIcon = 'lucide:globe' -%} + {%- endif -%} +
+ {%- icon liveIcon, class='block w-5 h-5 text-fg align-baseline' -%} +
+ {% endif %}
-
+ {% endfor %} -
\ No newline at end of file +
diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk index d68649fb..e62fc4f9 100644 --- a/src/_layouts/base.njk +++ b/src/_layouts/base.njk @@ -1,169 +1,171 @@ --- -navLinks: - - title: Articles - url: /posts/ - - title: Projects - url: /projects/ - - title: Uses - url: /uses/ - - title: Privacy - url: /privacy/ +headerLinks: + - title: Articles + url: /posts/ + - title: Projects + url: /projects/ + - title: Uses + url: /uses/ +footerLinks: + - title: RSS Feed + url: /feed.xml + - title: JSON Feed + url: /feed.json + - title: Privacy & Licensing + url: /privacy/ + - title: Sitemap + url: /sitemap.xml --- {% if title %} {% set title = title + " - " + site.domain %} {% else %} - {% set title = site.domain %} + {% set title = site.domain %} {%- endif -%} - - - - {{ title }} + + + + {{ title }} - + - - - + + + - - - - - + + + + + - - - - - - - - + + + + + + + + - - + + - - - + + + - {% if layout != 'post.njk' %} - - {% else %} - - - - {% for keyword in tags %} - - {% endfor %} - {% endif %} - - - + {% if layout != 'post.njk' %} + + {% else %} + + + + {% for keyword in tags %} + + {% endfor %} + {% endif %} + + + - - - - - -
-
- - My profile picture, an random AI generated image. A circular building with white walls and magnificent skylight, through which a bright blue sky with fluffy clouds scattered throughout is visible. - {{ site.author.name }} - - -
-
-
- {{ content | safe }} -
- - - + + + + + +
+ + My profile picture, an random AI generated image. A circular building with white walls and magnificent skylight, through which a bright blue sky with fluffy clouds scattered throughout is visible. + {{ site.author.name }} + + +
+
+ {{ content | safe }} +
+ + + diff --git a/src/assets/scripts/theme-init.js b/src/assets/scripts/theme-init.js index 5fb30980..70bddc23 100644 --- a/src/assets/scripts/theme-init.js +++ b/src/assets/scripts/theme-init.js @@ -16,8 +16,8 @@ function setMetaThemeColor(theme) { ); } -function setTheme(theme, options = { permanent: true, update: true }) { - const { permanent, update } = options; +function setTheme(theme, options) { + const { permanent, update } = { permanent: true, update: true, ...options }; if (permanent) localStorage.setItem('theme', theme); if (theme === 'system') theme = getSystemTheme(); document.documentElement.setAttribute('theme', theme); diff --git a/src/assets/styles.scss b/src/assets/styles.scss index 5b22064d..0d311766 100644 --- a/src/assets/styles.scss +++ b/src/assets/styles.scss @@ -3,34 +3,7 @@ html { } body { - @apply flex flex-col gap-8 mx-auto px-8 py-24 text-base/7; -} - -@media (min-width: 1024px) { - body { - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto auto; - gap: 0 4rem; - max-width: 1024px; - } -} - -header { - grid-row: 1 / 1; - grid-column: 1 / 1; -} - -footer { - grid-row: 2 / 2; - grid-column: 1 / 1; -} - -main { - grid-row: 1 / span 3; - grid-column: 2 / 2; - margin-left: auto; - margin-right: auto; + @apply flex flex-col gap-8 mx-auto px-8 py-4 text-base/7; } h1, @@ -49,43 +22,74 @@ div { --dark: #17181b; --dark-gray: #30363d; --light-gray: #d0d7de; - --dark-blue: #2463eb; - --light-blue: #60a5fa; - - ::selection { - color: var(--bg); - } + --blue: #2d82b7; + --red: #e56b6f; + + --inline-code-bg-light: #afb8c133; + --inline-code-bg-dark: #6e768166; + --code-copy-border-light: #1f232826; + --code-copy-border-dark: #f0f6fc1a; + --code-copy-fill-light: #656d76; + --code-copy-fill-dark: #7d8590ff; + --code-copy-border-hover-light: #1f232866; + --code-copy-border-hover-dark: #f0f6fc4d; } -:root[theme='light'] { +@mixin light-theme-styles() { --bg: var(--light); --fg: var(--dark); --current-gray: var(--light-gray); - --gray-opposite: var(--dark-gray); + --opposite-gray: var(--dark-gray); + --link: var(--blue); + + --inline-code-bg: var(--inline-code-bg-light); + --code-copy-border: var(--code-copy-border-light); + --code-copy-fill: var(--code-copy-fill-light); + --code-copy-border-hover: var(--code-copy-border-hover-light); .shiki, .shiki span { color: var(--shiki-light); } - - ::selection { - background-color: var(--dark-blue); - } } -:root[theme='dark'] { +@mixin dark-theme-styles() { --bg: var(--dark); --fg: var(--light); --current-gray: var(--dark-gray); - --gray-opposite: var(--light-gray); + --opposite-gray: var(--light-gray); + --link: var(--red); + + --inline-code-bg: var(--inline-code-bg-dark); + --code-copy-border: var(--code-copy-border-dark); + --code-copy-fill: var(--code-copy-fill-dark); + --code-copy-border-hover: var(--code-copy-border-hover-dark); .shiki, .shiki span { color: var(--shiki-dark); } +} + +:root[theme='light'] { + @include light-theme-styles(); +} + +:root[theme='dark'] { + @include dark-theme-styles(); +} + +:root:not([theme]) { + .code-block .toolbar { + display: none; + } - ::selection { - background-color: var(--light-blue); + @media (prefers-color-scheme: light) { + @include light-theme-styles(); + } + + @media (prefers-color-scheme: dark) { + @include dark-theme-styles(); } } @@ -114,7 +118,7 @@ div { img, pre { - @apply border border-currentGray rounded-md border-solid; + @apply border border-[var(--current-gray)] rounded-md border-solid; } blockquote { @@ -138,9 +142,20 @@ div { &:not(.not-fancy) { &:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a) { - @apply text-[#0969da]; + @apply text-[var(--link)]; + } + + text-decoration-line: underline; + text-decoration-color: transparent; + text-underline-offset: 2px; + + &:hover { + text-decoration-color: currentColor; } - @apply hover:underline decoration-current; + + transition-property: color, text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } } @@ -182,19 +197,19 @@ div { @apply italic pb-px; } - h2 a.anchor::before, - h3 a.anchor::before { - @apply absolute w-12 content-['Β§'] transition-opacity duration-[0.2s] ease-[ease] text-center opacity-0 -left-10 text-oppositeGray; + h2 a::before, + h3 a::before { + @apply absolute w-12 content-['Β§'] transition-opacity duration-[0.2s] ease-[ease] text-center opacity-0 -left-10 text-[var(--opposite-gray)]; } - h2 a.anchor:hover::before, - h3 a.anchor:hover::before { + h2 a:hover::before, + h3 a:hover::before { @apply opacity-100; } } kbd { - @apply border border-currentGray bg-transparent px-1 py-0.5 rounded-sm border-solid; + @apply border border-[var(--current-gray)] bg-transparent px-1 py-0.5 rounded-sm border-solid; } } @@ -213,15 +228,19 @@ div.code-block { @apply absolute flex gap-1 m-2 right-0 top-0; button { - @apply align-text-bottom cursor-pointer shadow-none transition-colors ease-in-out p-0 rounded-md bg-bg; - @apply border border-solid border-[#1f232826] dark:border-[#F0F6FC1A] fill-[#656d76] dark:fill-[#7D8590FF]; + @apply align-text-bottom cursor-pointer shadow-none transition-colors ease-in-out p-2 rounded-md bg-bg; + @apply border border-solid border-[var(--code-copy-border)] fill-[var(--code-copy-fill)]; + + &:hover { + @apply border-[var(--code-copy-border-hover)]; + } &.active { @apply fill-[#1a7f37] border-[#1f883d]; } svg { - @apply w-4 h-4 inline overflow-visible m-2; + @apply w-4 h-4 inline overflow-visible; } } } @@ -229,5 +248,5 @@ div.code-block { :not(pre) > code { @apply text-xs whitespace-normal px-[0.4em] py-[0.2em] rounded-md; - @apply bg-[#afb8c133] dark:bg-[#6E768166]; + @apply bg-[var(--inline-code-bg)]; } diff --git a/src/posts/index.njk b/src/posts/index.njk index 13db7211..28881354 100644 --- a/src/posts/index.njk +++ b/src/posts/index.njk @@ -5,4 +5,4 @@ description: Articles about programming, linguistics, and other things. --- {% set postslist = collections.posts | reverse %} -{% include "postslist.njk" %} \ No newline at end of file +{% include "postslist.njk" %} diff --git a/src/posts/spellchecking-with-eleventy.md b/src/posts/spellchecking-with-eleventy.md index e85c65c8..1195d641 100644 --- a/src/posts/spellchecking-with-eleventy.md +++ b/src/posts/spellchecking-with-eleventy.md @@ -52,12 +52,12 @@ An important step is to define specific words to exclude or flag. I told `cSpell ```js words: [ - 'eleventy', + 'eleventy', '11ty', 'shortcodes', 'webc', ], - flagWords: [], + flagWords: [], ``` ### Dictionaries @@ -65,10 +65,10 @@ An important step is to define specific words to exclude or flag. I told `cSpell In addition to the `words` property, you can also define dictionaries - just longer lists of words. I added a dictionary for my GitHub repositories to prevent those from being spell-checked if I ever write about them. ```js - dictionaries: ["repos"], - dictionaryDefinitions: [ - { "name": "repos", "path": "./utils/dicts/repos.txt" }, - ], + dictionaries: ["repos"], + dictionaryDefinitions: [ + { "name": "repos", "path": "./utils/dicts/repos.txt" }, + ], ``` Instead of manually updating my `repos.txt` dict, I wrote a script to fetch my repositories from the GitHub API and write them to the file. @@ -114,9 +114,9 @@ command = "node ./utils/get-repos.js && npm run spell && npm run build" Finally, the config file allows you to define regular expression patterns to ignore. I added patterns to ignore words in Nunjucks expressions, Markdown code blocks and inline code, and proper nouns (words that start with a capital letter). ```js - {% raw %}// ... + {% raw %}// ... ignoreRegExpList: [ - 'nunjucksExpression', + 'nunjucksExpression', 'markdownCodeBlock', 'markdownInlineCode', 'properNouns', diff --git a/src/privacy.md b/src/privacy.md index dd196268..2c5934d4 100644 --- a/src/privacy.md +++ b/src/privacy.md @@ -6,9 +6,9 @@ description: Information about data collection and licensing. ## Analytics -This site Umami Analytics - an open-source alternative to Google Analytics - which is GDPR compliant. Umami does not collect any personally identifiable information and anonymizes all data collected. Users cannot be identified and are never tracked across websites. Umami also does not use any cookies. +This website uses [Umami Analytics](https://umami.is/), an open-source alternative to Google Analytics. Umami is GDPR compliant, does not collect any personally identifiable information, and anonymizes all data collected. Users cannot be identified and are never tracked across websites. Umami also does not use any cookies. -The analytics data [is publicly available]({{ analytics.share }}). +The analytics data [is publicly available for anyone to view]({{ analytics.share }}). ## Licensing diff --git a/tailwind.config.js b/tailwind.config.js index 85afc406..2c85d8d0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -20,12 +20,6 @@ module.exports = { colors: { bg: 'var(--bg)', fg: 'var(--fg)', - lightGray: 'var(--light-gray)', - darkGray: 'var(--dark-gray)', - currentGray: 'var(--current-gray)', - oppositeGray: 'var(--gray-opposite)', - lightBlue: 'var(--light-blue)', - darkBlue: 'var(--dark-blue)', }, fontFamily: { display: ['"General Sans"', ...defaultTheme.fontFamily.sans], diff --git a/utils/plugins/md.library.js b/utils/plugins/md.library.js index 91b80efc..48b78de7 100644 --- a/utils/plugins/md.library.js +++ b/utils/plugins/md.library.js @@ -13,7 +13,6 @@ const markdownLibrary = markdownIt({ }) .use(markdownItAnchor, { permalink: markdownItAnchor.permalink.headerLink({ - class: 'anchor', safariReaderFix: true, }), })