feat: blog workflow (#1172)

* refactor(blog-editor): wip

* refactor(blog-editor): step 2 done

* refactor(global): rename components -> widgets

* refactor(blog): list item styles

* refactor(blog): detail page & re-org widgets

* refactor(blog): detail page wip

* refactor(blog-page): tab switch & import re-org

* refactor(blog): content tab with realdata

* refactor(blog): update rss author

* refactor(blog): update rss author done

Author: mydearxym

.eslintignore

@@ -9,4 +9,5 @@ next-env.d.ts
 *.jpeg
 *.txt
 *.md
-*.ico
+*.ico
+*.hbs

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
         alias: {
           '@/config': 'config',
           '@/containers': 'src/containers',
-          '@/components': 'src/components',
+          '@/widgets': 'src/widgets',
           '@/services': 'src/services',
           '@/constant': 'utils/constant',
           '@/hooks': 'src/hooks',
@@ -30,9 +30,9 @@ module.exports = {
           '@/model': 'src/stores/Model',
           '@/utils': 'utils',
           '@/schemas': 'src/schemas',
-          '@/Img': 'src/components/Img',
-          '@/SvgIcons': 'src/components/SvgIcons',
-          '@/icons': 'src/components/Icons',
+          '@/Img': 'src/widgets/Img',
+          '@/SvgIcons': 'src/widgets/SvgIcons',
+          '@/icons': 'src/widgets/Icons',
           '@/i18n': 'i18n',
           '@/spec': 'src/spec',
         },

.prettierignore

@@ -0,0 +1 @@
+  *.hbs

docs/architecture/convention.md

@@ -36,13 +36,13 @@ based on [babel-resolver][https://github.com/tleunen/babel-plugin-module-resolve
 ```js
 "alias": {
   "@/containers":"./src/containers",
-  "@/components":"./src/components",
+  "@/widgets":"./src/widgets",
   "@/config":"./src/config",
   "@/stores":"./src/stores",
   "@/schemas":"./src/containers/schemas",
   "@/utils":"./src/utils",
-  "@/Img": "./src/components/Img",
-  "@/SvgIcons": "./src/components/SvgIcons"
+  "@/Img": "./src/widgets/Img",
+  "@/SvgIcons": "./src/widgets/SvgIcons"
 }
 ```
 
@@ -52,7 +52,7 @@ we can easily import files like:
 import { ISSUE_WEB } from '@/config'
 import { pluggedIn, buildLog } from '@/utils'
 
-import ArticleEditFooter from '@/components/ArticleEditFooter'
+import ArticleEditFooter from '@/widgets/ArticleEditFooter'
 ...
 ```
 
@@ -73,9 +73,9 @@ Import { pluggedIn, buildLog, ROUTE, THREAD } from '@/utils'
 // 3. import global containers
 Import TagsBar from '@/containers/unit/TagsBar'
 // 4. import global components
-Import Maybe from '@/components/Maybe'
-Import PagedContents from '@/components/PagedContents'
-Import ContentFilter from '@/components/ContentFilter'
+Import Maybe from '@/widgets/Maybe'
+Import PagedContents from '@/widgets/PagedContents'
+Import ContentFilter from '@/widgets/ContentFilter'
 
 // 5. import local components
 Import CityList from './CityList'

docs/architecture/convention.zh-CN.md

@@ -36,13 +36,13 @@ Doramon 为网站提供类似于 [alfred](https://www.alfredapp.com/) 的功能,
 ```js
 "alias": {
   "@/containers":"./src/containers",
-  "@/components":"./src/components",
+  "@/widgets":"./src/widgets",
   "@/config":"./src/config",
   "@/stores":"./src/stores",
   "@/schemas":"./src/containers/schemas",
   "@/utils":"./src/utils",
-  "@/Img": "./src/components/Img",
-  "@/SvgIcons": "./src/components/SvgIcons"
+  "@/Img": "./src/widgets/Img",
+  "@/SvgIcons": "./src/widgets/SvgIcons"
 }
 ```
 
@@ -52,7 +52,7 @@ Doramon 为网站提供类似于 [alfred](https://www.alfredapp.com/) 的功能,
 import { ISSUE_WEB } from '@/config'
 import { pluggedIn, buildLog } from '@/utils'
 
-import ArticleEditFooter from '@/components/ArticleEditFooter'
+import ArticleEditFooter from '@/widgets/ArticleEditFooter'
 ...
 ```
 
@@ -72,9 +72,9 @@ import { pluggedIn, buildLog, ROUTE, THREAD } from '@/utils'
 // 3. import global containers
 import TagsBar from '@/containers/unit/TagsBar'
 // 4. import global components
-import Maybe from '@/components/Maybe'
-import PagedContents from '@/components/PagedContents'
-import ContentFilter from '@/components/ContentFilter'
+import Maybe from '@/widgets/Maybe'
+import PagedContents from '@/widgets/PagedContents'
+import ContentFilter from '@/widgets/ContentFilter'
 
 // 5. import local components
 import CityList from './CityList'

jsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": ".",
     "paths": {
       "@/containers/*": ["src/containers/*"],
-      "@/components/*": ["src/components/*"],
+      "@/widgets/*": ["src/widgets/*"],
       "@/services": ["src/services"],
       "@/services/*": ["src/services/*"],
       "@/constant": ["utils/constant"],
@@ -17,9 +17,9 @@
       "@/utils": ["utils"],
       "@/utils/*": ["utils/*"],
       "@/schemas": ["src/schemas"],
-      "@/Img": ["src/components/Img"],
-      "@/SvgIcons/*": ["src/components/SvgIcons/*"],
-      "@/icons/*": ["src/components/icons/*"],
+      "@/Img": ["src/widgets/Img"],
+      "@/SvgIcons/*": ["src/widgets/SvgIcons/*"],
+      "@/icons/*": ["src/widgets/icons/*"],
       "@/i18n": ["i18n"]
     }
   },

server/routes.js

@@ -88,14 +88,9 @@ router.route('/post/:id').get((req, res) => {
   return renderAndCache({ req, res, path: `/post/${id}` })
 })
 
-// job 帖子页
-router.route('/:community/job/:id').get((req, res) => {
-  return renderAndCache({ req, res, path: '/job' })
-})
-
-// video 帖子页
-router.route('/:community/video/:id').get((req, res) => {
-  return renderAndCache({ req, res, path: '/video' })
+router.route('/blog/:id').get((req, res) => {
+  const { id } = req.params
+  return renderAndCache({ req, res, path: `/blog/${id}` })
 })
 
 // repo 帖子页
@@ -124,6 +119,11 @@ router.route('/publish/blog').get((req, res) => {
   return renderAndCache({ req, res, page: '/publish/blog' })
 })
 
+// 编辑 rss 作者
+router.route('/update/rss').get((req, res) => {
+  return renderAndCache({ req, res, path: '/update/rss' })
+})
+
 // 创建新作品
 router.route('/publish/works').get((req, res) => {
   return renderAndCache({ req, res, page: '/publish/works' })

src/components/BlogItem/DesktopView/Header.tsx

@@ -0,0 +1,60 @@
+/*
+ *
+ * general ArticleContent for Post, Job, Blog, Radar ..
+ *
+ */
+
+import { FC, useRef, Fragment } from 'react'
+
+import type { TBlog, TMetric } from '@/spec'
+import { buildLog } from '@/utils/logger'
+
+import { ArticleFooter, Comments } from '@/containers/dynamic'
+import ArtimentBody from '@/widgets/ArtimentBody'
+
+import ViewportTracker from '@/widgets/ViewportTracker'
+
+import {
+  MainWrapper,
+  ArticleWrapper,
+  CommentsWrapper,
+} from '../../styles/desktop_view/blog_layout/article_tab'
+
+import { checkAnchor } from '../../logic'
+
+/* eslint-disable-next-line */
+const log = buildLog('C:BlogContent')
+
+type TProps = {
+  metric: TMetric
+  article: TBlog
+}
+
+const ArticleTab: FC<TProps> = ({ metric, article }) => {
+  const ref = useRef()
+
+  return (
+    <Fragment>
+      <ViewportTracker
+        onEnter={() => checkAnchor(ref?.current)}
+        onLeave={() => checkAnchor(ref?.current)}
+      />
+      <MainWrapper metric={metric}>
+        <ArticleWrapper ref={ref}>
+          <ArtimentBody document={article.document} />
+          <ArticleFooter metric={metric} />
+        </ArticleWrapper>
+
+        <ViewportTracker
+          onEnter={() => checkAnchor(ref?.current)}
+          onLeave={() => checkAnchor(ref?.current)}
+        />
+        <CommentsWrapper>
+          <Comments />
+        </CommentsWrapper>
+      </MainWrapper>
+    </Fragment>
+  )
+}
+
+export default ArticleTab