Add cards to home, improve search
This commit is contained in:
parent
7752fb6a87
commit
f183266261
5
deploy.sh
Executable file
5
deploy.sh
Executable file
|
@ -0,0 +1,5 @@
|
|||
#!/bin/bash
|
||||
|
||||
pnpm build
|
||||
rsync -Pavz -e "ssh -i ~/.ssh/id_ed25519" ./dist/ 70.34.244.173:/var/www/kamoshi.org --delete
|
||||
echo "Done"
|
17
src/components/cards/Contact.astro
Normal file
17
src/components/cards/Contact.astro
Normal file
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
const email = "maciej@kamoshi.org";
|
||||
const discord = "kamov#2485";
|
||||
---
|
||||
<section class="p-card p-card-contact">
|
||||
<h2 class="p-card__header">Contact</h2>
|
||||
<div class="p-card-contact__grid">
|
||||
{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:${email}`}>{email}</a>
|
||||
)}
|
||||
{discord && (
|
||||
<img class="p-card-contact__image" width="38" height="30" src="/static/svg/discord.svg" alt="discord">
|
||||
<span class="p-card-contact__text">{discord}</span>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
14
src/components/cards/Notice.astro
Normal file
14
src/components/cards/Notice.astro
Normal file
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
const notice = {
|
||||
header: "Website ported to Astro 2!",
|
||||
content: [
|
||||
"Third time's a charm, so hopefully this time it will last longer. So far Astro looks really cool. There's still a lot of work to do, to make this version reach the same level of usability as before."
|
||||
]
|
||||
};
|
||||
---
|
||||
<section class="p-card">
|
||||
<h2 class="p-card__header">{notice.header}</h2>
|
||||
{notice.content.map(item => (
|
||||
<p>{item}</p>
|
||||
))}
|
||||
</section>
|
10
src/components/cards/Photo.astro
Normal file
10
src/components/cards/Photo.astro
Normal file
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
const image = "/static/iotm/20221016-170316_1.jpg";
|
||||
const alt = "A building covered by multicolor Ivy.";
|
||||
---
|
||||
<section class="p-card p-card-image">
|
||||
<h2 class="p-card__header">Image of the Month</h2>
|
||||
<a href={image}>
|
||||
<img class="p-card-image__image" src={image} alt={alt}>
|
||||
</a>
|
||||
</section>
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import lunr from "lunr";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
|
@ -6,6 +7,7 @@
|
|||
let value = '';
|
||||
let index: lunr.Index;
|
||||
let results: lunr.Index.Result[] = [];
|
||||
let metadata: any;
|
||||
|
||||
/** Update the value so that it reflects the URL */
|
||||
function sync() {
|
||||
|
@ -28,7 +30,8 @@
|
|||
|
||||
async function load() {
|
||||
const data = await fetch('/search.json').then(r => r.json());
|
||||
index = lunr.Index.load(data);
|
||||
index = lunr.Index.load(data.index);
|
||||
metadata = data.metadata;
|
||||
}
|
||||
|
||||
function search() {
|
||||
|
@ -49,8 +52,11 @@
|
|||
<section class="results">
|
||||
<div>Showing results for "{value}" ({results.length})</div>
|
||||
{#each results as result}
|
||||
{@const meta = metadata[result.ref]}
|
||||
{@const date = dayjs(meta.date)}
|
||||
<a class="result" href={result.ref}>
|
||||
{result.ref}
|
||||
<span class="name">{meta.title}</span>
|
||||
<time class="date" datetime={date.toISOString()}>{date.format("MMM DD, YYYY")}</time>
|
||||
</a>
|
||||
{/each}
|
||||
</section>
|
||||
|
@ -81,11 +87,18 @@
|
|||
}
|
||||
|
||||
.result {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.5em;
|
||||
background-color: white;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
|
||||
transition: box-shadow linear 100ms;
|
||||
text-decoration: none;
|
||||
|
||||
.date {
|
||||
margin-left: auto;
|
||||
color: rgb(65, 65, 65);
|
||||
}
|
||||
|
||||
&:focus-within,
|
||||
&:hover {
|
||||
|
|
|
@ -1,12 +1,8 @@
|
|||
---
|
||||
import ContactCard from "../components/cards/Contact.astro";
|
||||
import NoticeCard from "../components/cards/Notice.astro";
|
||||
import PhotoCard from "../components/cards/Photo.astro";
|
||||
import Base from "./Base.astro";
|
||||
|
||||
const notice = {
|
||||
header: "Website ported to Astro 2!",
|
||||
content: [
|
||||
"Third time's a charm, so hopefully this time it will last longer. So far Astro looks really cool."
|
||||
]
|
||||
};
|
||||
---
|
||||
<Base>
|
||||
<main class="l-home">
|
||||
|
@ -14,37 +10,9 @@ const notice = {
|
|||
<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> -->
|
||||
<NoticeCard />
|
||||
<PhotoCard />
|
||||
<ContactCard />
|
||||
</aside>
|
||||
</main>
|
||||
</Base>
|
||||
|
|
|
@ -10,6 +10,14 @@ const posts = await Promise.all([
|
|||
])
|
||||
.then(array => array.flat());
|
||||
|
||||
const metadata = posts.reduce(
|
||||
(acc, next) => (
|
||||
acc[next.slug] = { title: next.data.title, date: next.data.date },
|
||||
acc
|
||||
),
|
||||
{} as {[key: string]: {title: string, date: Date}}
|
||||
)
|
||||
|
||||
const index = lunr(function() {
|
||||
this.ref('slug');
|
||||
this.field('body');
|
||||
|
@ -19,7 +27,5 @@ const index = lunr(function() {
|
|||
})
|
||||
|
||||
export async function get(_: APIContext) {
|
||||
return {
|
||||
body: JSON.stringify(index)
|
||||
}
|
||||
return {body: JSON.stringify({ index, metadata })};
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue