feat(pages): add main story page
(finally)
This commit is contained in:
parent
b21aab4940
commit
c4fc0806ed
17
components/reviews/forChapter.vue
Normal file
17
components/reviews/forChapter.vue
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { IReview } from "~/models/stories/review";
|
||||||
|
import singleReview from "./singleReview.vue";
|
||||||
|
import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";
|
||||||
|
const props = defineProps<{ endpoint: string }>();
|
||||||
|
const story = inject<SingleChapterResult>("story");
|
||||||
|
const { data: reviews } = (await useApiFetch<IReview[]>(
|
||||||
|
`${props.endpoint}/reviews`,
|
||||||
|
)) as unknown as {
|
||||||
|
data: IReview[];
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div v-for="comment in reviews">
|
||||||
|
<single-review :review="comment" :story="story!" />
|
||||||
|
</div>
|
||||||
|
</template>
|
106
pages/story/[id]/[cidx]/index.vue
Normal file
106
pages/story/[id]/[cidx]/index.vue
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";
|
||||||
|
import { theme } from "ant-design-vue";
|
||||||
|
import { storyMiddleware } from "~/lib/client/middleware";
|
||||||
|
import forChapter from "~/components/reviews/forChapter.vue";
|
||||||
|
import storyInfo from "~/components/story/view/storyInfo.vue";
|
||||||
|
import chapterPicker from "~/components/story/view/chapterPicker.vue";
|
||||||
|
|
||||||
|
const { useToken } = theme;
|
||||||
|
const { token } = useToken();
|
||||||
|
definePageMeta({
|
||||||
|
middleware: [storyMiddleware],
|
||||||
|
});
|
||||||
|
const rtr = useRoute();
|
||||||
|
const { data: story, error } = await useApiFetch<SingleChapterResult>(
|
||||||
|
`/story/${rtr.params.id}/${rtr.params.cidx}`,
|
||||||
|
);
|
||||||
|
provide<SingleChapterResult | null>("story", story.value);
|
||||||
|
console.log("storyyy", story.value?.currentChapter);
|
||||||
|
console.log(rtr);
|
||||||
|
let dark = inject<boolean>("dark");
|
||||||
|
useHead({
|
||||||
|
title: `"${story.value.title}" by ${story.value.author.username}`,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<a-typography-title>
|
||||||
|
{{ story?.title }}
|
||||||
|
</a-typography-title>
|
||||||
|
<story-info />
|
||||||
|
<div>
|
||||||
|
<a-card
|
||||||
|
:style="{
|
||||||
|
backgroundColor: dark ? 'rgb(191, 54, 67)' : token.colorError,
|
||||||
|
display: 'flow-root',
|
||||||
|
color: '#fff',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<a-typography-title :level="2"> Disclaimer </a-typography-title>
|
||||||
|
<a-divider style="background-color: #fff" />
|
||||||
|
{{ story.author.profile.disclaimer }}
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
<a-typography-title :level="3">
|
||||||
|
{{ story.currentChapter.title }}
|
||||||
|
</a-typography-title>
|
||||||
|
<chapter-picker v-if="story.totalChapters > 1" />
|
||||||
|
<div style="display: flow-root">
|
||||||
|
<a-divider />
|
||||||
|
</div>
|
||||||
|
<div v-html="story?.currentChapter.text"></div>
|
||||||
|
<a-divider style="background-color: #fff" />
|
||||||
|
<a-button-group size="large" v-if="story.totalChapters > 1">
|
||||||
|
<a-button
|
||||||
|
v-if="parseInt(rtr.params.cidx as string) > 1"
|
||||||
|
@click="() => navigateTo(`/story/${rtr.params.id}/1`)"
|
||||||
|
>
|
||||||
|
First
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-if="parseInt(rtr.params.cidx as string) > 1"
|
||||||
|
@click="
|
||||||
|
() =>
|
||||||
|
navigateTo(
|
||||||
|
`/story/${rtr.params.id}/${
|
||||||
|
parseInt(rtr.params.cidx as string) - 1
|
||||||
|
}`,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-if="
|
||||||
|
parseInt(rtr.params.cidx as string) < story.chapterNames.length - 1
|
||||||
|
"
|
||||||
|
@click="
|
||||||
|
() =>
|
||||||
|
navigateTo(
|
||||||
|
`/story/${rtr.params.id}/${
|
||||||
|
parseInt(rtr.params.cidx as string) + 1
|
||||||
|
}`,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
@click="
|
||||||
|
() =>
|
||||||
|
navigateTo(`/story/${rtr.params.id}/${story.chapterNames.length}`)
|
||||||
|
"
|
||||||
|
v-if="
|
||||||
|
parseInt(rtr.params.cidx as string) < story.chapterNames.length - 1
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Last
|
||||||
|
</a-button>
|
||||||
|
</a-button-group>
|
||||||
|
<a-typography-title style="text-align: center" :level="2">
|
||||||
|
Reviews
|
||||||
|
</a-typography-title>
|
||||||
|
<for-chapter :endpoint="`/story/${rtr.params.id}/${rtr.params.cidx}`" />
|
||||||
|
</div>
|
||||||
|
</template>
|
Loading…
x
Reference in New Issue
Block a user