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 Footer from './base/Footer.astro';
|
||||
import Header from './base/Header.astro';
|
||||
---
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
@ -11,8 +12,7 @@ import Footer from './base/Footer.astro';
|
|||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>My Astro Site</h1>
|
||||
<Header />
|
||||
<Footer />
|
||||
</body>
|
||||
|
||||
<Footer />
|
||||
</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