feat: lots of things
This commit is contained in:
parent
c8bbc26e34
commit
070b0383c9
@ -12,18 +12,19 @@ const docs = await queryContent<BlogParsedContent>("/blog")
|
||||
.where({ _draft: false })
|
||||
.find();
|
||||
|
||||
const latest = docs.at(-1);
|
||||
const latest = docs.at(-1) as BlogParsedContent;
|
||||
|
||||
const latestDate = dayjs(latest.date).utc();
|
||||
const prettyDate = latestDate.format("DD MMM YYYY");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="prose dark:prose-invert">
|
||||
<div class="prose dark:prose-invert flex">
|
||||
<HomeStatBox
|
||||
:href="latest._path"
|
||||
color="lightblue"
|
||||
title="Latest blog post"
|
||||
:clearstyles="false"
|
||||
>
|
||||
<h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
|
||||
<p class="text-sm text-gray-500 m-0">
|
||||
|
||||
@ -2,25 +2,21 @@
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc.js";
|
||||
import tz from "dayjs/plugin/timezone.js";
|
||||
import type { GithubPushEvent } from "@/shared/github";
|
||||
import type { GithubCommit, GithubPushEvent } from "@/shared/github";
|
||||
import type { Ref } from "vue";
|
||||
|
||||
const FEED_URL = "https://api.github.com/users/potatoeggy/events";
|
||||
|
||||
const results = (await useFetch(FEED_URL)).data as Ref<GithubPushEvent[]>;
|
||||
|
||||
const imgUrl = ref("");
|
||||
const href = ref("");
|
||||
for (const r of results.value) {
|
||||
if (r.type === "PushEvent") {
|
||||
{
|
||||
const latest = r.payload.commits[0];
|
||||
imgUrl.value = `https://opengraph.githubassets.com/hash/${r.repo.name}/commit/${latest.sha}`;
|
||||
href.value = `https://github.com/${r.repo.name}/commit/${latest.sha}`;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
const latestEvent = results.value.find(
|
||||
(event) => event.type === "PushEvent"
|
||||
) as GithubPushEvent;
|
||||
const latestCommit = latestEvent.payload.commits[0];
|
||||
const imgUrl = `https://opengraph.githubassets.com/hash/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
|
||||
const href = `https://github.com/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
|
||||
|
||||
const [title, description] = latestCommit.message.split("\n\n");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -31,7 +27,13 @@ for (const r of results.value) {
|
||||
title="Latest commit"
|
||||
:clearstyles="true"
|
||||
>
|
||||
<img class="m-0 w-full h-full" :src="imgUrl" v-if="imgUrl !== ''" />
|
||||
<img class="m-0 w-full h-full" :src="imgUrl" />
|
||||
<!--
|
||||
<div>
|
||||
<h2>{{ title }}</h2>
|
||||
<p v-if="description">{{ description }}</p>
|
||||
</div>
|
||||
-->
|
||||
</HomeStatBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,23 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import type { Color } from "csstype";
|
||||
import type { Color, ViewportLength } from "csstype";
|
||||
|
||||
// fix ReferenceError: _unref is not defined
|
||||
// https://github.com/nuxt/framework/issues/5546
|
||||
import { unref as _unref } from "vue";
|
||||
|
||||
const {
|
||||
href,
|
||||
color = "pink",
|
||||
title,
|
||||
clearstyles = false,
|
||||
forceheight,
|
||||
} = defineProps<{
|
||||
href?: string;
|
||||
color?: Color;
|
||||
title?: string;
|
||||
clearstyles?: boolean;
|
||||
forceheight?: ViewportLength<"rem">;
|
||||
}>();
|
||||
|
||||
const padding = clearstyles ? "0" : "1rem";
|
||||
const height = forceheight ?? "auto";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a class="no-underline" :href="href">
|
||||
<a class="no-underline inline-block flex" :href="href">
|
||||
<div class="container box">
|
||||
<p class="m-0 w-full title">{{ title }}</p>
|
||||
<div class="main-content">
|
||||
@ -34,7 +41,7 @@ const padding = clearstyles ? "0" : "1rem";
|
||||
* mobile
|
||||
*/
|
||||
width: 28rem;
|
||||
height: 16.25rem;
|
||||
height: v-bind(height);
|
||||
border: 0.5rem solid v-bind(color);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
@ -2,24 +2,24 @@
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc.js";
|
||||
import tz from "dayjs/plugin/timezone.js";
|
||||
import type { BlogParsedContent } from "@/shared/types";
|
||||
import type { BlogParsedContent, StoryParsedContent } from "@/shared/types";
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(tz);
|
||||
|
||||
const docs = await queryContent<BlogParsedContent>("/stories")
|
||||
const docs = await queryContent<StoryParsedContent>("/stories")
|
||||
.sort({ date: 1 })
|
||||
.where({ _draft: false })
|
||||
.find();
|
||||
|
||||
const latest = docs.at(-1);
|
||||
const latest = docs.at(-1) as StoryParsedContent;
|
||||
|
||||
const latestDate = dayjs(latest.date).utc();
|
||||
const prettyDate = latestDate.format("DD MMM YYYY");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="prose dark:prose-invert">
|
||||
<div class="prose dark:prose-invert flex">
|
||||
<HomeStatBox :href="latest._path" color="lightgreen" title="Latest story">
|
||||
<h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
|
||||
<p class="text-sm text-gray-500 m-0">
|
||||
|
||||
@ -44,4 +44,6 @@ export default defineNuxtConfig({
|
||||
experimental: {
|
||||
reactivityTransform: true,
|
||||
},
|
||||
target: "static",
|
||||
ssr: true,
|
||||
});
|
||||
|
||||
@ -1,21 +1,40 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import type { BlogParsedContent, StoryParsedContent } from "@/shared/types";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc.js";
|
||||
import tz from "dayjs/plugin/timezone.js";
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(tz);
|
||||
|
||||
type GeneralParsedContent = BlogParsedContent | StoryParsedContent;
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
// we're not using ContentDoc because i need control
|
||||
const doc = await queryContent<GeneralParsedContent>(route.path).findOne();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentDoc tag="article" class="prose dark:prose-invert">
|
||||
<template #not-found>
|
||||
<!-- 404 -->
|
||||
<main class="prose dark:prose-invert h-full">
|
||||
<div class="container prose dark:prose-invert w-full">
|
||||
<h1>{{ doc.title }}</h1>
|
||||
<ContentRenderer tag="article" :value="doc" class="pt-0 w-full">
|
||||
<ContentRendererMarkdown :value="doc" />
|
||||
|
||||
<template #empty>
|
||||
<p>No description found.</p>
|
||||
</template>
|
||||
<template #not-found>
|
||||
<h1>404 - Not Found</h1>
|
||||
<p>Maybe you can find somewhere else?</p>
|
||||
</main>
|
||||
</template>
|
||||
</ContentDoc>
|
||||
</template>
|
||||
</ContentRenderer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
article {
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
max-width: 72ch;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ useTitle("Home");
|
||||
<main class="flex flex-col items-center justify-around gap-8">
|
||||
<h1>Welcome!</h1>
|
||||
<p>What are you here to see?</p>
|
||||
<div class="flex justify-around items-center w-full flex-wrap gap-y-10">
|
||||
<div class="flex justify-around items-stretch w-full flex-wrap gap-y-10">
|
||||
<BlogStatBox />
|
||||
<StoryStatBox />
|
||||
<CommitStatBox />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user