Add header component
This commit is contained in:
parent
b9c68eae7c
commit
02ecaddd25
45
public/splash.js
Normal file
45
public/splash.js
Normal file
|
@ -0,0 +1,45 @@
|
||||||
|
const a = [
|
||||||
|
"Playtime's over, playtime's now",
|
||||||
|
"永遠のオデッセイ",
|
||||||
|
"0% code coverage",
|
||||||
|
"Type Driven Development",
|
||||||
|
"Free as in Freedom",
|
||||||
|
"Transmitting since 2021",
|
||||||
|
"Approaching the speed of light",
|
||||||
|
"Your Ad Here",
|
||||||
|
"Here be dragons",
|
||||||
|
"Kam was here",
|
||||||
|
"Ayayaya~",
|
||||||
|
"Haskell is nice 😳",
|
||||||
|
"Coding my life away",
|
||||||
|
"Powered by neural networks",
|
||||||
|
"Volle Kraft voraus!",
|
||||||
|
"In a quantum superposition",
|
||||||
|
"IPA: [ka̠mo̞ɕi]",
|
||||||
|
"遥か彼方を巡り廻る",
|
||||||
|
"Disunified Field Theory of Magic",
|
||||||
|
"Sp³ hybridized",
|
||||||
|
"Lorem ipsum dolor sit amet",
|
||||||
|
"Beautifully Imperfect and Hazy",
|
||||||
|
"Destination unknown",
|
||||||
|
"Now on Google's 3rd page 🎉",
|
||||||
|
"A product of boredom",
|
||||||
|
"Rotating multiaxially in R⁵",
|
||||||
|
"Scientifically unproven",
|
||||||
|
"Lost in translation",
|
||||||
|
"Implemented in prolog and YAML",
|
||||||
|
"Computer-aided diary thing",
|
||||||
|
"Integration under the moon",
|
||||||
|
"Spinning in retrograde",
|
||||||
|
"Steady as she goes",
|
||||||
|
"Слава України!",
|
||||||
|
"1 year anniversary",
|
||||||
|
"Because Twitter is passé",
|
||||||
|
"{{ navbar.subtitle.text }}",
|
||||||
|
"You're looking at it!",
|
||||||
|
"a2Ftb3NoaS5vcmc=",
|
||||||
|
":: (Thought a) => a -> String",
|
||||||
|
];
|
||||||
|
a.push(`${Math.round(1 / a.length * 10000)/100}% chance for this message`);
|
||||||
|
const target = document.getElementById("p-nav-splash");
|
||||||
|
target && (target.innerText = a[Math.floor(Math.random() * a.length)]);
|
|
@ -1,6 +1,7 @@
|
||||||
---
|
---
|
||||||
import '../styles/styles.scss';
|
import '../styles/styles.scss';
|
||||||
import Footer from './base/Footer.astro';
|
import Footer from './base/Footer.astro';
|
||||||
|
import Header from './base/Header.astro';
|
||||||
---
|
---
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
@ -11,8 +12,7 @@ import Footer from './base/Footer.astro';
|
||||||
<title>Astro</title>
|
<title>Astro</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>My Astro Site</h1>
|
<Header />
|
||||||
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<Footer />
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,3 +1,69 @@
|
||||||
---
|
---
|
||||||
|
interface MenuItem {
|
||||||
|
identifier: string;
|
||||||
|
name: string;
|
||||||
|
url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const menu: MenuItem[] = [
|
||||||
|
{
|
||||||
|
identifier: 'projects',
|
||||||
|
name: 'Projects',
|
||||||
|
url: '/projects/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
identifier: 'posts',
|
||||||
|
name: 'Posts',
|
||||||
|
url: '/posts/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
identifier: 'slides',
|
||||||
|
name: 'Slides',
|
||||||
|
url: '/slides/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
identifier: 'aoc',
|
||||||
|
name: 'AoC',
|
||||||
|
url: '/aoc/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
identifier: 'map',
|
||||||
|
name: 'Map',
|
||||||
|
url: '/map/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
identifier: 'about',
|
||||||
|
name: 'About',
|
||||||
|
url: '/about/',
|
||||||
|
}
|
||||||
|
]
|
||||||
---
|
---
|
||||||
|
<nav class="p-nav">
|
||||||
|
<input id="p-nav-toggle" type="checkbox" hidden>
|
||||||
|
|
||||||
|
<div class="p-nav__bar">
|
||||||
|
<a href="/" class="p-nav__logo">
|
||||||
|
<img height="48px" width="51px" src="/static/svg/aya.svg" alt="">
|
||||||
|
<div class="p-nav__logo-text">
|
||||||
|
<div class="p-nav__logo-main">Kamoshi.org</div>
|
||||||
|
<div class="p-nav__logo-sub" id="p-nav-splash">
|
||||||
|
Doesn't require JavaScript!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<label class="p-nav__burger" for="p-nav-toggle" tabindex="0">
|
||||||
|
<span class="p-nav__burger-icon"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<menu class="p-nav__menu">
|
||||||
|
{menu.map(item => (
|
||||||
|
<li class="p-nav__menu-item">
|
||||||
|
<a class="p-nav__menu-link" href={item.url}>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</menu>
|
||||||
|
</nav>
|
||||||
|
|
Loading…
Reference in a new issue