Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update types #2156

Merged
merged 11 commits into from
Sep 18, 2023
21 changes: 21 additions & 0 deletions playground/document-driven/components/content/ShowArticle.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script lang="ts" setup>
import { ParsedArticle } from '../../types/article'

const { data } = await useAsyncData('key', () => queryContent('data').findOne())

const content = useContent<ParsedArticle>()
</script>

<template>
<h1>Article</h1>

<h2>data</h2>
<pre>
{{ data }}
</pre>

<h2>content</h2>
<pre>
{{ content }}
</pre>
</template>
12 changes: 12 additions & 0 deletions playground/document-driven/content/11.article.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
cover:
image: /images/cover/cover-11.jpg
alt: "Image alt text"
publishedAt: 2017-04-01
---

:show-article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis.

<!--more-->
Empty file.
3 changes: 2 additions & 1 deletion playground/document-driven/layouts/debug.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ const { layout } = useContent()
</template>

<style>
body, html {
body,
html {
margin: 0;
padding: 0;
min-height: 100vh;
Expand Down
9 changes: 9 additions & 0 deletions playground/document-driven/types/article.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { ParsedContent } from '../../../src/runtime/types'

export interface ParsedArticle extends ParsedContent {
cover: {
image: string,
alt: string
}
publishedAt: string
}
26 changes: 13 additions & 13 deletions src/runtime/composables/content.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,28 @@ import { withoutTrailingSlash } from 'ufo'
import type { NavItem, ParsedContent } from '../types'
import { computed, shallowReactive, shallowRef, useState, useRoute } from '#imports'

export const useContentState = () => {
export const useContentState = <G extends object = Record<string, unknown>>() => {
/**
* Map of loaded pages.
*/
*/
const pages = useState<Record<string, ParsedContent>>('dd-pages', () => shallowRef(shallowReactive({})))

/**
* Previous and next page data.
* Format: [prev, next]
* Format: { 'route': [prev, next] }
*/
const surrounds = useState<Record<string, Omit<ParsedContent, 'body'>>>('dd-surrounds', () => shallowRef(shallowReactive({})))
const surrounds = useState<Record<string, [Omit<ParsedContent, 'body'> | null, Omit<ParsedContent, 'body'> | null]>>('dd-surrounds', () => shallowRef(shallowReactive({})))

/**
* Navigation tree from root of app.
*/
const navigation = useState<NavItem[]>('dd-navigation')

/**
* Globally loaded content files.
* Format: { [key: string]: ParsedContent }
* Globally loaded themes files.
* Format: { [key: string]: unknown }
*/
const globals = useState<Record<string, ParsedContent>>('dd-globals', () => shallowRef(shallowReactive({})))
const globals = useState<Record<string, G>>('dd-globals', () => shallowRef(shallowReactive({})))

return {
pages,
Expand All @@ -33,15 +33,15 @@ export const useContentState = () => {
}
}

export const useContent = () => {
const { navigation, pages, surrounds, globals } = useContentState()
export const useContent = <T extends ParsedContent, G extends object = Record<string, unknown>>() => {
const { navigation, pages, surrounds, globals } = useContentState<G>()

const _path = computed(() => withoutTrailingSlash(useRoute().path))

/**
* Current `page` key, computed from path and content state.
*/
const page = computed(() => pages.value[_path.value])
const page = computed(() => pages.value[_path.value] as T)

/**
* Current `surround` key, computed from path and content state.
Expand All @@ -56,7 +56,7 @@ export const useContent = () => {
/**
* Content type from `page`.
*/
const type = computed(() => page.value?.type)
const type = computed(() => page.value?._type)

/**
* Excerpt from `page`.
Expand All @@ -71,12 +71,12 @@ export const useContent = () => {
/**
* Next page from `surround`.
*/
const next = computed(() => surround.value?.[1])
const next = computed(() => surround.value[1])
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is safe to keep this as optional because surround.value could be undefined


/**
* Previous page from `surround`.
*/
const prev = computed(() => surround.value?.[0])
const prev = computed(() => surround.value[0])
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is safe to keep this as optional because surround.value could be undefined

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In which case? As I can experiment, there is always a value and the object could be [null, null]

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

surrounds is set inside documentDriven.ts only if HTTP call succeeds, if HTTP call fails surround will be null

Also, it will be null if users disable surrounds in document driven.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ho yes, that's a good point.


return {
// Refs
Expand Down
13 changes: 9 additions & 4 deletions src/runtime/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,30 +32,34 @@ export interface ParsedContentInternalMeta {
/**
* File type of the content, i.e `markdown`
*/
_type?: string
_type?: 'markdown' | 'yaml' | 'json' | 'csv'
/**
* Path to the file relative to the content directory
*/
_file?: string
/**
* Extension of the file
*/
_extension?: string
_extension?: 'md' | 'yaml' | 'yml' | 'json' | 'json5' | 'csv'
}

export interface ParsedContentMeta extends ParsedContentInternalMeta {
[key: string]: any
}

export interface ParsedContent extends ParsedContentMeta {
/**
* Layout
*/
layout: string
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

layout should be an optional field because it may or may not present in front-matter.
I'm also thinking of moving it to ParsedContentMeta

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, good catch for the undefined.

Should we moved it to ParsedMeta, I don't know. I myself asked the question and I understand that ParsedMeta are calculated and because layout is not, I added here. But i'm completely open to move it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think ParsedMeta is better place for it

/**
* Excerpt
*/
excerpt?: any
excerpt?: MarkdownRoot
/**
* Content body
*/
body: any
body: MarkdownRoot
}

//
Expand All @@ -80,6 +84,7 @@ export interface MarkdownRoot {
type: 'root'
children: MarkdownNode[]
props?: Record<string, any>
toc?: Toc
}

export interface MarkdownPlugin extends Record<string, any> {}
Expand Down