Add styles for content

wutali · wutali · commit 54e6123051ad · 2020-08-13T20:59:55.000+09:00
diff --git a/public/admin/config.yml b/public/admin/config.yml
@@ -74,7 +74,7 @@ collections:
 
   - name: "posts"
     label: "Posts"
-    folder: "pages/posts"
+    folder: "src/pages/posts"
     extension: "mdx"
     format: "frontmatter"
     create: true
diff --git a/public/admin/index.html b/public/admin/index.html
@@ -9,5 +9,11 @@
   <body>
     <!-- Include the script that builds the page and powers Netlify CMS -->
     <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
+    <script>
+      CMS.registerPreviewStyle(
+        "https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap"
+      );
+      CMS.registerPreviewStyle("/styles/content.module.css");
+    </script>
   </body>
 </html>
diff --git a/public/styles/content.module.css b/public/styles/content.module.css
@@ -0,0 +1,3 @@
+.content p {
+  line-height: 1.5rem;
+}
diff --git a/public/styles/global.css b/public/styles/global.css
@@ -9,7 +9,7 @@ body {
   height: 100%;
   flex: 1;
   font-weight: 200;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.05rem;
 }
 
 #__next {
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
@@ -1,19 +1,20 @@
 import React from "react";
 import Layout from "../components/Layout";
 import Date from "../components/Date";
+import styles from "../../public/styles/content.module.css";
 
 type Props = {
   title: string;
   date: string;
 };
-export default function ({ title, date }: Props) {
+export default function Index({ title, date }: Props) {
   return ({ children: content }) => {
     return (
       <Layout>
         <div className={"post"}>
           <h1>{title}</h1>
           <Date dateString={date} />
-          {content}
+          <div className={styles.content}>{content}</div>
         </div>
         <style jsx>
           {`
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,6 +1,8 @@
 import "normalize.css";
-import "../styles/global.css";
 import { AppProps } from "next/app";
+// NOTE: Do not move the styles dir to the src.
+// They are used by the Netlify CMS preview feature.
+import "../../public/styles/global.css";
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.content p {`
	`2`	`+ line-height: 1.5rem;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ body {`
`9`	`9`	`height: 100%;`
`10`	`10`	`flex: 1;`
`11`	`11`	`font-weight: 200;`
`12`		`- letter-spacing: 0.05em;`
	`12`	`+ letter-spacing: 0.05rem;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`#__next {`