|
| 1 | +import { marked } from 'marked'; |
| 2 | +import { observer } from 'mobx-react'; |
| 3 | +import { BadgeBar } from 'mobx-restful-table'; |
| 4 | +import { GetStaticPaths, GetStaticProps } from 'next'; |
| 5 | +import { ParsedUrlQuery } from 'querystring'; |
| 6 | +import { FC, useContext } from 'react'; |
| 7 | +import { Breadcrumb, Button, Container } from 'react-bootstrap'; |
| 8 | +import { decodeBase64 } from 'web-utility'; |
| 9 | + |
| 10 | +import { PageHead } from '../../components/Layout/PageHead'; |
| 11 | +import { I18nContext } from '../../models/Translation'; |
| 12 | +import { recipeContentStore, XContent } from '../../models/Wiki'; |
| 13 | +import { splitFrontMatter } from '../api/core'; |
| 14 | + |
| 15 | +interface RecipePageParams extends ParsedUrlQuery { |
| 16 | + slug: string[]; |
| 17 | +} |
| 18 | + |
| 19 | +export const getStaticPaths: GetStaticPaths<RecipePageParams> = async () => { |
| 20 | + const nodes = await recipeContentStore.getAll(); |
| 21 | + |
| 22 | + const paths = nodes |
| 23 | + .filter(({ type, name }) => type === 'file' && !name.startsWith('.')) |
| 24 | + .map(({ path }) => ({ params: { slug: path.split('/') } })); |
| 25 | + |
| 26 | + return { paths, fallback: 'blocking' }; |
| 27 | +}; |
| 28 | + |
| 29 | +export const getStaticProps: GetStaticProps<XContent, RecipePageParams> = async ({ params }) => { |
| 30 | + const { slug } = params!; |
| 31 | + |
| 32 | + const node = await recipeContentStore.getOne(slug.join('/')); |
| 33 | + |
| 34 | + const { meta, markdown } = splitFrontMatter(decodeBase64(node.content!)); |
| 35 | + |
| 36 | + const markup = marked(markdown) as string; |
| 37 | + |
| 38 | + return { |
| 39 | + props: JSON.parse(JSON.stringify({ ...node, content: markup, meta })), |
| 40 | + revalidate: 300, // Revalidate every 5 minutes |
| 41 | + }; |
| 42 | +}; |
| 43 | + |
| 44 | +const RecipePage: FC<XContent> = observer(({ name, path, parent_path, content, meta }) => { |
| 45 | + const { t } = useContext(I18nContext); |
| 46 | + |
| 47 | + return ( |
| 48 | + <Container className="py-4"> |
| 49 | + <PageHead title={name} /> |
| 50 | + |
| 51 | + <Breadcrumb className="mb-4"> |
| 52 | + <Breadcrumb.Item href="/recipe">{t('recipe')}</Breadcrumb.Item> |
| 53 | + |
| 54 | + {parent_path?.split('/').map((segment, index, array) => { |
| 55 | + const breadcrumbPath = array.slice(0, index + 1).join('/'); |
| 56 | + |
| 57 | + return ( |
| 58 | + <Breadcrumb.Item key={breadcrumbPath} href={`/recipes/${breadcrumbPath}`}> |
| 59 | + {segment} |
| 60 | + </Breadcrumb.Item> |
| 61 | + ); |
| 62 | + })} |
| 63 | + <Breadcrumb.Item active>{name}</Breadcrumb.Item> |
| 64 | + </Breadcrumb> |
| 65 | + |
| 66 | + <article> |
| 67 | + <header className="mb-4"> |
| 68 | + <h1>{name}</h1> |
| 69 | + |
| 70 | + {meta && <BadgeBar list={Object.values(meta).map(text => ({ text }))} />} |
| 71 | + |
| 72 | + <div className="d-flex justify-content-between align-items-center text-muted small mb-3"> |
| 73 | + <dl> |
| 74 | + {meta?.['servings'] && ( |
| 75 | + <> |
| 76 | + <dt>{t('servings')}:</dt> |
| 77 | + <dd>{meta['servings']}</dd> |
| 78 | + </> |
| 79 | + )} |
| 80 | + {meta?.['preparation_time'] && ( |
| 81 | + <> |
| 82 | + <dt>{t('preparation_time')}:</dt> |
| 83 | + <dd>{meta['preparation_time']}</dd> |
| 84 | + </> |
| 85 | + )} |
| 86 | + </dl> |
| 87 | + |
| 88 | + <div className="d-flex gap-2"> |
| 89 | + <Button |
| 90 | + variant="outline-primary" |
| 91 | + size="sm" |
| 92 | + href={`https://github.com/Gar-b-age/CookLikeHOC/edit/main/${path}`} |
| 93 | + target="_blank" |
| 94 | + rel="noopener noreferrer" |
| 95 | + > |
| 96 | + {t('edit_on_github')} |
| 97 | + </Button> |
| 98 | + {meta?.url && ( |
| 99 | + <Button |
| 100 | + variant="outline-secondary" |
| 101 | + size="sm" |
| 102 | + href={meta.url} |
| 103 | + target="_blank" |
| 104 | + rel="noopener noreferrer" |
| 105 | + > |
| 106 | + {t('view_original')} |
| 107 | + </Button> |
| 108 | + )} |
| 109 | + </div> |
| 110 | + </div> |
| 111 | + </header> |
| 112 | + |
| 113 | + <div dangerouslySetInnerHTML={{ __html: content || '' }} className="markdown-body" /> |
| 114 | + </article> |
| 115 | + |
| 116 | + <footer className="mt-5 pt-4 border-top"> |
| 117 | + <div className="text-center"> |
| 118 | + <p className="text-muted"> |
| 119 | + {t('github_document_description')} |
| 120 | + <a |
| 121 | + href={`https://github.com/Gar-b-age/CookLikeHOC/blob/main/${path}`} |
| 122 | + target="_blank" |
| 123 | + rel="noopener noreferrer" |
| 124 | + className="ms-2" |
| 125 | + > |
| 126 | + {t('view_or_edit_on_github')} |
| 127 | + </a> |
| 128 | + </p> |
| 129 | + </div> |
| 130 | + </footer> |
| 131 | + </Container> |
| 132 | + ); |
| 133 | +}); |
| 134 | + |
| 135 | +export default RecipePage; |
0 commit comments