kamov/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add cards to home, improve search

Browse source
This commit is contained in:
Maciej Jur 2023-04-09 00:58:09 +02:00
parent 7752fb6a87
commit f183266261
7 changed files with 77 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
deploy.sh Executable file
View 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
View 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
View 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
View 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>

19
src/components/search/Search.svelte
View file

@ -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 {

44
src/layouts/Home.astro
View file

@ -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>

12
src/pages/search.json.ts
View file

@ -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 })};
}