Add smartypants

packages/mdx-processor/package.json

@@ -31,6 +31,7 @@
     "image-extensions": "^1.1.0",
     "rehype-urls": "^1.1.1",
     "remark-gfm": "^3.0.1",
+    "remark-smartypants": "^2.0.0",
     "remark-unwrap-images": "^3.0.1",
     "vfile": "^5.3.5",
     "vfile-matter": "^4.0.0",

packages/mdx-processor/src/main/mdx-processor.ts

@@ -10,6 +10,7 @@ import * as runtime from 'react/jsx-runtime.js'
 import { renderToString } from 'react-dom/server.js'
 import rehypeUrls from 'rehype-urls'
 import remarkGfm from 'remark-gfm'
+import remarkSmartyPants from 'remark-smartypants'
 import remarkUnwrapImages from 'remark-unwrap-images'
 import { VFile } from 'vfile'
 import { matter } from 'vfile-matter'
@@ -106,7 +107,8 @@ class MdxProcessor {
           }
         ],
         remarkGfm,
-        remarkUnwrapImages
+        remarkUnwrapImages,
+        remarkSmartyPants
       ],
       rehypePlugins: [[rehypeUrls, this.config.imageResolverPlugin]]
     })

services/web-app/next.config.mjs

@@ -11,6 +11,7 @@ import nextMdx from '@next/mdx'
 import withYaml from 'next-plugin-yaml'
 import path from 'path'
 import remarkGfm from 'remark-gfm'
+import remarkSmartpants from 'remark-smartypants'
 import remarkUnwrapImages from 'remark-unwrap-images'
 import { fileURLToPath } from 'url'
 
@@ -29,7 +30,7 @@ const withBundleAnalyzer = bundleAnalyzer({
 const withMDX = nextMdx({
   extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [mdxWrapperPlugin, remarkGfm, remarkUnwrapImages],
+    remarkPlugins: [mdxWrapperPlugin, remarkGfm, remarkUnwrapImages, remarkSmartpants],
     rehypePlugins: [rehypeMetaAsAttributes],
     providerImportSource: '@mdx-js/react'
   }

services/web-app/package.json

@@ -75,6 +75,7 @@
     "remark-gfm": "^3.0.1",
     "remark-mdx": "^2.1.3",
     "remark-parse": "^10.0.1",
+    "remark-smartypants": "^2.0.0",
     "remark-unwrap-images": "^3.0.1",
     "rimraf": "^3.0.2",
     "slugify": "^1.6.5",

services/web-app/pages/contributing/documentation.mdx

@@ -58,6 +58,15 @@ Please keep these things in mind when writing content for Carbon.
 - Be clear and concise by removing unnecessary words. The more concise the text, the easier it is
   for all users to understand.
 - Use sentence case for everything, including component names, e.g. Content switcher and Data table.
+- Use en—dashes (`—`) instead of hyphens (`-`)
+- Keep in mind, the following characters in `*.mdx` files will get auto-converted:
+
+| Character          |                           | Conversion          |                 |
+| ------------------ | :-----------------------: | ------------------- | :-------------: |
+| Single quotes      | 'Single quotes' | Curly single quotes | 'Single quotes' |
+| Double quotes      | "Double quotes" | Curly double quotes | "Double quotes" |
+| Double back quotes |      \`\`Back quotes      | Curly double quotes |  ``Back quotes  |
+| Double dash        |          --dash           | En—dash             |     --dash      |
 
 To learn about writing content for component pages, see our
 [production guidelines](https://github.com/carbon-design-system/carbon-website/wiki/Production-guidelines#creating-content-for-component-pages).