From ae684fbad4f36adc936f72f4f61e45a8b2681e30 Mon Sep 17 00:00:00 2001 From: n Date: Mon, 26 Jul 2021 12:07:23 +0200 Subject: [PATCH] Migrate to Codeberg Design Kit (#132) (#149) TODO: - [x] Hide navbar items on small screens - [x] Fix `
` rendering - [x] Fix `` rendering - [ ] LibreJS Compatibility Reviewed-on: https://codeberg.org/Codeberg/Documentation/pulls/149 Co-authored-by: n Co-committed-by: n --- .eleventy.js | 12 + assets/css/codeberg-docs.css | 175 +++--------- assets/images/logo/TRADEMARK.md | 1 - assets/images/logo/codeberg-favicon.svg | 123 --------- assets/images/logo/codeberg-white.svg | 100 ------- assets/images/logo/codeberg.svg | 100 ------- assets/js/collapse.js | 22 -- assets/js/sidebar.js | 43 --- content/_data/env.js | 3 + content/_includes/contribution_invitation.njk | 7 +- content/_includes/default_layout.njk | 251 ++++++++++-------- content/_includes/license.njk | 25 ++ content/collaborating/repo-permissions.md | 2 +- .../improving-codeberg/contributing-code.md | 5 +- deploy.sh | 3 +- package-lock.json | 13 + package.json | 6 +- 17 files changed, 239 insertions(+), 652 deletions(-) delete mode 100644 assets/images/logo/TRADEMARK.md delete mode 100644 assets/images/logo/codeberg-favicon.svg delete mode 100644 assets/images/logo/codeberg-white.svg delete mode 100644 assets/images/logo/codeberg.svg delete mode 100644 assets/js/collapse.js delete mode 100644 assets/js/sidebar.js create mode 100644 content/_data/env.js create mode 100644 content/_includes/license.njk diff --git a/.eleventy.js b/.eleventy.js index 0dbdacd..a00611d 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,5 +1,7 @@ const navigationPlugin = require("@11ty/eleventy-navigation") const syntaxHighlightingPlugin = require("@11ty/eleventy-plugin-syntaxhighlight") +const markdownIt = require('markdown-it'); +const markdownItClass = require('@toycode/markdown-it-class'); module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(navigationPlugin) @@ -10,6 +12,16 @@ module.exports = function(eleventyConfig) { eleventyConfig.addShortcode("fas_icon", function(name) { return `` }) + const mapping = { + h2: 'content-title',h3: 'content-title',h4: 'content-title',h5: 'content-title',h6: 'content-title', + table: 'table', + blockquote: 'alert' + }; + + const md = markdownIt({ linkify: false, html: true }); + md.use(markdownItClass, mapping); + eleventyConfig.setLibrary('md', md); + return { dir: { input: "content" diff --git a/assets/css/codeberg-docs.css b/assets/css/codeberg-docs.css index d87d948..e731776 100644 --- a/assets/css/codeberg-docs.css +++ b/assets/css/codeberg-docs.css @@ -1,151 +1,40 @@ -html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: white; color: black; } -body { display: flex; flex-direction: column; font-family: "Inter", sans-serif; font-size: 13pt; font-weight: 300; } -:link { color: #0000EE; } -:visited { color: #551A8B; } -:link:active, :visited:active { color: #FF0000; } +.content img { border: 5px solid rgba(0, 0, 0, 0.2); max-width: 100%; } +.content blockquote { margin: 0; } +.content-title { margin-top: 20px !important; } -header { height: 60px; margin-top: 30px; margin-bottom: 60px; } -header > .container { display: flex; align-items: center; } -#header-action-buttons { text-align: right; } -#header-logo { height: 100%; padding: 10px; padding-left: 0; box-sizing: border-box; } -#header-logo img { height: 100%; } -#header-logo-container { display: flex; align-items: center; height: 100%; } -#header-logo a { text-decoration: none; } -#logo-heading { color: #2185d0; font-weight: 700; font-size: 28pt; margin-left: 10px; } -#contents-button { display: none; } +.content pre { border-left: 5px solid #2185d0; } +.dark-mode .content pre { border-left: 5px solid #355379; } -main { flex: 1; } -main > .container { display: flex; } +.content ol { list-style: decimal outside; padding-left: 2em; } -#sidebar { display: flex; flex-direction: column; padding: 50px 10px; background: #2185d0; color: white; font-weight: 500; box-sizing: border-box; } -#sidebar nav { width: 350px; box-sizing: border-box; flex: 1; } -#sidebar nav .fas { width: 30px; text-align: center; } -#sidebar nav a { text-decoration: none; color: white; } -#sidebar nav ul { list-style-type: none; padding: 0; margin: 0; } -#sidebar .nav-section a { display: block; padding: 7px 10px; margin: 0 -10px 5px; background: #4595d3; font-size: 12pt; } -#sidebar .nav-section:hover a, #sidebar .nav-section.active a { background: #27628f; margin-left: -15px; padding-left: 15px; padding-right: 15px; margin-right: -15px; } -#sidebar .nav-second-level a { font-size: 11pt; } -#sidebar .nav-second-level ul { margin-left: 15px; padding: 7px 0; } -#sidebar .nav-second-level li { margin-bottom: 10px; } -#sidebar .nav-second-level a:hover, #sidebar .nav-second-level a.active { text-decoration: underline; } -#sidebar .sidebar-close-button { display: none; position: relative; text-align: right; top: -35px; } -#sidebar .sidebar-close-button a:hover { color: red; } -#sidebar .section-collapse-button { margin-left: 0 !important; padding-left: 5px !important; } -#sidebar .section-collapse-button:hover { color: #cfffff; } -#sidebar .section-link { margin-right: 0 !important; padding-right: 5px !important; } -#sidebar-overlay { display: none; opacity: 0; position: fixed; width: 100%; height: 100%; z-index: 999; background: #000a; } -.sidebar-overlay-in { opacity: 1; } - -article { padding: 50px 0; width: 800px; } -article :first-child { margin-top: 0; } - -article h1 { font-size: 34pt; } -article h2 { font-size: 26pt; } -article h3 { font-size: 20pt; } -article h4 { font-size: 16pt; } -article h5 { font-size: 14pt; } -article h6 { font-size: 12pt; } - -article blockquote, article img, article pre { box-sizing: border-box; } -article blockquote, article pre { background: #eee; padding: 30px; margin: 0; border-left: 5px solid #2185d0; overflow: auto; } -article blockquote p:last-of-type { margin-bottom: 0; } -article blockquote blockquote { background: #ddd; } -article code { background: #eee; border-radius: 5px; padding: 1px 3px; } -article pre code { background: none; border-radius: none; padding: 0; } -article img { border: 5px solid #eee; max-width: 100%; } -article p { hyphens: auto; max-width: 100%; } -article table { border-collapse: collapse; } -article td, th { padding: 15px; } -article th { background: #ddd; } -article tr:nth-of-type(even) { background: #eee; } -article hr { width: 80%; border: 1px solid #eee; } - -.contribution-invitation hr { margin-top: 70px; margin-bottom: 30px; } - -footer { background: #f5f5f5; text-align: center; font-size: 8pt; padding: 15px; margin-top: 60px; } - -#mobile-action-buttons { text-align: center; display: none; } -#mobile-contents-button { display: none; } -#mobile-contents-button a { color: #2185D0; font-size: 35px; } - - -.action-buttons { flex: 1; } -.action-buttons a { text-decoration: none; color: black; margin-left: 10px; } -.action-buttons a:hover { text-decoration: underline; } -.collapsible { overflow-y: hidden; transition: max-height 500ms; } -.container { max-width: 1300px; margin: auto; height: 100%; } -.flex-spacer { flex: 99; } - -.narrow-only { display: none; } - -@media screen and (max-width: 1400px) { - .wide-only { display: none; } - .narrow-only { display: initial; } - - #header-logo { margin-left: 0; } - #sidebar { display: block; position: fixed; overflow-y: auto; left: 0; top: 0; height: 100%; transform: translateX(-400px); z-index: 9999; } - #sidebar .sidebar-close-button { display: block; } - #sidebar nav { width: 300px; } - #sidebar .nav-section a { font-size: 11pt; } - - #sidebar-overlay.sidebar-overlay-in { display: block; } - article { margin-left: 0; margin-right: 0; padding-top: 0; width: 100%; } - .container { max-width: 780px; padding: 0 50px; } - #contents-button { display: inline-block; background: #eee; border-radius: 5px; padding: 5px; width: 20px; height: 20px; text-align: center; } - #contents-button:hover { background: #ccc; } +/* Apply code style to generic code */ +pre:not([class*="language-"]) { + background: #2E3440; + color: #f8f8f2; + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; } -@media screen and (max-width: 750px) { - #header-action-buttons { display: none; } - #mobile-action-buttons { display: block; } - #mobile-contents-button { display: block; } +/* Override sidebar link style */ +.codeberg-design .sidebar-title a { color: var(--sidebar-title-text-color); } +.codeberg-design .sidebar-title .dark-mode a { color: var(--dm-sidebar-title-text-color); } - .container { padding: 0 20px; } - article p { text-align: left; } - header { margin-top: 15px; margin-bottom: 30px; height: 50px; } - #header-logo { flex: 1; } - #logo-heading { font-size: 22pt; } - #mobile-contents-button a { font-size: 30px; } - - article h1 { font-size: 28pt; } - article h2 { font-size: 22pt; } - article h3 { font-size: 18pt; } +/* Apply halfmoon style to inline code */ +code:not(pre > code) { + font-size: var(--code-font-size); + line-height: var(--code-line-height); + padding: var(--code-padding); + margin: var(--code-margin); + color: var(--lm-code-text-color); + background-color: var(--lm-code-bg-color); + border: var(--code-border-width) var(--lm-code-border-color); + border-radius: var(--code-border-radius); +} +.dark-mode code:not(pre > code) { + color: var(--dm-code-text-color); + background-color: var(--dm-code-bg-color); + border-color: var(--dm-code-border-color); } -@keyframes slideSidebar { - from { transform: translateX(-300px); } - to { transform: translateX(0); } -} - -@keyframes fadeOverlay { - from { opacity: 0; } - to { opacity: 1; } -} - -@media (prefers-color-scheme: dark) { - #logo-heading { color: #94cddc; } - html, body { background-color: #373B49; color: #9ba8bb; } - - footer { background: #0b0b0b; color: #bbb; } - footer a { color: #36aaff; } - footer a:visited { color: #86afcc; } - - .action-buttons a { color: #9cd9e8; } - - :link { color: #449ddc; } - :visited { color: #5d8499; } - :link:active, :visited:active { color: #828f55; } - - code, pre { color: #9eaa96 !important; } - - article h1 { color: #c6cfee; text-decoration: underline; } - article h2, article h3, article h4, article h5 { color: #c6cfee; } - article code { background: #2e3440; color: #9eaa96; } - article hr { border: 1px solid #91bbdb; } - article blockquote, article pre { background: #21242d; border-left: 5px solid #355379; color: #7f8a95; } - - #sidebar { background: #2c303c; color: #879cb3; } - #sidebar nav a { color: #8aa9b9; } - #sidebar .nav-section a { background: #304862; font-size: 12pt; } - #sidebar .nav-section:hover a, #sidebar .nav-section.active a { background: #20374f; } -} diff --git a/assets/images/logo/TRADEMARK.md b/assets/images/logo/TRADEMARK.md deleted file mode 100644 index 8094959..0000000 --- a/assets/images/logo/TRADEMARK.md +++ /dev/null @@ -1 +0,0 @@ -Codeberg and the Codeberg Logo are trademarks of Codeberg e.V. \ No newline at end of file diff --git a/assets/images/logo/codeberg-favicon.svg b/assets/images/logo/codeberg-favicon.svg deleted file mode 100644 index 24e88f0..0000000 --- a/assets/images/logo/codeberg-favicon.svg +++ /dev/null @@ -1,123 +0,0 @@ - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - diff --git a/assets/images/logo/codeberg-white.svg b/assets/images/logo/codeberg-white.svg deleted file mode 100644 index fb0d48c..0000000 --- a/assets/images/logo/codeberg-white.svg +++ /dev/null @@ -1,100 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/images/logo/codeberg.svg b/assets/images/logo/codeberg.svg deleted file mode 100644 index 4913145..0000000 --- a/assets/images/logo/codeberg.svg +++ /dev/null @@ -1,100 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/js/collapse.js b/assets/js/collapse.js deleted file mode 100644 index b521535..0000000 --- a/assets/js/collapse.js +++ /dev/null @@ -1,22 +0,0 @@ -function onCollapseButtonClick(button) { - let icon = button.querySelector(".fas") - - let collapseId = button.dataset["collapseId"] - let collapseElement = document.getElementById(collapseId) - if (collapseElement.style.maxHeight == "0px") { - icon.classList.remove("fa-plus-square") - icon.classList.add("fa-minus-square") - collapseElement.style.maxHeight = collapseElement.scrollHeight + "px" - } else { - console.log(collapseElement.style.maxHeight) - if (collapseElement.style.maxHeight === "") { // This is a workaround to fix animation when no initial maxHeight has been set - collapseElement.style.maxHeight = collapseElement.scrollHeight + "px" - void collapseElement.offsetWidth // Needed to trigger render - } - - - icon.classList.add("fa-plus-square") - icon.classList.remove("fa-minus-square") - collapseElement.style.maxHeight = "0px" - } -} diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js deleted file mode 100644 index 7b80957..0000000 --- a/assets/js/sidebar.js +++ /dev/null @@ -1,43 +0,0 @@ -function getSidebar() { - return document.querySelector("#sidebar") -} - -function getSidebarOverlay() { - return document.querySelector("#sidebar-overlay") -} - -function hideSidebar() { - resetSidebarAnimation() - getSidebar().style.animation = "slideSidebar 0.5s ease-in-out reverse backwards" -} - -function showSidebar() { - resetSidebarAnimation() - - const sidebar = getSidebar() - sidebar.classList.add("sidebar-in") - sidebar.style.animation = "slideSidebar 0.5s ease-in-out normal forwards" - - const overlay = getSidebarOverlay() - overlay.classList.add("sidebar-overlay-in") - overlay.style.animation = "fadeOverlay 0.5s ease-in-out normal forwards" -} - -function resetSidebarAnimation() { - const sidebar = getSidebar() - sidebar.classList.remove("sidebar-in") - sidebar.style.animation = "none" - void sidebar.offsetWidth // Needed to restart animation - - const overlay = getSidebarOverlay() - overlay.classList.remove("sidebar-overlay-in") - overlay.style.animation = "none" - void overlay.offsetWidth // Needed to restart animation -} - -function toggleSidebar() { - if (getSidebar().classList.contains("sidebar-in")) - hideSidebar() - else - showSidebar() -} diff --git a/content/_data/env.js b/content/_data/env.js new file mode 100644 index 0000000..55ddc97 --- /dev/null +++ b/content/_data/env.js @@ -0,0 +1,3 @@ +module.exports = { + environment: process.env.ELEVENTY_ENV +}; \ No newline at end of file diff --git a/content/_includes/contribution_invitation.njk b/content/_includes/contribution_invitation.njk index 9329944..66d5ef9 100644 --- a/content/_includes/contribution_invitation.njk +++ b/content/_includes/contribution_invitation.njk @@ -1,6 +1,4 @@ -
-
-
+

Hey there! 👋 Thank you for reading this article!

Is there something missing or do you have an idea on how to improve the documentation? @@ -15,5 +13,4 @@ For an introduction on contributing to Codeberg Documentation, please have a look at the Contributor FAQ.

-
-
\ No newline at end of file + diff --git a/content/_includes/default_layout.njk b/content/_includes/default_layout.njk index 84d12b7..e6684cb 100644 --- a/content/_includes/default_layout.njk +++ b/content/_includes/default_layout.njk @@ -1,120 +1,157 @@ - - - {% if eleventyNavigation.title %}{{ eleventyNavigation.title }} | {% endif %}Codeberg Documentation + + + {% if eleventyNavigation.title %}{{ eleventyNavigation.title }} | {% endif %}Codeberg Documentation - - {% if description %}{% endif %} - + + {% if description %}{% endif %} + + + {% if env.environment == "testing" %}{% endif %} - + + + - - - - + + + + + - - + + + - - + + + - - - + + - - - + + + - - -
-
- - - -
-
+ + -
-
- - -
- -
- {% if eleventyNavigation.title %}

{{ eleventyNavigation.title }}

{% endif %} - {% if eleventyNavigation.draft %}Please note that this article is still a draft and might not have any contents yet.{% endif %} - {{ content | safe }} - {% if page.url != '/' %}{% include 'contribution_invitation.njk' %}{% endif %} -
-
- - -
- - - + diff --git a/content/_includes/license.njk b/content/_includes/license.njk new file mode 100644 index 0000000..fe4b083 --- /dev/null +++ b/content/_includes/license.njk @@ -0,0 +1,25 @@ + \ No newline at end of file diff --git a/content/collaborating/repo-permissions.md b/content/collaborating/repo-permissions.md index 3b75c05..07e3bcb 100644 --- a/content/collaborating/repo-permissions.md +++ b/content/collaborating/repo-permissions.md @@ -13,7 +13,7 @@ The owner is the one who created the repository, or, in case of an organization, The table below gives an overview of what collaborators/teams are allowed to do when granted each of these permission levels: - +
diff --git a/content/improving-codeberg/contributing-code.md b/content/improving-codeberg/contributing-code.md index 6a18b70..dc8858b 100644 --- a/content/improving-codeberg/contributing-code.md +++ b/content/improving-codeberg/contributing-code.md @@ -54,12 +54,11 @@ If you fixed an issue specific to Codeberg that should not go into the upstream > merge requests, i. e. they seem to include commits you haven't made. > > If you face this issue, you can `git rebase` your commits onto the -> current Codeberg branch and force-push. Use -> ``` +> current Codeberg branch and force-push. +> ```shell > git rebase origin/codeberg > git push -f > ``` -> for example. ### Working on better deployment methods diff --git a/deploy.sh b/deploy.sh index 02ce6ad..f7650c5 100755 --- a/deploy.sh +++ b/deploy.sh @@ -1,9 +1,8 @@ #!/bin/bash -ex - npm run build rm -rf pages.git -git clone git@codeberg.org:docs/pages.git pages.git +git clone $1 pages.git rsync -av _site/* pages.git/ ( cd pages.git && git checkout --orphan current ) ## create new branch at origin ( cd pages.git && git add -A ) ## add all generated files diff --git a/package-lock.json b/package-lock.json index 4d78f8d..af2eca6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,9 @@ "packages": { "": { "name": "codeberg-docs", + "dependencies": { + "@toycode/markdown-it-class": "^1.2.4" + }, "devDependencies": { "@11ty/eleventy": "^0.12.1", "@11ty/eleventy-navigation": "^0.1.6", @@ -157,6 +160,11 @@ "node": ">= 8" } }, + "node_modules/@toycode/markdown-it-class": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@toycode/markdown-it-class/-/markdown-it-class-1.2.4.tgz", + "integrity": "sha512-hA4gHBK8moObkOYdWTjhy1wYcYy0MJeM3JjSKbsXHRpRMvIKhk6Jm+t3bXsSScTdz/byWqQbs8YIwVYjHp+SlQ==" + }, "node_modules/@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -3959,6 +3967,11 @@ "fastq": "^1.6.0" } }, + "@toycode/markdown-it-class": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@toycode/markdown-it-class/-/markdown-it-class-1.2.4.tgz", + "integrity": "sha512-hA4gHBK8moObkOYdWTjhy1wYcYy0MJeM3JjSKbsXHRpRMvIKhk6Jm+t3bXsSScTdz/byWqQbs8YIwVYjHp+SlQ==" + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", diff --git a/package.json b/package.json index 19687a8..76b3a2d 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,14 @@ "private": true, "scripts": { "build": "rm -rf _site/ && eleventy", - "deploy": "./deploy.sh", + "deploy": "./deploy.sh git@codeberg.org:docs/pages.git", + "deploytest": "ELEVENTY_ENV=testing ./deploy.sh git@codeberg-test.org:docs/pages.git", "serve": "eleventy --serve" }, "devDependencies": { "@11ty/eleventy": "^0.12.1", "@11ty/eleventy-navigation": "^0.1.6", - "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1" + "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1", + "@toycode/markdown-it-class": "^1.2.4" } }
Task