feat(pages): create chapter index page
just a page that lists each chapter and its summary
This commit is contained in:
		
							parent
							
								
									c9229b6c59
								
							
						
					
					
						commit
						b2ca5a13a1
					
				
							
								
								
									
										31
									
								
								pages/story/[id]/chapters.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										31
									
								
								pages/story/[id]/chapters.vue
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,31 @@ | ||||
| <script lang="ts" setup> | ||||
| 	import { storyMiddleware } from "~/lib/client/middleware"; | ||||
| 	import { IStory } from "~/models/stories"; | ||||
| 
 | ||||
| 	definePageMeta({ | ||||
| 		middleware: [storyMiddleware], | ||||
| 	}); | ||||
| 	const rtr = useRoute(); | ||||
| 	const { data: story, error } = await useApiFetch<IStory>( | ||||
| 		`/story/${rtr.params.id}`, | ||||
| 	); | ||||
| </script> | ||||
| 
 | ||||
| <template> | ||||
| 	<a-list :data-source="story.chapters"> | ||||
| 		<template #renderItem="{ item, index }"> | ||||
| 			<a-list-item> | ||||
| 				<a-list-item-meta> | ||||
| 					<template #title> | ||||
| 						<b> | ||||
| 							<nuxt-link :to="`/story/${story._id}/${index + 1}`"> | ||||
| 								{{ item.title || "Untitled" }} | ||||
| 							</nuxt-link> | ||||
| 						</b> | ||||
| 					</template> | ||||
| 				</a-list-item-meta> | ||||
| 				<div v-html="item.summary"></div> | ||||
| 			</a-list-item> | ||||
| 		</template> | ||||
| 	</a-list> | ||||
| </template> | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user