Skip to content
Permalink
Browse files
Update for mdxx-ssg v0.7.0
  • Loading branch information
mizchi committed May 10, 2020
1 parent 929683e commit 21ca43831d77428e95ba79ed3f253b283c94c185
Showing 20 changed files with 171 additions and 238 deletions.
@@ -1,6 +1,7 @@
---
title: amp-social-share で、はてなブックマークのシェアボタンを設置する
created: 1588784852166
tags: [amp]
---

amp-social-share は設定済みプロバイダとして twitter/facebook/line などに対応しているが、はてなブックマークはカスタムプロバイダーとして実装できる。

This file was deleted.

@@ -1,6 +1,7 @@
---
title: mdxx@0.6 - PWA Support, Lighthouse 100, RSS対応, コンポーネントの Tailwind 化
created: 1589106473785
tags: [mdxx]
---

例によってこのブログ自身が実装例です。
@@ -1,6 +1,7 @@
---
title: mdxx-ssg@0.5.0 - mdxx-ssg-cli & mdxx-components
created: 1588952818281
tags: [mdxx]
---

## ChangeLog
@@ -1,6 +1,7 @@
---
title: MDX eXtended = MDXX | AMP対応 Markdown Compiler と静的サイトジェネレーター
created: 1588688918620
tags: [mdxx]
---

最近作っている mdxx という markdown コンパイラとそのツール郡を紹介します。
@@ -1,6 +1,7 @@
---
title: next.js の AMP mode を使って静的サイトを作る
created: 1588760362771
tags: [next, mdxx]
---

この記事は mdxx-ssg を作りながら, next.js で AMP に対応したときにやったことです。
@@ -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"
@@ -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>
</>
);
@@ -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>

This file was deleted.

This file was deleted.

@@ -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>
</>
);

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

@@ -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>
</>
);
};

0 comments on commit 21ca438

Please sign in to comment.