generate postlist :release

packages/code-gen/_templates/infoapp/agg/posts.ejs

@@ -0,0 +1,19 @@
+---
+to: ../transparent-info-app/gen/posts.js
+---
+
+/*********************
+
+this is generated code ,donot edit me !!!!!
+
+****************************/
+
+import withExtra from '../components/post/PostWrap';
+
+<% h.posts.forEach( e => { %>
+import * as N<%= h.changeCase.constant(e) %> from '../pages/posts/<%- e %>'; <% }) %> 
+
+export const posts = [ <% h.posts.forEach( e => { %>
+    withExtra(N<%= h.changeCase.constant(e) %>.default,{fileName: '<%= e %>', title: N<%= h.changeCase.constant(e) %>.title , category: 'posts'}), <% }) %> 
+];
+

packages/code-gen/_templates/infoapp/agg/timelines.ejs

@@ -1,5 +1,5 @@
 ---
-to: ../transparent-info-app/gen/timeline.jsx
+to: ../transparent-info-app/gen/timeline.js
 ---
 
 /*********************

packages/code-gen/main.ts

@@ -6,8 +6,10 @@ const Logger = require('hygen/lib/logger');
 
 const defaultTemplates = path.join(__dirname, '_templates');
 
-async function genTimelines() {
-  const files = await fs.promises.readdir(`${__dirname}/../transparent-info-app/timeline`);
+async function genAggregation() {
+  const timelines = await fs.promises.readdir(`${__dirname}/../transparent-info-app/timeline`);
+
+  const posts = await fs.promises.readdir(`${__dirname}/../transparent-info-app/pages/posts`);
 
   runner(['infoapp', 'agg'], {
     templates: defaultTemplates,
@@ -19,13 +21,14 @@ async function genTimelines() {
     //   return require('execa').shell(action, opts);
     // },
     helpers: {
-      timelines: files,
+      timelines,
+      posts: posts.filter(e => !e.startsWith('index.')),
     },
   });
 }
 
 async function main() {
-  await genTimelines();
+  await genAggregation();
 }
 
 main();

packages/transparent-info-app/components/BottomNav.tsx

@@ -55,7 +55,7 @@ export function BottomNav() {
       <HiddenPrefetch />
       <BottomNavigation value={value} onChange={handleChange} className={classes.root}>
         <BottomNavigationAction label="经过" value="/event" icon={<RestoreIcon />} />
-        <BottomNavigationAction label="文章" value="/postlist" icon={<ListIcon />} />
+        <BottomNavigationAction label="文章" value="/posts" icon={<ListIcon />} />
         <BottomNavigationAction label="捐赠" value="/donation" icon={<EmojiPeopleIcon />} />
         {/* <BottomNavigationAction label="关于" value="/about" icon={<InfoIcon />} /> */}
       </BottomNavigation>

packages/transparent-info-app/components/PostList.tsx → packages/transparent-info-app/components/post/PostList.tsx

@@ -1,20 +1,15 @@
 import * as React from 'react';
-import Layout from '../components/Layout';
+import Layout from '../Layout';
 import { NextPage, NextPageContext } from 'next';
 import { Container, ListItem, List } from '@material-ui/core';
-import { postsList } from '../pages/posts/index';
-import Link from '../src/Link';
+import Link from '../../src/Link';
 // import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { FunctionComponent } from 'react';
-
-interface Post {
-  href: string;
-  title?: string;
-}
+import withExtra, { WithExtra } from './PostWrap';
 
 interface Props {
-  posts: Post[];
+  posts: WithExtra[];
 }
 
 export const PostList: FunctionComponent<Props> = ({ posts }) => {
@@ -26,14 +21,14 @@ export const PostList: FunctionComponent<Props> = ({ posts }) => {
 
   return (
     <List>
-      {posts.map((e, i) => (
+      {posts.map(([Item, extra], i) => (
         <ListItem key={i}>
           <Link
             passHref={false}
-            onClick={(evt: React.MouseEvent) => handleLinkClick(evt, e.href)}
-            href={e.href}
+            onClick={(evt: React.MouseEvent) => handleLinkClick(evt, extra.href as string)}
+            href={extra.href as string}
           >
-            {e.title}
+            {extra.title}
           </Link>
         </ListItem>
       ))}

packages/transparent-info-app/components/post/PostWrap.tsx

@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'react';
+
+type Category = 'posts';
+
+export interface WrapExtra {
+  fileName: string;
+  title: string;
+  category: Category;
+  href?: string;
+}
+
+type PostProps = WrapExtra;
+
+export type WithExtra = [FunctionComponent<PostProps>, WrapExtra];
+
+export default function withExtra(
+  WrapComponent: FunctionComponent<PostProps>,
+  extra: WrapExtra
+): WithExtra {
+  const href = `/${extra.category}/${extra.fileName.split('.')[0]}`;
+  return [
+    (props: any) => <WrapComponent {...extra} {...props} />,
+    {
+      ...extra,
+      href,
+    },
+  ];
+}

packages/transparent-info-app/pages/posts/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PostList } from '../../components/post/PostList';
+
+import { posts } from '../../gen/posts';
+import Layout from '../../components/Layout';
+
+export default () => {
+  return (
+    <Layout title="文章列表">
+      <PostList posts={posts} />
+    </Layout>
+  );
+};

packages/transparent-info-app/pages/posts/post2.mdx

@@ -1,5 +1,4 @@
 import Layout from '../../components/Layout';
-import { Posts } from '../../components/Posts';
 import Md2 from '../../components/md2.mdx';
 import { EditMe } from '../../components/Github.tsx';
 
@@ -50,15 +49,6 @@ export default ({children})=>(<Layout title="高端玩法"> {children} </Layout>
 ---
 
 <Md2 />
-
----
-
-下面是引用 react 组件
-
-<Posts />
-
----
-
 <EditMe path="pages/posts/post2.mdx" />
 
 export default ({ children }) => <Layout title="高端玩法"> {children} </Layout>;