Update for mdxx-ssg v0.7.0

mizchi · May 10, 2020 · 21ca438 · 21ca438
1 parent 929683e
commit 21ca438
Show file tree

Hide file tree

Showing 20 changed files with 171 additions and 238 deletions.
diff --git a/docs/amp-social-share-for-hatena-bookmark.mdx b/docs/amp-social-share-for-hatena-bookmark.mdx
@@ -1,6 +1,7 @@
 ---
 title: amp-social-share で、はてなブックマークのシェアボタンを設置する
 created: 1588784852166
+tags: [amp]
 ---
 
 amp-social-share は設定済みプロバイダとして twitter/facebook/line などに対応しているが、はてなブックマークはカスタムプロバイダーとして実装できる。

diff --git a/docs/helloworld.mdx b/docs/helloworld.mdx
diff --git a/docs/mdxx-0.6.mdx b/docs/mdxx-0.6.mdx
@@ -1,6 +1,7 @@
 ---
 title: mdxx@0.6 - PWA Support, Lighthouse 100, RSS対応, コンポーネントの Tailwind 化
 created: 1589106473785
+tags: [mdxx]
 ---
 
 例によってこのブログ自身が実装例です。

diff --git a/docs/mdxx-cli-and-components.mdx b/docs/mdxx-cli-and-components.mdx
@@ -1,6 +1,7 @@
 ---
 title: mdxx-ssg@0.5.0 - mdxx-ssg-cli & mdxx-components
 created: 1588952818281
+tags: [mdxx]
 ---
 
 ## ChangeLog

diff --git a/docs/mdxx-introduction.mdx b/docs/mdxx-introduction.mdx
@@ -1,6 +1,7 @@
 ---
 title: MDX eXtended = MDXX | AMP対応 Markdown Compiler と静的サイトジェネレーター
 created: 1588688918620
+tags: [mdxx]
 ---
 
 最近作っている mdxx という markdown コンパイラとそのツール郡を紹介します。

diff --git a/docs/study-next-amp-by-mdxx-ssg.mdx b/docs/study-next-amp-by-mdxx-ssg.mdx
@@ -1,6 +1,7 @@
 ---
 title: next.js の AMP mode を使って静的サイトを作る
 created: 1588760362771
+tags: [next, mdxx]
 ---
 
 この記事は mdxx-ssg を作りながら, next.js で AMP に対応したときにやったことです。

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "mdxx-compiler": "^0.6.0",
     "mdxx-loader": "^0.6.0",
     "mdxx-parser": "^0.6.0",
-    "mdxx-ssg-components": "^0.6.1",
+    "mdxx-ssg-components": "^0.7.0",
     "next": "^9.3.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -19,7 +19,7 @@
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
     "@types/styled-components": "^5.1.0",
-    "mdxx-ssg-cli": "^0.6.0",
+    "mdxx-ssg-cli": "^0.7.0",
     "raw-loader": "^4.0.1",
     "rimraf": "^3.0.2",
     "typescript": "^3.8.3"

diff --git a/pages/[slug].tsx b/pages/[slug].tsx
@@ -0,0 +1,73 @@
+import { Article, Layout } from "mdxx-ssg-components";
+import { GetStaticProps } from "next";
+import ReactDOMServer from "react-dom/server";
+import pages from "../gen/pages.json";
+import ssgConfig from "../mdxx-ssg.json";
+import Head from "next/head";
+
+type Props = {
+  slug: string;
+  toc: Array<any>;
+  history: Array<any>;
+  frontmatter: {
+    title: string;
+    created: number;
+    tags?: string[];
+  };
+  tags: string[];
+  html: string;
+};
+
+export const config = { amp: true };
+
+export function getStaticPaths() {
+  const paths = pages.map((page) => {
+    return `/${page.slug}`;
+  });
+  return {
+    paths,
+    fallback: false,
+  };
+}
+
+export const getStaticProps: GetStaticProps = async (props) => {
+  const slug = props.params.slug;
+  const { frontmatter, default: Doc, toc } = await import(
+    `../docs/${slug}.mdx`
+  );
+  const { default: history } = await import(`../gen/${slug}.history.json`);
+  return {
+    props: {
+      slug,
+      toc,
+      history,
+      tags: frontmatter.tags || [],
+      frontmatter: frontmatter || { title: slug, created: 0, tags: [] },
+      html: ReactDOMServer.renderToStaticMarkup(<Doc amp />),
+    } as Props,
+  };
+};
+
+export default (props: Props) => (
+  <>
+    <Head>
+      <title>
+        {props.frontmatter.title} - {ssgConfig.siteName}
+      </title>
+    </Head>
+    <Layout ssgConfig={ssgConfig}>
+      <Article
+        ssgConfig={ssgConfig}
+        history={props.history}
+        toc={props.toc}
+        title={props.frontmatter.title}
+        tags={props.tags}
+      >
+        <div
+          className="markdown-body"
+          dangerouslySetInnerHTML={{ __html: props.html }}
+        />
+      </Article>
+    </Layout>
+  </>
+);
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -12,19 +12,18 @@ export default class MyDocument extends Document {
         sheet.collectStyles(<App {...props} />)
       );
       const initialProps: any = await Document.getInitialProps(ctx);
-      const styles = [
-        ...initialProps.styles,
-        <style
-          key="custom"
-          dangerouslySetInnerHTML={{
-            __html: css,
-          }}
-        />,
-        ...sheet.getStyleElement(),
-      ];
       return {
         ...page,
-        styles,
+        styles: [
+          ...initialProps.styles,
+          <style
+            key="custom"
+            dangerouslySetInnerHTML={{
+              __html: css,
+            }}
+          />,
+          ...sheet.getStyleElement(),
+        ],
       };
     } finally {
       sheet.seal();
@@ -35,10 +34,6 @@ export default class MyDocument extends Document {
     return (
       <Html lang={ssgConfig.lang || "en-US"}>
         <Head>
-          <meta name="theme-color" content="#317EFB" />
-          <meta name="description" content="mizchi's blog" />
-          <link rel="manifest" href="/manifest.json" />
-          <link rel="apple-touch-icon" href="/apple-touch-icon.png"></link>
           <link
             rel="alternate"
             type="application/rss+xml"
@@ -49,7 +44,7 @@ export default class MyDocument extends Document {
             rel="alternate"
             type="application/rss+xml"
             title={ssgConfig.siteName}
-            href="/sitemap.xml"
+            href="sitemap.xml"
           /> */}
         </Head>
         <body>

diff --git a/pages/amp-social-share-for-hatena-bookmark.tsx b/pages/amp-social-share-for-hatena-bookmark.tsx
diff --git a/pages/helloworld.tsx b/pages/helloworld.tsx
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,7 +1,8 @@
 import Head from "next/head";
+import { Layout, PageList, TagList } from "mdxx-ssg-components";
 import pages from "../gen/pages.json";
 import ssgConfig from "../mdxx-ssg.json";
-import { Layout, PageList } from "mdxx-ssg-components";
+import tagmap from "../gen/tagmap.json";
 
 export const config = { amp: true };
 
@@ -12,7 +13,10 @@ export default () => {
         <title>{ssgConfig.siteName}</title>
       </Head>
       <Layout ssgConfig={ssgConfig}>
-        <PageList pages={pages} />
+        <h2>Articles</h2>
+        <PageList pages={pages as any} />
+        <h2>Tags</h2>
+        <TagList tags={Object.keys(tagmap)} />
       </Layout>
     </>
   );

diff --git a/pages/mdxx-0.6.tsx b/pages/mdxx-0.6.tsx
diff --git a/pages/mdxx-cli-and-components.tsx b/pages/mdxx-cli-and-components.tsx
diff --git a/pages/mdxx-introduction.tsx b/pages/mdxx-introduction.tsx
diff --git a/pages/study-next-amp-by-mdxx-ssg.tsx b/pages/study-next-amp-by-mdxx-ssg.tsx
diff --git a/pages/tags/[tag].tsx b/pages/tags/[tag].tsx
@@ -0,0 +1,47 @@
+import Head from "next/head";
+import { Layout, TagPage } from "mdxx-ssg-components";
+import { GetStaticProps } from "next";
+import ssgConfig from "../../mdxx-ssg.json";
+import tagmap from "../../gen/tagmap.json";
+
+export const config = { amp: true };
+
+export function getStaticPaths() {
+  const paths = Object.keys(tagmap).map((tag) => {
+    return `/tags/${tag}`;
+  });
+  return {
+    paths,
+    fallback: false,
+  };
+}
+
+type Props = {
+  tagName: string;
+  pages: Array<{ title: string; slug: string }>;
+};
+
+export const getStaticProps: GetStaticProps = async (props) => {
+  const tag = props.params.tag;
+  return {
+    props: {
+      tagName: tag,
+      pages: tagmap[tag as any],
+    } as Props,
+  };
+};
+
+export default (props: Props) => {
+  return (
+    <>
+      <Head>
+        <title>
+          {props.tagName} - {ssgConfig.siteName}
+        </title>
+      </Head>
+      <Layout ssgConfig={ssgConfig}>
+        <TagPage tagName={props.tagName} pages={props.pages} />
+      </Layout>
+    </>
+  );
+};