Basic structure for the layouts
This commit is contained in:
parent
02ecaddd25
commit
038cc6e3c2
8
src/components/base/Head.astro
Normal file
8
src/components/base/Head.astro
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Kamoshi.org</title>
|
||||||
|
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||||
|
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||||
|
|
@ -5,6 +5,7 @@ interface MenuItem {
|
||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Config for the menu displayed in site navbar. */
|
||||||
const menu: MenuItem[] = [
|
const menu: MenuItem[] = [
|
||||||
{
|
{
|
||||||
identifier: 'projects',
|
identifier: 'projects',
|
||||||
|
|
@ -36,7 +37,7 @@ const menu: MenuItem[] = [
|
||||||
name: 'About',
|
name: 'About',
|
||||||
url: '/about/',
|
url: '/about/',
|
||||||
}
|
}
|
||||||
]
|
];
|
||||||
---
|
---
|
||||||
<nav class="p-nav">
|
<nav class="p-nav">
|
||||||
<input id="p-nav-toggle" type="checkbox" hidden>
|
<input id="p-nav-toggle" type="checkbox" hidden>
|
||||||
43
src/components/headers/Article.astro
Normal file
43
src/components/headers/Article.astro
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
---
|
||||||
|
import type { Dayjs } from "dayjs";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
date: Dayjs;
|
||||||
|
tags?: string[];
|
||||||
|
github?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, date, tags = [], github } = Astro.props;
|
||||||
|
---
|
||||||
|
<header class="p-header">
|
||||||
|
<h1 class="p-header__heading">{title}</h1>
|
||||||
|
<div class="p-header__meta">
|
||||||
|
<span class="p_date">
|
||||||
|
<img class="p_date__icon" width="120" height="123" src="/static/svg/calendar.svg" alt="">
|
||||||
|
{date.format("MMM DD, YYYY")}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- {%- include "partials/tags.html" -%} -->
|
||||||
|
<section class="p_tags">
|
||||||
|
<img class="p_tags__icon" width="123" height="105" src="/static/svg/tags.svg" alt="">
|
||||||
|
<ul class="p_tags__list">
|
||||||
|
{tags.map(tag => (
|
||||||
|
<li><a href='{{ get_taxonomy_url(kind="tags", name=tag) | safe }}'>{tag}</a></li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- {%- include "partials/github.html" -%} -->
|
||||||
|
{github && (
|
||||||
|
<a href={github} class="p-github" aria-label="View source on GitHub">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 250 250" aria-hidden="true">
|
||||||
|
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||||
|
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||||
|
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</header>
|
||||||
25
src/layouts/Article.astro
Normal file
25
src/layouts/Article.astro
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
---
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import Base from "./Base.astro";
|
||||||
|
import Header from "../components/headers/Article.astro";
|
||||||
|
|
||||||
|
const {frontmatter} = Astro.props;
|
||||||
|
---
|
||||||
|
<Base>
|
||||||
|
<main class="l-article">
|
||||||
|
<aside class="l-article__aside">
|
||||||
|
<div class="l-article__toc">
|
||||||
|
<!-- {%- include "partials/toc.html" -%} -->
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<article class="l-article__article marker readable">
|
||||||
|
<Header
|
||||||
|
title={frontmatter.title}
|
||||||
|
date={dayjs(frontmatter.date)}
|
||||||
|
tags={frontmatter.tags}/>
|
||||||
|
<div class="markdown">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</Base>
|
||||||
20
src/layouts/Base.astro
Normal file
20
src/layouts/Base.astro
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
---
|
||||||
|
import '../styles/styles.scss';
|
||||||
|
import Head from "../components/base/Head.astro";
|
||||||
|
import Header from "../components/base/Header.astro";
|
||||||
|
import Footer from "../components/base/Footer.astro";
|
||||||
|
---
|
||||||
|
<html lang="en">
|
||||||
|
<Head />
|
||||||
|
<body>
|
||||||
|
<slot name="header">
|
||||||
|
<Header />
|
||||||
|
</slot>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<slot name="footer">
|
||||||
|
<Footer />
|
||||||
|
</slot>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
---
|
|
||||||
import '../styles/styles.scss';
|
|
||||||
import Footer from './base/Footer.astro';
|
|
||||||
import Header from './base/Header.astro';
|
|
||||||
---
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<title>Astro</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<Header />
|
|
||||||
<Footer />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
51
src/layouts/Home.astro
Normal file
51
src/layouts/Home.astro
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
---
|
||||||
|
import Base from "./Base.astro";
|
||||||
|
|
||||||
|
|
||||||
|
const notice = {
|
||||||
|
header: "Hello!",
|
||||||
|
content: [
|
||||||
|
"Test"
|
||||||
|
]
|
||||||
|
};
|
||||||
|
---
|
||||||
|
<Base>
|
||||||
|
<main class="l-home">
|
||||||
|
<article class="l-home__article markdown readable">
|
||||||
|
<slot />
|
||||||
|
</article>
|
||||||
|
<aside class="l-home__aside">
|
||||||
|
<section class="p-card">
|
||||||
|
<h2 class="p-card__header">{notice.header}</h2>
|
||||||
|
{notice.content.map(item => (
|
||||||
|
<p>{item}</p>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- <section class="p-card p-card-image">
|
||||||
|
<h2 class="p-card__header">Image of the Month</h2>
|
||||||
|
<a href="{{config.extra.cards.image.src}}">
|
||||||
|
{%- set image = resize_image(path=config.extra.cards.image.src, op="fit_width", width=400, format="webp") -%}
|
||||||
|
<img class="p-card-image__image" src="{{image.url}}" width="{{image.width}}" height="{{image.height}}" alt="{{- config.extra.cards.image.alt -}}">
|
||||||
|
</a>
|
||||||
|
</section> -->
|
||||||
|
|
||||||
|
<!-- <section class="p-card p-card-contact">
|
||||||
|
<h2 class="p-card__header">Contact</h2>
|
||||||
|
<div class="p-card-contact__grid">
|
||||||
|
{%- if config.extra.cards.contact.email -%}
|
||||||
|
<img class="p-card-contact__image" width="38" height="25" src=/static/svg/email.svg alt="email">
|
||||||
|
<a class="p-card-contact__text" href="mailto:{{- config.extra.cards.contact.email -}}">
|
||||||
|
{{- config.extra.cards.contact.email -}}
|
||||||
|
</a>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- if config.extra.cards.contact.discord -%}
|
||||||
|
<img class="p-card-contact__image" width="38" height="30" src="/static/svg/discord.svg" alt="discord">
|
||||||
|
<span class="p-card-contact__text">{{- config.extra.cards.contact.discord -}}</span>
|
||||||
|
{%- endif -%}
|
||||||
|
</div>
|
||||||
|
</section> -->
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
</Base>
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
---
|
|
||||||
---
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<title>Astro</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>My Astro Sitess</h1>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
35
src/pages/about.md
Normal file
35
src/pages/about.md
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
---
|
||||||
|
layout: ../layouts/Article.astro
|
||||||
|
title: "A little about me!"
|
||||||
|
date: 2021-09-10T19:34:01+02:00
|
||||||
|
tags: ["meta"]
|
||||||
|
---
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
|
||||||
|
I'm a CS student with professional experience as a TypeScript developer, but generally I enjoy playing around and tinkering with all kinds of tangentially related things. Some of my favorite programming languages are Rust, TypeScript and Python. I also have some experience with functional languages such as Scala and OCaml. In the future I would like to learn to program in Haskell.
|
||||||
|
|
||||||
|
When it comes to human-languages, I really like the Japanese language, so I've been learning it on and off since 2016. I think that it is very beautiful and elegant at the same time. I also like listening to music, playing video games. In my free time I love going on pretty long walks and whenever I come across something interesting I usually take a photo of it.
|
||||||
|
|
||||||
|
## Website
|
||||||
|
|
||||||
|
This website was a completely random idea of mine, but it turned out to be a great fun with occasional frustrating moments here and there (especially configuring Nginx and DNS :smile:). I've written it from scratch with the help of [Hugo](https://gohugo.io/). Originally I thought about using Angular, but I realized it would be a huge overkill for a website of this type, so I decided to look as some static site generators. Eventually, I came across Hugo and it turned out to be the right tool for the job. I'm very happy that I ended up learning it!
|
||||||
|
|
||||||
|
Why create a website from scratch instead of just using something existing like Wordpress, or at least use someone else's theme for Hugo/Jekyll? That's a pretty reasonable question. Thing is, I didn't actually want to have a website per se, or rather I don't think it would be any good anyway. I just wanted to create one myself completely on my own. There's something about looking at your own creations, and feeling good about the outcome, even if it's not that good, at least you know you made it! :smile:
|
||||||
|
|
||||||
|
## Timeline
|
||||||
|
|
||||||
|
{{ timeline(source="/data/timelines/about.yml") }}
|
||||||
|
|
||||||
|
|
||||||
|
## Acknowledgements
|
||||||
|
|
||||||
|
This website would not have been possible without the following free and open-source projects. Thanks!
|
||||||
|
|
||||||
|
| Project | License |
|
||||||
|
|---------------------------------------------------------------------------|--------------|
|
||||||
|
| [Leaflet](https://leafletjs.com/) | BSD 2-clause |
|
||||||
|
| [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster) | MIT |
|
||||||
|
| [leaflet-photo](https://github.com/kamoshi/leaflet-photo) | MIT |
|
||||||
|
| [Github Corners](https://tholman.com/github-corners/) | MIT |
|
||||||
|
| [Lunr](https://lunrjs.com/) | MIT |
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
---
|
|
||||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
||||||
---
|
|
||||||
|
|
||||||
<BaseLayout>
|
|
||||||
<h1>My Astro Site</h1>
|
|
||||||
</BaseLayout>
|
|
||||||
|
|
||||||
24
src/pages/index.md
Normal file
24
src/pages/index.md
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
layout: ../layouts/Home.astro
|
||||||
|
title: "Welcome to kamoshi.org!"
|
||||||
|
date: "2020–12–09"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Welcome to my personal website
|
||||||
|
You've somehow made your way to the internet nexus of my activities - the place where I write and do random stuff! This website is a weird amalgamation of all my various interests and thoughts, so it probably is pretty random at times. It is also a [living document](https://en.wikipedia.org/wiki/Living_document) continously evolving throughout the time. It can change at any time without prior notice in any way imaginable, be wary of the fact anything here could be deleted or edited.
|
||||||
|
|
||||||
|
Now that you've been warned, please enjoy the transient ramblings that are present here at this time. Why "Kamoshi"? It's a pretty long story...
|
||||||
|
|
||||||
|
## Interactive map with my Geotagged photos
|
||||||
|
Throughout the last few years I've been taking photos in random places. I've spent some time geotagging them, and I've been able to create a map of them. It takes a horrendous amount of time to geotag them, and honestly I've forgotten some places, so it will take a while to add at least some of the rest.
|
||||||
|
|
||||||
|
[Take me to the map!](@/map/index.md)
|
||||||
|
|
||||||
|
## A short guide to the Hanafuda card game
|
||||||
|
I've been playing Hanafuda for a while now, so I decided to write a short guide to the game. I am by no means good at the game, so take everything with a grain of salt, but it should be enough to get you started.
|
||||||
|
|
||||||
|
[Take me to the guide!](@/posts/hanafuda.md)
|
||||||
|
|
||||||
|
## Thanks for visiting!
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue