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">
|
<script lang="ts">
|
||||||
|
import dayjs from "dayjs";
|
||||||
import lunr from "lunr";
|
import lunr from "lunr";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
@ -6,6 +7,7 @@
|
||||||
let value = '';
|
let value = '';
|
||||||
let index: lunr.Index;
|
let index: lunr.Index;
|
||||||
let results: lunr.Index.Result[] = [];
|
let results: lunr.Index.Result[] = [];
|
||||||
|
let metadata: any;
|
||||||
|
|
||||||
/** Update the value so that it reflects the URL */
|
/** Update the value so that it reflects the URL */
|
||||||
function sync() {
|
function sync() {
|
||||||
|
@ -28,7 +30,8 @@
|
||||||
|
|
||||||
async function load() {
|
async function load() {
|
||||||
const data = await fetch('/search.json').then(r => r.json());
|
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() {
|
function search() {
|
||||||
|
@ -49,8 +52,11 @@
|
||||||
<section class="results">
|
<section class="results">
|
||||||
<div>Showing results for "{value}" ({results.length})</div>
|
<div>Showing results for "{value}" ({results.length})</div>
|
||||||
{#each results as result}
|
{#each results as result}
|
||||||
|
{@const meta = metadata[result.ref]}
|
||||||
|
{@const date = dayjs(meta.date)}
|
||||||
<a class="result" href={result.ref}>
|
<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>
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
</section>
|
</section>
|
||||||
|
@ -81,11 +87,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.result {
|
.result {
|
||||||
display: block;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
background-color: white;
|
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;
|
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;
|
transition: box-shadow linear 100ms;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
.date {
|
||||||
|
margin-left: auto;
|
||||||
|
color: rgb(65, 65, 65);
|
||||||
|
}
|
||||||
|
|
||||||
&:focus-within,
|
&:focus-within,
|
||||||
&:hover {
|
&: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";
|
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>
|
<Base>
|
||||||
<main class="l-home">
|
<main class="l-home">
|
||||||
|
@ -14,37 +10,9 @@ const notice = {
|
||||||
<slot />
|
<slot />
|
||||||
</article>
|
</article>
|
||||||
<aside class="l-home__aside">
|
<aside class="l-home__aside">
|
||||||
<section class="p-card">
|
<NoticeCard />
|
||||||
<h2 class="p-card__header">{notice.header}</h2>
|
<PhotoCard />
|
||||||
{notice.content.map(item => (
|
<ContactCard />
|
||||||
<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>
|
</aside>
|
||||||
</main>
|
</main>
|
||||||
</Base>
|
</Base>
|
||||||
|
|
|
@ -10,6 +10,14 @@ const posts = await Promise.all([
|
||||||
])
|
])
|
||||||
.then(array => array.flat());
|
.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() {
|
const index = lunr(function() {
|
||||||
this.ref('slug');
|
this.ref('slug');
|
||||||
this.field('body');
|
this.field('body');
|
||||||
|
@ -19,7 +27,5 @@ const index = lunr(function() {
|
||||||
})
|
})
|
||||||
|
|
||||||
export async function get(_: APIContext) {
|
export async function get(_: APIContext) {
|
||||||
return {
|
return {body: JSON.stringify({ index, metadata })};
|
||||||
body: JSON.stringify(index)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue