Skip to content

Commit

Permalink
Slides v0 (#76)
Browse files Browse the repository at this point in the history
  • Loading branch information
stanistan authored Jun 13, 2023
1 parent 0efaa6c commit 480731c
Show file tree
Hide file tree
Showing 10 changed files with 1,055 additions and 384 deletions.
19 changes: 19 additions & 0 deletions frontend/components/BodyMarkdown.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<div v-if="body.length" class="markdown">
<MarkdownHTML>
{{ body }}
</MarkdownHTML>
</div>
</template>

<script setup lang="ts">
const props = defineProps({
model: { type: Object, required: true }
});
const body = computed(() => {
return [ props.model.pr.body, props.model.review.body ]
.filter(x => x && x.length > 0)
.join("\n\n---\n\n");
});
</script>
3 changes: 2 additions & 1 deletion frontend/components/ComponentCard.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="m-4 border border-slate-300 rounded-xl overflow-hidden shadow">
<div class="w-full">
<div class="w-full text-sm p-3 bg-slate-100 border-b border-slate-300 gap-1 rounded-t-xl">
<div class="w-full text-sm p-3 bg-slate-100 border-b border-slate-300 gap-1 rounded-t-xl" :class="titleClass">
<SmallBadge v-if="!!badge">
{{ badge }}
</SmallBadge>
Expand All @@ -15,5 +15,6 @@
<script setup lang="ts">
defineProps({
badge: { type: Number, default: 0 },
titleClass: { type: String, default: '' }
});
</script>
16 changes: 3 additions & 13 deletions frontend/components/Review/PageContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,15 @@
<div class="gap-3">
<ComponentCard>
<template #title>
<div class="text-md text-xl font-extrabold">
<div class="text-xl font-extrabold">
<span>(#{{ model.pr.number }})</span>&nbsp;
<GradientText>{{ model.pr.title }}</GradientText>
</div>
</template>
<template #body>
<div class="px-4 py-4">
<Review-MetadataList :model="model" />
<div class="markdown">
<MarkdownHTML v-if="body.length">
{{ body }}
</MarkdownHTML>
</div>
<BodyMarkdown :model="model" />
</div>
</template>
</ComponentCard>
Expand All @@ -28,13 +24,7 @@
</template>

<script setup lang="ts">
const props = defineProps({
defineProps({
model: { type: Object, required: true }
});
const body = computed(() => {
return [ props.model.pr.body, props.model.review.body ]
.filter(x => x && x.length > 0)
.join("\n\n---\n\n");
});
</script>
28 changes: 28 additions & 0 deletions frontend/components/SlideCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<template>
<div>
<ComponentCard :badge="idx" title-class="">
<template #title>
<code>{{ comment.path }}</code>
</template>
<template #body>
<div class="overflow-scroll text-lg max-h-[70vh]">
<DiffBlock :comment="comment" />
</div>
</template>
</ComponentCard>
<div class="max-w-2xl mx-auto text-center">
<MarkdownHTML>{{ commentBody }}</MarkdownHTML>
</div>
</div>
</template>

<script setup lang="ts">
const props = defineProps({
comment: { type: Object, required: true },
idx: { type: Number, required: true }
});
const commentBody = computed(() => {
return props.comment.body.replace(/^\s*\d+\.\s*/, '');
});
</script>
87 changes: 87 additions & 0 deletions frontend/components/SlideShow.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<template>
<div class="flex flex-col h-full" @keyup.left="left">
<div class="flex-grow" />
<div class="flex-0">
<div v-if="current==0">
<div class="text-6xl font-extrabold text-center">
<span>(#{{ model.pr.number }})</span>&nbsp;
<GradientText>{{ model.pr.title }}</GradientText>
</div>
<div class="mx-auto w-1/2 mt-8">
<Review-MetadataList :model="model" />
</div>
</div>

<div v-if="current===1">
<ComponentCard>
<template #title>
<div class="text-xl font-extrabold">
<span>(#{{ model.pr.number }})</span>&nbsp;
<GradientText>{{ model.pr.title }}</GradientText>
</div>
</template>
<template #body>
<div class="px-4 py-4">
<BodyMarkdown :model="model" />
</div>
</template>
</ComponentCard>
</div>

<div v-for="(c, i) in model.comments" :key="i">
<SlideCard
v-if="i+2==current" :comment="c"
:idx="i+1"
/>
</div>

<div v-if="current===model.comments.length+2" class="text-center font-bold">
FIN
</div>
</div>
<div class="flex-grow" />
</div>
</template>

<script setup lang="ts">
const props = defineProps({
model: { type: Object, required: true }
});
function onKeyUp(e) {
if (e.defaultPrevented) {
return;
}
const totalSlides = props.model.comments.length + 3;
let next = current.value;
switch (e.key) {
case "ArrowLeft":
next = (next - 1) % totalSlides;
break;
case "ArrowRight":
case "Space":
next = (next + 1) % totalSlides;
break;
}
if (next < 0) {
next = totalSlides - 1;
}
current.value = next;
}
onMounted(() => {
window.addEventListener('keyup', onKeyUp);
});
onUnmounted(() => {
window.removeEventListener('keyup', onKeyUp);
});
const current = ref(0);
</script>
7 changes: 5 additions & 2 deletions frontend/layouts/default.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="min-h-screen flex flex-col">
<div class="min-h-screen flex flex-col justify-content-center">
<div class="flex-grow">
<slot />
</div>
Expand All @@ -11,12 +11,15 @@
</NuxtLink>
</div>
<div class="my-4">
<NuxtLink :href="'https://github.com/stanistan/present-me/commit/' + v.rev">({{ v. rev }})</NuxtLink>
<NuxtLink :href="'https://github.com/stanistan/present-me/commit/' + v.rev">
({{ v. rev }})
</NuxtLink>
</div>
</footer>
</div>
</div>
</template>

<script type="ts" setup>
import * as v from '../version.json';
</script>
8 changes: 4 additions & 4 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
"devDependencies": {
"@nuxt/eslint-config": "^0.1.1",
"autoprefixer": "^10.4.14",
"eslint": "^8.39.0",
"nuxt": "^3.4.3",
"postcss": "^8.4.21",
"tailwindcss": "^3.3.1"
"eslint": "^8.41.0",
"nuxt": "^3.5.3",
"postcss": "^8.4.24",
"tailwindcss": "^3.3.2"
},
"version": "0.0.0",
"dependencies": {
Expand Down
42 changes: 42 additions & 0 deletions frontend/pages/[org]/[repo]/pull/[pull]/review-[review]/slides.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<div>
<TopBar>
{{ $route.params.org }}/{{ $route.params.repo }}/pull/{{ $route.params.pull }}/review-{{ $route.params.review }}
</TopBar>
<div class="relative h-[96vh]">
<div v-if="pending">
<div class="flex flex-col items-stretch">
<div class="animate-pulse mx-auto text-center text-4xl pt-10 font-bold ">
<GradientText>Loading...</GradientText>
</div>
</div>
</div>
<div v-else-if="error">
<div class="mx-auto max-w-3xl py-10">
<div class="bg-orange-100 px-2 pb-2">
<div class="text-xs text-center underline py-4">
{{ error }}
</div>
<div class="bg-white p-4 text-center border border-orange-200 rounded">
<code>{{ error.data }}</code>
</div>
</div>
</div>
</div>
<div v-else class="absolute top-0 left-0 right-0 bottom-0">
<SlideShow :model="data" />
</div>
</div>
</div>
</template>

<script setup lang="ts">
const route = useRoute();
const { pending, data, error } = await useFetch('/api/review', {
lazy: true,
params: route.params,
server: false,
initialCache: false,
transform: v => JSON.parse(v),
});
</script>
Loading

0 comments on commit 480731c

Please sign in to comment.