fix(website): Use inline SVGs

Signed-off-by: Steffen Vogel <post@steffenvogel.de>

docs/contact.mdx

@@ -5,13 +5,15 @@ permalink: /contact
 # SPDX-License-Identifier: Apache-2.0
 ---
 
-import InlineIcon from '@site/src/components/InlineIcon';
-
 # Contact
 
 There are a couple of channels to reach us. Please try them from first to last.
 
-## [<InlineIcon src="/img/discourse_icon.svg" /> Community](https://discuss.cunicu.li)
+import Github from './github_icon.svg';
+import Discourse from './discourse_icon.svg';
+import Fediverse from './fediverse_icon.svg';
+
+## [<Discourse class="inline-icon" /> Community](https://discuss.cunicu.li)
 
 We are hosting our own forum, chat and wiki at [**discuss.cunicu.li**](https://discuss.cunicu.li).\
 Feel free to say hi 👋, discuss cunīcu, ask questions or share ideas.
@@ -19,13 +21,12 @@ Feel free to say hi 👋, discuss cunīcu, ask questions or share ideas.
 ## [🥷 Maintainer](https://github.com/orgs/cunicu/teams/maintainers)
 
 We are still mostly a one-man show driven by Steffen Vogel:
- - <InlineIcon src="/img/github_mark.svg" /> GitHub: [stv0g](https://steffenvogel.de)
- - <InlineIcon src="/img/discourse_icon.svg" /> Discourse: [stv0g](https://discuss.cunicu.li/u/stv0g)
- - <InlineIcon src="/img/fediverse_logo_proposal.svg" /> Fediverse: [@stv0g@chaos.social](https://chaos.social/@stv0g)
+ - <Github class="inline-icon" /> GitHub: [stv0g](https://steffenvogel.de)
+ - <Discourse class="inline-icon" /> Discourse: [stv0g](https://discuss.cunicu.li/u/stv0g)
+ - <Fediverse class="inline-icon" /> Fediverse: [@stv0g@chaos.social](https://chaos.social/@stv0g)
  - 🔗 Web: [steffenvogel.de](https://www.steffenvogel.de)
 - ✉️ E-Mail: post@steffenvogel.de
 
 ## [✉️ E-Mail](mailto:info@cunicu.li)
 
-As a last resort, you can reach also reach us at **[info@cunicu.li](codeberg.org/cunicuu.li)**.
-codeberg.org/cunicu
+As a last resort, you can reach also reach us at **[info@cunicu.li](mailto:info@cunicu.li)**.

docs/design.mdx

@@ -8,50 +8,38 @@ sidebar_position: 20
 
 ## Architecture
 
-![](/img/architecture.svg)
+import Architecture from './architecture.svg';
+
+<Architecture alt="cunīcu Architecture" />
 
 ## Objectives
 
 -   Encrypt all signaling messages
-
 -   Plug-able signaling backends:
     -   gRPC
-
 -   Support [Trickle ICE][rfc8838]
-
 -   Support [ICE restart][rfc8445-ice-restart]
-
 -   Support [ICE-TCP][rfc6544]
-
 -   Encrypt exchanged ICE offers with WireGuard keys
-
 -   Seamless switch between ICE candidates and relays
-
 -   Zero configuration
     -   Alleviate users of exchanging endpoint IPs & ports
-
 -   Enables direct communication of WireGuard peers behind NAT / UDP-blocking firewalls
-
 -   Single-binary, zero dependency installation
     -   Bundled ICE agent & [WireGuard user-space daemon][wireguard-go]
     -   Portability
-
 -   Support for user and kernel-space WireGuard implementations
-
 -   Zero performance impact
     -   Kernel-side filtering / redirection of WireGuard traffic
     -   Fallback to user-space proxying only if no Kernel features are available 
-
 -   Minimized attack surface
     -   Drop privileges after initial configuration
-
 -   Compatible with existing WireGuard configuration utilities like:
     -   [NetworkManager][network-manager]
     -   [systemd-networkd][systemd-networkd]
     -   [wg-quick][wg-quick]
     -   [Kilo][kilo]
     -   [drago][drago]
-
 -   Monitoring for new WireGuard interfaces and peers
     -   Inotify for new UAPI sockets in /var/run/wireguard
     -   Netlink subscription for link updates (patch is pending)

docs/dev/proxying.mdx

@@ -72,7 +72,9 @@ This variant only works for the compiled-in version of wireguard-go in cunīcu.
 
 ## Flowchart
 
-![](/img/proxy.svg)
+import Proxy from './proxy.svg';
+
+<Proxy />
 
 [nftables]: https://www.netfilter.org/projects/nftables/manpage.html
 

docs/funding.mdx

@@ -9,4 +9,6 @@ sidebar_position: 98
 
 The project has been initiated by Steffen Vogel while working at the [Institute for Automation of Complex Power Systems (ACS)](https://www.acs.eonerc.rwth-aachen.de) of [RWTH Aachen University](https://www.rwth-aachen.de).
 
-<img alt="European Flag" style={{height: '4em', marginRight: '10px'}} src="/img/flag_of_europe.svg" align="left" /> The development of cunīcu has been supported by the <a href="https://erigrid2.eu">ERIGrid 2.0</a> project of the H2020 Programme under <a href="https://cordis.europa.eu/project/id/870620">Grant Agreement No. 870620</a>
+import FlagOfEurope from './flag_of_europe.svg';
+
+<FlagOfEurope alt="European Flag" style={{height: '4em', marginRight: '10px'}} align="left" /> The development of cunīcu has been supported by the <a href="https://erigrid2.eu">ERIGrid 2.0</a> project of the H2020 Programme under <a href="https://cordis.europa.eu/project/id/870620">Grant Agreement No. 870620</a>

docs/index.mdx

@@ -6,8 +6,10 @@ hide_title: true
 # SPDX-License-Identifier: Apache-2.0
 ---
 
+import CunicuLogo from '../static/img/cunicu_logo.svg';
+
 <p align="center" >
-    <img style={{width: '60%'}} src="/img/cunicu_logo.svg" alt="cunīcu logo" />
+    <CunicuLogo style={{width: '60%'}} alt="cunīcu logo" />
 
 [![goreportcard](https://goreportcard.com/badge/codeberg.org/cunicu/cunicu?style=flat-square)](https://goreportcard.com/report/codeberg.org/cunicu/cunicu)
 [![Go Reference](https://pkg.go.dev/badge/codeberg.org/cunicu/cunicu.svg)](https://pkg.go.dev/codeberg.org/cunicu/cunicu)

website/blog/2022-09-15-welcome/index.mdx

@@ -19,6 +19,8 @@ We are planning to publish the first official release within the next 4-10 weeks
 The release pipeline, packaging and self-update feature and more has already been implemented.
 We just need to finish the last features and do quite some more testing.
 
+{/* truncate */}
+
 ### Website, Docs and Twitter
 
 The project has now its dedicated [website](https://cunicu.li), [Codeberg organization](https://codeberg.org/cunicu) and Twitter handle ([@cunicuVPN](https://twitter.com/cunicuVPN)).
@@ -29,14 +31,15 @@ The project name _cunīcu_ \[kʊˈniːkʊ\] is derived from the [latin noun cun
 
 This also gave us the opportunity to redesign the logo which you find further down in the sticker design.
 
-
 ### Stickers
 
 We have stickers! Just [reach out](/docs/contact) and I will send you some or talk to me at some of the upcoming conferences.
 
+import Sticker from './cunicu_sticker.svg';
+
 <figure>
     <center>
-        <img src="/img/cunicu_sticker.svg" alt="The sticker design" style={{transform: "rotate(270deg)"}} />
+        <Sticker alt="The sticker design" style={{transform: "rotate(270deg)"}} />
         <figcaption>The sticker design</figcaption>
     </center>
 </figure>

website/blog/2024-06-12-community/index.md

@@ -22,6 +22,8 @@ Whether you're a seasoned contributor or a newcomer, everyone is welcome. Just h
 Visit our Discourse at: **[discuss.cunicu.li](https://discuss.cunicu.li)**.
 :::
 
+<!-- truncate -->
+
 ## Access and Participation
 
 For those who wish to browse and read content, our community space offers read-only access without the need for an account.

website/src/components/InlineIcon/index.js

@@ -1,11 +0,0 @@
-// SPDX-FileCopyrightText: 2023-2025 Steffen Vogel <post@steffenvogel.de>
-// SPDX-License-Identifier: Apache-2.0
-
-import React from 'react';
-import styles from './styles.module.css';
-
-export default function Icon({src}) {
-    return (
-        <img className={styles.inlineicon} src={src} />
-    );
-}

website/src/components/InlineIcon/styles.module.css

@@ -1,9 +0,0 @@
-/*
-SPDX-FileCopyrightText: 2023-2025 Steffen Vogel <post@steffenvogel.de>
-SPDX-License-Identifier: Apache-2.0
-*/
-
-.inlineicon {
-    height: 1em;
-    margin-bottom: -2px;
-}

website/src/css/custom.css

@@ -43,8 +43,14 @@
   opacity: 0.6;
 }
 
+.inline-icon {
+    height: 1em;
+    width: 1em;
+    margin-bottom: -2px;
+}
+
 .header-github-link:before {
-  background: url("/img/github_mark.svg");
+  background: url("/img/github_icon.svg");
   background-size: contain;
   content: "";
   display: flex;
@@ -53,7 +59,7 @@
 }
 
 [data-theme='dark'] .header-github-link::before {
-  background: url("/img/github_mark_white.svg");
+  background: url("/img/github_icon_white.svg");
 }
 
 

website/src/pages/index.js

@@ -11,6 +11,8 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import MeshAnimation from '../components/MeshAnimation';
 import styles from './index.module.css';
 
+import CunicuLogoDark from '../../static/img/cunicu_logo_dark.svg';
+
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
@@ -21,7 +23,7 @@ function HomepageHeader() {
         }}
       </BrowserOnly>
       <div className="container" style={{zIndex: 1}}>
-        <img className="project-logo" style={{width: '40%'}} src="img/cunicu_logo_dark.svg" alt={siteConfig.title + ' - ' + siteConfig.tagline} />
+        <CunicuLogoDark className="project-logo" style={{width: '40%'}} alt={siteConfig.title + ' - ' + siteConfig.tagline} />
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"

website/static/img/github_icon.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

website/static/img/github_icon_white.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>