|
| 1 | +import { marked } from 'marked'; |
| 2 | +import { observer } from 'mobx-react'; |
| 3 | +import { GetStaticPaths, GetStaticProps } from 'next'; |
| 4 | +import { ParsedUrlQuery } from 'querystring'; |
| 5 | +import { FC, useContext } from 'react'; |
| 6 | +import { Badge, Breadcrumb, Button, Container } from 'react-bootstrap'; |
| 7 | +import { decodeBase64 } from 'web-utility'; |
| 8 | + |
| 9 | +import { PageHead } from '../../components/Layout/PageHead'; |
| 10 | +import { I18nContext } from '../../models/Translation'; |
| 11 | +import { policyContentStore, XContent } from '../../models/Wiki'; |
| 12 | +import { splitFrontMatter } from '../api/core'; |
| 13 | + |
| 14 | +interface WikiPageParams extends ParsedUrlQuery { |
| 15 | + slug: string[]; |
| 16 | +} |
| 17 | + |
| 18 | +export const getStaticPaths: GetStaticPaths<WikiPageParams> = async () => { |
| 19 | + const nodes = await policyContentStore.getAll(); |
| 20 | + |
| 21 | + const paths = nodes |
| 22 | + .filter(({ type }) => type === 'file') |
| 23 | + .map(({ path }) => ({ params: { slug: path.split('/') } })); |
| 24 | + |
| 25 | + return { paths, fallback: 'blocking' }; |
| 26 | +}; |
| 27 | + |
| 28 | +export const getStaticProps: GetStaticProps<XContent, WikiPageParams> = async ({ params }) => { |
| 29 | + const { slug } = params!; |
| 30 | + |
| 31 | + const node = await policyContentStore.getOne(slug.join('/')); |
| 32 | + |
| 33 | + const { meta, markdown } = splitFrontMatter(decodeBase64(node.content!)); |
| 34 | + |
| 35 | + const markup = marked(markdown) as string; |
| 36 | + |
| 37 | + return { |
| 38 | + props: JSON.parse(JSON.stringify({ ...node, content: markup, meta })), |
| 39 | + revalidate: 300, // Revalidate every 5 minutes |
| 40 | + }; |
| 41 | +}; |
| 42 | + |
| 43 | +const WikiPage: FC<XContent> = observer(({ name, path, parent_path, content, meta }) => { |
| 44 | + const { t } = useContext(I18nContext); |
| 45 | + |
| 46 | + return ( |
| 47 | + <Container className="py-4"> |
| 48 | + <PageHead title={name} /> |
| 49 | + |
| 50 | + <Breadcrumb className="mb-4"> |
| 51 | + <Breadcrumb.Item href="/policy">{t('policy')}</Breadcrumb.Item> |
| 52 | + |
| 53 | + {parent_path?.split('/').map((segment, index, array) => { |
| 54 | + const breadcrumbPath = array.slice(0, index + 1).join('/'); |
| 55 | + |
| 56 | + return ( |
| 57 | + <Breadcrumb.Item key={breadcrumbPath} href={`/policy/${breadcrumbPath}`}> |
| 58 | + {segment} |
| 59 | + </Breadcrumb.Item> |
| 60 | + ); |
| 61 | + })} |
| 62 | + <Breadcrumb.Item active>{name}</Breadcrumb.Item> |
| 63 | + </Breadcrumb> |
| 64 | + |
| 65 | + <article> |
| 66 | + <header className="mb-4"> |
| 67 | + <h1>{name}</h1> |
| 68 | + |
| 69 | + {meta && ( |
| 70 | + <div className="d-flex flex-wrap align-items-center gap-3 mb-3"> |
| 71 | + <ul className="mb-0"> |
| 72 | + {meta['主题分类'] && ( |
| 73 | + <li> |
| 74 | + <Badge bg="primary">{meta['主题分类']}</Badge> |
| 75 | + </li> |
| 76 | + )} |
| 77 | + {meta['发文机构'] && ( |
| 78 | + <li> |
| 79 | + <Badge bg="secondary">{meta['发文机构']}</Badge> |
| 80 | + </li> |
| 81 | + )} |
| 82 | + {meta['有效性'] && ( |
| 83 | + <li> |
| 84 | + <Badge bg={meta['有效性'] === '现行有效' ? 'success' : 'warning'}> |
| 85 | + {meta['有效性']} |
| 86 | + </Badge> |
| 87 | + </li> |
| 88 | + )} |
| 89 | + </ul> |
| 90 | + </div> |
| 91 | + )} |
| 92 | + |
| 93 | + <div className="d-flex justify-content-between align-items-center text-muted small mb-3"> |
| 94 | + <div> |
| 95 | + {meta?.['成文日期'] && ( |
| 96 | + <span> |
| 97 | + {t('creation_date')}: {meta['成文日期']} |
| 98 | + </span> |
| 99 | + )} |
| 100 | + {meta?.['发布日期'] && meta['发布日期'] !== meta['成文日期'] && ( |
| 101 | + <span className="ms-3"> |
| 102 | + {t('publication_date')}: {meta['发布日期']} |
| 103 | + </span> |
| 104 | + )} |
| 105 | + </div> |
| 106 | + |
| 107 | + <div className="d-flex gap-2"> |
| 108 | + <Button |
| 109 | + variant="outline-primary" |
| 110 | + size="sm" |
| 111 | + href={`https://github.com/fpsig/open-source-policy/blob/main/China/政策/${path}`} |
| 112 | + target="_blank" |
| 113 | + rel="noopener noreferrer" |
| 114 | + > |
| 115 | + {t('edit_on_github')} |
| 116 | + </Button> |
| 117 | + {meta?.url && ( |
| 118 | + <Button |
| 119 | + variant="outline-secondary" |
| 120 | + size="sm" |
| 121 | + href={meta.url} |
| 122 | + target="_blank" |
| 123 | + rel="noopener noreferrer" |
| 124 | + > |
| 125 | + {t('view_original')} |
| 126 | + </Button> |
| 127 | + )} |
| 128 | + </div> |
| 129 | + </div> |
| 130 | + </header> |
| 131 | + |
| 132 | + <div dangerouslySetInnerHTML={{ __html: content || '' }} className="markdown-body" /> |
| 133 | + </article> |
| 134 | + |
| 135 | + <footer className="mt-5 pt-4 border-top"> |
| 136 | + <div className="text-center"> |
| 137 | + <p className="text-muted"> |
| 138 | + {t('github_document_description')} |
| 139 | + <a |
| 140 | + href={`https://github.com/fpsig/open-source-policy/blob/main/China/政策/${path}`} |
| 141 | + target="_blank" |
| 142 | + rel="noopener noreferrer" |
| 143 | + className="ms-2" |
| 144 | + > |
| 145 | + {t('view_or_edit_on_github')} |
| 146 | + </a> |
| 147 | + </p> |
| 148 | + </div> |
| 149 | + </footer> |
| 150 | + </Container> |
| 151 | + ); |
| 152 | +}); |
| 153 | + |
| 154 | +export default WikiPage; |
0 commit comments