Merge ea7d67c735 into 9c54b590ec

🐛 Add CSS overflow/wrapping on KaTeX, tables, and code sections

.github/labeller.yml

@@ -1,6 +1,7 @@
 i18n:
-  - i18n/*
+- changed-files:
+  - any-glob-to-any-file: i18n/*
 
 documentation:
-  - "*.md"
+- changed-files:
-  - exampleSite/content/*
+  - any-glob-to-any-file: '**/*.md'

CHANGELOG.md

@@ -12,7 +12,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Automatic support for WebP images ([#693](https://github.com/jpanther/congo/pull/693))
 - Warning when building if links to Markdown files cannot be resolved ([#691](https://github.com/jpanther/congo/pull/691))
 - Ability to share articles to Telegram and Line ([#719](https://github.com/jpanther/congo/pull/719))
-- New icon for `line`([#719](https://github.com/jpanther/congo/pull/719))
+- New icons for `line` and `google-scholar` ([#719](https://github.com/jpanther/congo/pull/719), [#755](https://github.com/jpanther/congo/pull/755))
+- Table of contents will now scroll if taller than the browser height ([#733](https://github.com/jpanther/congo/pull/733))
 - Korean translation ([#731](https://github.com/jpanther/congo/pull/731))
 
 ### Changed
@@ -21,11 +22,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - ⚠️ Author params block in language configuration has been moved to `params.author` ([#704](https://github.com/jpanther/congo/pull/704))
 - Refactored image logic into a new `picture.html` partial ([#693](https://github.com/jpanther/congo/pull/693))
 - Upgrade to ChartJS v4.4.1 ([#736](https://github.com/jpanther/congo/pull/736))
-- Upgrade to Tailwind v3.3.6 ([#737](https://github.com/jpanther/congo/pull/737))
+- Upgrade to Tailwind v3.3.7 ([#737](https://github.com/jpanther/congo/pull/737), [#752](https://github.com/jpanther/congo/pull/752))
+- Updated Japanese translation ([#750](https://github.com/jpanther/congo/pull/750))
 
 ### Fixed
 
 - Hamburger menu is not dismissed when links are clicked ([#705](https://github.com/jpanther/congo/pull/705))
+- KaTeX, table and code elements wider than the page are not formatted correctly ([#753](https://github.com/jpanther/congo/pull/753))
 
 ### Removed
 

assets/css/compiled/main.css

@@ -1,6 +1,6 @@
 /*! Congo v2.7.6 | MIT License | https://github.com/jpanther/congo */
 
-/*! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v3.3.7 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -1137,6 +1137,12 @@ body:has(#menu-controller:checked) {
 
 /* Table of Contents */
 
+.toc {
+  max-height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 50px;
+}
+
 .toc ul,
 .toc li {
   list-style-type: none;
@@ -1182,8 +1188,8 @@ body:has(#menu-controller:checked) {
 .copy-button {
   visibility: hidden;
   position: absolute;
-  right: 0px;
   top: 0px;
+  right: 0px;
   z-index: 10;
   width: 5rem;
   cursor: pointer;
@@ -1231,6 +1237,28 @@ body:has(#menu-controller:checked) {
   opacity: 0.05;
 }
 
+/* Fix long KaTeX equations on mobile (see https://katex.org/docs/issues.html#css-customization) */
+
+.katex-display {
+  overflow: auto hidden;
+}
+
+/* Fix long tables breaking out of article on mobile */
+
+table {
+  display: block;
+  overflow: auto;
+}
+
+/* Fix long inline code sections breaking out of article on mobile */
+
+code {
+  word-wrap: break-word;
+  /* All browsers since IE 5.5+ */
+  overflow-wrap: break-word;
+  /* Renamed property in CSS3 draft spec */
+}
+
 /* -- Chroma Highlight -- */
 
 /* Background */

assets/css/main.css

@@ -59,9 +59,15 @@ body:has(#menu-controller:checked) {
 }
 
 /* Table of Contents */
+.toc {
+  max-height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 50px;
+}
+
 .toc ul,
 .toc li {
-  @apply list-none px-0 leading-snug;
+  @apply px-0 leading-snug list-none;
 }
 .toc ul ul {
   @apply ps-4;
@@ -84,7 +90,7 @@ body:has(#menu-controller:checked) {
   @apply visible;
 }
 .copy-button {
-  @apply invisible absolute right-0 top-0 z-10 w-20 cursor-pointer whitespace-nowrap rounded-bl-md rounded-tr-md bg-neutral-200 py-1 font-mono text-sm text-neutral-700 opacity-90 dark:bg-neutral-600 dark:text-neutral-200;
+  @apply absolute top-0 right-0 z-10 invisible w-20 py-1 font-mono text-sm cursor-pointer whitespace-nowrap rounded-bl-md rounded-tr-md bg-neutral-200 text-neutral-700 opacity-90 dark:bg-neutral-600 dark:text-neutral-200;
 }
 .copy-button:hover,
 .copy-button:focus,
@@ -96,23 +102,40 @@ body:has(#menu-controller:checked) {
   @apply absolute -z-10 opacity-5;
 }
 
+/* Fix long KaTeX equations on mobile (see https://katex.org/docs/issues.html#css-customization) */
+.katex-display {
+  overflow: auto hidden;
+}
+
+/* Fix long tables breaking out of article on mobile */
+table {
+  display: block;
+  overflow: auto;
+}
+
+/* Fix long inline code sections breaking out of article on mobile */
+code {
+  word-wrap: break-word; /* All browsers since IE 5.5+ */
+  overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
+}
+
 /* -- Chroma Highlight -- */
 /* Background */
 .chroma {
-  @apply rounded-md bg-neutral-50 py-3 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
+  @apply py-3 rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
 }
 .chroma pre {
-  @apply m-0 p-0;
+  @apply p-0 m-0;
 }
 /* LineTable */
 .chroma .lntable {
-  @apply m-0 block w-auto overflow-auto text-base;
+  @apply block w-auto m-0 overflow-auto text-base;
 }
 /* LineNumbersTable */
 /* LineNumbers */
 .chroma .lnt,
 .chroma .ln {
-  @apply mr-2 px-2 text-neutral-600 dark:text-neutral-300;
+  @apply px-2 mr-2 text-neutral-600 dark:text-neutral-300;
 }
 .chroma .lntd {
   @apply p-0 align-top;
@@ -274,7 +297,7 @@ body:has(#menu-controller:checked) {
 }
 /* CommentHashbang */
 .chroma .ch {
-  @apply font-semibold italic text-neutral-500 dark:text-neutral-400;
+  @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
 }
 /* GenericEmph */
 .chroma .ge {

assets/icons/google-scholar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="currentColor" d="M390.9 298.5c0 0 0 .1 .1 .1c9.2 19.4 14.4 41.1 14.4 64C405.3 445.1 338.5 512 256 512s-149.3-66.9-149.3-149.3c0-22.9 5.2-44.6 14.4-64h0c1.7-3.6 3.6-7.2 5.6-10.7c4.4-7.6 9.4-14.7 15-21.3c27.4-32.6 68.5-53.3 114.4-53.3c33.6 0 64.6 11.1 89.6 29.9c9.1 6.9 17.4 14.7 24.8 23.5c5.6 6.6 10.6 13.8 15 21.3c2 3.4 3.8 7 5.5 10.5zm26.4-18.8c-30.1-58.4-91-98.4-161.3-98.4s-131.2 40-161.3 98.4L0 202.7 256 0 512 202.7l-94.7 77.1z"/></svg>

config/_default/languages.en.toml

@@ -59,4 +59,5 @@ title = "Congo"
   #   { whatsapp = "https://wa.me/phone-number" },
   #   { x-twitter = "https://twitter.com/username" },
   #   { youtube = "https://youtube.com/username" },
+  #   { google-scholar = "https://scholar.google.com/citations?user=user-id"}
   # ]

exampleSite/content/samples/icons/index.de.md

@@ -40,6 +40,7 @@ Die vollständige Liste der integrierten Icons und ihre entsprechenden Namen fin
 | gitlab               | {{< icon gitlab >}}               |
 | globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
+| google-scholar       | {{< icon google-scholar >}}       |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
 | keybase              | {{< icon keybase >}}              |

exampleSite/content/samples/icons/index.es.md

@@ -40,6 +40,7 @@ La lista completa de íconos incorporados y sus nombres correspondientes se pued
 | gitlab               | {{< icon gitlab >}}               |
 | globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
+| google-scholar       | {{< icon google-scholar >}}       |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
 | keybase              | {{< icon keybase >}}              |

exampleSite/content/samples/icons/index.ja.md

@@ -40,6 +40,7 @@ Congo は[FontAwesome 6](https://fontawesome.com/icons)のアイコンをサポ
 | gitlab               | {{< icon gitlab >}}               |
 | globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
+| google-scholar       | {{< icon google-scholar >}}       |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
 | keybase              | {{< icon keybase >}}              |

exampleSite/content/samples/icons/index.md

@@ -40,6 +40,7 @@ The full list of built-in icons and their corresponding names can referenced bel
 | gitlab               | {{< icon gitlab >}}               |
 | globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
+| google-scholar       | {{< icon google-scholar >}}       |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
 | keybase              | {{< icon keybase >}}              |

i18n/ja.yaml

@@ -47,7 +47,7 @@ sharing:
   email: " Eメールを送る"
   facebook: "Facebookでシェアする"
   linkedin: "LinkedInでシェアする"
-  # mastodon: "Toot on Mastodon"
+  mastodon: "Mastodonに投稿する"
   pinterest: "Pinterestでピンする"
   reddit: "Redditに投稿する"
   twitter: "Twitterに投稿する"

package-lock.json

@@ -20,7 +20,7 @@
         "prettier-plugin-tailwindcss": "^0.5.9",
         "quicklink": "^2.3.0",
         "rimraf": "^5.0.5",
-        "tailwindcss": "^3.3.6",
+        "tailwindcss": "^3.3.7",
         "vendor-copy": "^3.0.1"
       },
       "funding": {
@@ -2896,9 +2896,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.6",
+      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.7.tgz",
-      "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
+      "integrity": "sha512-pjgQxDZPvyS/nG3ZYkyCvsbONJl7GdOejfm24iMt2ElYQQw8Jc4p0m8RdMp7mznPD0kUhfzwV3zAwa80qI0zmQ==",
       "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -5199,9 +5199,9 @@
       "dev": true
     },
     "tailwindcss": {
-      "version": "3.3.6",
+      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.7.tgz",
-      "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
+      "integrity": "sha512-pjgQxDZPvyS/nG3ZYkyCvsbONJl7GdOejfm24iMt2ElYQQw8Jc4p0m8RdMp7mznPD0kUhfzwV3zAwa80qI0zmQ==",
       "dev": true,
       "requires": {
         "@alloc/quick-lru": "^5.2.0",

package.json

@@ -39,7 +39,7 @@
     "prettier-plugin-tailwindcss": "^0.5.9",
     "quicklink": "^2.3.0",
     "rimraf": "^5.0.5",
-    "tailwindcss": "^3.3.6",
+    "tailwindcss": "^3.3.7",
     "vendor-copy": "^3.0.1"
   },
   "vendorCopy": [],