mirror of
https://github.com/YouHaveTrouble/youhavetrouble.github.io.git
synced 2026-05-12 06:16:55 +00:00
switch to Astro
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
---
|
||||
import { ViewTransitions } from 'astro:transitions'
|
||||
import '../styles/fonts.css'
|
||||
import '../styles/global.css'
|
||||
|
||||
export interface Props {
|
||||
title: string
|
||||
description: string
|
||||
permalink: string
|
||||
}
|
||||
|
||||
const { title, description, permalink } = Astro.props
|
||||
const socialUrl = Astro.site.href + 'assets/yht_logo.png'
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title> {title} | YouHaveTrouble's place</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={permalink} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={socialUrl} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={permalink} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={socialUrl} />
|
||||
|
||||
<ViewTransitions />
|
||||
|
||||
<!-- This is intentionally inlined to avoid FOUC -->
|
||||
<script is:inline>
|
||||
const root = document.documentElement
|
||||
const theme = localStorage.getItem('theme')
|
||||
if (
|
||||
theme === 'dark' ||
|
||||
(!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
root.classList.add('theme-dark')
|
||||
} else {
|
||||
root.classList.remove('theme-dark')
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<div>
|
||||
<img src="/assets/yht_logo.png" alt="YouHaveTrouble's logo">
|
||||
<p>
|
||||
Hi, I'm <strong>Paweł</strong>, also known by <strong>YouHaveTrouble</strong> on the internet.
|
||||
I'a a full-stack web developer and minecraft plugin developer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100px;
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<footer>
|
||||
<span>
|
||||
© {new Date().getFullYear()} Paweł "YouHaveTrouble" Michalewski.
|
||||
<br>
|
||||
Powered by Astro.
|
||||
</span>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
color: var(--text-secondary);
|
||||
font-size: .8em;
|
||||
margin: 1em auto;
|
||||
max-width: 1400px;
|
||||
padding: 1em 2em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
import Logo from './Logo.astro'
|
||||
import Nav from './Nav.astro'
|
||||
|
||||
const { current = '' } = Astro.props;
|
||||
---
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
max-width: 1400px;
|
||||
padding: 2em;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<Logo />
|
||||
<Nav current={current} />
|
||||
</header>
|
||||
@@ -0,0 +1,13 @@
|
||||
<style>
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<a href="/">
|
||||
<img alt="Blog Logo" src="/assets/yht_logo.png" width="50px" height="50px" />
|
||||
</a>
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
import ThemeToggleButton from './ThemeToggleButton.svelte';
|
||||
const { current = '' } = Astro.props;
|
||||
---
|
||||
|
||||
<style>
|
||||
nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-family: var(--font-family-sans);
|
||||
font-weight: 700;
|
||||
justify-content: flex-end;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 10px 5px;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
min-width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:not(.selected) {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
a::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: transform .3s ease;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--text-secondary);
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
a:hover::before,
|
||||
.selected::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.selected::before {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.theme-toggle-container {
|
||||
width: 75px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav>
|
||||
<a class={current === "" ? "selected" : ""} href='/'>home</a>
|
||||
<a class={current === "about" ? "selected" : ""} href='/about'>about</a>
|
||||
<a class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
|
||||
<div class="theme-toggle-container">
|
||||
<ThemeToggleButton client:load />
|
||||
</div>
|
||||
</nav>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script>
|
||||
const rootEl = typeof document !== 'undefined' ? document.documentElement : null;
|
||||
const themes = ['light', 'dark'];
|
||||
let theme = ''
|
||||
|
||||
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
|
||||
theme = localStorage.getItem('theme');
|
||||
} else if (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
theme = 'dark';
|
||||
}
|
||||
|
||||
function handleChange(event) {
|
||||
theme = event.target.value;
|
||||
localStorage.setItem('theme', theme);
|
||||
}
|
||||
|
||||
$: if (rootEl && theme === 'light') {
|
||||
rootEl.classList.remove('theme-dark');
|
||||
} else if (rootEl && theme === 'dark') {
|
||||
rootEl.classList.add('theme-dark');
|
||||
}
|
||||
|
||||
const icons = [
|
||||
`<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>`,
|
||||
`<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
</svg>`,
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
<div class="theme-toggle">
|
||||
{#each themes as t, i}
|
||||
<label class={theme === t ? 'checked' : ''}>
|
||||
{@html icons[i]}
|
||||
<input
|
||||
type="radio"
|
||||
name="theme-toggle"
|
||||
checked={theme === t}
|
||||
value={t}
|
||||
title={`Use ${t} theme`}
|
||||
aria-label={`Use ${t} theme`}
|
||||
on:change={handleChange}
|
||||
/>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
Reference in New Issue
Block a user