Update

Author: mizchi

README.md

@@ -2,18 +2,18 @@
 
 ## Features
 
-- Build mdxx on next ssg
+- Build amdx on next ssg
 - Support AMP
 
 ## Create your own blog
 
 ```bash
 # install node and npm
-npx degit mizchi/mdxx/packages/ssg blog
+npx degit mizchi/amdx/packages/ssg blog
 cd blog
 npm install
-cp mdxx-ssg.json.example mdxx-ssg.json
-# edit mdxx-ssg.json for you
+cp amdxg.config.example amdxg.config
+# edit amdxg.config for you
 
 # create new page
 npm run new-page

amdxg.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  host: "https://mizchi.dev",
+  siteName: "mizdev",
+  author: "mizchi",
+  authorLink: "https://twitter.com/mizchi",
+  lang: "ja",
+  gtag: "UA-165420141-1",
+  repository: "mizchi/amdx",
+  socialShare: {
+    twitter: true,
+    hatena: true,
+    facebook: true,
+  },
+};

config/rollup.config.js

@@ -5,7 +5,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import virtual from "@rollup/plugin-virtual";
 import typescript from "rollup-plugin-typescript2";
 import builtins from "rollup-plugin-node-builtins";
-import { mdxx } from "rollup-plugin-mdxx";
+import { amdx } from "rollup-plugin-amdx";
 import { terser } from "rollup-plugin-terser";
 
 const plugins = [
@@ -27,7 +27,7 @@ const plugins = [
   }),
   nodeResolve(),
   commonjs(),
-  mdxx(),
+  amdx(),
   terser({
     module: true,
   }),

docs/mdxx-0.6.mdx

@@ -1,7 +1,7 @@
 ---
-title: mdxx@0.6 - PWA Support, Lighthouse 100, RSS対応, コンポーネントの Tailwind 化
+title: amdx@0.6 - PWA Support, Lighthouse 100, RSS対応, コンポーネントの Tailwind 化
 created: 1589106473785
-tags: [mdxx]
+tags: [amdx]
 ---
 
 例によってこのブログ自身が実装例です。
@@ -12,18 +12,18 @@ Accessbility のスコアがちょっと低いのは、 amp-social-share の生
 
 ## Done
 
-### mdxx-ssg
+### amdxg
 
 - Lighthouse 100
 - PWA Support
 - RSS 対応 `/rss.xml`
 
-### mdxx-ssg-cli
+### amdxg-cli
 
-- `mdxx-ssg postbuild:rss` - rss 対応
-- `mdxx-ssg postbuild:sitemap`: WIP - sitemap.xml 生成する(Search Console に認識されない…)
+- `amdxg postbuild:rss` - rss 対応
+- `amdxg postbuild:sitemap`: WIP - sitemap.xml 生成する(Search Console に認識されない…)
 
-### mdxx-ssg-components
+### amdxg-components
 
 - Tailwindcss + postcss + purgecss
 - Better CSS markup

docs/mdxx-0.7.mdx

@@ -1,12 +1,12 @@
 ---
-title: mdxx@0.7 tag
+title: amdx@0.7 tag
 created: 1589127481769
-tags: [mdxx]
+tags: [amdx]
 ---
 
 ## 仕様変更
 
-`mdxx-ssg new:page` が `pages/*.tsx` を生成しないように
+`amdxg new:page` が `pages/*.tsx` を生成しないように
 
 かわりに、 `pages/[slug].tsx` が共通の記事要素になりました。
 

docs/mdxx-cli-and-components.mdx

@@ -1,66 +1,66 @@
 ---
-title: mdxx-ssg@0.5.0 - mdxx-ssg-cli & mdxx-components
+title: amdxg@0.5.0 - amdxg-cli & amdx-components
 created: 1588952818281
-tags: [mdxx]
+tags: [amdx]
 ---
 
 ## ChangeLog
 
-- mdxx-parser
+- amdx
   - `$$ ~ $$` の数式ブロックを amp-mathml に変換
-- mdxx-ssg-components
-  - `mdxx-ssg` は現状単なるボイラープレートだが、設定が最小で済むように `Layout` `Article` などに抽出
+- amdxg-components
+  - `amdxg` は現状単なるボイラープレートだが、設定が最小で済むように `Layout` `Article` などに抽出
   - [amp-social-share で、はてなブックマークに対応](/amp-social-share-for-hatena-bookmark)
-- mdxx-ssg-cli: CLI ツール
+- amdxg-cli: CLI ツール
   - 記事一覧の生成 (`gen/pages.json`)
   - 記事のヒストリーの生成 (`gen/*.history.json`)
 
-## mdxx-ssg-cli のインストール
+## amdxg-cli のインストール
 
 ```bash
-npm install -g mdxx-ssg-cli
+npm install -g amdxg-cli
 ```
 
-## mdxx-ssg new
+## amdxg new
 
 WIP
 
 ## new feature: 新規記事の作成
 
 ```
-mdxx-ssg new:page [foo]
+amdxg new:page [foo]
 ```
 
 ## new feature: インデックスの記事一覧とヒストリーの生成
 
 ```
-mdxx-ssg build:index
+amdxg build:index
 ```
 
 `docs` ディレクトリの記事一覧から、`gen/pages.json` を生成する。
 
 ```
-mdxx-ssg build:history
+amdxg build:history
 ```
 
 `docs/*.mdx` の git コミットログから変更ヒストリーを生成する。
 
 ```tsx
 import history from "../gen/pages/foo.history.json";
-import { History } from "mdxx-ssg-components";
+import { History } from "amdxg-components";
 
 <History history={history} />;
 ```
 
-mdxx-ssg.json で、もし `"repository": "mizchi/mdxx"` のように GitHub のリポジトリを指定していると、そのコミットへのリンクになる。
+amdxg.config で、もし `"repository": "mizchi/amdx"` のように GitHub のリポジトリを指定していると、そのコミットへのリンクになる。
 
 ## TODO
 
 - `pages/sitemap.xml`: sitemap 対応
 - `pages/feed.rss`: feed 対応
-- `mdxx-ssg new your-blog`: 最新版から scaffold できるようにする
-- `mdxx-ssg new:page` 時、記事生成のテンプレート化できるようにする対応
-- `mdxx-ssg-components`: `Layout` を使わない、カスタマイズ度が高い作例を用意する
+- `amdxg new your-blog`: 最新版から scaffold できるようにする
+- `amdxg new:page` 時、記事生成のテンプレート化できるようにする対応
+- `amdxg-components`: `Layout` を使わない、カスタマイズ度が高い作例を用意する
 - frontmatter のタグ一覧対応
-- mdxx-ssg を github actions でデプロイできるようにしておく
-- mdxx preview の vscode extension
+- amdxg を github actions でデプロイできるようにしておく
+- amdx preview の vscode extension

docs/mdxx-introduction.mdx

@@ -1,14 +1,14 @@
 ---
 title: MDX eXtended = MDXX | AMP対応 Markdown Compiler と静的サイトジェネレーター
 created: 1588688918620
-tags: [mdxx]
+tags: [amdx]
 ---
 
-最近作っている mdxx という markdown コンパイラとそのツール郡を紹介します。
+最近作っている amdx という markdown コンパイラとそのツール郡を紹介します。
 
-GitHub はここ [mizchi/mdxx](https://github.com/mizchi/mdxx)
+GitHub はここ [mizchi/amdx](https://github.com/mizchi/amdx)
 
-このサイト自体も、 [mdxx-ssg](https://github.com/mizchi/mdxx/tree/master/packages/ssg) というツールで作られています。
+このサイト自体も、 [amdxg](https://github.com/mizchi/amdx/tree/master/packages/ssg) というツールで作られています。
 
 ## ゴールをどこに設定したか
 
@@ -18,7 +18,7 @@ GitHub はここ [mizchi/mdxx](https://github.com/mizchi/mdxx)
 - Markdown プレビュー高速化+ランタイム最小化のために、AST(JSON) 生成する部分と、AST からの実行処理部分を分割した
 - 基本は Full AMP で、React Component 動くページを作れる余地も残したい
 
-## 何を作ったか/mdxx とはなにか
+## 何を作ったか/amdx とはなにか
 
 - remark ベースで React Component を出力する parser / compiler / cli / next.js template
 - AMP 対応: img は `amp-img` を吐くなど
@@ -30,23 +30,23 @@ GitHub はここ [mizchi/mdxx](https://github.com/mizchi/mdxx)
 
 ## 周辺ツール: npm packages
 
-- mdxx-loader: webpack loader
-- rollup-plugin-mdxx: rollup
-- mdxx-cli: コマンドラインで mdx をコンパイルできる CLI ツール
+- amdx-loader: webpack loader
+- rollup-plugin-amdx: rollup
+- amdx-cli: コマンドラインで mdx をコンパイルできる CLI ツール
 
-## 周辺ツール mdxx-ssg
+## 周辺ツール amdxg
 
 このブログ自身がサンプルなのですが、自分自身のサイトを作ることもできます。
 
 こんな感じ。
 
 ```bash
 # install node and npm
-npx degit mizchi/mdxx/packages/ssg blog
+npx degit mizchi/amdx/packages/ssg blog
 cd blog
 npm install
-cp mdxx-ssg.json.example mdxx-ssg.json
-# edit mdxx-ssg.json for you
+cp amdxg.config.example amdxg.config
+# edit amdxg.config for you
 
 # create new page
 npm run new-page
@@ -84,7 +84,7 @@ netlify deploy -d out --prod
 - [ ] カスタムな Remark Plugin を読み込む口を開ける
 - [ ] amp-script 対応: AMP 内でバンドルした js を生成して、worker-dom で動かす
 - [ ] amp-mathml: 非 AMP 環境向けでは KaTex で対応しているが、amp 時は amp-mathml に切り替える
-- [ ] https://mdbuf.netlify.com/ で使うコンパイラを mdxx にする
+- [ ] https://mdbuf.netlify.com/ で使うコンパイラを amdx にする
 - [ ] 推奨の CSS を配布する
 - [ ] commit log から history pages を作成し、かつ GitHub の PR を作れる機能を作りたい(fork せずにできるのか？)
 
@@ -94,10 +94,10 @@ https://github.com/mdx-js/mdx/tree/master/packages/mdx を読んだ限りは、
 
 - remark の parse と complile(stringify) を分離できない
 - [mdbuf](https://mdbuf.netlify.com/) を作った経験だと、 React Element は worker で渡せないので、pure json な AST を作る必要がある
-- がっつり拡張するなら mdxx が良さそうだった
+- がっつり拡張するなら amdx が良さそうだった
 
 ## おわり
 
 買っておいた秘蔵の `https://mizchi.dev` を netlify から繋いで、今後も自分のブログとしてドッグフーディングしつつ作っていきます。
 
-機能要望などあったら、[GitHub の Issue](https://github.com/mizchi/mdxx/issues) か [@mizchi](https://twitter.com/mizchi) まで Twitter でお知らせください。
+機能要望などあったら、[GitHub の Issue](https://github.com/mizchi/amdx/issues) か [@mizchi](https://twitter.com/mizchi) まで Twitter でお知らせください。

docs/next-amp-tailwind-postcss.mdx

@@ -121,10 +121,10 @@ export default class MyDocument extends Document {
 
 (`initialProps.styles` は next.js が生成する AMP のためのデフォルト CSS なので、必須です)
 
-## おまけ: mdxx-ssg-components に適用してみた
+## おまけ: amdxg-components に適用してみた
 
 動作サンプルはこのブログ自身です。ヘッダやフッタなどが tailwind.css によって書かれています。
 
-このブログは [mdxx/packages/ssg](https://github.com/mizchi/mdxx/tree/master/packages/ssg) で書かれているのですが、その内部でさらに分割した `mdxx-ssg-components` パッケージに tailwind + purgecss を適用しました。
+このブログは [amdx/packages/ssg](https://github.com/mizchi/amdx/tree/master/packages/ssg) で書かれているのですが、その内部でさらに分割した `amdxg-components` パッケージに tailwind + purgecss を適用しました。
 
 `bundle.css` のサイズは最終的に `1.3M` から `6.3K` になりました。これなら AMP 環境でも安心。

docs/study-next-amp-by-mdxx-ssg.mdx

@@ -1,12 +1,12 @@
 ---
 title: next.js の AMP mode を使って静的サイトを作る
 created: 1588760362771
-tags: [next, mdxx]
+tags: [next, amdx]
 ---
 
-この記事は mdxx-ssg を作りながら, next.js で AMP に対応したときにやったことです。
+この記事は amdxg を作りながら, next.js で AMP に対応したときにやったことです。
 
-コードはこちらです [mdxx/packages/ssg at master · mizchi/mdxx](https://github.com/mizchi/mdxx/tree/master/packages/ssg)
+コードはこちらです [amdx/packages/ssg at master · mizchi/amdx](https://github.com/mizchi/amdx/tree/master/packages/ssg)
 
 ## AMP について
 
@@ -96,11 +96,11 @@ export default () => {
 
 [ページが検出されるようにする \- amp\.dev](https://amp.dev/ja/documentation/guides-and-tutorials/optimize-and-measure/discovery/)
 
-mdxx-ssg での記事のボイラープレートでは、Full AMP を採用していますが、必要に応じて通常ページのレンダリングもできるようにしています。
+amdxg での記事のボイラープレートでは、Full AMP を採用していますが、必要に応じて通常ページのレンダリングもできるようにしています。
 
 ### Hybrid AMP
 
-mdxx-ssg では採用してませんが、 next.js ではモバイルと Google へのインデックスのために AMP を生成しつつ、PC 用には通常の AMP のレンダリングを行うモードがあります。こっちのほうが一般的な AMP かも。
+amdxg では採用してませんが、 next.js ではモバイルと Google へのインデックスのために AMP を生成しつつ、PC 用には通常の AMP のレンダリングを行うモードがあります。こっちのほうが一般的な AMP かも。
 
 ```js
 // pages/index.tsx
@@ -145,7 +145,7 @@ import prismCss from "!!raw-loader!../styles/prism.css";
 // @ts-ignore
 import custom from "!!raw-loader!../styles/styles.css";
 import { ServerStyleSheet } from "styled-components";
-import ssgConfig from "../mdxx-ssg.json";
+import ssgConfig from "../amdxg.config";
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: any) {
@@ -230,29 +230,29 @@ amp では 普通の JS を動かすことはできませんが、 WebWorker 環
 
 [AMP で任意の JS を実行できる amp\-script を試してみた \- Qiita](https://qiita.com/mizchi/items/c7d648eafb03d4c5378a)
 
-mdxx-ssg では、これを next.js+webpack と連携してシームレスに組み込める仕組みを、なにか用意しようと考えています。
+amdxg では、これを next.js+webpack と連携してシームレスに組み込める仕組みを、なにか用意しようと考えています。
 
 今はこういう PR を出しています。
 
 [\[RFC\] Add npm library mode by mizchi · Pull Request \#855 · ampproject/worker\-dom](https://github.com/ampproject/worker-dom/pull/855)
 
-## mdxx でやったこと
+## amdx でやったこと
 
-### mdxx-parser での code syntax highlighter の実装
+### amdx での code syntax highlighter の実装
 
 amp 制約下では、JS が実行できないので、プログラミング言語のランタイムでの構文解析を実行することはできません。なので、markdown のコードブロックの中身を、事前にトークンに落とすところまで行っています。
 
-[mdxx/highlighter\.ts at master · mizchi/mdxx](https://github.com/mizchi/mdxx/blob/master/packages/parser/src/highlighter.ts)
+[amdx/highlighter\.ts at master · mizchi/amdx](https://github.com/mizchi/amdx/blob/master/packages/parser/src/highlighter.ts)
 
 パース後は言語非依存のトークンに変換されているので、あとは CSS を当てるだけです。
 
 https://github.com/PrismJS/prism-themes/tree/master/themes
 
-### mdxx-compiler での amp-img 対応
+### amdx-runner での amp-img 対応
 
 amp ではレイアウト最適化のために img を直接使うのではなく、 `amp-img` を使う必要があります。
 
-mdxx-ssg 用の mdxx-compiler では、AMP フラグを付けると、 `![alt](imglink)` の link 構文を、次のようなコードと HTML 要素に変換します。
+amdxg 用の amdx-runner では、AMP フラグを付けると、 `![alt](imglink)` の link 構文を、次のようなコードと HTML 要素に変換します。
 
 こういう alt を使った構文を想定
 
@@ -265,7 +265,7 @@ mdxx-ssg 用の mdxx-compiler では、AMP フラグを付けると、 `![alt](i
 展開コード
 
 ```tsx
-import Doc from "./doc.mdx"; // mdxx-loader で変換される
+import Doc from "./doc.mdx"; // amdx-loader で変換される
 <Doc amp />; // AMP フラグを立てると img を amp-img に変換する
 ```