Как создать красивую страницу с помощью NextJS, MDX

module.exports = {
  reactStrictMode: true,

  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true },
  // Support MDX files as pages:
  pageExtensions: ['md', 'mdx', 'tsx', 'ts', 'jsx', 'js'],
  // Support loading `.md`, `.mdx`:
  webpack(config, options) {
    config.module.rules.push({
      test: /.mdx?$/,
      use: [
        // The default `babel-loader` used by Next:
        options.defaultLoaders.babel,
        {
          loader: '@mdx-js/loader',
          /** @type {import('@mdx-js/loader').Options} */
          options: {
            /* jsxImportSource: …, otherOptions… */
          },
        },
      ],
    });

    return config;
  },
};

author: Van Nguyen Nguyen
date: "2022-02-05"
summary: "Something"

---

Your content go here

//try-mdx/test.mdx
---
title: "This is for Trying MDX"
date: "2020-01-02"
summary: "This is the summary testing for MDX"
---

# Ahihi this is a custome Heading

<Test>
    <Something>Hello World </Something>
</Test> 

a [link](https://example.com), an ![image](./image.png), some *emphasis*,
something **strong**, and finally a little `<div/>`.  
**strong**

// Remove the sign '' from codeblock since DEV editor does not accept it
```javascript file=testing.js highlights=1,2
const test= 1;
const funnyThing = () => {
    console.log(test);
}
funnyThing()```

// lib/posts.js
import fs from 'fs';
import path from 'path';
// Using gray matter for getting metadata
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), '/try-mdx');

export function getSortedPostsData() {
  // Get file names under /posts
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map(fileName => {
    const ext = fileName.split('.')[1];
    // Remove ".mdx" from file name to get id
    const id = fileName.replace(/.mdx$/, '');

    // Read markdown file as string
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');

    // Use gray-matter to parse the post metadata section
    const matterResult = matter(fileContents);
    // Combine the data with the id
    return {
      id,
      ...matterResult.data,
    };
  });
  // Sort posts by date
  return allPostsData.sort(({ date: a }, { date: b }) => {
    if (a < b) {
      return 1;
    } else if (a > b) {
      return -1;
    } else {
      return 0;
    }
  });
}

export function getAllPostIds() {
  // Read all the filename in the directory path
  const fileNames = fs.readdirSync(postsDirectory);

  // Filter out the ext, only need to get the name of the file
  return fileNames.map(fileName => { return {
      // Following routing rule of NextJS
      params: {
        id: fileName.replace(/.mdx$/, ''),
      },
    };
  });
}

export async function getPostData(id) {
  // For each file name provided, we gonna file the path of the file
  const fullPath = path.join(postsDirectory, `${id}.mdx`);
  // Read the content in utf8 format
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  //  Using gray-matter to get the content and that data
  const { content, data } = matter(fileContents);

  // provide what need to be rendered for static-file-generation
  return {
    id,
    content,
    ...data,
  };
}

pages/
...
├── posts
│   └── [id].js  // Dynamic Routing
...

// pages/posts/[id].js

// Getting component from NextJS tutorial
// Layout is just the wrapper with the styling width to move page to the center with 
// some extra metadata
import Layout from '../../components/layout';
// Head component is add the title for the page
import Head from 'next/head';
// Date component from NextJS tutorial, basically it will format the date for you 
// but you could just print a raw date string
import Date from '../../components/date';

// Function to get path and contents of the .mdx file (already mentioned above) 
import { getAllPostIds, getPostData } from '../../lib/posts';

// This is just come basic class for styling some tags 
import utilStyles from '../../components/utils.module.css';

// Two important function from next-mdx-remote that make the magic happens
// serialize will help us to convert raw MDX file into object that will be passed
to MDXRemote for rendering HTML on the page 
import { serialize } from 'next-mdx-remote/serialize';
// MDXRemote is the component for rendering data that get from serialize
import { MDXRemote } from 'next-mdx-remote';

export async function getStaticPaths() {

  // Get all the unique path that we need( the name of the folder)
  const paths = getAllPostIds();
  return {
    // Return the path
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // Get the raw data of the MDX file according to the path that we get
  // Including the metadata and the raw content
  const postData = await getPostData(params.id);

  // Translating the raw content into readable object by serialize
  // I recommend you to console.log the value to see how they look like
  const mdxSource = await serialize(postData.content, {
    // next-mdx-remote also allow us to use remark and rehype plugin, reading MDX docs for more information
    // I am currently not using any plugin, so the array will be empty.
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [],
    },
  });
  return {
    // we only need 2 things from the props
    // postData (we dont care about the content since that one we will get from the mdxSource)
    // We care about getting the metadata here so that is why we still need to get postData
    props: {
      postData,
      mdxSource,
    },
  };
}

export default function Post({ postData, mdxSource }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
          <Date dateString={postData.date} />
        </div>
        // MDXRemote is the components to render the actual content, other components above is just for 
        // metadata
        <MDXRemote {...mdxSource} />
      </article>
    </Layout>
  );
}

components/
├── customHeading.js
├── ... 

//components/customHeading.js

//This is custom h1 tag = '#'
const MyH1 = props => <h1 style={{ color: 'tomato' }} {...props} />;

//This is custom h2 tag = '##'
const MyH2 = props => <h2 style={{ color: 'yellow' }} {...props} />;


//This is custom link tag = '[<name>](<url>)'
const MyLink = props => {
  console.log(props); // Will comeback to this line
  let content = props.children;
  let href = props.href;
  return (
    <a style={{ color: 'blue' }} href={href}>
      {content}
    </a>
  );
};

const BoringComponent = () => {
    return <p>I am so bored</p>
}

export { MyH1, MyH2, MyLink, BoringComponent };

pages/
...
├── _app.js 
...

// pages/_app.js

// You do not need to worry about these things
// it just give you some extra global style for the page
import '../styles/global.css';
import '../src/theme/style.css';
import { ChakraProvider } from '@chakra-ui/react';
import theme from '../src/theme/test';

// These are important line
import { MyH1, MyH2, MyLink, BoringComponent } from '../components/CustomHeading';
import { MDXProvider } from '@mdx-js/react';

// MDXProvider accept object only
const components = { h1: MyH1, h2: MyH2, a: MyLink, BoringComponent };

export default function App({ Component, pageProps }) {
  return (
    // Do not worry about the <ChakraProvider/>, it just give you the global style
    <ChakraProvider theme={theme}>
        // Wrapping the <Component/> by <MDXProvider/> so everypage will get applied 
        //the same thing
      <MDXProvider components={components}>
        // <Component/> is the feature of NextJS which identify the content of your 
        // current page. <Component/> will change its pageProps to new page when you change to new
        // page
        <Component {...pageProps} />;
      </MDXProvider>
    </ChakraProvider>
  );
}

import Random from 'somewhere'

# Heading 

<Random/>

I feel bored

import React from 'react'
import { MDXTag } from '@mdx-js/tag'
import MyComponent from './my-component'

export default ({ components }) => (
  <MDXTag name="wrapper" components={components}>
    <MDXTag name="h1" components={components}>
        Heading 
    </MDXTag>
    <Random />
    <MDXTag name="p" components={components}>
        I feel bored 
    </MDXTag>
  </MDXTag>
)

styles/
└── gruvBox.css
...

import '../styles/global.css';
import '../src/theme/style.css';
import { ChakraProvider } from '@chakra-ui/react';
import theme from '../src/theme/test';

import { MyH1, MyH2, MyLink, BoringComponent } from '../components/CustomHeading';
import { MDXProvider } from '@mdx-js/react';

// When you put the styling in _app.js the style will be applied across the whole website
import '../styles/gruvBox.css';

const components = { h1: MyH1, h2: MyH2, a: MyLink, BoringComponent };

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <MDXProvider components={components}>
        <Component {...pageProps} />;
      </MDXProvider>
    </ChakraProvider>
  );
}

<pre><code class="language-javascript" metastring="file=testing.js highlights=1,3-9" file="testing.js" highlights="1,3-9">
"const ahihi = 1;
export async function getStaticProps({ params }) {
    const postData = await getPostData(params.id);
    const mdxSource = await serialize(postData.content);
    console.log(postData);
    console.log(mdxSource);
    return {
        props: {
            postData,
            mdxSource,
        },
    };
}"
</code></pre>

code[class*="language-"], pre[class*="language-"] {
    color: #ebdbb2;
    font-family: Consolas, Monaco, "Andale Mono", monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

// components/customCodeblock.js

// I'm using styled components here since they also recommend using it but you can 
// just create some custom class or applied style directly into the components like the 
// React way.
import styled from '@emotion/styled';
// This is their provided components
import Highlight, { defaultProps } from 'prism-react-renderer';

// Custom <pre/> tag
const Pre = styled.pre`
  text-align: left;
  margin: 1em 0;
  padding: 0.5em;
  overflow: scroll;
  font-size: 14px;
`;

// Cutom <div/> (this is arrangement of the line)
const Line = styled.div`
  display: table-row;
`;

// Custom <span/> (this is for the Line number)
const LineNo = styled.span`
  display: table-cell;
  text-align: right;
  padding-right: 1em;
  user-select: none;
  opacity: 0.5;
`;

// Custom <span/> (this is for the content of the line)
const LineContent = styled.span`
  display: table-cell;
`;


const CustomCode = props => {
  // Pay attention the console.log() when we applied this custom codeBlock into the
  //_app.js. what metadata you are getting, is there anything you did not expect that actually
  // appear. Can you try out some extra features by changing the MDX codeblock content
  console.log(props);

  // From the console.log() you will be able to guess what are these things.
  const className = props.children.props.className || '';
  const code = props.children.props.children.trim();
  const language = className.replace(/language-/, '');

  return (
    <Highlight
      {...defaultProps}
      theme={undefined}
      code={code}
      language={language}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <Pre className={className} style={style}>
          {tokens.map((line, i) => (
            <Line key={i} {...getLineProps({ line, key: i })}>
              <LineNo>{i + 1}</LineNo>
              <LineContent>
                {line.map((token, key) => (
                  <span key={key} {...getTokenProps({ token, key })} />
                ))}
              </LineContent>
            </Line>
          ))}
        </Pre>
      )}
    </Highlight>
  );
};

export default CustomCode;

import '../styles/global.css';
import { ChakraProvider } from '@chakra-ui/react';
import theme from '../src/theme/test';
import '../src/theme/style.css';
import { MyH1, MyH2, MyLink } from '../components/CustomHeading';
import { MDXProvider } from '@mdx-js/react';
import CustomCode from '../components/customCode';
import '../styles/gruvBox.css';

const components = { 
    h1: MyH1, 
    h2: MyH2, 
    a: MyLink, 
    pre: CustomCode };

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <MDXProvider components={components}>
        <Component {...pageProps} />;
      </MDXProvider>
    </ChakraProvider>
  );
}

import styled from '@emotion/styled';
import Highlight, { defaultProps } from 'prism-react-renderer';

const Pre = styled.pre`
...
`;

const Line = styled.div`
...
`;

const LineNo = styled.span`
...
`;

const LineContent = styled.span`
...
`;

const CustomCode = props => {
  console.log(props);
  const className = props.children.props.className || '';
  const code = props.children.props.children.trim();
  const language = className.replace(/language-/, '');
  const file = props.children.props.file;

  return (
    <Highlight
      {...defaultProps}
      theme={undefined}
      code={code}
      language={language}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <>
          <h2>{file}</h2>
          <Pre className={className} style={style}>
            {tokens.map((line, i) => (
              <Line key={i} {...getLineProps({ line, key: i })}>
                <LineNo>{i + 1}</LineNo>
                <LineContent>
                  {line.map((token, key) => (
                    <span key={key} {...getTokenProps({ token, key })} />
                  ))}
                </LineContent>
              </Line>
            ))}
          </Pre>
        </>
      )}
    </Highlight>
  );
};

export default CustomCode;

if my highlights = 1,3-5
I want the value I parse from this string to be like this [1, 3, 4, 5]

if my highlights = 1,2,3 or 1-3
I want the value I parse from this string to be like this [1, 2, 3]

You get it right? the '-' will detect the range that I want to loop through.

// lib/parseRange.js
function parsePart(string) {
  // Array that contain the range result
  let res = [];

  // we split the ',' and looping through every elemenet
  for (let str of string.split(',').map(str => str.trim())) {
    // Using regex to detect whether it is a number or a range
    if (/^-?d+$/.test(str)) {
      res.push(parseInt(str, 10));
    } else {
       // If it is a range, we have to contruct that range
      let split = str.split('-');
      let start = split[0] - '0';
      let end = split[1] - '0';
      for (let i = start; i <= end; i++) {
        res.push(i);
      }
    }
  }
  return res;
}

export default parsePart;

import styled from '@emotion/styled';
import Highlight, { defaultProps } from 'prism-react-renderer';
// import your function
import parsePart from '../lib/parseRange';

const Pre = styled.pre`
...
`;

const Line = styled.div`
...
`;

const LineNo = styled.span`
...
`;

const LineContent = styled.span`
...
`;

// shouldHighlight will return a function to be called later
// that function will return true or false depend on whether the index will appear
// inside our parsed array
const shouldHighlight = raw => {
  const parsedRange = parsePart(raw);
  if (parsedRange) {
    return index => parsedRange.includes(index);
  } else {
    return () => false;
  }
};

const CustomCode = props => {
  console.log(props);
  const className = props.children.props.className || '';
  const code = props.children.props.children.trim();
  const language = className.replace(/language-/, '');
  const file = props.children.props.file;

  // Getting the raw range
  const rawRange = props.children.props.highlights || '';
  // assign the checking function
  const highlights = shouldHighlight(rawRange);

  return (
    <Highlight
      {...defaultProps}
      theme={undefined}
      code={code}
      language={language}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <>
          <h2>{file}</h2>
          <Pre className={className} style={style}>
            // Getting the index from the mapping line
            {tokens.map((line, i) => (
              <Line key={i} {...getLineProps({ line, key: i })}>
                <LineNo>{i + 1}</LineNo>
                <LineContent
                  style={{
                    background: highlights(i + 1) ? 'gray' : 'transparent',
                  }}
                >
                  {line.map((token, key) => (
                    <span key={key} {...getTokenProps({ token, key })} />
                  ))}
                </LineContent>
              </Line>
            ))}
          </Pre>
        </>
      )}
    </Highlight>
  );
};

export default CustomCode;

// useState to change the text of copy button 
import { useState } from 'react';
import styled from '@emotion/styled';
import Highlight, { defaultProps } from 'prism-react-renderer';
import parsePart from '../lib/parseRange';

const Pre = styled.pre`
...
`;

const Line = styled.div`
...
`;

const LineNo = styled.span`
...
`;

const LineContent = styled.span`
...
`;

const shouldHighlight = raw => {
    ...
};

const CustomCode = props => {

  const [currLabel, setCurrLabel] = useState('Copy');

  const copyToClibBoard = copyText => {
    let data = [
      new ClipboardItem({
        'text/plain': new Blob([copyText], { type: 'text/plain' }),
      }),
    ];
    navigator.clipboard.write(data).then(
      function () {
        setCurrLabel('Copied');
        setTimeout(() => {
          setCurrLabel('Copy');
        }, 1000);
      },
      function () {
        setCurrLabel(
          'There are errors'
        );
      }
    );
  };

  const className = props.children.props.className || '';
  const code = props.children.props.children.trim();
  const language = className.replace(/language-/, '');
  const file = props.children.props.file;

  const rawRange = props.children.props.highlights || '';
  const highlights = shouldHighlight(rawRange);

  return (
    <Highlight
      {...defaultProps}
      theme={undefined}
      code={code}
      language={language}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <>
          <h2>{file}</h2>
          <button
            onClick={() => copyToClibBoard(props.children.props.children)}
          >
            {currLabel}
          </button>
          <Pre className={className} style={style}>
            {tokens.map((line, i) => (
              <Line key={i} {...getLineProps({ line, key: i })}>
                <LineNo>{i + 1}</LineNo>
                <LineContent
                  style={{
                    background: highlights(i + 1) ? 'gray' : 'transparent',
                  }}
                >
                  {line.map((token, key) => (
                    <span key={key} {...getTokenProps({ token, key })} />
                  ))}
                </LineContent>
              </Line>
            ))}
          </Pre>
        </>
      )}
    </Highlight>
  );
};

export default CustomCode;