feat: ✨ 完善对 mdx 的支持

kunlunjs · May 9, 2022 · ebc3c07 · ebc3c07
1 parent 4799441
commit ebc3c07
Show file tree

Hide file tree

Showing 13 changed files with 1,449 additions and 39 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -15,3 +15,4 @@
 **/*.graphql
 
 app/styles/tailwind.css
+build
diff --git a/README.md b/README.md
@@ -1,25 +1,29 @@
 # remix-nestjs
 Remix 项目模板，使用 NestJS 作为服务端
 
-## Usage
+## 使用
 `npx create-remix --template turing-fe/remix-nestjs remix-nestjs-project`
 
-## Feature
-- [ ] NestJS
-- [ ] React18
-- [ ] MDX
-- [ ] Remark
-- [ ] Rehype
+## 功能
+- ✅ [React18]()
+- ✅ [MDX]()
+- ✅ [Remark]()
+- ✅ [Rehype]()
+- ✅ [PostgreSQL]()
+- ✅ [Cypress]()
+- [ ] [NestJS]()
+- [ ] [Docker]()
+- [ ] [Fly.io]()
 
-## Developing
+## 开发
 1. `pnpm i`
 2. `copy .env.example .env`
 3. `npm run docker`
 4. `npx prisma generate`
 5. `npm run build`
 6. `npm run dev`
 
-## Testing
+## 测试
 1. `npm run build`
 2. `npm run test:e2e:dev` or `npm run test:e2e:run`
 
@@ -99,7 +103,7 @@ remix-nestjs
 └─ vitest.config.ts                
 ```
 
-## Upgrate to React 18
+## 升级为 React18
 `app/entry.client.tsx`
 
 ```diff
@@ -110,5 +114,6 @@ remix-nestjs
 + hydrateRoot(document, <RemixBrowser />)
 ```
 
+
 ## 相关链接
 - [cypress](https://docs.cypress.io/)
diff --git a/app/root.tsx b/app/root.tsx
@@ -21,7 +21,7 @@ export const links: LinksFunction = () => {
 
 export const meta: MetaFunction = () => ({
   charset: 'utf-8',
-  title: 'Remix Notes',
+  title: 'Remix NestJS Template',
   viewport: 'width=device-width,initial-scale=1'
 })
 
@@ -39,14 +39,17 @@ export default function App() {
   return (
     <html lang="en" className="h-full">
       <head>
+        {/* Replace from meta function */}
+        {/* <meta charSet="utf-8" /> */}
+        {/* <meta name="viewport" content="width=device-width,initial-scale=1" /> */}
         <Meta />
         <Links />
       </head>
       <body className="h-full">
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
+        {process.env.NODE_ENV === 'development' && <LiveReload />}
       </body>
     </html>
   )

diff --git a/app/routes/posts.tsx b/app/routes/posts.tsx
@@ -0,0 +1,25 @@
+import type { LinksFunction } from '@remix-run/node'
+import { Outlet } from '@remix-run/react'
+import styles from 'highlight.js/styles/github.css'
+
+export const links: LinksFunction = () => {
+  return [
+    {
+      rel: 'stylesheet',
+      href: styles
+    }
+  ]
+}
+
+/**
+ * 所有 posts 目录下文件的父组件
+ */
+export default function Posts() {
+  return (
+    <div className="flex justify-center">
+      <div className="prose lg:prose">
+        <Outlet />
+      </div>
+    </div>
+  )
+}
diff --git a/app/routes/posts/first-post.mdx b/app/routes/posts/first-post.mdx
diff --git a/app/routes/posts/index.tsx b/app/routes/posts/index.tsx
@@ -1,7 +1,7 @@
 import { Link, useLoaderData } from '@remix-run/react'
 import type { LoaderFunction } from '@remix-run/server-runtime'
 import { json } from '@remix-run/server-runtime'
-import * as postA from './first-post.mdx'
+import * as postReadme from './readme.mdx'
 
 type LoaderData = {
   slug: string
@@ -18,21 +18,28 @@ function postFromModule(mod: any) {
 }
 
 export const loader: LoaderFunction = async ({ request, context, params }) => {
-  return json([postFromModule(postA)])
+  return json([postFromModule(postReadme)])
 }
 
-export default function Index() {
+export default function Posts() {
   const posts = useLoaderData() as LoaderData
   return (
-    <ul>
-      {posts.map(post => {
-        return (
-          <li key={post.slug}>
-            <Link to={post.slug}>{post.title}</Link>
-            {post.description ? <p>{post.description}</p> : null}
-          </li>
-        )
-      })}
-    </ul>
+    <div className="prose py-10 pl-10 lg:prose-xl">
+      <h2>文章列表</h2>
+      <div className="flex justify-center">
+        <ul>
+          {posts.map(post => {
+            return (
+              <li key={post.slug}>
+                <Link to={`/posts/${post.slug}`}>{post.title}</Link>
+                {post.description ? (
+                  <p className="m-0 lg:m-0">{post.description}</p>
+                ) : null}
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </div>
   )
 }
diff --git a/app/routes/posts/readme.mdx b/app/routes/posts/readme.mdx
@@ -0,0 +1,129 @@
+---
+meta:
+  title: read me
+  description: Isn't this just awesome?
+headers:
+  Cache-Control: no-cache
+---
+
+# remix-nestjs
+
+Remix 项目模板，使用 NestJS 作为服务端
+
+## 使用
+
+`npx create-remix --template turing-fe/remix-nestjs remix-nestjs-project`
+
+## 功能
+
+- [ ] NestJS
+- [ ] React18
+- [ ] MDX
+- [ ] Remark
+- [ ] Rehype
+
+## 开发
+
+1. `pnpm i`
+2. `copy .env.example .env`
+3. `npm run docker`
+4. `npx prisma generate`
+5. `npm run build`
+6. `npm run dev`
+
+## 测试
+
+1. `npm run build`
+2. `npm run test:e2e:dev` or `npm run test:e2e:run`
+
+## 目录结构
+
+```
+remix-nestjs
+├─ app
+│  ├─ models
+│  │  └─ note.server.ts    操作 Note 表数据
+│  │  └─ user.server.ts    操作 User 表数据
+│  ├─ routes
+│  │  ├─ notes
+│  │  │  ├─ $noteId.tsx    对应前端 /notes/:noteId 路由
+│  │  │  ├─ index.tsx      对应前端 /notes 路由
+│  │  │  └─ new.tsx        对应前端 /notes/new 路由
+│  │  ├─ healthcheck.tsx   对应前端 /healthcheck 路由
+│  │  ├─ index.tsx         对应前端 / 路由
+│  │  ├─ join.tsx          对应前端 /join 路由
+│  │  ├─ login.tsx         对应前端 /login 路由
+│  │  ├─ logout.tsx        执行退出登录操作（无页面）
+│  ├─ styles
+│  │  └─ tailwind.css      由 npm run generate:css 生成
+│  ├─ db.server.ts         prisma 初始化
+│  ├─ entry.client.tsx     浏览器端入口
+│  ├─ entry.server.tsx     服务端入口
+│  ├─ root.tsx
+│  ├─ session.server.ts    cookie 存取
+│  ├─ utils.test.ts
+│  └─ utils.ts             工具函数
+├─ cypress                 页面自动化测试
+│  ├─ e2e
+│  │  └─ smoke.ts
+│  ├─ fixtures
+│  │  └─ example.json
+│  ├─ plugins
+│  │  └─ index.ts
+│  ├─ support
+│  │  ├─ commands.ts
+│  │  ├─ create-user.ts
+│  │  ├─ delete-user.ts
+│  │  └─ index.ts
+│  ├─ videos
+│  │  └─ smoke.ts.mp4      [optional] npm run test:e2e:run 生成
+│  └─ tsconfig.json
+├─ mocks                   mock 数据
+│  ├─ index.js
+│  └─ start.ts
+├─ postgres-data           [optional] docker-compose.yml 中 PostgreSQL 本地数据卷映射目录
+├─ prisma
+│  ├─ schema.prisma        Prisma 数据对象定义
+│  └─ seed.ts              Prisma 初始化数据
+├─ public                  静态文件目录
+│  └─ favicon.ico
+├─ remix.init
+│  ├─ index.js
+│  ├─ package.json
+│  └─ pnpm-lock.yaml
+├─ test
+│  └─ setup-test-env.ts
+├─ Dockerfile
+├─ LICENSE
+├─ README.md
+├─ cypress.json
+├─ docker-compose.yml
+├─ fly.toml                 部署至 fly.io
+├─ lint-staged.config.js
+├─ package.json
+├─ prettier.config.js
+├─ remix.config.js
+├─ remix.env.d.ts
+├─ server.ts
+├─ stylelint.config.js
+├─ tailwind.config.js
+├─ tsconfig.json
+├─ verify-commit-msg.js
+└─ vitest.config.ts
+```
+
+## 升级为 React18
+
+`app/entry.client.tsx`
+
+```diff
+- import { hydrate } from 'react-dom'
+- hydrate(<RemixBrowser />, document)
+
++ import { hydrateRoot } from 'react-dom/client'
++ hydrateRoot(document, <RemixBrowser />)
+```
+
+## 相关链接
+
+- [cypress](https://docs.cypress.io/)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,4 @@
		*/.graphql

		app/styles/tailwind.css
		build