foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Add social media links to page footer

Browse source 
Also deleted the Places section in the home page since those links are
now in the footer.
This commit is contained in:
Foster Hangdaan 2023-08-01 01:35:21 -04:00
parent cd091e3233
commit ff51d4b898
Signed by: foster
GPG key ID: E48D7F49A852F112
6 changed files with 56 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
_components/footer.tsx
View file

@ -1,6 +1,23 @@
export default function({ comp }) {
const {
Forgejo: ForgejoIcon,
Mastodon: MastodonIcon,
Mail: MailIcon,
} = comp.icons;
return (
<footer className="page-footer">
<div className="social-links">
<a href="https://code.fosterhangdaan.com/foster" title="Forgejo" target="_blank">
<ForgejoIcon className="icon"/>
</a>
<a href="https://mastodon.online/@foster" title="Mastodon" target="_blank">
<MastodonIcon className="icon"/>
</a>
<a href="mailto:foster@hangdaan.email" title="eMail">
<MailIcon className="icon"/>
</a>
</div>
<p>Copyright &copy; 2023 Foster Hangdaan</p>
<p>Made with <a href="https://deno.land/" target="_blank">Deno</a>, <a href="https://lume.land/" target="_blank">Lume</a>, <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> and lots of <span className="heart">{ comp.icons.Heart() }</span>.</p>
</footer>

10
_components/icons/Forgejo.tsx Normal file
View file

@ -0,0 +1,10 @@
// Icon from Simple Icons
export default function() {
return (
<svg role="img" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>Forgejo</title>
<path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z"/>
</svg>
);
}

10
_components/icons/Mastodon.tsx Normal file
View file

@ -0,0 +1,10 @@
// Icon from Simple Icons
export default function() {
return (
<svg role="img" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>Mastodon</title>
<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
</svg>
);
}

4
_components/icons/README.org
View file

@ -1,5 +1,3 @@
#+title: Icons
Icons as TSX components.
All icons are from Tabler Icons.
Icons as TSX components. Icons are obtained from Tabler Icons and Simple Icons.

18
_includes/styles/components/footer.scss
View file

@ -4,6 +4,24 @@ .page-footer {
margin: 0 auto;
padding: 1rem;
.social-links {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
a {
padding: 0.5rem 0.5rem 0.25rem 0.5rem;
color: var(--color-fg);
border-radius: 5px;
&:hover {
background-color: var(--color-bg--layer-01);
}
}
}
.heart {
color: var(--color-red);
}

12
index.tsx
View file

@ -27,18 +27,6 @@ export default function({ comp }) {
<p>The primary method of reaching me is through my email: <a href="mailto:foster@hangdaan.email">foster@hangdaan.email</a>.</p>
<p>If you'd like an encrypted response, you can send me your GPG public key. You can find mine in the <a href="#gpg">GPG Key</a> section of this page.</p>
</section>
<section>
<h2 id="places">{comp.icons.GPS()} Places</h2>
<p>Other places where you can find me:</p>
<ul>
<li>
<a href="https://code.fosterhangdaan.com/foster" target="_blank">Forgejo</a>
</li>
<li>
<a href="https://mastodon.online/@foster" target="_blank">Mastodon</a>
</li>
</ul>
</section>
<section>
<h2 id="gpg">{comp.icons.Key()} GPG Key</h2>
<p>