github link

public/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1024 1024"><path fill="#fff" fill-rule="evenodd" d="M512 0a512 512 0 0 0-162 998c26 4 35-11 35-25v-95c-129 24-162-31-173-60-5-15-30-60-52-72-18-10-44-34-1-34 41-1 69 37 79 52 46 78 120 56 149 42 5-33 18-55 33-68-114-13-233-57-233-253 0-56 20-102 52-137-5-13-23-66 5-136 0 0 43-14 141 52a475 475 0 0 1 256 0c98-66 141-52 141-52 28 70 10 123 5 136 33 35 53 81 53 137 0 197-120 240-234 253 19 16 35 47 35 95l-1 140c0 14 10 30 35 25A513 513 0 0 0 512 0Z" clip-rule="evenodd"/></svg>

src/components/Socials.astro

@@ -0,0 +1,38 @@
+---
+import { toFastProperties } from '../../.yarn/releases/yarn-3.3.0.cjs'
+
+export interface Props {
+	additionalClass: string
+}
+const { additionalClass } = Astro.props
+---
+
+<ul class={`socials ${additionalClass}`}>
+	<li class='mastodon'>
+		<a
+			href='https://chaos.social/@HIP22'
+			title='HiP 2022 Berlin on Mastodon'
+			rel='noopener noreferrer'
+			target='_blank'
+			><img src='/icons/mastodon.svg' alt='' />
+		</a>
+	</li>
+	<li class='matrix'>
+		<a
+			href='https://matrix.to/#/%23xc3-space%3A1312.media'
+			title='HiP 2022 Berlin on Matrix'
+			rel='noopener noreferrer'
+			target='_blank'
+			><img src='/icons/matrix.svg' alt='' />
+		</a>
+	</li>
+	<li class='matrix'>
+		<a
+			href='https://github.com/Hacking-in-Parallel-Berlin-22/'
+			title='HiP 2022 Berlin on GitHub'
+			rel='noopener noreferrer'
+			target='_blank'
+			><img src='/icons/github.svg' alt='' />
+		</a>
+	</li>
+</ul>

src/layouts/Layout.astro

@@ -1,4 +1,5 @@
 ---
+import Socials from '../components/Socials.astro'
 export interface Props {
 	title?: string
 }
@@ -37,48 +38,10 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 						<a href='https://pretalx.c3voc.de/hip-berlin-2022/cfp'>CfP</a>
 					</li>
 				</ul>
-				<ul class='mobile-only socials'>
-					<li class='mastodon'>
-						<a
-							href='https://chaos.social/@HIP22'
-							title='HiP 2022 Berlin on Mastodon'
-							rel='noopener noreferrer'
-							target='_blank'
-							><img src='/icons/mastodon.svg' alt='' />
-						</a>
-					</li>
-					<li class='matrix'>
-						<a
-							href='https://matrix.to/#/%23xc3-space%3A1312.media'
-							title='HiP 2022 Berlin on Matrix'
-							rel='noopener noreferrer'
-							target='_blank'
-							><img src='/icons/matrix.svg' alt='' />
-						</a>
-					</li>
-				</ul>
+				<Socials additionalClass='mobile-only' />
 			</nav>
 			<label for='nav-toggle' class='mobile-only gradient-border'>Menu</label>
-			<ul class='desktop-only socials'>
-				<li class='mastodon'>
-					<a
-						href='https://chaos.social/@HIP22'
-						title='HiP 2022 Berlin on Mastodon'
-						rel='noopener noreferrer'
-						target='_blank'
-						><img src='/icons/mastodon.svg' alt='' />
-					</a>
-				</li>
-				<li class='matrix'>
-					<a
-						href='https://matrix.to/#/%23xc3-space%3A1312.media'
-						title='HiP 2022 Berlin on Matrix'
-						rel='noopener noreferrer'
-						target='_blank'
-						><img src='/icons/matrix.svg' alt='' />
-					</a>
-				</li>
-			</ul>
+			<Socials additionalClass='desktop-only' />
 		</header>
 		<slot />
 		<footer>