mirror of
https://codeberg.org/Codeberg/Documentation.git
synced 2026-06-16 05:13:54 -07:00
Switch Font Awesome to use SVG icons and update to v6 (#243)
This PR switches the Font Awesome icons to use SVG instead of a font, and updates it to v6. ~~Depends on Codeberg-Infrastructure/codeberg-fonts#13 getting deployed.~~ Now deployed. Reviewed-on: https://codeberg.org/Codeberg/Documentation/pulls/243 Co-authored-by: n <n@noreply.codeberg.org> Co-committed-by: n <n@noreply.codeberg.org>
This commit is contained in:
n
Otto
parent
967b0cd7bd
commit
1ace475965
5 changed files with 123 additions and 53 deletions
11
.eleventy.js
11
.eleventy.js
|
|
@ -3,7 +3,9 @@ const syntaxHighlightingPlugin = require("@11ty/eleventy-plugin-syntaxhighlight"
|
|||
const markdownIt = require('markdown-it');
|
||||
const markdownItClass = require('@toycode/markdown-it-class');
|
||||
const markdownItAnchor = require('markdown-it-anchor')
|
||||
|
||||
const library = require('@fortawesome/fontawesome-svg-core').library;
|
||||
const icon = require('@fortawesome/fontawesome-svg-core').icon;
|
||||
const fas = require('@fortawesome/free-solid-svg-icons').fas;
|
||||
|
||||
module.exports = function(eleventyConfig) {
|
||||
eleventyConfig.addPlugin(navigationPlugin)
|
||||
|
|
@ -12,7 +14,12 @@ module.exports = function(eleventyConfig) {
|
|||
eleventyConfig.addPassthroughCopy("assets")
|
||||
eleventyConfig.addPassthroughCopy("fonts")
|
||||
|
||||
eleventyConfig.addShortcode("fas_icon", function(name) { return `<span class="fas fa-${name}"></span>` })
|
||||
// Font Awesome Icons
|
||||
library.add(fas)
|
||||
eleventyConfig.addShortcode("fas_icon", function(args) {
|
||||
var fas_svg = icon({ prefix: 'fas', iconName: args });
|
||||
return `${fas_svg.html}`;
|
||||
});
|
||||
|
||||
const mapping = {
|
||||
h2: 'content-title',h3: 'content-title',h4: 'content-title',h5: 'content-title',h6: 'content-title',
|
||||
|
|
|
|||
|
|
@ -16,9 +16,8 @@
|
|||
<link rel="preload" type="text/css" href="/assets/css/codeberg-docs.css" as="style">
|
||||
<link rel="preload" type="text/css" href="https://design.codeberg.org/design-kit/codeberg.css" as="style">
|
||||
<link rel="preload" href="https://fonts.codeberg.org/dist/inter/Inter%20Web/inter.css" as="style">
|
||||
<link rel="preload" href="https://fonts.codeberg.org/dist/fontawesome5/css/solid.min.css" as="style">
|
||||
<link rel="preload" href="https://fonts.codeberg.org/dist/fontawesome5/css/fontawesome.min.css" as="style">
|
||||
|
||||
<link rel="preload" href="https://fonts.codeberg.org/dist/fontawesome6/css/svg-with-js.css" as="style">
|
||||
|
||||
<!-- Details and License: https://codeberg.org/Codeberg/Design/src/design-kit -->
|
||||
<link rel="stylesheet" href="https://design.codeberg.org/design-kit/codeberg.css"/>
|
||||
<script defer src="https://design.codeberg.org/design-kit/codeberg.js"></script>
|
||||
|
|
@ -31,8 +30,8 @@
|
|||
<link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/inter/Inter%20Web/inter.css">
|
||||
|
||||
<!-- Details and License: https://fonts.codeberg.org/fonts/fontawesome5 -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/fontawesome5/css/solid.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/fontawesome5/css/fontawesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/fontawesome6/css/svg-with-js.css">
|
||||
|
||||
|
||||
{% if page.url != '/' %}
|
||||
<script>
|
||||
|
|
@ -52,7 +51,7 @@
|
|||
<nav class="navbar">
|
||||
<div class="navbar-content">
|
||||
<button class="btn btn-primary" type="button" onclick="halfmoon.toggleSidebar()">
|
||||
<i class="fa fa-bars" aria-hidden="true"></i>
|
||||
{% fas_icon "bars" %}
|
||||
<span class="sr-only">Toggle sidebar</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -82,7 +81,7 @@
|
|||
<div class="navbar-content d-md-none ml-auto">
|
||||
<div class="dropdown with-arrow">
|
||||
<button class="btn" data-toggle="dropdown" type="button" id="navbar-dropdown-toggle-btn-1">
|
||||
Menu <i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
Menu {% fas_icon "angle-down" %}
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right w-200" aria-labelledby="navbar-dropdown-toggle-btn-1">
|
||||
<a href="{{ urls.commitHistoryMaster }}/{{ page.inputPath }}" class="dropdown-item" target="_blank" rel="noreferrer">
|
||||
|
|
|
|||
|
|
@ -29,79 +29,79 @@ The table below gives an overview of what collaborators are allowed to do when g
|
|||
<tbody>
|
||||
<tr>
|
||||
<td> View, clone and pull repository </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Contribute pull requests </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Push to/update contributed pull requests </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Push directly to repository </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Merge pull requests </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Moderate/delete issues and comments </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Force-push/rewrite history (if enabled) </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Add/remove collaborators to repository </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Configure branch settings (protect/unprotect, enable force-push) </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<tr>
|
||||
<td> Configure repository settings (enable wiki, issues, PRs, update profile) </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Configure repository settings in the danger zone (transfer ownership, delete wiki data / repository, archive repository) </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-times" style="color: red"></i> </td>
|
||||
<td> <i class="fas fa-check" style="color: green"></i> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: red">{% fas_icon "times" %}</span> </td>
|
||||
<td> <span style="color: green">{% fas_icon "check" %}</span> </td>
|
||||
</tr>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
62
package-lock.json
generated
62
package-lock.json
generated
|
|
@ -9,6 +9,8 @@
|
|||
"@11ty/eleventy": "^1.0.0",
|
||||
"@11ty/eleventy-navigation": "^0.3.2",
|
||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"@toycode/markdown-it-class": "^1.2.4",
|
||||
"markdown-it-anchor": "^8.4.1"
|
||||
}
|
||||
|
|
@ -130,6 +132,42 @@
|
|||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
|
||||
"integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
|
||||
"integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
|
||||
"integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@iarna/toml": {
|
||||
"version": "2.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
|
||||
|
|
@ -4094,6 +4132,30 @@
|
|||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
|
||||
"integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
|
||||
"dev": true
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
|
||||
"integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
|
||||
"integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
}
|
||||
},
|
||||
"@iarna/toml": {
|
||||
"version": "2.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
"@11ty/eleventy": "^1.0.0",
|
||||
"@11ty/eleventy-navigation": "^0.3.2",
|
||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"@toycode/markdown-it-class": "^1.2.4",
|
||||
"markdown-it-anchor": "^8.4.1"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue