add mdx, first experements

bespoyasov · Mar 8, 2019 · 7d72aa8 · 7d72aa8
1 parent c48b7bf
commit 7d72aa8
Show file tree

Hide file tree

Showing 8 changed files with 632 additions and 42 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -22,6 +22,13 @@
 				"parser": "markdown"
 			}
 		},
+		{
+			"files": "*.mdx",
+			"options": {
+				"printWidth": 160,
+				"parser": "mdx"
+			}
+		},
 		{
 			"files": "*.yml",
 			"options": {

diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,12 @@
 const withTypescript = require('@zeit/next-typescript')
 const withSourceMaps = require('@zeit/next-source-maps')
+const withMDX = require('@zeit/next-mdx')({ extension: /.mdx?$/ })
 require('dotenv').load()
 
-module.exports = withSourceMaps(withTypescript())
+module.exports = withMDX(
+  withSourceMaps(
+    withTypescript({
+      pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx']
+    })
+  )
+)
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@mdx-js/tag": "^0.20.3",
     "@zeit/next-source-maps": "^0.0.3",
     "@zeit/next-typescript": "^1.1.1",
     "dotenv": "^6.2.0",
@@ -18,12 +19,10 @@
   "devDependencies": {
     "@types/next": "8.0.1",
     "@types/react": "16.8.5",
+    "@zeit/next-mdx": "^1.2.0",
     "babel-plugin-styled-components": "^1.10.0",
     "tslint": "^5.13.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-react": "^3.6.0"
-  },
-  "quokka": {
-    "babel": true
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -3,6 +3,7 @@ import App, { Container } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider } from 'styled-components'
 import { GlobalStyle, theme } from '../themes/main'
+import { MDXProvider } from '@mdx-js/tag'
 
 export default class MyApp extends App {
   static async getInitialProps({ Component, ctx }) {
@@ -24,9 +25,16 @@ export default class MyApp extends App {
           <title>SOLID</title>
         </Head>
         <GlobalStyle />
-        <ThemeProvider theme={theme}>
-          <Component {...pageProps} />
-        </ThemeProvider>
+        <MDXProvider
+          components={{
+            wrapper: 'section',
+            thematicBreak: 'section'
+          }}
+        >
+          <ThemeProvider theme={theme}>
+            <Component {...pageProps} />
+          </ThemeProvider>
+        </MDXProvider>
       </Container>
     )
   }

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -7,9 +7,10 @@ interface IProps {
 export default class MyDocument extends Document<IProps> {
   static async getInitialProps(ctx: NextDocumentContext) {
     const sheet = new ServerStyleSheet()
-    const page = ctx.renderPage((App: any) => (props: AnyPageProps) =>
-      sheet.collectStyles(<App {...props} />) as React.ReactElement<any>
-    )
+    const page = ctx.renderPage((App: any) => (props: AnyPageProps) => {
+      console.log(App, props)
+      return sheet.collectStyles(<App {...props} />) as React.ReactElement<any>
+    })
     const styleTags = sheet.getStyleElement()
     return { ...page, styleTags }
   }

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,36 +1,14 @@
 import MainLayout from 'components/layouts/MainLayout'
-import VisuallyHidden from 'components/VisuallyHidden'
+// import VisuallyHidden from 'components/VisuallyHidden'
 import Abbr from 'components/Formatters/Abbr'
+import Text from 'texts/00_preface/index.mdx'
 
 export default () => (
   <MainLayout title="Введение">
     <h1>О чём это</h1>
-    <section>
-      <VisuallyHidden>
-        <h2>Введение</h2>
-      </VisuallyHidden>
-      <p>Программировать — сложно.</p>
-      <p>
-        Хороший код должен адекватно отражать систему, которую описывает, и должен быть устойчив к изменениям в этой
-        системе.
-      </p>
-      <p>
-        Проблемы с кодом возникают, когда он перестаёт соответствовать реальности — бизнес-требованиям, правилам
-        поведения частей системы, их отношениям друг с другом.
-      </p>
-      <p>
-        Бизнес-правила — это территория. Код —{' '}
-        <a href="https://wiki.lesswrong.com/wiki/The_map_is_not_the_territory">карта</a> этой территории. Чем точнее
-        карта, тем проще справляться с изменениями в требованиях и даже предвидеть их.
-      </p>
-      <p>
-        В этой серии статей мы хотим рассказать и показать на примерах, как принципы{' '}
-        <Abbr title="Объектно-ориентированное программирование">
-          <a href="https://ru.wikipedia.org/wiki/Объектно-ориентированное_программирование">ООП</a>
-        </Abbr>{' '}
-        могут помочь спроектировать устойчивую систему.
-      </p>
-    </section>
+
+      <Text  />
+
 
     <section>
       <h2>

diff --git a/texts/00_preface/index.mdx b/texts/00_preface/index.mdx
@@ -0,0 +1,19 @@
+import VisuallyHidden from 'components/VisuallyHidden'
+import Abbr from 'components/Formatters/Abbr'
+
+
+<VisuallyHidden>
+  <h2>Введение</h2>
+</VisuallyHidden>
+
+Программировать — сложно.
+
+Хороший код должен адекватно отражать систему, которую описывает, и должен быть устойчив к изменениям в этой системе.
+
+Проблемы с кодом возникают, когда он перестаёт соответствовать реальности — бизнес-требованиям, правилам поведения частей системы, их отношениям друг с другом.
+
+Бизнес-правила — это территория. Код — [карта](https://wiki.lesswrong.com/wiki/The_map_is_not_the_territory) этой территории. Чем точнее карта, тем проще
+справляться с изменениями в требованиях и даже предвидеть их.
+
+В этой серии статей мы хотим рассказать и показать на примерах, как принципы <Abbr title="Объектно-ориентированное программирование">
+<a href="https://ru.wikipedia.org/wiki/Объектно-ориентированное_программирование">ООП</a> </Abbr> могут помочь спроектировать устойчивую систему.