[
  {
    "path": ".eslintrc.js",
    "content": "module.exports = {\n  root: true,\n  env: {\n    browser: true,\n    node: true,\n  },\n  parserOptions: {\n    parser: 'babel-eslint',\n  },\n  extends: [\n    '@nuxtjs',\n    'prettier',\n    'prettier/vue',\n    'plugin:prettier/recommended',\n    'plugin:nuxt/recommended',\n  ],\n  plugins: ['prettier'],\n  // add your custom rules here\n  rules: {\n    'vue/no-v-html': 'off',\n  },\n};\n"
  },
  {
    "path": ".gitignore",
    "content": "# Created by .ignore support plugin (hsz.mobi)\n### Node template\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# TypeScript v1 declaration files\ntypings/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n\n# next.js build output\n.next\n\n# nuxt.js build output\n.nuxt\n\n# Nuxt generate\ndist\n\n# vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless\n\n# IDE / Editor\n.idea\n.editorconfig\n\n# Service worker\nsw.*\n\n# Mac OSX\n.DS_Store\n\n# Vim swap files\n*.swp\n\n#amplify\namplify/\\#current-cloud-backend\namplify/.config/local-*\namplify/backend/amplify-meta.json\namplify/backend/awscloudformation\nbuild/\ndist/\nnode_modules/\naws-exports.js\nawsconfiguration.json\n\n#rss\nfeed.xml\nfeed_update.xml\nfeed_usecase.xml\n\n#pwa\nsw.*"
  },
  {
    "path": ".node-version",
    "content": "16.20.0"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"semi\": true,\n  \"singleQuote\": true\n}\n"
  },
  {
    "path": ".vscode/extensions.json",
    "content": "{\n  \"recommendations\": [\n    \"dbaeumer.vscode-eslint\",\n    \"simonsiefke.prettier-vscode\"\n  ]\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": \"explicit\"\n  },\n  \"editor.formatOnSave\": true\n}"
  },
  {
    "path": "LICENSE",
    "content": "                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n"
  },
  {
    "path": "README.md",
    "content": "# microcms-blog\nサイト: https://blog.microcms.io\n\n## 機能\n- 記事一覧\n- カテゴリー別記事一覧\n- タグ別記事一覧\n- 人気の記事一覧\n- 最新の記事一覧\n- 著者別の記事一覧\n- 検索\n- パンくずリスト\n- 記事詳細\n  - 目次\n  - 著者\n  - SNSシェアボタン\n  - 下書きプレビュー\n  - 関連記事\n- サイトマップ\n- バナー\n- Google Tag Manager\n- Facebook Pixel\n- RSS\n- PWA\n\n## 技術構成\n- Nuxt（SSG）\n- microCMS（コンテンツ）\n- Netlify（Hosting, Functions）\n- ESLint\n- Prettier\n- PostCSS\n- PWA\n\n## microCMSのAPIスキーマ設定\n### ブログ\nendpoint: blog  \ntype: リスト形式\n\n| フィールド ID | 表示名     | 種類                        |\n| ------------- | ---------- | --------------------------- |\n| title         | タイトル   | テキストフィールド          |\n| category      | カテゴリー | コンテンツ参照 - カテゴリー |\n| tag           | タグ       | 複数コンテンツ参照 - タグ   |\n| toc_visible   | 目次       | 真偽値                      |\n| body          | 本文       | リッチエディタ              |\n| description   | 概要       | テキストフィールド          |\n| ogimage       | OGP 画像   | 画像                        |\n| writer        | 著者       | コンテンツ参照 - 著者       |\n| partner       | パートナー | コンテンツ参照 - パートナー |\n| previous_blog | 前の記事   | コンテンツ参照 - ブログ |\n| next_blog     | 次の記事   | コンテンツ参照 - ブログ |\n| related_blogs | 関連記事   | 複数コンテンツ参照 - ブログ |\n| cv_point | CVポイント   | 繰り返し（※上限1に設定） - カスタムフィールド |\n\n#### カスタムフィールド\nフィールドID: thumbnail\n\n| フィールド ID | 表示名     | 種類                        |\n| ------------- | ---------- | --------------------------- |\n| title         | タイトル   | テキストフィールド          |\n| text      | 本文 | テキストエリア |\n| buttonText           | ボタンテキスト       | テキストフィールド   |\n| buttonLink           | ボタンリンク       | テキストフィールド   |\n| thumbnail       | サムネイル   | 画像                        |\n\n\n### 著者\nendpoint: authors  \ntype: リスト形式\n\n| フィールドID | 表示名 | 種類 |\n| ------------- | ------------- | ----- |\n| name | 名前 | テキストフィールド |\n| text | 自己紹介 | テキストエリア |\n| image | 画像 | 画像 |\n| twitter | Twitter URL | テキストフィールド |\n| facebook | Facebook URL | テキストフィールド |\n| github | GitHub URL | テキストフィールド |\n\n### カテゴリー\nendpoint: categories  \ntype: リスト形式\n\n| フィールドID | 表示名 | 種類 |\n| ------------- | ------------- | ----- |\n| name | 名前 | テキストフィールド |\n\n### タグ\nendpoint: tags\ntype: リスト形式\n\n| フィールド ID | 表示名 | 種類               |\n| ------------- | ------ | ------------------ |\n| name          | 名前   | テキストフィールド |\n\n### パートナー\nendpoint: partners  \ntype: リスト形式\n\n| フィールドID | 表示名 | 種類 |\n| ------------- | ------------- | ----- |\n| company | 会社名 | テキストフィールド |\n| url | 会社URL | テキストフィールド |\n| description | 説明文 | テキストエリア |\n| logo | ロゴ | 画像 |\n\n### 人気の記事\nendpoint: popular-articles  \ntype: オブジェクト形式\n\n| フィールドID | 表示名 | 種類 |\n| ------------- | ------------- | ----- |\n| articles | 人気の記事 | 複数コンテンツ参照 - ブログ |\n\n### バナー\nendpoint: banners\ntype: オブジェクト形式\n\n| フィールドID | 表示名 | 種類 |\n| ------------- | ------------- | ----- |\n| banner | バナー | 繰り返し - カスタムフィールド |\n\n#### カスタムフィールド\nフィールドID: cf_banner\n\n| フィールド ID | 表示名     | 種類                        |\n| ------------- | ---------- | --------------------------- |\n| image | 画像 | 画像 |\n| url | リンク先URL | テキストフィールド |\n\nフィールドID: cf_section_title\n\n| フィールド ID | 表示名     | 種類                        |\n| ------------- | ---------- | --------------------------- |\n| title | タイトル | テキストフィールド |\n\n### CTA\nendpoint: cta  \ntype: オブジェクト形式\n\n| フィールドID | 表示名 | 種類 |\n| ------------- | ------------- | ----- |\n| contents | CTAフィールド本文 | 繰り返し - カスタムフィールド |\n\n#### カスタムフィールド\nフィールドID: cf_cta\n\n| フィールド ID | 表示名     | 種類                        |\n| ------------- | ---------- | --------------------------- |\n| body      | 本文 | リッチエディタ |\n\n## 環境変数\nプロジェクトルートに`.env`ファイルを作成し、以下の項目を設定してください。\n- API_KEY（microCMSのAPIキー）\n- SERVICE_ID（microCMSのサービスID）\n- GTM_ID（Google Tag ManagerのID）※任意\n- FB_PIXEL_ID（FacebookピクセルID）※任意\n\n例:\n```\nAPI_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\nSERVICE_ID=your-service-id\nGTM_ID=GTM-xxxxxxx\nFB_PIXEL_ID=xxxxxxxxxxxxxxxxxx\n```\n\n## 開発方法\n\n```bash\n# パッケージをインストール\n$ npm install\n\n# 開発サーバーを起動（localhost:3000）\n$ npm run dev\n\n# Netlify Functionsをローカルで起動（localhost:9000）\n$ npm run functions:serve\n\n# アプリケーションを静的生成\n$ npm run generate\n\n# 静的生成したアプリケーションを起動\n$ npm start\n```\n\n## ライセンス\nApache License 2.0\n"
  },
  {
    "path": "assets/README.md",
    "content": "# ASSETS\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThis directory contains your un-compiled assets such as LESS, SASS, or JavaScript.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).\n"
  },
  {
    "path": "assets/styles/colors.css",
    "content": ":root {\n  --color-text-main: #2b2c30;\n  --color-text-sub: #616269;\n  --color-text-off: #999;\n  --color-text-disabled: #ccc;\n  --color-text-placeholder: #ccc;\n  --color-text-link: #2b2c30;\n  --color-border-dark: #ccc;\n  --color-border: #ddd;\n  --color-border-light: #eee;\n  --color-primary: #563bff;\n  --color-primary-light: #664bff;\n  --color-gradient-purple: linear-gradient(to right bottom, #5630af, #3067af);\n  --color-gradient-purple-light: linear-gradient(\n    to right bottom,\n    #7650cf,\n    #5087cf\n  );\n  --color-gradient-blue: linear-gradient(to right bottom, #adaf30, #30af7f);\n  --color-purple: #331cbf;\n  --color-green: #2cc63e;\n  --color-bluegreen: #30af7f;\n  --color-gray: #ddd;\n  --color-gray-light: #eee;\n  --color-accent: #ff8d27;\n  --color-accent-light: #ff9d37;\n  --color-blue: #3067af;\n  --color-pink: #ff357f;\n\n  --color-bg-purple-lightest: #f8f9fd;\n  --color-bg-purple-light: #f7f7fc;\n  --color-bg-purple: #e7e7f3;\n  --color-bg-purple-dark: #cacae7;\n  --color-bg-blue: #e5eff9;\n\n  --color-bg-success: #e8fbe8;\n  --color-bg-error: #ffe9df;\n  --color-error: #d9534f;\n\n  --color-social-twitter: #1d9bf0;\n  --color-social-x: #0f1419;\n  --color-social-facebook: #1877f2;\n  --color-social-hatena: #00a4de;\n}\n"
  },
  {
    "path": "assets/styles/reset.css",
    "content": "/* http://meyerweb.com/eric/tools/css/reset/ \nv2.0 | 20110126\nLicense: none (public domain)\n*/\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed, \nfigure, figcaption, footer, header, hgroup, \nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\nmargin: 0;\npadding: 0;\nborder: 0;\nfont-size: 100%;\nfont: inherit;\nvertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers \n*/\n\narticle, aside, details, figcaption, figure, \nfooter, header, hgroup, menu, nav, section {\ndisplay: block;\n}\n\nbody, input {\n  line-height: 1.5;\n  font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", YuGothic, \"ヒラギノ角ゴ ProN W3\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n  color: #2b2c30;\n}\n\ncode {\n  font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n}\n\nol, ul {\nlist-style: none;\n}\n\nblockquote, q {\nquotes: none;\n}\n\nblockquote:before, blockquote:after,\nq:before, q:after {\ncontent: '';\ncontent: none;\n}\n\na {\ncolor: var(--color-text-link);\ntext-decoration: none;\n}\n\ntable {\nborder-collapse: collapse;\nborder-spacing: 0;\n}\n\ninput, select, button {\n  &:focus {\n    outline: none;\n  }\n}\n\n:placeholder-shown {\ncolor: var(--color-text-placeholder);\n}\n\n::-webkit-input-placeholder {\ncolor: var(--color-text-placeholder);\n}\n\n/* Firefox 18- */\n\n:-moz-placeholder {\ncolor: var(--color-text-placeholder);\nopacity: 1;\n}\n\n/* Firefox 19+ */\n\n::-moz-placeholder {\ncolor: var(--color-text-placeholder);\nopacity: 1;\n}\n\n/* IE 10+ */\n\n:-ms-input-placeholder {\ncolor: var(--color-text-placeholder);\n}\n\n/* for Responsible */\n\n@media (max-width: 1030px) {\n  .forPC {\n    display: none;\n  }\n}\n\n@media (min-width: 1030px) {\n  .forSP {\n    display: none;\n  }\n}\n"
  },
  {
    "path": "components/Alert.vue",
    "content": "<template>\n  <div v-if=\"isOldPost && isTechnicalPost\" class=\"alert\">\n    <p>\n      この記事は公開後、1年以上経過しています。情報が古い可能性がありますので、ご注意ください。\n    </p>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    isOldPost: {\n      type: Boolean,\n      required: true,\n    },\n    isTechnicalPost: {\n      type: Boolean,\n      required: true,\n    },\n  },\n};\n</script>\n\n<style scoped>\n.alert {\n  position: relative;\n  background-color: #faf6da;\n  color: var(--color-text-main);\n  margin-bottom: 40px;\n  padding: 16px 16px 18px 44px;\n  font-size: 14px;\n  border-radius: 4px;\n\n  &::before {\n    content: '';\n    display: inline-block;\n    background: url('/images/icon_alert.svg') center no-repeat;\n    background-size: contain;\n    width: 18px;\n    height: 18px;\n    position: absolute;\n    top: 50%;\n    left: 16px;\n    transform: translateY(-50%);\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Banners.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <template v-for=\"(item, idx) in normalizedBanners\">\n      <!-- セクションタイトル -->\n      <h2\n        v-if=\"item.fieldId === 'cf_section_title' && item.title\"\n        :key=\"`title-${idx}`\"\n        class=\"sectionTitle\"\n      >\n        {{ item.title }}\n      </h2>\n\n      <!-- バナー：リンクあり -->\n      <a\n        v-else-if=\"\n          item.fieldId === 'cf_banner' &&\n          item.image &&\n          item.image.url &&\n          item.url\n        \"\n        :key=\"`${item.id || idx}-link`\"\n        :href=\"item.url\"\n        class=\"link blog-cta-link\"\n        target=\"banner\"\n        rel=\"noopener\"\n      >\n        <picture>\n          <source\n            type=\"image/webp\"\n            :data-srcset=\"`${item.image.url}?w=300&fm=webp, ${item.image.url}?w=600&fm=webp 2x`\"\n          />\n          <img\n            :data-src=\"item.image.url\"\n            :width=\"item.image.width\"\n            :height=\"item.image.height\"\n            class=\"image lazyload\"\n            :alt=\"item.image.alt || ''\"\n          />\n        </picture>\n\n        <p\n          v-if=\"item.description\"\n          class=\"description\"\n          v-text=\"item.description\"\n        ></p>\n      </a>\n\n      <!-- バナー：リンクなし -->\n      <div\n        v-else-if=\"item.fieldId === 'cf_banner' && item.image && item.image.url\"\n        :key=\"`${item.id || idx}-nolink`\"\n        class=\"link blog-cta-link\"\n      >\n        <picture>\n          <source\n            type=\"image/webp\"\n            :data-srcset=\"`${item.image.url}?w=560&fm=webp, ${item.image.url}?w=600&fm=webp 2x`\"\n          />\n          <img\n            :data-src=\"item.image.url\"\n            :width=\"item.image.width\"\n            :height=\"item.image.height\"\n            class=\"image lazyload\"\n            :alt=\"item.image.alt || ''\"\n          />\n        </picture>\n        <p\n          v-if=\"item.description\"\n          class=\"description\"\n          v-text=\"item.description\"\n        ></p>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    banners: {\n      type: [Array, Object],\n      required: false,\n      default: () => [],\n    },\n    id: {\n      type: String,\n      required: true,\n    },\n  },\n  computed: {\n    normalizedBanners() {\n      if (Array.isArray(this.banners)) return this.banners;\n      if (this.banners && Array.isArray(this.banners.banner)) {\n        return this.banners.banner;\n      }\n      return [];\n    },\n  },\n};\n</script>\n\n<style scoped>\n.wrapper {\n  padding-bottom: 20px;\n}\n.sectionTitle {\n  font-size: 20px;\n  font-weight: bold;\n  background-color: #eee;\n  padding: 6px 10px;\n  margin-bottom: 20px;\n  border-radius: 5px;\n}\n.image {\n  width: 100%;\n  height: auto;\n}\n\n.description {\n  padding-top: 7px;\n  white-space: pre-line;\n}\n\n.link {\n  display: block;\n  margin-bottom: 30px;\n}\n\n@media (max-width: 1160px) {\n  .link {\n    text-align: center;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Breadcrumb.vue",
    "content": "<template>\n  <ul class=\"breadcrumb\">\n    <li class=\"breadcrumbList\">\n      <nuxt-link to=\"/\">記事一覧</nuxt-link>\n    </li>\n    <li v-if=\"hasCategory(category)\" class=\"breadcrumbList\">\n      <nuxt-link :to=\"`/category/${category.id}/page/1`\">{{\n        category.name\n      }}</nuxt-link>\n    </li>\n    <li v-else-if=\"hasCategory(tag)\" class=\"breadcrumbList\">\n      <nuxt-link :to=\"`/tag/${tag.id}/page/1`\">{{ tag.name }}</nuxt-link>\n    </li>\n  </ul>\n</template>\n\n<script>\nexport default {\n  props: {\n    category: {\n      type: Object,\n      required: false,\n      default: () => ({}),\n    },\n    tag: {\n      type: Object,\n      required: false,\n      default: () => ({}),\n    },\n  },\n  methods: {\n    hasCategory(arg) {\n      return Object.keys(arg).length > 0;\n    },\n  },\n};\n</script>\n\n<style scoped>\n.breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  padding-top: 20px;\n}\n\n.breadcrumbList {\n  color: #616269;\n\n  a {\n    color: #331cbf;\n  }\n\n  &::after {\n    content: '>';\n    margin: 0 10px;\n  }\n\n  &:last-child&::after {\n    content: '';\n    margin: 0;\n  }\n}\n@media (max-width: 600px) {\n  .breadcrumbList {\n    font-size: 14px;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Card.vue",
    "content": "<template class=\"list\">\n  <nuxt-link :to=\"`/${content.id}/`\" class=\"link\">\n    <picture v-if=\"content.ogimage\">\n      <source\n        type=\"image/webp\"\n        :data-srcset=\"content.ogimage.url + '?w=680&fm=webp'\"\n      />\n      <img\n        :data-src=\"content.ogimage.url + '?w=680'\"\n        :width=\"340\"\n        class=\"ogimage lazyload\"\n        alt\n      />\n    </picture>\n    <picture v-else>\n      <source type=\"image/webp\" :data-srcset=\"content.defaultOgimage\" />\n      <img\n        :data-src=\"content.defaultOgimage\"\n        :width=\"340\"\n        class=\"ogimage lazyload\"\n        alt\n      />\n    </picture>\n    <dl class=\"content\">\n      <dt class=\"title\">\n        {{ content.title }}\n      </dt>\n      <dd>\n        <div class=\"upper\">\n          <span class=\"category\">{{ content.category.name }}</span>\n        </div>\n        <div class=\"meta\">\n          <div class=\"author\">\n            <img\n              :data-src=\"author.image.url + '?w=80&h=80'\"\n              :width=\"40\"\n              :height=\"40\"\n              class=\"authorimage lazyload\"\n              alt\n            />\n            <span>{{ author.name }}</span>\n          </div>\n          <div class=\"timestamp\">\n            <time\n              :datetime=\"\n                $dayjs(content.publishedAt || content.createdAt).format(\n                  'YYYY-MM-DD'\n                )\n              \"\n            >\n              {{\n                $dayjs(content.publishedAt || content.createdAt).format(\n                  'YYYY/MM/DD'\n                )\n              }}\n            </time>\n          </div>\n        </div>\n      </dd>\n    </dl>\n  </nuxt-link>\n</template>\n\n<script>\nexport default {\n  props: {\n    content: {\n      type: Object,\n      required: true,\n      default: () => {},\n    },\n    author: {\n      type: Object,\n      required: true,\n      default: () => {},\n    },\n  },\n};\n</script>\n\n<style scoped>\n.link {\n  display: block;\n}\n.ogimage {\n  width: 340px;\n}\n.content {\n  margin: 16px 0 0;\n}\n.title {\n  font-size: 20px;\n  font-weight: bold;\n}\n.upper {\n  margin-top: 16px;\n}\n.category {\n  display: inline-block;\n  padding: 8px 16px;\n  white-space: nowrap;\n  color: var(--color-text-main);\n  font-weight: bold;\n  border-radius: 4px;\n  font-size: 14px;\n  margin-right: 16px;\n  background: var(--color-gray-light);\n}\n.meta {\n  display: flex;\n  align-items: center;\n  margin-top: 16px;\n}\n.author,\n.timestamp {\n  display: inline-flex;\n  align-items: center;\n  margin-right: 16px;\n  color: var(--color-text-sub);\n}\n.authorimage {\n  border-radius: 100px;\n  margin-right: 8px;\n}\n.author {\n  font-weight: bold;\n}\n@media (max-width: 820px) {\n  .ogimage {\n    width: 100%;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Categories.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <h1 class=\"pageTitle\">カテゴリー</h1>\n    <ul>\n      <li v-for=\"category in categories\" :key=\"category.id\" class=\"list\">\n        <nuxt-link :to=\"`/category/${category.id}/page/1`\" class=\"link\">{{\n          category.name\n        }}</nuxt-link>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    categories: {\n      type: Array,\n      required: false,\n      default: () => [],\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 1160px) {\n  .wrapper {\n    padding: 40px 0;\n  }\n\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    border-bottom: 1px solid #eee;\n\n    a {\n      display: block;\n      padding: 10px;\n    }\n\n    &:last-child {\n      border-bottom: none;\n    }\n  }\n}\n@media (min-width: 820px) and (max-width: 1160px) {\n  .wrapper {\n    padding: 40px 0 0;\n  }\n\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    border-bottom: 1px solid #eee;\n\n    a {\n      display: block;\n      padding: 10px;\n    }\n\n    &:last-child {\n      border-bottom: none;\n    }\n  }\n}\n@media (max-width: 820px) {\n  .wrapper {\n    padding: 40px 0 0;\n  }\n\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    border-bottom: 1px solid #eee;\n\n    a {\n      display: block;\n      padding: 10px;\n    }\n\n    &:last-child {\n      border-bottom: none;\n    }\n  }\n}\n</style>\n"
  },
  {
    "path": "components/ConversionPoint.vue",
    "content": "<template>\n  <div :class=\"{ [`cvPoint--${theme}`]: theme !== '' }\" class=\"wrapper cvPoint\">\n    <div v-if=\"theme === 'thumbnail'\" class=\"upper\">\n      <div class=\"upperContents\">\n        <div>\n          <h2 class=\"mainTitle\">{{ getContents.title }}</h2>\n          <p class=\"mainText\">{{ getContents.text }}</p>\n        </div>\n        <figure class=\"thumbnail\">\n          <img :src=\"getContents.thumbnail.url\" alt=\"\" />\n        </figure>\n      </div>\n      <p class=\"buttonWrapper\">\n        <a\n          class=\"button blog-cta-link\"\n          target=\"site\"\n          :href=\"getContents.buttonLink\"\n          >{{ getContents.buttonText }}</a\n        >\n      </p>\n    </div>\n\n    <div v-else>\n      <div class=\"cvBackground\">\n        <div class=\"cvContainer\">\n          <h2 class=\"mainTitle\">{{ getContents.title }}</h2>\n          <p class=\"mainContents\">{{ getContents.text }}</p>\n          <p class=\"buttonWrapper\">\n            <a\n              class=\"button blog-cta-link\"\n              target=\"site\"\n              :href=\"getContents.buttonLink\"\n              >{{ getContents.buttonText }}</a\n            >\n          </p>\n        </div>\n      </div>\n\n      <div class=\"bottom\">\n        <div class=\"background\">\n          <h3 class=\"subTitle\">microCMSについてお問い合わせ</h3>\n          <p>\n            初期費用無料・14日間の無料トライアル付き。ご不明な点はお気軽にお問い合わせください。\n          </p>\n          <a\n            href=\"https://microcms.io/contact\"\n            class=\"buttonSmall blog-cta-link\"\n            >お問い合わせ</a\n          >\n        </div>\n\n        <div class=\"background\">\n          <h3 class=\"subTitle\">microCMS公式アカウント</h3>\n          <p>\n            microCMSは各公式アカウントで最新情報をお届けしています。<br />フォローよろしくお願いします。\n          </p>\n          <ul class=\"iconList\">\n            <li class=\"listItem\">\n              <a target=\"_blank\" href=\"https://x.com/micro_cms\">\n                <img src=\"/images/icon_x.svg\" alt=\"X\" data-logo=\"x\" />\n              </a>\n            </li>\n            <li class=\"listItem\">\n              <a target=\"_blank\" href=\"https://discord.gg/K3DPqw4EJ2\">\n                <img src=\"/images/icon_discord.svg\" alt=\"Discord\" />\n              </a>\n            </li>\n            <li class=\"listItem\">\n              <a target=\"_blank\" href=\"https://github.com/microcmsio\">\n                <img src=\"/images/icon_github.svg\" alt=\"github\" />\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n      required: true,\n      default: '',\n    },\n\n    contents: {\n      type: Array,\n      required: false,\n      default: () => [],\n    },\n\n    theme: {\n      type: String,\n      required: false,\n      default: '',\n      validator: (value) => ['', 'thumbnail'].includes(value) !== -1,\n    },\n  },\n\n  computed: {\n    getContents() {\n      if (this.contents === null || this.contents.length <= 0) {\n        return {\n          title: 'まずは、無料で試してみましょう。',\n          text:\n            'APIベースの日本製ヘッドレスCMS「microCMS」を使えば、\\nものの数分でAPIの作成ができます。',\n          buttonText: 'microCMSを無料で始める',\n          buttonLink: 'https://microcms.io/',\n        };\n      } else {\n        return this.contents[0];\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 820px) {\n  .cvPoint {\n    margin: 40px 0;\n  }\n\n  .cvBackground {\n    padding: 60px 1em;\n    background-image: url('/images/bg_microcms_screen_black.png');\n    background-position: center center;\n    background-repeat: no-repeat;\n    background-size: cover;\n    color: #fff;\n    border-radius: 5px;\n    margin-bottom: 40px;\n  }\n\n  .mainTitle {\n    font-size: 20px;\n    font-weight: bold;\n    line-height: 1.7;\n    margin-bottom: 20px;\n    text-align: center;\n  }\n\n  .cvContainer {\n    max-width: 457px;\n    margin: auto;\n  }\n\n  .mainContents {\n    line-height: 1.7;\n    margin-bottom: 40px;\n  }\n\n  .buttonWrapper {\n    text-align: center;\n  }\n\n  .button {\n    display: inline-block;\n    border: none;\n    border-radius: 5px;\n    background-color: var(--color-primary);\n    color: #fff;\n    text-align: center;\n    font-size: 24px;\n    font-weight: bold;\n    padding: 16px 72px;\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--color-primary-light);\n    }\n  }\n\n  .background {\n    background-color: #eee;\n    border-radius: 5px;\n    padding: 20px 35px 30px;\n  }\n\n  .subTitle {\n    font-size: 16px;\n    font-weight: bold;\n    text-align: center;\n    margin-bottom: 10px;\n  }\n\n  .bottom {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: auto;\n    grid-gap: 5%;\n  }\n\n  .buttonSmall {\n    display: block;\n    line-height: 1;\n    border-radius: 5px;\n    background-color: var(--color-primary);\n    color: #fff;\n    text-align: center;\n    font-size: 18px;\n    padding: 16px;\n    font-weight: bold;\n    cursor: pointer;\n    margin-top: 20px;\n\n    &:hover {\n      background-color: var(--color-primary-light);\n    }\n  }\n\n  .iconList {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 30px auto 0;\n  }\n\n  .listItem {\n    img {\n      max-width: 32px;\n      max-height: 32px;\n\n      &[data-logo='x'] {\n        max-width: 30px;\n        max-height: 30px;\n      }\n    }\n  }\n\n  .listItem + .listItem {\n    margin-left: 45px;\n  }\n\n  /* thumbnail theme */\n  .cvPoint--thumbnail {\n    background-color: #eee;\n    padding: 60px 40px;\n\n    img {\n      max-width: 100%;\n      vertical-align: top;\n    }\n\n    .upperContents {\n      display: grid;\n      grid-template-columns: 40% auto;\n      align-items: center;\n      grid-gap: 5%;\n    }\n\n    .cvBackground {\n      background: inherit;\n    }\n\n    .background {\n      background-color: #fff;\n      padding: 25px 20px 30px;\n    }\n\n    .mainTitle {\n      text-align: left;\n      margin-bottom: 15px;\n    }\n\n    .mainText {\n      margin-bottom: 0;\n      font-size: 14px;\n    }\n\n    .buttonWrapper {\n      margin-top: 30px;\n    }\n  }\n}\n\n@media (max-width: 820px) {\n  .cvPoint {\n    margin: 40px 0;\n  }\n\n  .cvBackground {\n    padding: 40px 2em;\n    background-image: url('/images/bg_microcms_screen_black.png');\n    background-position: center center;\n    background-repeat: no-repeat;\n    background-size: cover;\n    color: #fff;\n    border-radius: 5px;\n    margin-bottom: 20px;\n  }\n\n  .mainTitle {\n    font-size: 18px;\n    font-weight: bold;\n    line-height: 1.7;\n    margin-bottom: 10px;\n  }\n\n  .cvContainer {\n    max-width: 457px;\n    margin: auto;\n  }\n\n  .mainContents {\n    line-height: 1.7;\n    margin-bottom: 40px;\n  }\n\n  .buttonWrapper {\n    text-align: center;\n  }\n\n  .button {\n    display: block;\n    border: none;\n    border-radius: 5px;\n    background-color: var(--color-primary);\n    color: #fff;\n    text-align: center;\n    font-size: 18px;\n    font-weight: bold;\n    line-height: 1;\n    padding: 16px 1em;\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--color-primary-light);\n    }\n  }\n\n  .background {\n    background-color: #eee;\n    border-radius: 5px;\n    padding: 20px 35px 30px;\n    margin-bottom: 20px;\n  }\n\n  .subTitle {\n    font-size: 16px;\n    font-weight: bold;\n    text-align: center;\n    margin-bottom: 10px;\n  }\n\n  .buttonSmall {\n    display: block;\n    line-height: 1;\n    border-radius: 5px;\n    background-color: var(--color-primary);\n    color: #fff;\n    text-align: center;\n    font-size: 18px;\n    padding: 16px;\n    font-weight: bold;\n    cursor: pointer;\n    margin-top: 20px;\n\n    &:hover {\n      background-color: var(--color-primary-light);\n    }\n  }\n\n  .iconList {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 30px auto 0;\n  }\n\n  .listItem {\n    img {\n      max-width: 32px;\n      max-height: 32px;\n\n      &[data-logo='x'] {\n        max-width: 30px;\n        max-height: 30px;\n      }\n    }\n  }\n\n  .listItem + .listItem {\n    margin-left: 45px;\n  }\n\n  /* thumbnail theme */\n  .cvPoint--thumbnail {\n    background-color: #eee;\n    padding: 40px 20px;\n\n    img {\n      max-width: 100%;\n      vertical-align: top;\n    }\n\n    .cvBackground {\n      background: inherit;\n    }\n\n    .thumbnail {\n      margin-top: 20px;\n    }\n\n    .buttonWrapper {\n      margin-top: 20px;\n    }\n\n    .button {\n      padding: 20px 1em;\n    }\n\n    .background {\n      background-color: #fff;\n      padding: 25px 20px 30px;\n    }\n\n    .mainTitle {\n      text-align: left;\n      margin-bottom: 15px;\n    }\n\n    .mainText {\n      margin-bottom: 0;\n      font-size: 14px;\n    }\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Cta.vue",
    "content": "<template>\n  <div v-if=\"contents.length > 0\" class=\"wrapper\">\n    <div v-for=\"(item, index) in getContents\" :key=\"index\" class=\"ctaItem\">\n      <div v-html=\"item.body\"></div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n      required: true,\n    },\n\n    contents: {\n      type: Array,\n      required: false,\n      default: () => [],\n    },\n  },\n\n  computed: {\n    getContents() {\n      return this.contents;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 600px) {\n  .wrapper {\n    padding: 40px 0;\n  }\n  .ctaItem {\n    & >>> h1 {\n      font-size: 30px;\n      font-weight: bold;\n      margin: 40px 0 20px;\n      background-color: #eee;\n      padding: 10px 20px;\n      border-radius: 5px;\n    }\n\n    & >>> h2 {\n      font-size: 30px;\n      font-weight: bold;\n      margin: 40px 0 16px;\n      border-bottom: 1px solid #ddd;\n    }\n\n    & >>> h3 {\n      font-size: 24px;\n      font-weight: bold;\n      margin: 30px 0 12px;\n    }\n\n    & >>> h4 {\n      font-size: 20px;\n      font-weight: bold;\n      margin: 24px 0 10px;\n    }\n\n    & >>> h5 {\n      font-size: 16px;\n      font-weight: bold;\n      margin: 20px 0 6px;\n    }\n\n    & >>> p {\n      line-height: 1.8;\n      letter-spacing: 0.2px;\n\n      & > code {\n        color: var(--color-text-main);\n        background-color: var(--color-bg-purple-light);\n        border: 1px solid var(--color-border);\n        border-radius: 3px;\n        margin: 0 2px;\n        padding: 2px 4px;\n      }\n    }\n\n    & >>> em {\n      font-style: italic;\n    }\n\n    & >>> ol {\n      list-style-type: decimal;\n      list-style-position: inside;\n\n      & > li {\n        line-height: 2;\n      }\n    }\n\n    & >>> ul > li {\n      line-height: 2;\n\n      &::before {\n        content: '-';\n        margin-right: 10px;\n      }\n    }\n\n    & >>> img {\n      max-width: 100%;\n      margin: 40px 0;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    & >>> video {\n      max-width: 100%;\n      margin: 40px 0;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    & >>> a {\n      color: var(--color-purple);\n      text-decoration: underline;\n      word-wrap: break-word;\n      word-break: break-all;\n    }\n\n    & >>> strong {\n      background: linear-gradient(transparent 92%, var(--color-accent) 92%);\n      font-weight: bold;\n    }\n\n    & >>> blockquote {\n      background: url('/images/icon_quote.svg') no-repeat 20px 10px, #eee;\n      background-size: 36px 36px;\n      padding: 50px 20px 20px;\n      margin: 20px 0;\n      border-radius: 3px;\n    }\n\n    & >>> pre {\n      border-radius: 3px;\n      margin: 20px 0;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      word-break: break-all;\n\n      & > code {\n        padding: 10px 20px;\n        border-radius: 5px;\n      }\n    }\n\n    & >>> iframe {\n      height: auto;\n      width: 100%;\n      aspect-ratio: 16 / 9;\n    }\n  }\n}\n@media (max-width: 600px) {\n  .wrapper {\n    padding: 30px 0;\n  }\n  .ctaItem {\n    font-size: 14px;\n\n    & >>> h1 {\n      font-size: 24px;\n      font-weight: bold;\n      margin: 40px 0 20px;\n      background-color: #eee;\n      padding: 10px 20px;\n      border-radius: 5px;\n    }\n\n    & >>> h2 {\n      font-size: 24px;\n      font-weight: bold;\n      margin: 36px 0 16px;\n      border-bottom: 1px solid #ddd;\n    }\n\n    & >>> h3 {\n      font-size: 20px;\n      font-weight: bold;\n      margin: 30px 0 12px;\n    }\n\n    & >>> h4 {\n      font-size: 16px;\n      font-weight: bold;\n      margin: 24px 0 10px;\n    }\n\n    & >>> h5 {\n      font-size: 14px;\n      font-weight: bold;\n      margin: 20px 0 6px;\n    }\n\n    & >>> p {\n      line-height: 1.8;\n      letter-spacing: 0.2px;\n\n      & > code {\n        color: var(--color-text-main);\n        background-color: var(--color-bg-purple-light);\n        border: 1px solid var(--color-border);\n        border-radius: 3px;\n        margin: 0 2px;\n        padding: 2px 4px;\n      }\n    }\n\n    & >>> em {\n      font-style: italic;\n    }\n\n    & >>> ol {\n      list-style-type: decimal;\n      list-style-position: inside;\n\n      & > li {\n        line-height: 2;\n      }\n    }\n\n    & >>> ul > li {\n      line-height: 2;\n\n      &::before {\n        content: '-';\n        margin-right: 10px;\n      }\n    }\n\n    & >>> img {\n      max-width: 100%;\n      margin: 40px 0;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    & >>> video {\n      max-width: 100%;\n      margin: 40px 0;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    & >>> a {\n      color: #331cbf;\n      text-decoration: underline;\n      word-wrap: break-word;\n      word-break: break-all;\n    }\n\n    & >>> strong {\n      background: linear-gradient(transparent 92%, var(--color-accent) 92%);\n      font-weight: bold;\n    }\n\n    & >>> blockquote {\n      background: url('/images/icon_quote.svg') no-repeat 20px 10px, #eee;\n      background-size: 36px 36px;\n      padding: 50px 20px 20px;\n      margin: 20px 0;\n      border-radius: 3px;\n    }\n\n    & >>> pre {\n      border-radius: 3px;\n      margin: 20px 0;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      word-break: break-all;\n\n      & > code {\n        padding: 8px 16px;\n        border-radius: 3px;\n      }\n    }\n\n    & >>> iframe {\n      height: auto;\n      width: 100%;\n      aspect-ratio: 16 / 9;\n    }\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Footer.vue",
    "content": "<template>\n  <footer class=\"footer\">\n    <h2 class=\"visuallyHidden\">サイトマップ</h2>\n    <div class=\"container\">\n      <ul class=\"sitemap\">\n        <li class=\"sitemapListItem\">\n          <section class=\"categoryTitle\">\n            <h3 class=\"categoryTitle\">microCMSとは</h3>\n            <ul class=\"menuList\">\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/pricing\">料金</a>\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/for-business\"\n                  >microCMSの特徴</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://blog.microcms.io/vs-wordpress/\"\n                  target=\"_blank\"\n                  >WordPressとの違い</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://microcms.io/solutions/multitenant\"\n                  >活用方法 - マルチテナント</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <hr />\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/interviews\"\n                  >導入事例インタビュー</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/projects\"\n                  >導入事例一覧</a\n                >\n              </li>\n            </ul>\n          </section>\n        </li>\n\n        <li class=\"sitemapListItem\">\n          <section>\n            <h3 class=\"categoryTitle\">機能</h3>\n            <ul class=\"menuList\">\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/features/schema\"\n                  >エディタ</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://microcms.io/features/custom-field\"\n                  >カスタムフィールド</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://microcms.io/features/contents-api\"\n                  >コンテンツAPI</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://document.microcms.io/management-api/introduction\"\n                  >マネジメントAPI</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/features/link-api\"\n                  >APIデータ連携</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://microcms.io/features/image-api\"\n                  >画像編集</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/features/sdk\"\n                  >SDK</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://microcms.io/features/authority\"\n                  >権限管理</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/features/workflow\"\n                  >ワークフロー</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/features/security\"\n                  >セキュリティ</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/features/support\"\n                  >サポート・トレーニング</a\n                >\n              </li>\n            </ul>\n          </section>\n        </li>\n\n        <li class=\"sitemapListItem\">\n          <section>\n            <h3 class=\"categoryTitle\">サポート</h3>\n            <ul class=\"menuList\">\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://help.microcms.io/ja/knowledge\"\n                  target=\"_blank\"\n                  >ヘルプ</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://document.microcms.io/manual/getting-started\"\n                  target=\"_blank\"\n                  >microCMSの始め方</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://blog.microcms.io/category/update/page/1/\"\n                  target=\"_blank\"\n                  >更新情報</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://document.microcms.io/\"\n                  target=\"_blank\"\n                  >ドキュメント</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://blog.microcms.io/\"\n                  target=\"_blank\"\n                  >ブログ</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://templates.microcms.io/\"\n                  target=\"_blank\"\n                  >テンプレート</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://github.com/microcmsio\"\n                  target=\"_blank\"\n                  >GitHub</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://roadmap.microcms.co.jp/\"\n                  target=\"_blank\"\n                  >ロードマップ</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://status.microcms.io/\"\n                  target=\"_blank\"\n                  >ステータス</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://www.youtube.com/channel/UCjdOq0rAB8Or1uHio9N0_pQ\"\n                  target=\"_blank\"\n                  >動画講座</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://microcms.io/community\"\n                  target=\"_blank\"\n                  >コミュニティ</a\n                >\n              </li>\n            </ul>\n          </section>\n        </li>\n\n        <li class=\"sitemapListItem\">\n          <section>\n            <h3 class=\"categoryTitle\">資料請求・セミナー</h3>\n            <ul class=\"menuList\">\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/ebook\"\n                  >お役立ち資料</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <hr />\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/seminars\"\n                  >セミナー情報</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/events\"\n                  >エンジニア向けイベント情報</a\n                >\n              </li>\n            </ul>\n            <h3 class=\"categoryTitle\">メディアキット</h3>\n            <ul class=\"menuList\">\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/logo\"\n                  >ロゴガイドライン</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/ui-screenshot\"\n                  >UIスクリーンショット</a\n                >\n              </li>\n            </ul>\n          </section>\n        </li>\n\n        <li class=\"sitemapListItem\">\n          <section>\n            <h3 class=\"categoryTitle\">お問い合わせ</h3>\n            <ul class=\"menuList\">\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/contact\"\n                  >新規導入に関するご相談</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://microcms.io/partners#consultation\"\n                  >パートナー紹介のご相談</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/contact-support\"\n                  >ご利用中のサービスに関するご相談</a\n                >\n              </li>\n            </ul>\n            <h3 class=\"categoryTitle\">パートナー</h3>\n            <ul class=\"menuList\">\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/for-partners\"\n                  >パートナーになる</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a class=\"menuLink\" href=\"https://microcms.io/partners\"\n                  >パートナーを探す</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <hr />\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://app.microcms.io/signin\"\n                  target=\"_blank\"\n                  >ログイン</a\n                >\n              </li>\n              <li class=\"menuListItem\">\n                <a\n                  class=\"menuLink\"\n                  href=\"https://app.microcms.io/signup\"\n                  target=\"_blank\"\n                  >新規登録</a\n                >\n              </li>\n            </ul>\n          </section>\n        </li>\n      </ul>\n    </div>\n\n    <ul class=\"lists\">\n      <li class=\"list\">\n        <a href=\"https://microcms.co.jp\" target=\"_blank\">運営会社</a>\n      </li>\n      <li class=\"list\">\n        <a href=\"https://microcms.co.jp/news\" target=\"_blank\">ニュース</a>\n      </li>\n      <li class=\"list\">\n        <a href=\"https://microcms.io/law\">特定商取引法に基づく表記</a>\n      </li>\n      <li class=\"list\">\n        <a href=\"https://microcms.io/terms\">利用規約</a>\n      </li>\n      <li class=\"list\">\n        <a href=\"https://microcms.io/policy\">プライバシーポリシー</a>\n      </li>\n      <li class=\"list\">\n        <a href=\"https://microcms.io/security-policy\">情報セキュリティ方針</a>\n      </li>\n    </ul>\n    <p class=\"cr\">Copyright © microcms.io All rights reserved.</p>\n  </footer>\n</template>\n\n<style scoped>\n.visuallyHidden {\n  position: absolute;\n  top: 0;\n  left: 0;\n  white-space: nowrap;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  border: 0;\n  padding: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  margin: -1px;\n}\n\n@media (min-width: 980px) {\n  .footer {\n    position: relative;\n    padding: 80px 40px 60px;\n    z-index: 10;\n    color: #fff;\n    background-color: #2b2c30;\n    margin-top: 120px;\n  }\n\n  .container {\n    max-width: 1200px;\n    margin: auto;\n  }\n\n  .sitemap {\n    display: flex;\n  }\n\n  .sitemapListItem {\n    width: calc(100% / 5);\n    padding-right: 15px;\n  }\n\n  .categoryTitle {\n    font-size: 18px;\n    margin-bottom: 20px;\n  }\n\n  .menuList {\n    hr {\n      width: 80%;\n      margin: 20px auto 20px 0;\n    }\n\n    + .categoryTitle {\n      margin-top: 40px;\n    }\n  }\n\n  .menuLink {\n    font-size: 14px;\n    color: #ddd;\n    display: inline-block;\n    padding: 9px 0;\n  }\n\n  .lists {\n    max-width: 1200px;\n    margin: 40px auto auto;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n\n  .list {\n    font-size: 14px;\n    white-space: nowrap;\n    margin-right: 30px;\n\n    a {\n      color: #ddd;\n    }\n  }\n\n  .cr {\n    max-width: 1200px;\n    margin: 20px auto auto;\n    color: #616269;\n    font-size: 14px;\n  }\n}\n\n@media (max-width: 980px) {\n  .footer {\n    position: relative;\n    padding: 80px 30px 50px;\n    z-index: 10;\n    color: #fff;\n    background-color: #2b2c30;\n    margin-top: 20px;\n  }\n\n  .container {\n    max-width: 1200px;\n    margin: auto;\n  }\n\n  .sitemap {\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: 30px;\n  }\n\n  .sitemapListItem {\n    width: calc((100% - 15px - 15px) / 2);\n    padding-right: 15px;\n    margin-bottom: 40px;\n  }\n\n  .categoryTitle {\n    font-size: 18px;\n    margin-bottom: 20px;\n  }\n\n  .menuList {\n    hr {\n      width: 80%;\n      margin: 20px auto 20px 0;\n    }\n    + .categoryTitle {\n      margin-top: 40px;\n    }\n  }\n\n  .menuLink {\n    font-size: 14px;\n    color: #ddd;\n    display: inline-block;\n    padding: 10px 0;\n  }\n\n  .cr {\n    font-size: 12px;\n    margin-top: 20px;\n    color: #616269;\n  }\n\n  .lists {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n\n  .list {\n    font-size: 14px;\n    white-space: nowrap;\n    margin-right: 30px;\n\n    a {\n      color: #fff;\n    }\n  }\n}\n\n@media screen and (max-width: 480px) {\n  .footer {\n    padding: 80px 30px 100px;\n  }\n\n  .sitemap {\n    margin-bottom: 0;\n  }\n\n  .sitemapListItem {\n    width: 100%;\n  }\n\n  .lists {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .list {\n    a {\n      display: inline-block;\n      padding: 10px 0;\n    }\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Header.vue",
    "content": "<template>\n  <div>\n    <header class=\"header\">\n      <h1 class=\"logo\">\n        <a href=\"https://microcms.io\">\n          <img\n            class=\"logoImg\"\n            src=\"/images/logo.svg\"\n            width=\"422\"\n            height=\"80\"\n            alt=\"microCMS\"\n          />\n        </a>\n      </h1>\n      <button class=\"menuBtn\" @click=\"toggleOpen()\">\n        <img src=\"/images/icon_menu.svg\" width=\"24\" height=\"24\" alt=\"menu\" />\n      </button>\n      <div v-if=\"open\" class=\"mask\" @click=\"setOpen(false)\"></div>\n\n      <div class=\"menu\" :class=\"{ isOpen: open }\">\n        <ul class=\"lists isMobile\">\n          <li class=\"list\">\n            <a href=\"https://microcms.io/contact\">新規導入に関するご相談</a>\n          </li>\n          <li class=\"list\">\n            <a href=\"https://microcms.io/contact-support\"\n              >ご利用中のサービスに関するご相談</a\n            >\n          </li>\n          <li class=\"list\">\n            <a href=\"https://microcms.io/pricing\">料金プラン</a>\n          </li>\n          <li class=\"list\">\n            <a href=\"https://microcms.io/projects\">導入事例一覧</a>\n          </li>\n          <li class=\"list\">\n            <a href=\"https://help.microcms.io/ja/knowledge\" target=\"_blank\"\n              >ヘルプ</a\n            >\n          </li>\n          <li class=\"list\">\n            <a\n              href=\"https://blog.microcms.io/category/update/page/1/\"\n              target=\"_blank\"\n              >更新情報</a\n            >\n          </li>\n          <li class=\"list\">\n            <a href=\"https://blog.microcms.io/\" target=\"_blank\">ブログ</a>\n          </li>\n          <li class=\"list\">\n            <a href=\"https://document.microcms.io/\" target=\"_blank\"\n              >ドキュメント</a\n            >\n          </li>\n          <li class=\"list\">\n            <a href=\"https://microcms.io/seminars\">セミナー情報</a>\n          </li>\n          <li class=\"list\">\n            <a href=\"https://microcms.io/ebook\">お役立ち資料</a>\n          </li>\n          <li class=\"list\">\n            <a href=\"https://templates.microcms.io\">テンプレート</a>\n          </li>\n        </ul>\n\n        <ul class=\"lists isDesktop\">\n          <li\n            v-for=\"(menu, index) in desktopHeaderMenu\"\n            :key=\"index\"\n            class=\"list\"\n            @mouseover=\"handleOpenMenu(index)\"\n            @mouseleave=\"handleCloseMenu(index)\"\n          >\n            <component\n              :is=\"menu.isDropDown ? 'button' : 'a'\"\n              :type=\"menu.isDropDown ? 'button' : ''\"\n              :href=\"menu.isDropDown ? '' : menu.path\"\n              :class=\"menu.isDropDown ? 'dropDown' : ''\"\n              v-text=\"menu.name\"\n            />\n\n            <!-- dropdown menu -->\n            <template v-if=\"menu.contents.length > 0\">\n              <transition name=\"fade\">\n                <ul v-show=\"openDropDownMenu[index]\" class=\"dropDownMenu\">\n                  <li\n                    v-for=\"(content, contentIndex) in menu.contents\"\n                    :key=\"contentIndex\"\n                    class=\"dropDownMenuList\"\n                  >\n                    <a :href=\"content.path\" v-text=\"content.name\" />\n                  </li>\n                </ul>\n              </transition>\n            </template>\n          </li>\n        </ul>\n\n        <ul class=\"lists authLinks\">\n          <li class=\"list authLinksItem\">\n            <a class=\"signin\" href=\"https://app.microcms.io/signin\">ログイン</a>\n          </li>\n          <li class=\"list noMargin\">\n            <a class=\"signup\" :href=\"`https://app.microcms.io${params}`\"\n              >無料ではじめる</a\n            >\n          </li>\n        </ul>\n      </div>\n    </header>\n    <div class=\"empty\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      params: this.params || '',\n      open: false,\n      openDropDownMenu: [],\n      desktopHeaderMenu: [\n        {\n          name: '機能',\n          path: '',\n          isDropDown: true,\n          contents: [\n            {\n              name: 'エディタ',\n              path: 'https://microcms.io/features/schema',\n            },\n            {\n              name: 'カスタムフィールド',\n              path: 'https://microcms.io/features/custom-field',\n            },\n            {\n              name: 'コンテンツAPI',\n              path: 'https://microcms.io/features/contents-api',\n            },\n            {\n              name: 'マネジメントAPI',\n              path: 'https://document.microcms.io/management-api/introduction',\n            },\n            {\n              name: 'APIデータ連携',\n              path: 'https://microcms.io/features/link-api',\n            },\n            {\n              name: '画像編集',\n              path: 'https://microcms.io/features/image-api',\n            },\n            {\n              name: 'SDK',\n              path: 'https://microcms.io/features/sdk',\n            },\n            {\n              name: '権限管理',\n              path: 'https://microcms.io/features/authority',\n            },\n            {\n              name: 'ワークフロー',\n              path: 'https://microcms.io/features/workflow',\n            },\n            {\n              name: 'セキュリティ',\n              path: 'https://microcms.io/features/security',\n            },\n            {\n              name: 'サポート',\n              path: 'https://microcms.io/features/support',\n            },\n          ],\n        },\n        {\n          name: 'リソース',\n          path: '',\n          isDropDown: true,\n          contents: [\n            {\n              name: '導入事例一覧',\n              path: 'https://microcms.io/projects',\n            },\n            {\n              name: '導入事例インタビュー',\n              path: 'https://microcms.io/interviews',\n            },\n            {\n              name: 'セミナー情報',\n              path: 'https://microcms.io/seminars',\n            },\n            {\n              name: 'イベント情報',\n              path: 'https://microcms.io/events',\n            },\n            {\n              name: 'ドキュメント',\n              path: 'https://document.microcms.io/',\n            },\n            {\n              name: 'ヘルプ',\n              path: 'https://help.microcms.io/ja/knowledge',\n            },\n            {\n              name: 'ブログ',\n              path: 'https://blog.microcms.io/',\n            },\n            {\n              name: 'テンプレート',\n              path: 'https://templates.microcms.io/',\n            },\n          ],\n        },\n        {\n          name: 'パートナー',\n          path: '',\n          isDropDown: true,\n          contents: [\n            {\n              name: 'パートナーになる',\n              path: 'https://microcms.io/for-partners',\n            },\n            {\n              name: 'パートナーを探す',\n              path: 'https://microcms.io/partners',\n            },\n          ],\n        },\n        {\n          name: '料金プラン',\n          path: 'https://microcms.io/pricing',\n          isDropDown: false,\n          contents: [],\n        },\n        {\n          name: 'お役立ち資料',\n          path: 'https://microcms.io/ebook',\n          isDropDown: false,\n          contents: [],\n        },\n        {\n          name: 'お問い合わせ',\n          path: '',\n          isDropDown: true,\n          contents: [\n            {\n              name: '新規導入に関するご相談',\n              path: 'https://microcms.io/contact',\n            },\n            {\n              name: 'パートナー紹介のご相談',\n              path: 'https://microcms.io/partners#consultation',\n            },\n            {\n              name: 'ご利用中のサービスに関するご相談',\n              path: 'https://microcms.io/contact-support',\n            },\n          ],\n        },\n      ],\n    };\n  },\n  created() {\n    this.openDropDownMenu = Array(this.desktopHeaderMenu.length).fill(false);\n  },\n  mounted() {\n    this.params = location.search || '';\n  },\n  methods: {\n    setOpen(value) {\n      this.open = value;\n    },\n    toggleOpen() {\n      this.open = !this.open;\n    },\n    handleOpenMenu(index) {\n      this.openDropDownMenu.splice(index, 1, true);\n    },\n    handleCloseMenu(index) {\n      this.openDropDownMenu.splice(index, 1, false);\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 1240px) {\n  .header {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 40px;\n    z-index: 20;\n    border-bottom: 1px solid var(--color-border);\n    background-color: #fff;\n    font-size: 14px;\n  }\n\n  .empty {\n    height: 80px;\n    margin-bottom: 40px;\n  }\n\n  .logo {\n    padding: 8px 0;\n    margin-right: 30px;\n\n    a {\n      display: block;\n      width: 160px;\n      height: 30.3px;\n    }\n  }\n\n  .logoImg {\n    width: 160px;\n    height: auto;\n  }\n\n  .menuBtn {\n    display: none;\n  }\n\n  .menu {\n    display: flex;\n    padding: 8px 0;\n  }\n\n  .lists {\n    display: flex;\n    align-items: center;\n\n    &:first-child::after {\n      content: '';\n      width: 1px;\n      height: 30px;\n      background-color: var(--color-text-off);\n      margin-right: 40px;\n    }\n\n    &.isMobile {\n      display: none;\n    }\n\n    &.isDesktop {\n      display: flex;\n    }\n\n    &.authLinks {\n      margin-left: 10px;\n    }\n  }\n\n  .list {\n    margin-right: 22px;\n    padding: 8px 0;\n    white-space: nowrap;\n    position: relative;\n\n    &.noMargin {\n      margin: 0;\n    }\n\n    &.authLinksItem {\n      margin-right: 16px;\n    }\n\n    a,\n    a:visited {\n      color: var(--color-text-main);\n\n      &.signup {\n        border-radius: 4px;\n        background-color: var(--color-primary);\n        color: #fff;\n        text-align: center;\n        padding: 12px 34px;\n        font-size: 16px;\n      }\n\n      &.signin {\n        border-radius: 4px;\n        border: 1px solid var(--color-primary);\n        color: var(--color-primary);\n        text-align: center;\n        padding: 11px 32px;\n        font-size: 16px;\n      }\n    }\n  }\n\n  .dropDown {\n    display: inline-block;\n    padding-right: 20px;\n    position: relative;\n    appearance: none;\n    border: none;\n    background: inherit;\n    font-size: inherit;\n\n    &::after {\n      content: '';\n      display: inline-block;\n      width: 16px;\n      height: 16px;\n      margin-left: 6px;\n      background: url('/images/icon_arrow_bottom.svg') center center no-repeat;\n      background-size: contain;\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  .dropDownMenu {\n    font-size: 14px;\n    display: inline-block;\n    position: absolute;\n    background-color: #fff;\n    top: 35px;\n    right: 0px;\n    padding: 8px 16px;\n    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);\n    border-radius: 5px;\n    text-align: center;\n  }\n\n  .dropDownMenuList {\n    a {\n      display: block;\n      transition: 0.3s all ease-in-out;\n      padding: 10px 0;\n\n      &:hover {\n        opacity: 0.8;\n      }\n    }\n  }\n\n  .fade-enter-active,\n  .fade-leave-active {\n    transition: all 0.3s;\n  }\n\n  .fade-enter {\n    transform: translateY(-10px);\n  }\n\n  .fade-enter,\n  .fade-leave-to {\n    opacity: 0;\n  }\n}\n\n@media (max-width: 1240px) {\n  .header {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background-color: #fff;\n    padding: 16px;\n    z-index: 20;\n    border-bottom: 1px solid var(--color-border);\n  }\n\n  .empty {\n    height: 61px;\n  }\n\n  .logo {\n    display: inline-block;\n    height: 28px;\n  }\n\n  .logoImg {\n    width: auto;\n    height: 28px;\n  }\n\n  .menuBtn {\n    border: none;\n    background: none;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n  }\n\n  .menu {\n    position: absolute;\n    left: 0;\n    top: 61px;\n    display: none;\n    flex-direction: column-reverse;\n    width: 100%;\n    background-color: #fff;\n    border-bottom: 1px solid var(--color-border);\n    z-index: 2001;\n    padding-top: 8px;\n\n    &.isOpen {\n      display: flex;\n    }\n  }\n\n  .lists {\n    padding: 8px 0;\n\n    &:first-child {\n      padding-top: 0;\n    }\n\n    &.isMobile {\n      display: block;\n    }\n\n    &.isDesktop {\n      display: none;\n    }\n\n    &.isMobileReverse {\n      display: flex;\n      flex-direction: column-reverse;\n    }\n\n    &.authLinks {\n      display: flex;\n      flex-direction: row-reverse;\n      padding-right: 10px;\n      padding-left: 10px;\n      .list {\n        width: calc(100% / 2);\n        padding: 0 8px;\n      }\n    }\n  }\n\n  .list {\n    padding: 0 16px;\n    white-space: nowrap;\n\n    a {\n      display: block;\n      color: var(--color-text-main);\n      padding: 8px 0;\n\n      &.signup {\n        border-radius: 4px;\n        background-color: var(--color-primary);\n        color: #fff;\n        text-align: center;\n        font-weight: bold;\n        margin-bottom: 8px;\n      }\n\n      &.signin {\n        border-radius: 4px;\n        color: var(--color-primary);\n        border: 1px solid var(--color-primary);\n        text-align: center;\n        font-weight: bold;\n        margin-bottom: 8px;\n      }\n    }\n\n    &:last-child a {\n      border-bottom: none;\n    }\n  }\n\n  .mask {\n    position: fixed;\n    top: 61px;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n    z-index: 2000;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Latest.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <h1 class=\"pageTitle\">最新の記事</h1>\n    <ul>\n      <li v-for=\"content in contents\" :key=\"content.id\" class=\"list\">\n        <nuxt-link :to=\"`/${content.id}`\" class=\"link\">\n          {{ content.title }}\n        </nuxt-link>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    contents: {\n      type: Array,\n      required: false,\n      default: () => [],\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 1160px) {\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    border-bottom: 1px solid #eee;\n\n    &:last-child {\n      border-bottom: none;\n    }\n  }\n\n  .link {\n    display: block;\n    padding: 10px;\n  }\n}\n@media (min-width: 820px) and (max-width: 1160px) {\n  .wrapper {\n    padding: 40px 0;\n  }\n\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    border-bottom: 1px solid #eee;\n\n    &:last-child {\n      border-bottom: none;\n    }\n  }\n\n  .link {\n    display: block;\n    padding: 10px;\n  }\n}\n@media (max-width: 820px) {\n  .wrapper {\n    padding: 40px 0;\n  }\n\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    border-bottom: 1px solid #eee;\n\n    &:last-child {\n      border-bottom: none;\n    }\n  }\n\n  .link {\n    display: block;\n    padding: 10px;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Logo.vue",
    "content": "<template>\n  <svg\n    class=\"NuxtLogo\"\n    width=\"245\"\n    height=\"180\"\n    viewBox=\"0 0 452 342\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z\"\n      fill=\"#00C58E\"\n    />\n    <path\n      d=\"M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z\"\n      fill=\"#108775\"\n    />\n    <path\n      d=\"M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z\"\n      fill=\"#2F495E\"\n    />\n  </svg>\n</template>\n\n<style>\n.NuxtLogo {\n  animation: 1s appear;\n  margin: auto;\n}\n\n@keyframes appear {\n  0% {\n    opacity: 0;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Meta.vue",
    "content": "<template>\n  <div>\n    <div class=\"upper\">\n      <template v-if=\"category && isSinglePage\">\n        <nuxt-link class=\"category\" :to=\"`/category/${category.id}/page/1`\">{{\n          category.name\n        }}</nuxt-link>\n      </template>\n      <template v-else-if=\"category\">\n        <span class=\"category\">{{ category.name }}</span>\n      </template>\n\n      <ul v-if=\"tags\" class=\"tag\">\n        <li v-for=\"tag in tags\" :key=\"tag.id\">\n          <template v-if=\"isSinglePage\">\n            <nuxt-link :to=\"`/tag/${tag.id}/page/1`\">{{ tag.name }}</nuxt-link>\n          </template>\n          <template v-else>\n            <span>{{ tag.name }}</span>\n          </template>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"meta\">\n      <span class=\"timestamp\" title=\"公開日\">\n        <img src=\"/images/icon_clock.svg\" width=\"20\" height=\"20\" alt />\n        <time :datetime=\"$dayjs(createdAt).format('YYYY-MM-DD')\">\n          {{ $dayjs(createdAt).format('YYYY/MM/DD') }}\n        </time>\n      </span>\n      <span v-if=\"isRevised\" class=\"timestamp\" title=\"更新日\">\n        <img src=\"/images/icon_update.svg\" width=\"20\" height=\"20\" alt />\n        <time :datetime=\"$dayjs(revisedAt).format('YYYY-MM-DD')\">\n          {{ $dayjs(revisedAt).format('YYYY/MM/DD') }}\n        </time>\n      </span>\n      <span v-if=\"author\" class=\"author\">\n        <img src=\"/images/icon_author.svg\" width=\"20\" height=\"21\" alt />\n        {{ author.name }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    createdAt: {\n      type: String,\n      required: true,\n    },\n    revisedAt: {\n      type: String,\n      required: false,\n      default: undefined,\n    },\n    author: {\n      type: Object,\n      required: false,\n      default: undefined,\n    },\n    category: {\n      type: Object,\n      required: false,\n      default: undefined,\n    },\n    tags: {\n      type: Array,\n      required: false,\n      default: undefined,\n    },\n    isSinglePage: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n  },\n  computed: {\n    isRevised() {\n      if (this.revisedAt === undefined) {\n        return false;\n      }\n      return (\n        this.$dayjs(this.revisedAt).format('YYYY-MM-DD') !==\n        this.$dayjs(this.createdAt).format('YYYY-MM-DD')\n      );\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 600px) {\n  .upper {\n    display: flex;\n    align-items: center;\n    margin-top: 10px;\n  }\n\n  .meta {\n    padding: 10px 0 40px;\n    display: flex;\n    align-items: center;\n  }\n\n  .category {\n    display: inline-block;\n    padding: 2px 8px;\n    border: 1px solid #331cbf;\n    color: #331cbf;\n    white-space: nowrap;\n    border-radius: 3px;\n    font-size: 14px;\n    margin: 0 0 2px;\n  }\n\n  .tag {\n    margin: 0 0 0 16px;\n\n    li {\n      color: #331cbf;\n      font-size: 16px;\n      display: inline-block;\n      margin-right: 20px;\n\n      a,\n      span {\n        color: inherit;\n        display: inline-block;\n        padding-left: 22px;\n        position: relative;\n\n        &::before {\n          content: '';\n          display: inline-block;\n          background: url('/images/icon_tag_navy.svg') center no-repeat;\n          background-size: contain;\n          width: 16px;\n          height: 16px;\n          position: absolute;\n          top: 50%;\n          left: 0;\n          transform: translateY(-50%);\n        }\n      }\n    }\n  }\n\n  .timestamp {\n    display: inline-flex;\n    align-items: center;\n    color: #616269;\n\n    margin-right: 20px;\n    white-space: nowrap;\n\n    img {\n      margin-right: 6px;\n      height: 16px;\n      width: auto;\n    }\n  }\n\n  .author {\n    display: inline-flex;\n    align-items: center;\n    color: #616269;\n    white-space: nowrap;\n\n    img {\n      margin-right: 6px;\n      height: 16px;\n      width: auto;\n    }\n  }\n}\n@media (max-width: 600px) {\n  .meta {\n    padding: 4px 0 30px;\n    font-size: 14px;\n  }\n\n  .category {\n    display: inline-block;\n    padding: 2px 8px;\n    border: 1px solid #331cbf;\n    color: #331cbf;\n    white-space: nowrap;\n    border-radius: 3px;\n    font-size: 14px;\n    margin: 10px 0 4px;\n  }\n\n  .tag {\n    margin: 2px 0 4px;\n\n    li {\n      color: #331cbf;\n      font-size: 14px;\n      display: inline-block;\n      margin-right: 16px;\n\n      a,\n      span {\n        color: inherit;\n        display: inline-block;\n        padding-left: 18px;\n        position: relative;\n\n        &::before {\n          content: '';\n          display: inline-block;\n          background: url('/images/icon_tag_navy.svg') center no-repeat;\n          background-size: contain;\n          width: 12px;\n          height: 12px;\n          position: absolute;\n          top: 50%;\n          left: 0;\n          transform: translateY(-50%);\n        }\n      }\n    }\n  }\n\n  .timestamp {\n    display: inline-flex;\n    align-items: center;\n    color: #616269;\n    margin-right: 20px;\n    white-space: nowrap;\n\n    img {\n      margin-right: 6px;\n      height: 14px;\n      width: auto;\n    }\n  }\n\n  .author {\n    display: inline-flex;\n    align-items: center;\n    color: #616269;\n    white-space: nowrap;\n\n    img {\n      margin-right: 6px;\n      height: 14px;\n      width: auto;\n    }\n  }\n}\n</style>\n"
  },
  {
    "path": "components/NextBlogNavigation.vue",
    "content": "<template>\n  <div v-if=\"previous || next\" class=\"navigation\">\n    <ul>\n      <li class=\"previous\">\n        <nuxt-link v-if=\"previous && previous.id\" :to=\"`/${previous.id}`\">{{\n          previous.title\n        }}</nuxt-link>\n      </li>\n      <li class=\"next\">\n        <nuxt-link v-if=\"next && next.id\" :to=\"`/${next.id}`\">{{\n          next.title\n        }}</nuxt-link>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    previous: {\n      type: Object,\n      required: false,\n      default: undefined,\n    },\n    next: {\n      type: Object,\n      required: false,\n      default: undefined,\n    },\n  },\n};\n</script>\n\n<style scoped>\n.navigation {\n  margin: 60px 0;\n\n  ul {\n    display: flex;\n    justify-content: space-between;\n\n    li {\n      width: 40%;\n      position: relative;\n\n      a {\n        color: var(--color-purple);\n        text-decoration: underline;\n      }\n    }\n\n    .previous {\n      padding-left: 32px;\n\n      ::before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 8px;\n        left: 0;\n        width: 8px;\n        height: 8px;\n        border-bottom: 2px solid var(--color-purple);\n        border-left: 2px solid var(--color-purple);\n        transform: translateX(50%) rotate(45deg);\n      }\n    }\n\n    .next {\n      padding-right: 32px;\n      text-align: right;\n\n      ::before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 8px;\n        right: 0;\n        width: 8px;\n        height: 8px;\n        border-top: 2px solid var(--color-purple);\n        border-right: 2px solid var(--color-purple);\n        transform: translateX(-50%) rotate(45deg);\n      }\n    }\n  }\n}\n\n@media (max-width: 600px) {\n  .navigation {\n    font-size: 14px;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Pagination.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <ul class=\"pager\">\n      <li v-if=\"current > 1\" class=\"page arrow\">\n        <nuxt-link :to=\"getPath(current - 1)\">\n          <img\n            src=\"/images/icon_arrow_left.svg\"\n            width=\"24\"\n            height=\"24\"\n            alt=\"前のページへ\"\n          />\n        </nuxt-link>\n      </li>\n      <li v-if=\"3 < current\" class=\"page\">\n        <nuxt-link :to=\"getPath(1)\">\n          1\n        </nuxt-link>\n      </li>\n      <li v-if=\"4 < current\" class=\"omission\">\n        ...\n      </li>\n      <li\n        v-for=\"p in pager\"\n        v-show=\"current - 3 <= p && p <= current + 1\"\n        :key=\"p\"\n        class=\"page\"\n        :class=\"{ active: current === p + 1 }\"\n      >\n        <nuxt-link :to=\"getPath(p + 1)\">\n          {{ p + 1 }}\n        </nuxt-link>\n      </li>\n      <li v-if=\"current + 3 < pager.length\" class=\"omission\">\n        ...\n      </li>\n      <li v-if=\"current + 2 < pager.length\" class=\"page\">\n        <nuxt-link :to=\"getPath(pager.length)\">\n          {{ pager.length }}\n        </nuxt-link>\n      </li>\n      <li v-if=\"current < pager.length\" class=\"page arrow\">\n        <nuxt-link :to=\"getPath(current + 1)\">\n          <img\n            src=\"/images/icon_arrow_right.svg\"\n            width=\"24\"\n            height=\"24\"\n            alt=\"次のページへ\"\n          />\n        </nuxt-link>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    pager: {\n      type: Array,\n      required: false,\n      default: () => [],\n    },\n    current: {\n      type: Number,\n      required: true,\n    },\n    category: {\n      type: Object,\n      required: false,\n      default: undefined,\n    },\n    tag: {\n      type: Object,\n      required: false,\n      default: undefined,\n    },\n    author: {\n      type: Object,\n      required: false,\n      default: undefined,\n    },\n  },\n  methods: {\n    getPath(p) {\n      if (this.category !== undefined) {\n        return `/category/${this.category.id}/page/${p}`;\n      } else if (this.tag !== undefined) {\n        return `/tag/${this.tag.id}/page/${p}`;\n      } else if (this.author !== undefined) {\n        return `/author/${this.author.id}/page/${p}`;\n      } else {\n        return `/page/${p}`;\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n.wrapper {\n  padding: 16px 0;\n}\n\n.pager {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  padding: 40px 0 0;\n}\n\n.omission {\n  color: var(--color-text-off);\n  margin: 4px 12px;\n}\n\n.page {\n  width: 40px;\n  height: 40px;\n  border-radius: 5px;\n  margin: 4px;\n\n  &.arrow {\n    margin: 4px 12px;\n  }\n\n  &.active {\n    background-color: var(--color-blue);\n\n    a,\n    a:hover {\n      color: #fff;\n    }\n  }\n\n  a {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    color: var(--color-text-sub);\n\n    &:hover {\n      color: var(--color-blue);\n    }\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Partner.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <div v-if=\"partner\" class=\"container\">\n      <picture v-if=\"partner.logo\">\n        <source\n          type=\"image/webp\"\n          :data-srcset=\"partner.logo.url + '?fit=crop&w=100&h=100&fm=webp'\"\n        />\n        <img\n          :data-src=\"partner.logo.url + '?fit=crop&w=100&h=100&q=100'\"\n          class=\"image lazyload\"\n          alt\n        />\n      </picture>\n      <dl class=\"content\">\n        <dt class=\"name\">\n          <span class=\"company\">{{ partner.company }}</span>\n          <span class=\"label\">認定パートナー</span>\n        </dt>\n        <dd v-if=\"partner.description\" class=\"text\">\n          {{ partner.description }}\n        </dd>\n        <dd v-if=\"partner.url\" class=\"url\">\n          <a :href=\"partner.url\" target=\"_blank\" rel=\"noopener noreferrer\">{{\n            partner.url\n          }}</a>\n        </dd>\n        <dd>\n          <a\n            class=\"button\"\n            :href=\"`https://microcms.io/partners/${partner.id}`\"\n            target=\"partner\"\n            >制作を依頼する</a\n          >\n        </dd>\n      </dl>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    partner: {\n      type: Object,\n      required: false,\n      default: undefined,\n    },\n  },\n};\n</script>\n\n<style scoped>\n.container {\n  display: flex;\n}\n\n.content {\n  flex: 1;\n}\n\n.name {\n  display: flex;\n  align-items: center;\n  font-weight: bold;\n  flex-wrap: wrap;\n}\n\n.company {\n  margin-right: 8px;\n  margin-bottom: 10px;\n}\n\n.label {\n  border: 1px solid var(--color-accent);\n  border-radius: 3px;\n  padding: 2px 8px;\n  font-size: 12px;\n  color: var(--color-accent);\n  white-space: nowrap;\n  margin-bottom: 10px;\n}\n\n.text {\n  font-size: 14px;\n  margin-bottom: 4px;\n}\n\n.url {\n  font-size: 14px;\n  margin-bottom: 10px;\n\n  a {\n    color: var(--color-blue);\n  }\n}\n\n.button {\n  display: inline-block;\n  border: none;\n  border-radius: 5px;\n  background: linear-gradient(to right bottom, #5630af, #3067af);\n  color: #fff;\n  text-align: center;\n  font-size: 16px;\n  font-weight: bold;\n  padding: 8px 24px;\n  cursor: pointer;\n  margin-top: 10px;\n\n  &:hover {\n    background: linear-gradient(to right bottom, #46209f, #20579f);\n  }\n}\n\n@media (min-width: 600px) {\n  .wrapper {\n    position: relative;\n    padding: 30px 20px 20px;\n  }\n  .title {\n    position: absolute;\n    top: 0;\n    right: 20px;\n    background-color: #2b2c30;\n    color: #fff;\n    font-size: 14px;\n    padding: 2px 10px;\n    border-radius: 0 0 5px 5px;\n  }\n  .image {\n    width: 100px;\n    height: 100px;\n    margin-right: 20px;\n  }\n}\n\n@media (max-width: 600px) {\n  .wrapper {\n    position: relative;\n    padding: 30px 0px 20px;\n  }\n  .title {\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: #2b2c30;\n    color: #fff;\n    font-size: 14px;\n    padding: 2px 10px;\n    border-radius: 0 0 5px 5px;\n  }\n  .image {\n    width: 60px;\n    height: 60px;\n    margin-right: 10px;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/PopularArticles.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <h1 class=\"pageTitle\">人気の記事</h1>\n    <ul>\n      <li v-for=\"content in contents\" :key=\"content.id\" class=\"list\">\n        <nuxt-link :to=\"`/${content.id}/`\" class=\"link\">\n          <picture v-if=\"content.ogimage\">\n            <source\n              type=\"image/webp\"\n              :data-srcset=\"content.ogimage.url + '?w=560&fm=webp'\"\n            />\n            <img\n              :data-src=\"content.ogimage.url + '?w=560&q=100'\"\n              :width=\"content.ogimage.width\"\n              :height=\"content.ogimage.height\"\n              class=\"image lazyload\"\n              alt\n            />\n          </picture>\n          <picture v-else>\n            <source type=\"image/webp\" :data-srcset=\"content.defaultOgimage\" />\n            <img\n              :data-src=\"content.defaultOgimage\"\n              class=\"image lazyload\"\n              alt\n            />\n          </picture>\n          <p class=\"title\">{{ content.title }}</p>\n        </nuxt-link>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    contents: {\n      type: Array,\n      required: false,\n      default: () => [],\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 1160px) {\n  .wrapper {\n    padding-bottom: 40px;\n  }\n\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    margin-bottom: 10px;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .link {\n    display: block;\n    padding: 10px;\n  }\n\n  .image {\n    width: 280px;\n    height: auto;\n    border-radius: 5px;\n  }\n\n  .title {\n    padding-top: 10px;\n  }\n}\n@media (min-width: 520px) and (max-width: 1160px) {\n  .wrapper {\n    padding-top: 40px;\n  }\n\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    margin-bottom: 10px;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .link {\n    display: flex;\n    padding: 10px;\n  }\n\n  .image {\n    width: 140px;\n    height: auto;\n    border-radius: 5px;\n  }\n\n  .title {\n    padding-left: 20px;\n  }\n}\n@media (max-width: 520px) {\n  .wrapper {\n    padding: 40px 0;\n  }\n\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    margin-bottom: 10px;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .link {\n    display: block;\n    padding: 10px;\n  }\n\n  .image {\n    width: 100%;\n    height: auto;\n    border-radius: 5px;\n  }\n\n  .title {\n    padding-top: 10px;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Post.vue",
    "content": "<template>\n  <div class=\"post\" v-html=\"body\"></div>\n</template>\n\n<script>\nexport default {\n  props: {\n    body: {\n      type: String,\n      required: true,\n      default: '',\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 600px) {\n  .post {\n    & >>> h1 {\n      font-size: 30px;\n      font-weight: bold;\n      margin: 40px 0 20px;\n      background-color: #eee;\n      padding: 10px 20px;\n      border-radius: 5px;\n    }\n\n    & >>> h2 {\n      font-size: 30px;\n      font-weight: bold;\n      margin: 40px 0 16px;\n      border-bottom: 1px solid #ddd;\n    }\n\n    & >>> h3 {\n      font-size: 24px;\n      font-weight: bold;\n      margin: 30px 0 12px;\n    }\n\n    & >>> h4 {\n      font-size: 20px;\n      font-weight: bold;\n      margin: 24px 0 10px;\n    }\n\n    & >>> h5 {\n      font-size: 16px;\n      font-weight: bold;\n      margin: 20px 0 6px;\n    }\n\n    & >>> p {\n      line-height: 1.8;\n      letter-spacing: 0.2px;\n\n      & > code {\n        color: var(--color-text-main);\n        background-color: var(--color-bg-purple-light);\n        border: 1px solid var(--color-border);\n        border-radius: 3px;\n        margin: 0 2px;\n        padding: 2px 4px;\n      }\n    }\n\n    & >>> em {\n      font-style: italic;\n    }\n\n    & >>> ol {\n      list-style-type: decimal;\n      list-style-position: inside;\n\n      & > li {\n        line-height: 2;\n      }\n    }\n\n    & >>> ul > li {\n      line-height: 2;\n\n      &::before {\n        content: '-';\n        margin-right: 10px;\n      }\n    }\n\n    & >>> img {\n      max-width: 100%;\n      margin: 40px 0;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    & >>> video {\n      max-width: 100%;\n      margin: 40px 0;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    & >>> a {\n      color: var(--color-purple);\n      text-decoration: underline;\n      word-wrap: break-word;\n      word-break: break-all;\n    }\n\n    & >>> strong {\n      background: linear-gradient(transparent 92%, var(--color-accent) 92%);\n      font-weight: bold;\n    }\n\n    & >>> blockquote {\n      background: url('/images/icon_quote.svg') no-repeat 20px 10px, #eee;\n      background-size: 36px 36px;\n      padding: 50px 20px 20px;\n      margin: 20px 0;\n      border-radius: 3px;\n    }\n\n    & >>> pre {\n      border-radius: 3px;\n      margin: 20px 0;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      word-break: break-all;\n\n      & > code {\n        padding: 10px 20px;\n        border-radius: 5px;\n      }\n    }\n  }\n}\n@media (max-width: 600px) {\n  .post {\n    font-size: 14px;\n\n    & >>> h1 {\n      font-size: 24px;\n      font-weight: bold;\n      margin: 40px 0 20px;\n      background-color: #eee;\n      padding: 10px 20px;\n      border-radius: 5px;\n    }\n\n    & >>> h2 {\n      font-size: 24px;\n      font-weight: bold;\n      margin: 36px 0 16px;\n      border-bottom: 1px solid #ddd;\n    }\n\n    & >>> h3 {\n      font-size: 20px;\n      font-weight: bold;\n      margin: 30px 0 12px;\n    }\n\n    & >>> h4 {\n      font-size: 16px;\n      font-weight: bold;\n      margin: 24px 0 10px;\n    }\n\n    & >>> h5 {\n      font-size: 14px;\n      font-weight: bold;\n      margin: 20px 0 6px;\n    }\n\n    & >>> p {\n      line-height: 1.8;\n      letter-spacing: 0.2px;\n\n      & > code {\n        color: var(--color-text-main);\n        background-color: var(--color-bg-purple-light);\n        border: 1px solid var(--color-border);\n        border-radius: 3px;\n        margin: 0 2px;\n        padding: 2px 4px;\n      }\n    }\n\n    & >>> em {\n      font-style: italic;\n    }\n\n    & >>> ol {\n      list-style-type: decimal;\n      list-style-position: inside;\n\n      & > li {\n        line-height: 2;\n      }\n    }\n\n    & >>> ul > li {\n      line-height: 2;\n\n      &::before {\n        content: '-';\n        margin-right: 10px;\n      }\n    }\n\n    & >>> img {\n      max-width: 100%;\n      margin: 40px 0;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    & >>> video {\n      max-width: 100%;\n      margin: 40px 0;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    & >>> a {\n      color: #331cbf;\n      text-decoration: underline;\n      word-wrap: break-word;\n      word-break: break-all;\n    }\n\n    & >>> strong {\n      background: linear-gradient(transparent 92%, var(--color-accent) 92%);\n      font-weight: bold;\n    }\n\n    & >>> blockquote {\n      background: url('/images/icon_quote.svg') no-repeat 20px 10px, #eee;\n      background-size: 36px 36px;\n      padding: 50px 20px 20px;\n      margin: 20px 0;\n      border-radius: 3px;\n    }\n\n    & >>> pre {\n      border-radius: 3px;\n      margin: 20px 0;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      word-break: break-all;\n\n      & > code {\n        padding: 8px 16px;\n        border-radius: 3px;\n      }\n    }\n\n    & >>> iframe {\n      height: auto;\n      width: 100%;\n      aspect-ratio: 16 / 9;\n    }\n  }\n}\n</style>\n"
  },
  {
    "path": "components/README.md",
    "content": "# COMPONENTS\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThe components directory contains your Vue.js Components.\n\n_Nuxt.js doesn't supercharge these components._\n"
  },
  {
    "path": "components/RelatedBlogs.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <h2 class=\"pageTitle\">関連記事</h2>\n    <ul class=\"lists\">\n      <li v-for=\"blog in blogs\" :key=\"blog.id\" class=\"list\">\n        <nuxt-link :to=\"`/${blog.id}/`\" class=\"link\">\n          <picture v-if=\"blog.ogimage\">\n            <source\n              type=\"image/webp\"\n              :data-srcset=\"blog.ogimage.url + '?w=820&fm=webp'\"\n            />\n            <img\n              :data-src=\"blog.ogimage.url + '?w=820'\"\n              class=\"img lazyload\"\n              alt\n            />\n          </picture>\n          <picture v-else>\n            <source type=\"image/webp\" :data-srcset=\"blog.defaultOgimage\" />\n            <img :data-src=\"blog.defaultOgimage\" class=\"img lazyload\" alt />\n          </picture>\n          <dl class=\"content\">\n            <dt class=\"title\">{{ blog.title }}</dt>\n            <dd>\n              <Meta\n                :created-at=\"blog.createdAt\"\n                :author=\"blog.writer\"\n                :category=\"blog.category\"\n              />\n            </dd>\n          </dl>\n        </nuxt-link>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    blogs: {\n      type: Array,\n      required: false,\n      default: () => [],\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 1160px) {\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin: 60px 0 40px;\n    border-radius: 5px;\n  }\n\n  .lists {\n    display: flex;\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n\n  .list {\n    width: 340px;\n    border-radius: 5px;\n    transition: box-shadow 0.1s linear;\n\n    &:hover {\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .img {\n    width: 340px;\n    height: 178px;\n    border-radius: 5px 5px 0 0;\n  }\n\n  .content {\n    padding: 10px 10px 0;\n  }\n\n  .title {\n    font-size: 20px;\n    font-weight: bold;\n  }\n}\n@media (min-width: 820px) and (max-width: 1160px) {\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin: 60px 0 40px;\n    border-radius: 5px;\n  }\n\n  .lists {\n    display: flex;\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n\n  .list {\n    width: 300px;\n    border-radius: 5px;\n    transition: box-shadow 0.1s linear;\n\n    &:hover {\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .img {\n    width: 300px;\n    height: 157px;\n    border-radius: 5px 5px 0 0;\n  }\n\n  .content {\n    padding: 10px 10px 0;\n  }\n\n  .title {\n    font-size: 20px;\n    font-weight: bold;\n  }\n}\n@media (max-width: 820px) {\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin: 40px 0 20px;\n    border-radius: 5px;\n  }\n\n  .list {\n    width: 100%;\n    border-radius: 5px;\n  }\n\n  .img {\n    width: 100%;\n    border-radius: 5px;\n  }\n\n  .title {\n    padding-top: 5px;\n    font-size: 18px;\n    font-weight: bold;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Search.vue",
    "content": "<template>\n  <label class=\"label\">\n    サイト内検索\n    <input\n      class=\"input\"\n      type=\"text\"\n      @keypress=\"setSearchable\"\n      @keypress.enter=\"search\"\n    />\n  </label>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      searchable: false,\n    };\n  },\n  methods: {\n    setSearchable() {\n      this.searchable = true;\n    },\n    search(e) {\n      if (!e.target.value.trim() || !this.searchable) {\n        return;\n      }\n      this.$router.push({ path: '/search', query: { q: e.target.value } });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.label {\n  display: block;\n  font-size: 14px;\n  font-weight: bold;\n  color: var(--color-text-sub);\n}\n.input {\n  border: 1px solid var(--color-border);\n  width: 100%;\n  box-sizing: border-box;\n  margin-top: 5px;\n  border-radius: 5px;\n  height: 40px;\n  font-size: 16px;\n  background: url('/images/icon_search.svg') no-repeat 10px center,\n    var(--color-bg-purple-light);\n  padding-left: 40px;\n  box-shadow: none;\n  -webkit-appearance: none;\n  transition: box-shadow 0.2s ease;\n\n  &:hover {\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Share.vue",
    "content": "<template>\n  <div class=\"share\">\n    <ul class=\"shareLists\">\n      <li class=\"shareList\">\n        <a :href=\"twitterLink\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <img src=\"/images/icon_x.svg\" alt=\"X\" />\n        </a>\n      </li>\n      <li class=\"shareList\">\n        <a :href=\"facebookLink\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <img src=\"/images/icon_facebook.svg\" alt=\"Facebook\" />\n        </a>\n      </li>\n      <li class=\"shareList\">\n        <a :href=\"hatenaLink\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <img src=\"/images/icon_hatena.svg\" alt=\"はてなブックマーク\" />\n        </a>\n      </li>\n      <li class=\"shareList\">\n        <a\n          href=\"https://blog.microcms.io/feed.xml\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <img src=\"/images/icon_feed.svg\" alt=\"フィード\" />\n        </a>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n      required: true,\n    },\n    title: {\n      type: String,\n      required: true,\n    },\n  },\n  computed: {\n    twitterLink() {\n      return `https://twitter.com/intent/tweet?text=${encodeURIComponent(\n        this.title\n      )}&url=https://blog.microcms.io/${this.id}/&hashtags=microcms`;\n    },\n    facebookLink() {\n      return `https://www.facebook.com/sharer.php?u=https://blog.microcms.io/${this.id}/`;\n    },\n    hatenaLink() {\n      return `https://b.hatena.ne.jp/entry/https://blog.microcms.io/${this.id}/`;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 820px) {\n  .share {\n    width: 24px;\n    padding-top: 16px;\n\n    img {\n      max-width: 24px;\n      max-height: 24px;\n    }\n  }\n\n  .shareLists {\n    display: block;\n    position: sticky;\n    top: 120px;\n  }\n\n  .shareList {\n    text-align: center;\n    margin-bottom: 20px;\n  }\n}\n@media (min-width: 600px) and (max-width: 820px) {\n  .share {\n    width: 24px;\n    padding-top: 16px;\n\n    img {\n      max-width: 24px;\n      max-height: 24px;\n    }\n  }\n\n  .shareLists {\n    display: block;\n    position: sticky;\n    top: 100px;\n  }\n\n  .shareList {\n    text-align: center;\n    margin-bottom: 20px;\n  }\n}\n\n@media (max-width: 600px) {\n  .share {\n    margin: 40px 0 0;\n\n    img {\n      max-height: 20px;\n    }\n  }\n\n  .shareLists {\n    display: flex;\n    justify-content: center;\n  }\n\n  .shareList {\n    text-align: center;\n    margin: 0 20px;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/ShareButtons.vue",
    "content": "<template>\n  <div class=\"share\">\n    <h3 class=\"title\">記事をシェアする</h3>\n    <ul class=\"shareLists\">\n      <li class=\"shareList\">\n        <a\n          :href=\"twitterLink\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          class=\"button twitter\"\n        >\n          <img src=\"/images/icon_x.svg\" alt=\"X\" class=\"icon\" />\n          ポストする\n        </a>\n      </li>\n      <li class=\"shareList\">\n        <a\n          :href=\"facebookLink\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          class=\"button facebook\"\n        >\n          <img src=\"/images/icon_facebook.svg\" alt=\"Facebook\" class=\"icon\" />\n          シェアする\n        </a>\n      </li>\n      <li class=\"shareList\">\n        <a\n          :href=\"hatenaLink\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          class=\"button hatena\"\n        >\n          <img\n            src=\"/images/icon_hatena.svg\"\n            alt=\"はてなブックマーク\"\n            class=\"icon\"\n          />\n          ブックマークする\n        </a>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n      required: true,\n    },\n    title: {\n      type: String,\n      required: true,\n    },\n  },\n  computed: {\n    twitterLink() {\n      return `https://twitter.com/intent/tweet?text=${encodeURIComponent(\n        this.title\n      )}&url=https://blog.microcms.io/${this.id}/&hashtags=microcms`;\n    },\n    facebookLink() {\n      return `https://www.facebook.com/sharer.php?u=https://blog.microcms.io/${this.id}/`;\n    },\n    hatenaLink() {\n      return `https://b.hatena.ne.jp/entry/https://blog.microcms.io/${this.id}/`;\n    },\n  },\n};\n</script>\n\n<style scoped>\n.share {\n  background-color: #f7f7fc;\n  padding: 24px;\n  border-radius: 5px;\n  margin-top: 40px;\n}\n\n.title {\n  font-weight: bold;\n  font-size: 14px;\n  color: var(--color-text-sub);\n  padding-bottom: 16px;\n  text-align: center;\n}\n\n.shareLists {\n  display: flex;\n  justify-content: center;\n}\n\n.button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 5px;\n  padding: 12px 0;\n  margin: 0 8px;\n  font-size: 14px;\n  font-weight: bold;\n\n  &:hover {\n    opacity: 0.8;\n  }\n\n  img {\n    margin-right: 16px;\n  }\n}\n\n.twitter {\n  border: 1px solid var(--color-social-x);\n  color: var(--color-social-x);\n}\n\n.facebook {\n  border: 1px solid var(--color-social-facebook);\n  color: var(--color-social-facebook);\n}\n\n.hatena {\n  border: 1px solid var(--color-social-hatena);\n  color: var(--color-social-hatena);\n}\n\n.icon {\n  max-width: 18px;\n  max-height: 18px;\n}\n\n@media (min-width: 820px) {\n  .button {\n    width: 200px;\n  }\n}\n@media (min-width: 600px) and (max-width: 820px) {\n  .button {\n    width: 180px;\n    font-size: 12px;\n  }\n}\n\n@media (max-width: 600px) {\n  .shareLists {\n    flex-direction: column;\n  }\n\n  .button {\n    width: 100%;\n    font-size: 12px;\n    margin-left: 0;\n    margin-bottom: 16px;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Tags.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <h1 class=\"pageTitle\">タグ</h1>\n    <ul class=\"list\">\n      <li v-for=\"tag in tags\" :key=\"tag.id\" class=\"listItem\">\n        <nuxt-link :to=\"`/tag/${tag.id}/page/1`\" class=\"link\">{{\n          tag.name\n        }}</nuxt-link>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    tags: {\n      type: Array,\n      required: true,\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 820px) {\n  .wrapper {\n    padding: 40px 0;\n  }\n\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    padding: 0 10px;\n  }\n\n  .listItem {\n    display: inline-block;\n    margin-right: 16px;\n    padding: 4px 0;\n  }\n\n  .link {\n    font-size: 16px;\n    display: inline-block;\n    padding-left: 18px;\n    position: relative;\n\n    &::before {\n      content: '';\n      display: inline-block;\n      background: url('/images/icon_tag.svg') center no-repeat;\n      background-size: contain;\n      width: 14px;\n      height: 14px;\n      position: absolute;\n      top: 50%;\n      left: 0;\n      transform: translateY(-50%);\n    }\n  }\n}\n\n@media (max-width: 820px) {\n  .wrapper {\n    padding: 40px 0 0;\n  }\n\n  .pageTitle {\n    font-size: 20px;\n    font-weight: bold;\n    background-color: #eee;\n    padding: 6px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n  }\n\n  .list {\n    padding: 0 10px;\n  }\n\n  .listItem {\n    display: inline-block;\n    margin-right: 16px;\n    padding: 4px 0;\n  }\n\n  .link {\n    font-size: 16px;\n    display: inline-block;\n    padding-left: 18px;\n    position: relative;\n\n    &::before {\n      content: '';\n      display: inline-block;\n      background: url('/images/icon_tag.svg') center no-repeat;\n      background-size: contain;\n      width: 12px;\n      height: 12px;\n      position: absolute;\n      top: 50%;\n      left: 0;\n      transform: translateY(-50%);\n    }\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Toc.vue",
    "content": "<template>\n  <div v-if=\"visible\" class=\"wrapper\">\n    <h4 class=\"title\">目次</h4>\n    <ul class=\"lists\">\n      <li v-for=\"item in toc\" :key=\"item.id\" :class=\"`list ${item.name}`\">\n        <n-link v-scroll-to=\"`#${item.id}`\" to>\n          {{ item.text }}\n        </n-link>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    toc: {\n      type: Array,\n      required: true,\n      default: () => [],\n    },\n    visible: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n  },\n};\n</script>\n\n<style scoped>\n.wrapper {\n  background-color: #f7f7fc;\n  border-radius: 5px;\n  padding: 20px;\n  margin-bottom: 40px;\n}\n.title {\n  font-size: 16px;\n  font-weight: bold;\n  margin: 0 0 10px;\n  border-radius: 5px;\n}\n\n.list {\n  padding: 5px 0;\n  font-size: 14px;\n  border-bottom: 1px solid #e7e7f3;\n\n  a:hover {\n    color: #331cbf;\n  }\n\n  &::before {\n    content: '-';\n    margin-right: 5px;\n    color: #cacae7;\n  }\n\n  &.h2 {\n    margin-left: 10px;\n  }\n\n  &.h3 {\n    margin-left: 20px;\n  }\n}\n</style>\n"
  },
  {
    "path": "components/Writer.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <h2 class=\"title\">ABOUT ME</h2>\n    <div class=\"container\">\n      <picture v-if=\"writer.image\">\n        <source\n          type=\"image/webp\"\n          :data-srcset=\"writer.image.url + '?fit=crop&w=100&h=100&fm=webp'\"\n        />\n        <img\n          :data-src=\"writer.image.url + '?fit=crop&w=100&h=100&q=100'\"\n          class=\"image lazyload\"\n          alt\n        />\n      </picture>\n      <dl class=\"content\">\n        <dt class=\"name\">\n          <nuxt-link :to=\"`/author/${writer.id}/`\" class=\"authorLink\">\n            {{ writer.name }}\n          </nuxt-link>\n          <a v-if=\"writer.twitter\" class=\"twitterLink\" :href=\"writer.twitter\">\n            <img class=\"twitter\" src=\"/images/icon_x.svg\" alt=\"x\" />\n          </a>\n        </dt>\n        <dd class=\"text\">{{ writer.text }}</dd>\n      </dl>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    writer: {\n      type: Object,\n      required: true,\n      default: () => ({}),\n    },\n  },\n};\n</script>\n\n<style scoped>\n.container {\n  display: flex;\n}\n\n.content {\n  flex: 1;\n}\n\n.name {\n  display: flex;\n  align-items: center;\n  font-weight: bold;\n  padding-bottom: 10px;\n}\n\n.twitterLink {\n  display: block;\n  height: 16px;\n  margin-left: 10px;\n}\n\n.twitter {\n  display: block;\n  height: 16px;\n}\n\n.text {\n  font-size: 14px;\n}\n\n.authorLink:hover {\n  color: var(--color-purple);\n  text-decoration: underline;\n}\n\n@media (min-width: 600px) {\n  .wrapper {\n    position: relative;\n    border-top: 1px solid #666;\n    margin-top: 80px;\n    padding: 30px 20px 20px;\n  }\n  .title {\n    position: absolute;\n    top: 0;\n    right: 20px;\n    background-color: #2b2c30;\n    color: #fff;\n    font-size: 14px;\n    padding: 2px 10px;\n    border-radius: 0 0 5px 5px;\n  }\n  .image {\n    border-radius: 50%;\n    width: 100px;\n    height: 100px;\n    margin-right: 20px;\n  }\n}\n\n@media (max-width: 600px) {\n  .wrapper {\n    position: relative;\n    border-top: 1px solid #666;\n    margin-top: 80px;\n    padding: 30px 0px 20px;\n  }\n  .title {\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: #2b2c30;\n    color: #fff;\n    font-size: 14px;\n    padding: 2px 10px;\n    border-radius: 0 0 5px 5px;\n  }\n  .image {\n    border-radius: 50%;\n    width: 60px;\n    height: 60px;\n    margin-right: 10px;\n  }\n}\n</style>\n"
  },
  {
    "path": "functions/draft.js",
    "content": "const { client } = require('../utils/microcms');\n\n// eslint-disable-next-line require-await\nexports.handler = async (event) => {\n  const { id, draftKey } = event.queryStringParameters;\n  if (!id) {\n    return {\n      statusCode: 400,\n      body: JSON.stringify({\n        error: 'Missing \"id\" query parameter',\n      }),\n    };\n  }\n  return client\n    .get({\n      endpoint: 'blog',\n      contentId: id,\n      queries: {\n        draftKey,\n        depth: 2,\n      },\n    })\n    .then((data) => {\n      return {\n        statusCode: 200,\n        body: JSON.stringify(data),\n      };\n    })\n    .catch((error) => ({\n      statusCode: 400,\n      body: String(error),\n    }));\n};\n"
  },
  {
    "path": "functions/search.js",
    "content": "const { client } = require('../utils/microcms');\n\n// eslint-disable-next-line require-await\nexports.handler = async (event) => {\n  const { q } = event.queryStringParameters;\n  if (!q) {\n    return {\n      statusCode: 400,\n      body: JSON.stringify({\n        error: 'Missing \"q\" query parameter',\n      }),\n    };\n  }\n  return client\n    .get({\n      endpoint: 'blog',\n      queries: { q },\n    })\n    .then((data) => {\n      return {\n        statusCode: 200,\n        body: JSON.stringify(data),\n      };\n    })\n    .catch((error) => ({\n      statusCode: 400,\n      body: String(error),\n    }));\n};\n"
  },
  {
    "path": "layouts/README.md",
    "content": "# LAYOUTS\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThis directory contains your Application Layouts.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).\n"
  },
  {
    "path": "layouts/default.vue",
    "content": "<template>\n  <div>\n    <nuxt />\n  </div>\n</template>\n\n<style>\n@import '@/assets/styles/reset.css';\n</style>\n"
  },
  {
    "path": "netlify.toml",
    "content": "[build]\n  functions = \"dist/api\"\n\n[[redirects]]\n  from = \"/usecase-cainz/\"\n  to = \"https://microcms.io/interviews/cainz\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-web-creator-box/\"\n  to = \"https://microcms.io/interviews/web-creator-box\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-fuller/\"\n  to = \"https://microcms.io/interviews/fuller\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-dip/\"\n  to = \"https://microcms.io/interviews/dip\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-gree-x/\"\n  to = \"https://microcms.io/interviews/gree-x\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-chunichi/\"\n  to = \"https://microcms.io/interviews/chunichi\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-ymj/\"\n  to = \"https://microcms.io/interviews/ymj\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-kinto/\"\n  to = \"https://microcms.io/interviews/kinto\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-nifty/\"\n  to = \"https://microcms.io/interviews/nifty\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-cerezo/\"\n  to = \"https://microcms.io/interviews/cerezo\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-scrap/\"\n  to = \"https://microcms.io/interviews/scrap\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-freee/\"\n  to = \"https://microcms.io/interviews/freee\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-tokyo-gas/\"\n  to = \"https://microcms.io/interviews/tokyo-gas\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-odx/\"\n  to = \"https://microcms.io/interviews/odx\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-alba/\"\n  to = \"https://microcms.io/interviews/alba\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-otamanabi-no-mori/\"\n  to = \"https://microcms.io/interviews/otamanabi-no-mori\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-elnet/\"\n  to = \"https://microcms.io/interviews/elnet\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-smarthr/\"\n  to = \"https://microcms.io/interviews/smarthr\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-leact/\"\n  to = \"https://microcms.io/interviews/leact\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-dmm/\"\n  to = \"https://microcms.io/interviews/dmm\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-housmart/\"\n  to = \"https://microcms.io/interviews/housmart\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-gvatech/\"\n  to = \"https://microcms.io/interviews/gvatech\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-toridoll/\"\n  to = \"https://microcms.io/interviews/toridoll\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-polimill/\"\n  to = \"https://microcms.io/interviews/polimill\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-reiwatravel/\"\n  to = \"https://microcms.io/interviews/reiwatravel\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-ndc/\"\n  to = \"https://microcms.io/interviews/ndc\"\n  status = 301\n  force = true\n\n[[redirects]]\nfrom = \"/usecase-yamap-store/\"\nto = \"https://microcms.io/interviews/yamap-store\"\nstatus = 301\nforce = true\n\n[[redirects]]\n  from = \"/usecase-nrinetcom/\"\n  to = \"https://microcms.io/interviews/nrinetcom\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-discoveryjapan/\"\n  to = \"https://microcms.io/interviews/discoveryjapan\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-paconsul/\"\n  to = \"https://microcms.io/interviews/paconsul\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-chikaku/\"\n  to = \"https://microcms.io/interviews/chikaku\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-zozotech/\"\n  to = \"https://microcms.io/interviews/zozotech\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-sgis/\"\n  to = \"https://microcms.io/interviews/sgis\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-monex-am/\"\n  to = \"https://microcms.io/interviews/monex-am\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-dwango/\"\n  to = \"https://microcms.io/interviews/dwango\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-beatfit/\"\n  to = \"https://microcms.io/interviews/beatfit\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-odakyu/\"\n  to = \"https://microcms.io/interviews/odakyu\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-medley/\"\n  to = \"https://microcms.io/interviews/medley\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-port/\"\n  to = \"https://microcms.io/interviews/port\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-acall/\"\n  to = \"https://microcms.io/interviews/acall\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-knockonthedoor/\"\n  to = \"https://microcms.io/interviews/knockonthedoor\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-mediba/\"\n  to = \"https://microcms.io/interviews/mediba\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/crowdworks-with-microcms/\"\n  to = \"https://microcms.io/interviews/crowdworks-with-microcms\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-mediano/\"\n  to = \"https://microcms.io/interviews/mediano\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-konicaminolta/\"\n  to = \"https://microcms.io/interviews/konicaminolta\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-rebuild/\"\n  to = \"https://microcms.io/interviews/rebuild\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/usecase-interspace/\"\n  to = \"https://microcms.io/interviews/interspace\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/microcms-multilingual-site/\"\n  to = \"https://help.microcms.io/ja/knowledge/multilingual-site\"\n  status = 301\n  force = true\n\n[[redirects]]\n  from = \"/*\"\n  to = \"/404.html\"\n  status = 404\n"
  },
  {
    "path": "nuxt.config.js",
    "content": "import { client } from './utils/microcms';\nconst { API_KEY, SERVICE_ID, GTM_ID, FB_PIXEL_ID } = process.env;\n\nexport default {\n  target: 'static',\n  /*\n   ** Headers of the page\n   */\n  head: {\n    htmlAttrs: {\n      prefix: 'og: http://ogp.me/ns#',\n      lang: 'ja',\n    },\n    titleTemplate: '%s | microCMSブログ',\n    meta: [\n      { charset: 'utf-8' },\n      { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n      {\n        hid: 'description',\n        name: 'description',\n        content:\n          'microCMSはAPIベースの日本製ヘッドレスCMSです。本ブログはmicroCMSの開発メンバーがmicroCMSの使い方や技術的な内容を発信するブログです。',\n      },\n      {\n        hid: 'og:site_name',\n        property: 'og:site_name',\n        content: 'microCMSブログ',\n      },\n      { hid: 'og:type', property: 'og:type', content: 'website' },\n      {\n        hid: 'og:url',\n        property: 'og:url',\n        content: 'https://blog.microcms.io',\n      },\n      { hid: 'og:title', property: 'og:title', content: 'microCMSブログ' },\n      {\n        hid: 'og:description',\n        property: 'og:description',\n        content:\n          'microCMSはAPIベースの日本製ヘッドレスCMSです。本ブログはmicroCMSの開発メンバーがmicroCMSの使い方や技術的な内容を発信するブログです。',\n      },\n      {\n        hid: 'og:image',\n        property: 'og:image',\n        content: 'https://blog.microcms.io/images/ogp.png',\n      },\n\n      { name: 'twitter:card', content: 'summary_large_image' },\n      { name: 'twitter:site', content: '@micro_cms' },\n    ],\n    link: [\n      {\n        rel: 'icon',\n        type: 'image/x-icon',\n        href: 'https://blog.microcms.io/favicon.png',\n      },\n      {\n        rel: 'alternate',\n        type: 'application/atom+xml',\n        href: 'https://blog.microcms.io/feed.xml',\n        title: 'Atom',\n      },\n    ],\n    script: [\n      {\n        src:\n          'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js',\n        async: true,\n      },\n    ],\n  },\n  /*\n   ** Customize the progress-bar color\n   */\n  loading: { color: '#331cbf' },\n  /*\n   ** Global CSS\n   */\n  css: [\n    '@/assets/styles/reset.css',\n    '@/assets/styles/colors.css',\n    {\n      src: '~/node_modules/highlight.js/styles/hybrid.css',\n      lang: 'css',\n    },\n  ],\n  /*\n   ** Plugins to load before mounting the App\n   */\n  plugins: ['~/plugins/vue-scrollto'],\n  components: true,\n  buildModules: ['@nuxtjs/eslint-module', '@nuxtjs/pwa'],\n  /*\n   ** Nuxt.js modules\n   */\n  modules: [\n    ['@nuxtjs/dayjs'],\n    GTM_ID ? ['@nuxtjs/gtm'] : undefined,\n    FB_PIXEL_ID\n      ? [\n          'nuxt-facebook-pixel-module',\n          {\n            track: 'PageView',\n            pixelId: FB_PIXEL_ID,\n            autoPageView: true,\n            disabled: false,\n          },\n        ]\n      : undefined,\n    ['@nuxtjs/sitemap'],\n    '@nuxtjs/feed',\n    '@nuxtjs/proxy',\n    'nuxt-microcms-module',\n  ].filter((v) => v),\n  dayjs: {\n    locales: ['ja'],\n    defaultLocale: 'ja',\n  },\n  gtm: {\n    id: GTM_ID || undefined,\n  },\n  proxy: ['http://localhost:9000/.netlify'],\n  pwa: {\n    workbox: {\n      offlineAssets: [\n        '/images/banner_logo.svg',\n        '/images/icon_author.svg',\n        '/images/icon_clock.svg',\n        '/images/icon_facebook.svg',\n        '/images/icon_discord.svg',\n        '/images/icon_feed.svg',\n        '/images/icon_hatena.svg',\n        '/images/icon_menu.svg',\n        '/images/icon_quote.svg',\n        '/images/icon_search.svg',\n        '/images/icon_link.svg',\n        '/images/logo.svg',\n      ],\n      runtimeCaching: [\n        {\n          urlPattern: 'https://images.microcms-assets.io/.*',\n          handler: 'staleWhileRevalidate',\n        },\n      ],\n    },\n  },\n  microcms: {\n    options: {\n      serviceDomain: SERVICE_ID,\n      apiKey: API_KEY,\n    },\n    mode: process.env.NODE_ENV === 'production' ? 'server' : 'all',\n  },\n  /*\n   ** Build configuration\n   */\n  build: {\n    postcss: {\n      postcssOptions: {\n        plugins: {\n          'postcss-nested': {},\n        },\n      },\n    },\n    extend(config, ctx) {\n      // Run ESLint on save\n      if (ctx.isDev && ctx.isClient) {\n        config.module.rules.push({\n          enforce: 'pre',\n          test: /\\.(js|vue)$/,\n          loader: 'eslint-loader',\n          exclude: /(node_modules)/,\n        });\n      }\n    },\n  },\n  router: {\n    extendRoutes(routes, resolve) {\n      routes.push({\n        path: '/page/:id',\n        component: resolve(__dirname, 'pages/index.vue'),\n        name: 'pages',\n      });\n      routes.push({\n        path: '/category/:categoryId/page/:id',\n        component: resolve(__dirname, 'pages/index.vue'),\n        name: 'categories',\n      });\n      routes.push({\n        path: '/tag/:tagId/page/:id',\n        component: resolve(__dirname, 'pages/index.vue'),\n        name: 'tags',\n      });\n      routes.push({\n        path: '/author/:authorId/page/:id',\n        component: resolve(__dirname, 'pages/author/_authorId.vue'),\n        name: 'authors',\n      });\n      routes.push({\n        path: '*',\n        component: resolve(__dirname, 'pages/404.vue'),\n        name: 'custom',\n      });\n    },\n  },\n  generate: {\n    interval: 200,\n    async routes() {\n      const range = (start, end) =>\n        [...Array(end - start + 1)].map((_, i) => start + i);\n      const limit = 25;\n      const popularArticles = (\n        await client.get({\n          endpoint: 'popular-articles',\n        })\n      ).articles;\n      const banners = await client.get({\n        endpoint: 'banners',\n      });\n      const ctaContents = (\n        await client.get({\n          endpoint: 'cta',\n        })\n      ).contents;\n\n      // 詳細ページ\n      const getArticles = (offset = 0) => {\n        return client\n          .get({\n            endpoint: 'blog',\n            queries: {\n              offset,\n              limit,\n              depth: 2,\n            },\n          })\n          .then(async (res) => {\n            let articles = [];\n            if (res.totalCount > offset + limit) {\n              articles = await getArticles(offset + limit);\n            }\n            return [\n              ...res.contents.map((content) => ({\n                route: `/${content.id}`,\n                payload: { content, popularArticles, banners, ctaContents },\n              })),\n              ...articles,\n            ];\n          });\n      };\n      const articles = await getArticles();\n\n      // 一覧ページ\n      const index = {\n        route: '/',\n        payload: { popularArticles, banners },\n      };\n\n      // 一覧のページング\n      const pages = await client\n        .get({\n          endpoint: 'blog',\n          queries: {\n            limit: 0,\n          },\n        })\n        .then((res) =>\n          range(1, Math.ceil(res.totalCount / 10)).map((p) => ({\n            route: `/page/${p}`,\n            payload: { popularArticles, banners },\n          }))\n        );\n\n      // 検索ページ\n      const search = {\n        route: '/search',\n        payload: { popularArticles, banners },\n      };\n\n      const categories = await client\n        .get({\n          endpoint: 'categories',\n          queries: {\n            fields: 'id',\n          },\n        })\n        .then(({ contents }) => {\n          return contents.map((content) => content.id);\n        });\n\n      // カテゴリーページ\n      const categoryPages = await Promise.all(\n        categories.map((category) =>\n          client\n            .get({\n              endpoint: 'blog',\n              queries: {\n                limit: 0,\n                filters: `category[equals]${category}`,\n              },\n            })\n            .then((res) => {\n              return range(1, Math.ceil(res.totalCount / 10)).map((p) => ({\n                route: `/category/${category}/page/${p}`,\n                payload: { popularArticles, banners },\n              }));\n            })\n        )\n      );\n      const flattenCategoryPages = [].concat.apply([], categoryPages);\n\n      const tags = await client\n        .get({\n          endpoint: 'tags',\n          queries: {\n            fields: 'id',\n            limit: 100,\n          },\n        })\n        .then(({ contents }) => {\n          return contents.map((content) => content.id);\n        });\n\n      // タグページ\n      const tagPages = await Promise.all(\n        tags.map((tag) =>\n          client\n            .get({\n              endpoint: 'blog',\n              queries: {\n                limit: 0,\n                filters: `tag[contains]${tag}`,\n              },\n            })\n            .then((res) => {\n              return range(1, Math.ceil(res.totalCount / 10)).map((p) => ({\n                route: `/tag/${tag}/page/${p}`,\n                payload: { popularArticles, banners },\n              }));\n            })\n        )\n      );\n      const flattenTagPages = [].concat.apply([], tagPages);\n\n      return [\n        index,\n        search,\n        ...articles,\n        ...pages,\n        ...flattenCategoryPages,\n        ...flattenTagPages,\n      ];\n    },\n    dir: 'dist',\n  },\n  sitemap: {\n    path: '/sitemap.xml',\n    hostname: 'https://blog.microcms.io',\n    exclude: ['/draft', '/404'],\n    gzip: true,\n    trailingSlash: true,\n  },\n  feed: async () => {\n    const authors = await client\n      .get({\n        endpoint: 'authors',\n        queries: {\n          limit: 100,\n        },\n      })\n      .then((res) => res.contents);\n    const authorsSettings = authors.map((author) => {\n      return {\n        path: `/author/${author.id}/feed.xml`,\n        async create(feed) {\n          feed.options = {\n            title: `${author.name}が執筆した記事 | microCMSブログ`,\n            link: 'https://blog.microcms.io/feed.xml',\n            description:\n              'microCMSはAPIベースの日本製ヘッドレスCMSです。本ブログはmicroCMSの開発メンバーがmicroCMSの使い方や技術的な内容を発信するブログです。',\n          };\n          const posts = await client\n            .get({\n              endpoint: 'blog',\n              queries: {\n                filters: `writer[equals]${author.id}`,\n              },\n            })\n            .then((res) => res.contents);\n          posts.forEach((post) => {\n            feed.addItem({\n              title: post.title,\n              id: post.id,\n              link: `https://blog.microcms.io/${post.id}/`,\n              description: post.description,\n              content: post.description,\n              date: new Date(post.publishedAt || post.createdAt),\n              image: post.ogimage && post.ogimage.url,\n            });\n          });\n        },\n        cacheTime: 1000 * 60 * 15,\n        type: 'rss2',\n      };\n    });\n    return [\n      {\n        path: '/feed.xml',\n        async create(feed) {\n          feed.options = {\n            title: 'microCMSブログ',\n            link: 'https://blog.microcms.io/feed.xml',\n            description:\n              'microCMSはAPIベースの日本製ヘッドレスCMSです。本ブログはmicroCMSの開発メンバーがmicroCMSの使い方や技術的な内容を発信するブログです。',\n          };\n\n          const posts = await client\n            .get({\n              endpoint: 'blog',\n            })\n            .then((res) => res.contents);\n\n          posts.forEach((post) => {\n            feed.addItem({\n              title: post.title,\n              id: post.id,\n              link: `https://blog.microcms.io/${post.id}/`,\n              description: post.description,\n              content: post.description,\n              date: new Date(post.publishedAt || post.createdAt),\n              image: post.ogimage && post.ogimage.url,\n            });\n          });\n        },\n        cacheTime: 1000 * 60 * 15,\n        type: 'rss2',\n      },\n      {\n        path: '/feed_update.xml',\n        async create(feed) {\n          feed.options = {\n            title: '更新情報｜microCMSブログ',\n            link: 'https://blog.microcms.io/feed.xml',\n            description:\n              'microCMSはAPIベースの日本製ヘッドレスCMSです。本ブログはmicroCMSの開発メンバーがmicroCMSの使い方や技術的な内容を発信するブログです。',\n          };\n\n          const posts = await client\n            .get({\n              endpoint: 'blog',\n              queries: {\n                filters: 'category[equals]update',\n              },\n            })\n            .then((res) => res.contents);\n\n          posts.forEach((post) => {\n            feed.addItem({\n              title: post.title,\n              id: post.id,\n              link: `https://blog.microcms.io/${post.id}/`,\n              description: post.description,\n              content: post.description,\n              date: new Date(post.publishedAt || post.createdAt),\n              image: post.ogimage && post.ogimage.url,\n            });\n          });\n        },\n        cacheTime: 1000 * 60 * 15,\n        type: 'rss2',\n      },\n      {\n        path: '/feed_usecase.xml',\n        async create(feed) {\n          feed.options = {\n            title: '導入事例｜microCMSブログ',\n            link: 'https://blog.microcms.io/feed.xml',\n            description:\n              'microCMSはAPIベースの日本製ヘッドレスCMSです。本ブログはmicroCMSの開発メンバーがmicroCMSの使い方や技術的な内容を発信するブログです。',\n          };\n\n          const posts = await client\n            .get({\n              endpoint: 'blog',\n              queries: {\n                filters: 'category[equals]usecase',\n              },\n            })\n            .then((res) => res.contents);\n\n          posts.forEach((post) => {\n            feed.addItem({\n              title: post.title,\n              id: post.id,\n              link: `https://blog.microcms.io/${post.id}/`,\n              description: post.description,\n              content: post.description,\n              date: new Date(post.publishedAt || post.createdAt),\n              image: post.ogimage && post.ogimage.url,\n            });\n          });\n        },\n        cacheTime: 1000 * 60 * 15,\n        type: 'rss2',\n      },\n      ...authorsSettings,\n    ];\n  },\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"microcms-blog\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"nuxt\",\n    \"generate\": \"nuxt generate --fail-on-error\",\n    \"start\": \"nuxt start\",\n    \"lint\": \"eslint --ext .js,.vue --ignore-path .gitignore .\",\n    \"lintfix\": \"eslint --fix --ext .js,.vue --ignore-path .gitignore .\",\n    \"functions:build\": \"netlify-lambda build functions\",\n    \"functions:serve\": \"netlify-lambda serve functions\"\n  },\n  \"dependencies\": {\n    \"axios\": \"^0.21.2\",\n    \"cheerio\": \"^1.0.0-rc.3\",\n    \"encoding\": \"^0.1.13\",\n    \"highlight.js\": \"^10.0.0\",\n    \"microcms-js-sdk\": \"^2.0.0\",\n    \"nuxt\": \"^2.17.2\",\n    \"nuxt-facebook-pixel-module\": \"^1.5.0\",\n    \"nuxt-microcms-module\": \"^1.0.1\"\n  },\n  \"devDependencies\": {\n    \"@nuxtjs/dayjs\": \"^1.1.9\",\n    \"@nuxtjs/dotenv\": \"^1.4.1\",\n    \"@nuxtjs/eslint-config\": \"^3.0.0\",\n    \"@nuxtjs/eslint-module\": \"^2.0.0\",\n    \"@nuxtjs/feed\": \"^1.1.0\",\n    \"@nuxtjs/google-analytics\": \"^2.2.0\",\n    \"@nuxtjs/gtm\": \"^2.4.0\",\n    \"@nuxtjs/proxy\": \"^2.1.0\",\n    \"@nuxtjs/pwa\": \"^3.0.0-beta.20\",\n    \"@nuxtjs/sitemap\": \"^2.4.0\",\n    \"babel-eslint\": \"^10.1.0\",\n    \"eslint\": \"^7.2.0\",\n    \"eslint-config-prettier\": \"^6.11.0\",\n    \"eslint-plugin-nuxt\": \"^1.0.0\",\n    \"eslint-plugin-prettier\": \"^3.1.4\",\n    \"netlify-lambda\": \"^1.6.3\",\n    \"postcss-css-variables\": \"^0.18.0\",\n    \"postcss-import\": \"^12.0.1\",\n    \"postcss-nested\": \"^4.1.2\",\n    \"prettier\": \"^2.0.5\",\n    \"vue-scrollto\": \"^2.17.1\"\n  }\n}\n"
  },
  {
    "path": "pages/404.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <Header />\n    <div class=\"container\">\n      <dl>\n        <dt class=\"status\">404</dt>\n        <dd class=\"message\">ページが見つかりません</dd>\n      </dl>\n    </div>\n    <Footer />\n  </div>\n</template>\n\n<script>\nexport default {\n  head() {\n    return {\n      titleTemplate: null,\n      title: 'ページが見つかりません | microCMSブログ',\n    };\n  },\n};\n</script>\n\n<style scoped>\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n.container {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  margin: 40px 0;\n}\n.status {\n  font-size: 120px;\n  font-weight: bold;\n  color: #999;\n}\n.message {\n  color: #999;\n  font-size: 20px;\n}\n</style>\n"
  },
  {
    "path": "pages/README.md",
    "content": "# PAGES\n\nThis directory contains your Application Views and Routes.\nThe framework reads all the `*.vue` files inside this directory and creates the router of your application.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).\n"
  },
  {
    "path": "pages/_slug/index.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <Header />\n    <div class=\"divider\">\n      <article class=\"article\">\n        <div class=\"ogimageWrap\">\n          <picture v-if=\"ogimage\">\n            <source\n              media=\"(min-width: 1160px)\"\n              type=\"image/webp\"\n              :srcset=\"`${ogimage.url}?w=820&fm=webp, ${ogimage.url}?w=1640&fm=webp 2x`\"\n            />\n            <source\n              media=\"(min-width: 820px)\"\n              type=\"image/webp\"\n              :srcset=\"`${ogimage.url}?w=740&fm=webp, ${ogimage.url}?w=1480&fm=webp 2x`\"\n            />\n            <source\n              media=\"(min-width: 768px)\"\n              type=\"image/webp\"\n              :srcset=\"`${ogimage.url}?w=728&fm=webp, ${ogimage.url}?w=1456&fm=webp 2x`\"\n            />\n            <source\n              media=\"(max-width: 768px)\"\n              type=\"image/webp\"\n              :srcset=\"`${ogimage.url}?w=375&fm=webp, ${ogimage.url}?w=750&fm=webp 2x`\"\n            />\n            <img\n              ref=\"ogimage\"\n              :src=\"ogimage.url + '?w=820&q=100'\"\n              class=\"ogimage\"\n              alt\n            />\n          </picture>\n          <picture v-else>\n            <source type=\"image/webp\" :srcset=\"defaultOgimage\" />\n            <img ref=\"ogimage\" :src=\"defaultOgimage\" class=\"ogimage\" alt />\n          </picture>\n        </div>\n        <Breadcrumb :category=\"category\" />\n        <div class=\"main\">\n          <Share :id=\"id\" :title=\"title\" />\n          <div class=\"container\">\n            <h1 class=\"title\">{{ title }}</h1>\n            <Meta\n              :created-at=\"publishedAt || createdAt\"\n              :revised-at=\"revisedAt\"\n              :author=\"writer\"\n              :category=\"category\"\n              :tags=\"tag\"\n              :is-single-page=\"true\"\n            />\n            <Alert\n              :is-old-post=\"isOldPost\"\n              :is-technical-post=\"isTechnicalPost\"\n            />\n            <Toc :id=\"id\" :toc=\"toc\" :visible=\"toc_visible\" />\n            <Post :body=\"body\" />\n            <Cta :id=\"id\" :contents=\"ctaContents\" />\n            <ConversionPoint\n              :id=\"id\"\n              :contents=\"cv_point\"\n              :theme=\"\n                cv_point === null || cv_point.length <= 0 ? '' : 'thumbnail'\n              \"\n            />\n            <NextBlogNavigation :previous=\"previous_blog\" :next=\"next_blog\" />\n            <ShareButtons :id=\"id\" :title=\"title\" />\n            <Writer v-if=\"writer\" :writer=\"writer\" />\n            <Partner v-if=\"partner\" :partner=\"partner\" />\n            <RelatedBlogs\n              v-if=\"related_blogs.length > 0\"\n              :blogs=\"related_blogs\"\n            />\n          </div>\n        </div>\n      </article>\n      <aside class=\"aside\">\n        <Search />\n        <Categories :categories=\"categories\" />\n        <Tags :tags=\"tags\" />\n        <PopularArticles :contents=\"popularArticles\" />\n        <div class=\"followArea\">\n          <Banners :id=\"`blog-${id}`\" :banners=\"banners\" />\n          <Latest :contents=\"contents\" />\n        </div>\n      </aside>\n    </div>\n    <Footer />\n  </div>\n</template>\n\n<script>\nimport cheerio from 'cheerio';\nimport hljs from 'highlight.js';\nimport getDefaultOgimage from '../../utils/getDefaultOgimage';\n\nexport default {\n  async asyncData({ params, payload, $microcms }) {\n    const data =\n      payload !== undefined\n        ? payload.content\n        : await $microcms.get({\n            endpoint: 'blog',\n            contentId: params.slug,\n            queries: {\n              depth: 2,\n            },\n          });\n    const popularArticles =\n      payload !== undefined && payload.popularArticles !== undefined\n        ? payload.popularArticles\n        : (\n            await $microcms.get({\n              endpoint: 'popular-articles',\n            })\n          ).articles;\n    const banners =\n      payload !== undefined\n        ? payload.banners\n        : await $microcms.get({\n            endpoint: 'banners',\n          });\n    const ctaContents =\n      payload !== undefined && payload.ctaContents !== undefined\n        ? payload.ctaContents\n        : (\n            await $microcms.get({\n              endpoint: 'cta',\n            })\n          ).contents;\n    const { contents } = await $microcms.get({\n      endpoint: 'blog',\n    });\n    const categories = await $microcms.get({\n      endpoint: 'categories',\n      queries: {\n        limit: 100,\n      },\n    });\n    const tags = await $microcms.get({\n      endpoint: 'tags',\n      queries: {\n        limit: 100,\n      },\n    });\n    const $ = cheerio.load(data.body);\n    const headings = $('h1, h2, h3').toArray();\n    const toc = headings.map((d) => {\n      return {\n        text: d.children[0].data,\n        id: d.attribs.id,\n        name: d.name,\n      };\n    });\n    $('pre code').each((_, elm) => {\n      const res = hljs.highlightAuto($(elm).text());\n      $(elm).html(res.value);\n      $(elm).addClass('hljs');\n    });\n    $('img').each((_, elm) => {\n      $(elm).attr('class', 'lazyload');\n      $(elm).attr('data-src', elm.attribs.src);\n      $(elm).removeAttr('src');\n    });\n    $('a').each((_, elm) => {\n      // hrefが動画リンクのものはvideoタグを作成し、srcにhrefの値を設定\n      if ($(elm).attr('href').endsWith('.mp4')) {\n        const video = $('<video></video>');\n        video.attr('src', $(elm).attr('href'));\n        video.attr('controls', 'controls');\n        video.attr('preload', 'metadata');\n        $(elm).replaceWith(video);\n      }\n    });\n\n    data.related_blogs.forEach((blog) => {\n      blog.defaultOgimage = getDefaultOgimage(blog);\n    });\n\n    return {\n      ...data,\n      defaultOgimage: getDefaultOgimage(data),\n      popularArticles,\n      banners,\n      ctaContents,\n      body: $.html(),\n      toc,\n      categories: categories.contents,\n      tags: tags.contents,\n      contents,\n    };\n  },\n  data() {\n    return {\n      publishedAt: '',\n      ogimage: null,\n    };\n  },\n  computed: {\n    isOldPost() {\n      const currentDate = new Date();\n\n      const oneYearAgoDate = new Date();\n      oneYearAgoDate.setFullYear(currentDate.getFullYear() - 1);\n\n      const createdAtDate = new Date(\n        this.revisedAt || this.publishedAt || this.createdAt\n      );\n\n      // createdAtが1年前の日付かどうか判定\n      return createdAtDate < oneYearAgoDate;\n    },\n    isTechnicalPost() {\n      // エンジニアリング、チュートリアル、更新情報カテゴリが古い記事チェックの対象\n      return (\n        this.category.id === 'engineering' ||\n        this.category.id === 'tutorial' ||\n        this.category.id === 'update'\n      );\n    },\n  },\n  head() {\n    return {\n      title: this.title,\n      meta: [\n        { hid: 'description', name: 'description', content: this.description },\n        { hid: 'og:title', property: 'og:title', content: this.title },\n        {\n          hid: 'og:description',\n          property: 'og:description',\n          content: this.description,\n        },\n        {\n          hid: 'og:url',\n          property: 'og:url',\n          content: `https://blog.microcms.io/${this.id}/`,\n        },\n        {\n          hid: 'og:image',\n          property: 'og:image',\n          content: this.ogimage ? this.ogimage.url : this.defaultOgimage,\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<style scoped>\n.category {\n  display: inline-block;\n  padding: 2px 10px;\n  border-radius: 3px;\n  color: #fff;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n@media (min-width: 1160px) {\n  .wrapper {\n    position: relative;\n  }\n\n  .divider {\n    display: flex;\n    justify-content: space-between;\n    width: 1160px;\n    margin: 20px auto 0;\n  }\n\n  .article {\n    width: 820px;\n  }\n\n  .aside {\n    width: 300px;\n  }\n\n  .main {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 40px;\n  }\n\n  .followArea {\n    position: sticky !important;\n    top: 115px;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    width: 300px;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .ogimageWrap {\n    position: relative;\n    overflow: hidden;\n    border-radius: 5px;\n  }\n\n  .ogimage {\n    display: block;\n    width: 100%;\n  }\n\n  .container {\n    position: relative;\n    flex: 1;\n    background-color: #fff;\n    margin-left: 80px;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .title {\n    font-family: 'Quicksand', 'Source Sans Pro', -apple-system,\n      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n      sans-serif;\n    display: block;\n    font-weight: bold;\n    font-size: 40px;\n    color: #2b2c30;\n  }\n}\n\n@media (min-width: 820px) and (max-width: 1160px) {\n  .wrapper {\n    position: relative;\n    margin-top: 40px;\n  }\n\n  .divider {\n    margin: 20px auto 0;\n    width: 740px;\n  }\n\n  .article {\n    width: 740px;\n  }\n\n  .aside {\n    margin-top: 60px;\n    margin-left: 104px;\n  }\n\n  .main {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 40px;\n    align-items: strech;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    width: 300px;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .ogimageWrap {\n    position: relative;\n    overflow: hidden;\n    border-radius: 5px;\n  }\n\n  .ogimage {\n    display: block;\n    width: 100%;\n  }\n\n  .container {\n    position: relative;\n    flex: 1;\n    background-color: #fff;\n    margin-left: 80px;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .title {\n    font-family: 'Quicksand', 'Source Sans Pro', -apple-system,\n      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n      sans-serif;\n    display: block;\n    font-weight: bold;\n    font-size: 40px;\n    color: #2b2c30;\n  }\n\n  .meta {\n    padding: 10px 0 40px;\n  }\n\n  .timestamp {\n    display: inline-flex;\n    align-items: center;\n    color: #919299;\n    margin-right: 20px;\n\n    img {\n      margin-right: 6px;\n    }\n  }\n\n  .author {\n    display: inline-flex;\n    align-items: center;\n    color: #919299;\n\n    img {\n      margin-right: 6px;\n    }\n  }\n}\n@media (min-width: 600px) and (max-width: 820px) {\n  .wrapper {\n    position: relative;\n    margin-top: 40px;\n  }\n\n  .divider {\n    margin: 20px 0 0;\n    padding: 0 20px;\n  }\n\n  .article {\n    width: 100%;\n  }\n\n  .aside {\n    margin-top: 60px;\n    margin-left: 104px;\n  }\n\n  .main {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 40px;\n    align-items: strech;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    width: 300px;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .ogimageWrap {\n    position: relative;\n    overflow: hidden;\n    border-radius: 5px;\n  }\n\n  .ogimage {\n    display: block;\n    width: 100%;\n  }\n\n  .container {\n    position: relative;\n    flex: 1;\n    background-color: #fff;\n    margin-left: 80px;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .title {\n    font-family: 'Quicksand', 'Source Sans Pro', -apple-system,\n      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n      sans-serif;\n    display: block;\n    font-weight: bold;\n    font-size: 40px;\n    color: #2b2c30;\n  }\n}\n@media (max-width: 600px) {\n  .wrapper {\n    position: relative;\n  }\n\n  .divider {\n    padding: 0 16px;\n  }\n\n  .article {\n    width: 100%;\n  }\n\n  .aside {\n    margin-top: 60px;\n    width: 100%;\n  }\n\n  .breadcrumb {\n    display: flex;\n    flex-wrap: wrap;\n    padding-top: 20px;\n    margin-bottom: -20px;\n  }\n\n  .breadcrumbList {\n    color: #616269;\n    font-size: 14px;\n\n    a {\n      color: #331cbf;\n    }\n\n    &::after {\n      content: '>';\n      margin: 0 10px;\n    }\n\n    &:last-child&::after {\n      content: '';\n      margin: 0;\n    }\n  }\n\n  .main {\n    display: flex;\n    flex-direction: column-reverse;\n    margin-top: 30px;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    height: 270px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .ogimageWrap {\n    position: relative;\n    overflow: hidden;\n    width: calc(100% + 32px);\n    margin: 0 -16px;\n  }\n\n  .ogimage {\n    display: block;\n    width: 100%;\n  }\n\n  .container {\n    position: relative;\n    flex: 1;\n    background-color: #fff;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .title {\n    font-family: 'Quicksand', 'Source Sans Pro', -apple-system,\n      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n      sans-serif;\n    display: block;\n    font-weight: bold;\n    font-size: 24px;\n    color: #2b2c30;\n  }\n}\n</style>\n"
  },
  {
    "path": "pages/author/_authorId.vue",
    "content": "<template>\n  <div id=\"author\" class=\"wrapper\">\n    <Header />\n\n    <div class=\"profile\">\n      <div class=\"inner\">\n        <picture v-if=\"author.image\">\n          <source\n            type=\"image/webp\"\n            :data-srcset=\"author.image.url + '?w=360&h=360&fm=webp'\"\n          />\n          <img\n            :data-src=\"author.image.url + '?w=360&h=360'\"\n            :width=\"180\"\n            :height=\"180\"\n            class=\"authorImg lazyload\"\n            alt\n          />\n        </picture>\n        <dl class=\"content\">\n          <dt class=\"nameWrapper\">\n            <span class=\"name\">{{ author.name }}</span>\n            <a v-if=\"author.twitter\" :href=\"author.twitter\" target=\"twitter\">\n              <img\n                src=\"/images/icon_x.svg\"\n                alt=\"X\"\n                class=\"icon lazyload\"\n                width=\"32\"\n                height=\"32\"\n              />\n            </a>\n            <a v-if=\"author.facebook\" :href=\"author.facebook\" target=\"facebook\">\n              <img\n                src=\"/images/icon_facebook.svg\"\n                alt=\"Facebook\"\n                class=\"icon lazyload\"\n                width=\"32\"\n                height=\"32\"\n              />\n            </a>\n            <a v-if=\"author.github\" :href=\"author.github\" target=\"github\">\n              <img\n                src=\"/images/icon_github.svg\"\n                alt=\"GitHub\"\n                class=\"icon lazyload\"\n                width=\"32\"\n                height=\"32\"\n              />\n            </a>\n            <a :href=\"`/author/${author.id}/feed.xml`\" target=\"rss\">\n              <img\n                src=\"/images/icon_feed.svg\"\n                alt=\"RSS\"\n                class=\"icon lazyload\"\n                width=\"32\"\n                height=\"32\"\n              />\n            </a>\n          </dt>\n          <dd class=\"text\">\n            {{ author.text }}\n          </dd>\n        </dl>\n        <div class=\"post\">\n          <span class=\"number\">{{ totalCount }}</span\n          ><span>Posts</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"divider\">\n      <div class=\"container\">\n        <Breadcrumb />\n        <h2 class=\"title\">{{ author.name }}が執筆した記事</h2>\n        <div v-show=\"contents.length === 0\" class=\"loader\">\n          記事がありません\n        </div>\n        <ul class=\"lists\">\n          <li v-for=\"content in contents\" :key=\"content.id\" class=\"list\">\n            <Card :content=\"content\" :author=\"author\" />\n          </li>\n        </ul>\n        <Pagination\n          v-if=\"contents.length > 0\"\n          :pager=\"pager\"\n          :current=\"Number(page)\"\n          :author=\"author\"\n        />\n      </div>\n      <aside class=\"aside\">\n        <Banners id=\"list\" :banners=\"banners\" />\n        <Search />\n        <Categories :categories=\"categories\" />\n        <Tags :tags=\"tags\" />\n        <PopularArticles :contents=\"popularArticles\" />\n      </aside>\n    </div>\n    <Footer />\n  </div>\n</template>\n\n<script>\nimport getDefaultOgimage from '../../utils/getDefaultOgimage';\n\nexport default {\n  async asyncData({ params, payload, $microcms }) {\n    const page = params.id || '1';\n    const authorId = params.authorId;\n    const limit = 10;\n    const popularArticles =\n      payload !== undefined && payload.popularArticles !== undefined\n        ? payload.popularArticles\n        : (\n            await $microcms.get({\n              endpoint: 'popular-articles',\n            })\n          ).articles;\n    const banners =\n      payload !== undefined\n        ? payload.banners\n        : await $microcms.get({\n            endpoint: 'banners',\n          });\n    const author = await $microcms.get({\n      endpoint: `authors/${authorId}`,\n    });\n    const data = await $microcms.get({\n      endpoint: 'blog',\n      queries: {\n        limit,\n        offset: (page - 1) * limit,\n        filters: `writer[equals]${authorId}`,\n      },\n    });\n    const categories = await $microcms.get({\n      endpoint: 'categories',\n      queries: {\n        limit: 100,\n      },\n    });\n    const tags = await $microcms.get({\n      endpoint: 'tags',\n      queries: {\n        limit: 100,\n      },\n    });\n\n    data.contents.forEach((content) => {\n      content.defaultOgimage = getDefaultOgimage(content);\n    });\n\n    return {\n      ...data,\n      author,\n      categories: categories.contents,\n      tags: tags.contents,\n      authorId,\n      popularArticles,\n      banners,\n      page,\n      pager: [...Array(Math.ceil(data.totalCount / limit)).keys()],\n    };\n  },\n  data() {\n    return {\n      contents: this.contents || [],\n      totalCount: this.totalCount || 0,\n      pager: this.pager || [],\n      loading: true,\n    };\n  },\n  head() {\n    return {\n      titleTemplate: null,\n      title: `${this.author.name}が執筆した記事 | microCMSブログ`,\n    };\n  },\n};\n</script>\n\n<style scoped>\n.profile {\n  background-color: var(--color-bg-purple-lightest);\n  padding: 64px 0;\n  margin: -45px auto 64px;\n}\n.inner {\n  max-width: 1160px;\n  margin: 0 auto;\n  display: flex;\n}\n.content {\n  margin-left: 60px;\n}\n.nameWrapper {\n  display: flex;\n  align-items: center;\n  margin-bottom: 16px;\n}\n.name {\n  font-size: 32px;\n  font-weight: 900;\n  margin-right: 24px;\n}\n.text {\n  margin-top: 8px;\n}\n.icon {\n  margin-right: 16px;\n}\n.authorImg {\n  border-radius: 50%;\n}\n.post {\n  text-align: center;\n  font-weight: 800;\n  font-size: 24px;\n  margin-left: 60px;\n}\n.number {\n  display: block;\n  font-size: 72px;\n  margin-bottom: -10px;\n}\n.lists {\n  display: flex;\n  flex-wrap: wrap;\n}\n.title {\n  font-size: 24px;\n  font-weight: bold;\n  margin: 16px 0 24px;\n}\n.list {\n  width: 340px;\n  padding: 0 0 64px;\n}\n.loader {\n  color: var(--color-text-disabled);\n  font-size: 20px;\n  text-align: center;\n  padding: 150px;\n}\n\n@media (min-width: 1160px) {\n  .divider {\n    display: flex;\n    justify-content: space-between;\n    width: 1160px;\n    margin: 20px auto 0;\n  }\n\n  .container {\n    width: 820px;\n  }\n\n  .aside {\n    width: 300px;\n  }\n  .link {\n    display: flex;\n    justify-content: space-between;\n  }\n  .list:nth-child(odd) {\n    margin-right: 60px;\n  }\n}\n@media (min-width: 820px) and (max-width: 1160px) {\n  .profile {\n    margin: 0 auto 64px;\n  }\n  .inner {\n    max-width: 740px;\n    display: block;\n    text-align: center;\n  }\n  .post,\n  .content {\n    margin: 16px 0;\n  }\n  .divider {\n    margin: 20px auto 0;\n    width: 740px;\n  }\n  .aside {\n    margin-top: 60px;\n  }\n  .nameWrapper {\n    justify-content: center;\n  }\n\n  .list:nth-child(odd) {\n    margin-right: 60px;\n  }\n}\n@media (max-width: 820px) {\n  .lists {\n    width: 100%;\n  }\n  .profile {\n    margin: 0 auto 64px;\n    padding: 64px 20px;\n  }\n  .inner {\n    max-width: 740px;\n    display: block;\n    text-align: center;\n  }\n  .content,\n  .post {\n    margin: 16px 0;\n  }\n  .divider {\n    margin: 20px 0 0;\n    padding: 0 20px;\n  }\n\n  .aside {\n    margin-top: 60px;\n    width: 100%;\n  }\n  .nameWrapper {\n    display: block;\n  }\n  .name {\n    display: block;\n    margin-right: 0;\n    margin-bottom: 16px;\n  }\n  .list {\n    width: 100%;\n    padding: 32px 0;\n    border-bottom: 1px solid var(--color-border-light);\n\n    &:first-child {\n      padding-top: 16px;\n    }\n  }\n  .loader {\n    color: var(--color-text-disabled);\n    font-size: 16px;\n    padding-top: 20px;\n  }\n}\n</style>\n"
  },
  {
    "path": "pages/draft/index.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <Header />\n    <div class=\"divider\">\n      <p v-if=\"!data.id\" class=\"loading\">Now Loading...</p>\n      <article v-if=\"data.id\" class=\"article\">\n        <div class=\"ogimageWrap\">\n          <picture v-if=\"data.ogimage\">\n            <source\n              media=\"(min-width: 1160px)\"\n              type=\"image/webp\"\n              :srcset=\"`${data.ogimage.url}?w=820&fm=webp, ${data.ogimage.url}?w=1640&fm=webp 2x`\"\n            />\n            <source\n              media=\"(min-width: 820px)\"\n              type=\"image/webp\"\n              :srcset=\"`${data.ogimage.url}?w=740&fm=webp, ${data.ogimage.url}?w=1480&fm=webp 2x`\"\n            />\n            <source\n              media=\"(min-width: 768px)\"\n              type=\"image/webp\"\n              :srcset=\"`${data.ogimage.url}?w=728&fm=webp, ${data.ogimage.url}?w=1456&fm=webp 2x`\"\n            />\n            <source\n              media=\"(max-width: 768px)\"\n              type=\"image/webp\"\n              :srcset=\"`${data.ogimage.url}?w=375&fm=webp, ${data.ogimage.url}?w=750&fm=webp 2x`\"\n            />\n            <img\n              ref=\"ogimage\"\n              :src=\"data.ogimage.url + '?w=820&q=100'\"\n              class=\"ogimage\"\n              alt\n            />\n          </picture>\n          <picture v-else>\n            <source type=\"image/webp\" :srcset=\"data.defaultOgimage\" />\n            <img ref=\"ogimage\" :src=\"data.defaultOgimage\" class=\"ogimage\" alt />\n          </picture>\n        </div>\n        <Breadcrumb :category=\"data.category\" />\n        <div class=\"main\">\n          <Share :id=\"data.id\" :title=\"data.title\" />\n          <div class=\"container\">\n            <h1 class=\"title\">{{ data.title }}</h1>\n            <Meta\n              :created-at=\"data.publishedAt || data.createdAt\"\n              :author=\"data.writer\"\n              :category=\"data.category\"\n              :tags=\"data.tag\"\n              :is-single-page=\"true\"\n            />\n            <Toc :id=\"data.id\" :toc=\"toc\" :visible=\"data.toc_visible\" />\n            <Post :body=\"data.body\" />\n            <ConversionPoint\n              :id=\"data.id\"\n              :contents=\"data.cv_point\"\n              :theme=\"\n                data.cv_point === null || data.cv_point.length <= 0\n                  ? ''\n                  : 'thumbnail'\n              \"\n            />\n            <Writer v-if=\"data.writer\" :writer=\"data.writer\" />\n            <Partner v-if=\"data.partner\" :partner=\"data.partner\" />\n            <RelatedBlogs\n              v-if=\"data.related_blogs.length > 0\"\n              :blogs=\"data.related_blogs\"\n            />\n          </div>\n        </div>\n      </article>\n      <aside class=\"aside\">\n        <Search />\n        <Categories :categories=\"categories\" />\n        <Tags :tags=\"tags\" />\n        <div class=\"followArea\">\n          <Banners :id=\"`draft-${data.id}`\" :banners=\"banners\" />\n          <Latest :contents=\"contents\" />\n        </div>\n      </aside>\n    </div>\n    <Footer />\n  </div>\n</template>\n\n<script>\nimport axios from 'axios';\nimport cheerio from 'cheerio';\nimport hljs from 'highlight.js';\nimport getDefaultOgimage from '../../utils/getDefaultOgimage';\n\nexport default {\n  async asyncData({ $microcms }) {\n    const categories = await $microcms.get({\n      endpoint: 'categories',\n      queries: {\n        limit: 100,\n      },\n    });\n    const tags = await $microcms.get({\n      endpoint: 'tags',\n      queries: {\n        limit: 100,\n      },\n    });\n    const banners = await $microcms.get({\n      endpoint: 'banners',\n    });\n    const { contents } = await $microcms.get({\n      endpoint: 'blog',\n    });\n    return {\n      categories: categories.contents,\n      tags: tags.contents,\n      banners,\n      contents,\n    };\n  },\n  data() {\n    return {\n      data: {\n        id: '',\n        ogimage: {\n          url: '',\n        },\n        body: '',\n        title: '',\n        createdAt: '',\n        publishedAt: '',\n        toc_visible: false,\n        writer: {\n          id: '',\n          name: '',\n          image: {\n            url: '',\n          },\n          text: '',\n        },\n        partner: {\n          id: '',\n          company: '',\n          url: '',\n          description: '',\n          logo: {\n            url: '',\n          },\n        },\n        category: {\n          name: '',\n          color: '',\n        },\n        related_blogs: [],\n      },\n      toc: [],\n      contents: [],\n      categories: [],\n    };\n  },\n  async created() {\n    const query = this.$route.query;\n    if (query.id === undefined || query.draftKey === undefined) {\n      return;\n    }\n    const { data, error } = await axios\n      .get(\n        `/.netlify/functions/draft?id=${query.id}&draftKey=${query.draftKey}`\n      )\n      .catch((error) => ({ error }));\n    if (error) {\n      return;\n    }\n    this.data = data;\n\n    // 目次作成\n    const $ = cheerio.load(data.body);\n    const headings = $('h1, h2, h3').toArray();\n    const toc = headings.map((d) => {\n      return {\n        text: d.children[0].data,\n        id: d.attribs.id,\n        name: d.name,\n      };\n    });\n    this.toc = toc;\n    $('pre code').each((_, elm) => {\n      const res = hljs.highlightAuto($(elm).text());\n      $(elm).html(res.value);\n      $(elm).addClass('hljs');\n    });\n    $('a').each((_, elm) => {\n      // hrefが動画リンクのものはvideoタグを作成し、srcにhrefの値を設定\n      if ($(elm).attr('href').endsWith('.mp4')) {\n        const video = $('<video></video>');\n        video.attr('src', $(elm).attr('href'));\n        video.attr('controls', 'controls');\n        video.attr('preload', 'metadata');\n        $(elm).replaceWith(video);\n      }\n    });\n    this.data.body = $.html();\n    this.data.defaultOgimage = getDefaultOgimage(this.data);\n    this.data.related_blogs.forEach((blog) => {\n      blog.defaultOgimage = getDefaultOgimage(blog);\n    });\n  },\n  head() {\n    return {\n      title: this.title,\n      meta: [\n        {\n          hid: 'description',\n          name: 'description',\n          content: this.data && this.data.description,\n        },\n        {\n          hid: 'og:title',\n          property: 'og:title',\n          content: this.data && this.data.title,\n        },\n        {\n          hid: 'og:description',\n          property: 'og:description',\n          content: this.data && this.data.description,\n        },\n        {\n          hid: 'og:url',\n          property: 'og:url',\n          content: `https://blog.microcms.io/${this.data && this.data.id}`,\n        },\n        {\n          hid: 'og:image',\n          property: 'og:image',\n          content: this.data && this.data.ogimage && this.data.ogimage.url,\n        },\n      ],\n      link: [\n        {\n          rel: 'stylesheet',\n          href:\n            'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css',\n        },\n      ],\n      script: [\n        {\n          src:\n            'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js',\n          async: true,\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<style scoped>\n.category {\n  display: inline-block;\n  padding: 2px 10px;\n  border-radius: 3px;\n  color: #fff;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.loading {\n  color: var(--color-text-off);\n}\n\n@media (min-width: 1160px) {\n  .wrapper {\n    position: relative;\n  }\n\n  .divider {\n    display: flex;\n    justify-content: space-between;\n    width: 1160px;\n    margin: 20px auto 0;\n  }\n\n  .article {\n    width: 820px;\n  }\n\n  .aside {\n    width: 300px;\n  }\n\n  .main {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 40px;\n  }\n\n  .followArea {\n    position: sticky !important;\n    top: 115px;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    width: 300px;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .ogimageWrap {\n    position: relative;\n    overflow: hidden;\n    border-radius: 5px;\n  }\n\n  .ogimage {\n    display: block;\n    width: 100%;\n    transition: transform 0.5s ease, opacity 0.5s ease;\n  }\n\n  .container {\n    position: relative;\n    flex: 1;\n    background-color: #fff;\n    margin-left: 80px;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .title {\n    font-family: 'Quicksand', 'Source Sans Pro', -apple-system,\n      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n      sans-serif;\n    display: block;\n    font-weight: bold;\n    font-size: 40px;\n    color: #2b2c30;\n  }\n}\n\n@media (min-width: 820px) and (max-width: 1160px) {\n  .wrapper {\n    position: relative;\n    margin-top: 40px;\n  }\n\n  .divider {\n    margin: 20px auto 0;\n    width: 740px;\n  }\n\n  .article {\n    width: 740px;\n  }\n\n  .aside {\n    margin-top: 60px;\n    margin-left: 104px;\n  }\n\n  .main {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 40px;\n    align-items: strech;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    width: 300px;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .ogimageWrap {\n    position: relative;\n    overflow: hidden;\n    border-radius: 5px;\n  }\n\n  .ogimage {\n    display: block;\n    width: 100%;\n    transition: transform 0.5s ease;\n  }\n\n  .container {\n    position: relative;\n    flex: 1;\n    background-color: #fff;\n    margin-left: 80px;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .title {\n    font-family: 'Quicksand', 'Source Sans Pro', -apple-system,\n      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n      sans-serif;\n    display: block;\n    font-weight: bold;\n    font-size: 40px;\n    color: #2b2c30;\n  }\n\n  .meta {\n    padding: 10px 0 40px;\n  }\n\n  .timestamp {\n    display: inline-flex;\n    align-items: center;\n    color: #919299;\n    margin-right: 20px;\n\n    img {\n      margin-right: 6px;\n    }\n  }\n\n  .author {\n    display: inline-flex;\n    align-items: center;\n    color: #919299;\n\n    img {\n      margin-right: 6px;\n    }\n  }\n}\n@media (min-width: 600px) and (max-width: 820px) {\n  .wrapper {\n    position: relative;\n    margin-top: 40px;\n  }\n\n  .divider {\n    margin: 20px 0 0;\n    padding: 0 20px;\n  }\n\n  .article {\n    width: 100%;\n  }\n\n  .aside {\n    margin-top: 60px;\n    margin-left: 104px;\n  }\n\n  .main {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 40px;\n    align-items: strech;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    width: 300px;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .ogimageWrap {\n    position: relative;\n    overflow: hidden;\n    border-radius: 5px;\n  }\n\n  .ogimage {\n    display: block;\n    width: 100%;\n    transition: transform 0.5s ease;\n  }\n\n  .container {\n    position: relative;\n    flex: 1;\n    background-color: #fff;\n    margin-left: 80px;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .title {\n    font-family: 'Quicksand', 'Source Sans Pro', -apple-system,\n      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n      sans-serif;\n    display: block;\n    font-weight: bold;\n    font-size: 40px;\n    color: #2b2c30;\n  }\n}\n@media (max-width: 600px) {\n  .wrapper {\n    position: relative;\n  }\n\n  .divider {\n    padding: 0 16px;\n  }\n\n  .article {\n    width: 100%;\n  }\n\n  .aside {\n    margin-top: 60px;\n    width: 100%;\n  }\n\n  .breadcrumb {\n    display: flex;\n    flex-wrap: wrap;\n    padding-top: 20px;\n    margin-bottom: -20px;\n  }\n\n  .breadcrumbList {\n    color: #616269;\n    font-size: 14px;\n\n    a {\n      color: #331cbf;\n    }\n\n    &::after {\n      content: '>';\n      margin: 0 10px;\n    }\n\n    &:last-child&::after {\n      content: '';\n      margin: 0;\n    }\n  }\n\n  .main {\n    display: flex;\n    flex-direction: column-reverse;\n    margin-top: 30px;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    height: 270px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .ogimageWrap {\n    position: relative;\n    overflow: hidden;\n    width: calc(100% + 32px);\n    margin: 0 -16px;\n  }\n\n  .ogimage {\n    display: block;\n    width: 100%;\n    transition: transform 0.5s ease;\n  }\n\n  .container {\n    position: relative;\n    flex: 1;\n    background-color: #fff;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .title {\n    font-family: 'Quicksand', 'Source Sans Pro', -apple-system,\n      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n      sans-serif;\n    display: block;\n    font-weight: bold;\n    font-size: 24px;\n    color: #2b2c30;\n  }\n}\n</style>\n"
  },
  {
    "path": "pages/index.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <Header />\n    <div class=\"divider\">\n      <div class=\"container\">\n        <Breadcrumb :category=\"selectedCategory\" :tag=\"selectedTag\" />\n        <div v-show=\"contents.length === 0\" class=\"loader\">\n          記事がありません\n        </div>\n        <ul>\n          <li v-for=\"content in contents\" :key=\"content.id\" class=\"list\">\n            <nuxt-link :to=\"`/${content.id}/`\" class=\"link\">\n              <picture v-if=\"content.ogimage\">\n                <source\n                  type=\"image/webp\"\n                  :data-srcset=\"content.ogimage.url + '?w=670&fm=webp'\"\n                />\n                <img\n                  :data-src=\"content.ogimage.url + '?w=670'\"\n                  :width=\"content.ogimage.width\"\n                  :height=\"content.ogimage.height\"\n                  class=\"ogimage lazyload\"\n                  alt\n                />\n              </picture>\n              <picture v-else>\n                <source\n                  type=\"image/webp\"\n                  :data-srcset=\"content.defaultOgimage\"\n                />\n                <img\n                  :data-src=\"content.defaultOgimage\"\n                  class=\"ogimage lazyload\"\n                  alt\n                />\n              </picture>\n              <dl class=\"content\">\n                <dt class=\"title\">{{ content.title }}</dt>\n                <dd>\n                  <Meta\n                    :created-at=\"content.publishedAt || content.createdAt\"\n                    :author=\"content.writer\"\n                    :category=\"content.category\"\n                    :tags=\"content.tag\"\n                  />\n                </dd>\n              </dl>\n            </nuxt-link>\n          </li>\n        </ul>\n        <Pagination\n          v-if=\"contents.length > 0\"\n          :pager=\"pager\"\n          :current=\"Number(page)\"\n          :category=\"selectedCategory\"\n          :tag=\"selectedTag\"\n        />\n      </div>\n      <aside class=\"aside\">\n        <Banners id=\"list\" :banners=\"banners\" />\n        <Search />\n        <Categories :categories=\"categories\" />\n        <Tags :tags=\"tags\" />\n        <PopularArticles :contents=\"popularArticles\" />\n      </aside>\n    </div>\n    <Footer />\n  </div>\n</template>\n\n<script>\nimport getDefaultOgimage from '../utils/getDefaultOgimage';\n\nexport default {\n  async asyncData({ params, payload, $microcms }) {\n    const page = params.id || '1';\n    const categoryId = params.categoryId;\n    const tagId = params.tagId;\n    const articleFilter =\n      categoryId !== undefined\n        ? `category[equals]${categoryId}`\n        : tagId !== undefined\n        ? `tag[contains]${tagId}`\n        : undefined;\n    const limit = 10;\n    const popularArticles =\n      payload !== undefined && payload.popularArticles !== undefined\n        ? payload.popularArticles\n        : (\n            await $microcms.get({\n              endpoint: 'popular-articles',\n            })\n          ).articles;\n    const banners =\n      payload !== undefined\n        ? payload.banners\n        : await $microcms.get({\n            endpoint: 'banners',\n          });\n    const data = await $microcms.get({\n      endpoint: 'blog',\n      queries: {\n        limit,\n        offset: (page - 1) * limit,\n        filters: articleFilter,\n      },\n    });\n    const categories = await $microcms.get({\n      endpoint: 'categories',\n      queries: {\n        limit: 100,\n      },\n    });\n    const tags = await $microcms.get({\n      endpoint: 'tags',\n      queries: {\n        limit: 100,\n      },\n    });\n    const selectedCategory =\n      categoryId !== undefined\n        ? categories.contents.find((content) => content.id === categoryId)\n        : undefined;\n    const selectedTag =\n      tagId !== undefined\n        ? tags.contents.find((content) => content.id === tagId)\n        : undefined;\n\n    // デフォルト画像を設定\n    data.contents.forEach((content) => {\n      content.defaultOgimage = getDefaultOgimage(content);\n    });\n\n    return {\n      ...data,\n      categories: categories.contents,\n      tags: tags.contents,\n      selectedCategory,\n      selectedTag,\n      popularArticles,\n      banners,\n      page,\n      pager: [...Array(Math.ceil(data.totalCount / limit)).keys()],\n    };\n  },\n  data() {\n    return {\n      contents: this.contents || [],\n      totalCount: this.totalCount || 0,\n      pager: this.pager || [],\n      loading: true,\n    };\n  },\n  head() {\n    return {\n      titleTemplate: null,\n      title: 'microCMSブログ',\n    };\n  },\n};\n</script>\n\n<style scoped>\n@media (min-width: 1160px) {\n  .loader {\n    color: #ccc;\n    font-size: 20px;\n    text-align: center;\n    padding: 150px;\n  }\n\n  .pager {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n    padding: 40px 0 0;\n  }\n\n  .page {\n    width: 40px;\n    height: 40px;\n    background-color: #e5eff9;\n    border-radius: 5px;\n    margin: 10px;\n\n    &.active {\n      background-color: #3067af;\n\n      a {\n        color: #fff;\n      }\n    }\n\n    a {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      color: #3067af;\n    }\n  }\n\n  .divider {\n    display: flex;\n    justify-content: space-between;\n    width: 1160px;\n    margin: 20px auto 0;\n  }\n\n  .container {\n    width: 820px;\n  }\n\n  .aside {\n    width: 300px;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    width: 300px;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .pageTitle {\n    font-size: 24px;\n    font-weight: bold;\n  }\n\n  .list {\n    padding: 20px 0;\n  }\n\n  .link {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .ogimage {\n    width: 335px;\n    height: 176px;\n    border-radius: 5px;\n  }\n\n  .content {\n    flex: 1;\n    margin-left: 40px;\n  }\n\n  .title {\n    font-size: 20px;\n    font-weight: bold;\n  }\n}\n@media (min-width: 820px) and (max-width: 1160px) {\n  .loader {\n    color: #ccc;\n    font-size: 16px;\n    padding-top: 20px;\n  }\n\n  .pager {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n    padding: 40px 0 0;\n  }\n\n  .page {\n    width: 40px;\n    height: 40px;\n    background-color: #e5eff9;\n    border-radius: 5px;\n    margin: 10px;\n\n    &.active {\n      background-color: #3067af;\n\n      a {\n        color: #fff;\n      }\n    }\n\n    a {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      color: #3067af;\n    }\n  }\n\n  .divider {\n    margin: 20px auto 0;\n    width: 740px;\n  }\n\n  .article {\n    width: 740px;\n  }\n\n  .aside {\n    margin-top: 60px;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    width: 300px;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .pageTitle {\n    font-size: 24px;\n    font-weight: bold;\n  }\n\n  .list {\n    padding: 20px 0;\n  }\n\n  .link {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .ogimage {\n    width: 335px;\n    height: auto;\n    border-radius: 5px;\n  }\n\n  .content {\n    flex: 1;\n    margin-left: 40px;\n  }\n\n  .title {\n    font-size: 20px;\n    font-weight: bold;\n  }\n}\n@media (max-width: 820px) {\n  .loader {\n    color: #ccc;\n    font-size: 16px;\n    padding-top: 20px;\n  }\n\n  .pager {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n    padding: 40px 0 0;\n  }\n\n  .page {\n    width: 32px;\n    height: 32px;\n    background-color: #e5eff9;\n    border-radius: 5px;\n    margin: 6px;\n\n    &.active {\n      background-color: #3067af;\n\n      a {\n        color: #fff;\n      }\n    }\n\n    a {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      color: #3067af;\n    }\n  }\n\n  .divider {\n    margin: 20px 0 0;\n    padding: 0 20px;\n  }\n\n  .article {\n    width: 100%;\n  }\n\n  .aside {\n    margin-top: 60px;\n    width: 100%;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .pageTitle {\n    font-size: 24px;\n    font-weight: bold;\n  }\n\n  .list {\n    padding: 32px 0 0;\n    border-bottom: 1px solid #eee;\n\n    &:first-child {\n      padding-top: 16px;\n    }\n  }\n\n  .ogimage {\n    width: 100%;\n    height: auto;\n    border-radius: 5px;\n  }\n\n  .title {\n    font-size: 20px;\n    font-weight: bold;\n    margin-top: 10px;\n  }\n}\n</style>\n"
  },
  {
    "path": "pages/search/index.vue",
    "content": "<template>\n  <div class=\"wrapper\">\n    <Header />\n    <div class=\"divider\">\n      <div class=\"container\">\n        <input\n          v-model=\"q\"\n          class=\"search\"\n          type=\"text\"\n          @keyup.enter=\"(e) => search(e.target.value)\"\n          @keypress=\"setSearchable\"\n        />\n        <div v-if=\"loading === true\" class=\"loader\">\n          <img\n            class=\"loadingIcon\"\n            src=\"/images/icon_loading.svg\"\n            alt=\"検索中...\"\n          />\n        </div>\n        <div v-else>\n          <div\n            v-show=\"loading === false && contents.length === 0\"\n            class=\"loader\"\n          >\n            記事がありません\n          </div>\n          <ul>\n            <li v-for=\"content in contents\" :key=\"content.id\" class=\"list\">\n              <nuxt-link :to=\"`/${content.id}`\" class=\"link\">\n                <picture v-if=\"content.ogimage\">\n                  <source\n                    type=\"image/webp\"\n                    :srcset=\"content.ogimage.url + '?w=670&fm=webp'\"\n                  />\n                  <img\n                    :src=\"content.ogimage.url + '?w=670'\"\n                    class=\"ogimage\"\n                    alt\n                  />\n                </picture>\n                <picture v-else>\n                  <source type=\"image/webp\" :srcset=\"content.defaultOgimage\" />\n                  <img :src=\"content.defaultOgimage\" class=\"ogimage\" alt />\n                </picture>\n                <dl class=\"content\">\n                  <dt class=\"title\">{{ content.title }}</dt>\n                  <dd>\n                    <Meta\n                      :created-at=\"content.publishedAt || content.createdAt\"\n                      :author=\"content.writer\"\n                      :category=\"content.category\"\n                      :tags=\"content.tag\"\n                    />\n                  </dd>\n                </dl>\n              </nuxt-link>\n            </li>\n          </ul>\n          <ul v-show=\"contents.length > 0\" class=\"pager\">\n            <li\n              v-for=\"p in pager\"\n              :key=\"p\"\n              class=\"page\"\n              :class=\"{ active: page === `${p + 1}` }\"\n            >\n              <nuxt-link\n                :to=\"`/${\n                  selectedCategory !== undefined\n                    ? `category/${selectedCategory.id}/`\n                    : ''\n                }page/${p + 1}`\"\n              >\n                {{ p + 1 }}\n              </nuxt-link>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <aside class=\"aside\">\n        <Banners id=\"search\" :banners=\"banners\" />\n        <Categories :categories=\"categories\" />\n        <Tags :tags=\"tags\" />\n        <PopularArticles :contents=\"popularArticles\" />\n      </aside>\n    </div>\n    <Footer />\n  </div>\n</template>\n\n<script>\nimport axios from 'axios';\nimport getDefaultOgimage from '../../utils/getDefaultOgimage';\n\nexport default {\n  async asyncData({ payload, $microcms }) {\n    const popularArticles =\n      payload !== undefined && payload.popularArticles !== undefined\n        ? payload.popularArticles\n        : (\n            await $microcms.get({\n              endpoint: 'popular-articles',\n            })\n          ).articles;\n    const banners =\n      payload !== undefined\n        ? payload.banners\n        : await $microcms.get({\n            endpoint: 'banners',\n          });\n    const categories = await $microcms.get({\n      endpoint: 'categories',\n      queries: {\n        limit: 100,\n      },\n    });\n    const tags = await $microcms.get({\n      endpoint: 'tags',\n      queries: {\n        limit: 100,\n      },\n    });\n    return {\n      popularArticles,\n      banners,\n      categories: categories.contents,\n      tags: tags.contents,\n    };\n  },\n  data() {\n    return {\n      searchable: true,\n      contents: this.contents || [],\n      totalCount: this.totalCount || 0,\n      categories: this.categories || [],\n      pager: this.pager || [],\n      loading: true,\n      q: this.$route.query.q,\n    };\n  },\n  created() {\n    const query = this.$route.query;\n    this.search(query.q);\n  },\n  methods: {\n    setSearchable() {\n      this.searchable = true;\n    },\n    async search(q = '') {\n      if (!q.trim() || !this.searchable) {\n        return;\n      }\n      this.loadingStart();\n      const { data, error } = await axios\n        .get(`/.netlify/functions/search?q=${q}`)\n        .catch((error) => ({ error }));\n      this.loadingFinish();\n      if (error) {\n        return;\n      }\n      this.contents = data.contents;\n      this.contents.forEach((content) => {\n        content.defaultOgimage = getDefaultOgimage(content);\n      });\n      this.totalCount = data.totalCount;\n      this.searchable = false;\n    },\n    loadingStart() {\n      this.loading = true;\n    },\n    loadingFinish() {\n      this.loading = false;\n    },\n  },\n  head() {\n    return {\n      titleTemplate: null,\n      title: 'microCMSブログ',\n    };\n  },\n};\n</script>\n\n<style scoped>\n.search {\n  border: 1px solid var(--color-border);\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: 5px;\n  height: 40px;\n  font-size: 16px;\n  background: url('/images/icon_search.svg') no-repeat 10px center,\n    var(--color-bg-purple-light);\n  padding-left: 40px;\n  margin-bottom: 20px;\n  box-shadow: none;\n  -webkit-appearance: none;\n  transition: box-shadow 0.2s ease;\n\n  &:hover {\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;\n  }\n}\n\n.loadingIcon {\n  width: 38px;\n  height: 38px;\n}\n\n@media (min-width: 1160px) {\n  .loader {\n    color: #ccc;\n    font-size: 20px;\n    text-align: center;\n    padding: 150px;\n  }\n\n  .pager {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n    padding: 40px 0 0;\n  }\n\n  .page {\n    width: 40px;\n    height: 40px;\n    background-color: #e5eff9;\n    border-radius: 5px;\n    margin: 10px;\n\n    &.active {\n      background-color: #3067af;\n\n      a {\n        color: #fff;\n      }\n    }\n\n    a {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      color: #3067af;\n    }\n  }\n\n  .divider {\n    display: flex;\n    justify-content: space-between;\n    width: 1160px;\n    margin: 20px auto 0;\n  }\n\n  .container {\n    width: 820px;\n  }\n\n  .aside {\n    width: 300px;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    width: 300px;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .pageTitle {\n    font-size: 24px;\n    font-weight: bold;\n  }\n\n  .list {\n    padding: 20px 0;\n  }\n\n  .link {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .ogimage {\n    width: 335px;\n    height: 176px;\n    border-radius: 5px;\n  }\n\n  .content {\n    flex: 1;\n    margin-left: 40px;\n  }\n\n  .title {\n    font-size: 20px;\n    font-weight: bold;\n  }\n}\n@media (min-width: 820px) and (max-width: 1160px) {\n  .loader {\n    color: #ccc;\n    text-align: center;\n    font-size: 16px;\n    padding-top: 20px;\n  }\n\n  .pager {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n    padding: 40px 0 0;\n  }\n\n  .page {\n    width: 40px;\n    height: 40px;\n    background-color: #e5eff9;\n    border-radius: 5px;\n    margin: 10px;\n\n    &.active {\n      background-color: #3067af;\n\n      a {\n        color: #fff;\n      }\n    }\n\n    a {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      color: #3067af;\n    }\n  }\n\n  .divider {\n    margin: 20px auto 0;\n    width: 740px;\n  }\n\n  .article {\n    width: 740px;\n  }\n\n  .aside {\n    margin-top: 60px;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    width: 300px;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .pageTitle {\n    font-size: 24px;\n    font-weight: bold;\n  }\n\n  .list {\n    padding: 20px 0;\n  }\n\n  .link {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .ogimage {\n    width: 335px;\n    height: 176px;\n    border-radius: 5px;\n  }\n\n  .content {\n    flex: 1;\n    margin-left: 40px;\n  }\n\n  .title {\n    font-size: 20px;\n    font-weight: bold;\n  }\n}\n@media (max-width: 820px) {\n  .loader {\n    color: #ccc;\n    text-align: center;\n    font-size: 16px;\n    padding-top: 20px;\n  }\n\n  .pager {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n    padding: 40px 0 0;\n  }\n\n  .page {\n    width: 32px;\n    height: 32px;\n    background-color: #e5eff9;\n    border-radius: 5px;\n    margin: 6px;\n\n    &.active {\n      background-color: #3067af;\n\n      a {\n        color: #fff;\n      }\n    }\n\n    a {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      color: #3067af;\n    }\n  }\n\n  .divider {\n    margin: 20px 0 0;\n    padding: 0 20px;\n  }\n\n  .article {\n    width: 100%;\n  }\n\n  .aside {\n    margin-top: 60px;\n    width: 100%;\n  }\n\n  .banner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    height: 250px;\n    background-color: #2b2c30;\n    color: #fff;\n    border-radius: 5px;\n\n    img {\n      width: 160px;\n      margin-top: 10px;\n    }\n\n    p {\n      margin-top: 30px;\n      color: #999;\n      padding-top: 10px;\n      font-size: 14px;\n      width: 260px;\n      text-align: center;\n      border-top: 1px solid #666;\n    }\n\n    span {\n      display: block;\n      border: 1px solid #fff;\n      width: 120px;\n      margin: 0 auto;\n      text-align: center;\n      margin-top: 10px;\n      padding: 4px 0;\n      font-size: 14px;\n    }\n  }\n\n  .pageTitle {\n    font-size: 24px;\n    font-weight: bold;\n  }\n\n  .list {\n    padding: 32px 0 0;\n    border-bottom: 1px solid #eee;\n\n    &:first-child {\n      padding-top: 16px;\n    }\n  }\n\n  .ogimage {\n    width: 100%;\n    border-radius: 5px;\n  }\n\n  .title {\n    font-size: 20px;\n    font-weight: bold;\n    margin-top: 10px;\n  }\n}\n</style>\n"
  },
  {
    "path": "plugins/README.md",
    "content": "# PLUGINS\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThis directory contains Javascript plugins that you want to run before mounting the root Vue.js application.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).\n"
  },
  {
    "path": "plugins/vue-scrollto.js",
    "content": "import Vue from 'vue';\nimport VueScrollTo from 'vue-scrollto';\n\nVue.use(VueScrollTo);\n\nexport default function vueScrollTo(context, inject) {\n  inject('scrollTo', VueScrollTo.scrollTo);\n}\n"
  },
  {
    "path": "static/README.md",
    "content": "# STATIC\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThis directory contains your static files.\nEach file inside this directory is mapped to `/`.\nThus you'd want to delete this README.md before deploying to production.\n\nExample: `/static/robots.txt` is mapped as `/robots.txt`.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).\n"
  },
  {
    "path": "static/robots.txt",
    "content": "User-agent: *\nAllow: /\nDisallow: /draft/\nSitemap: https://blog.microcms.io/sitemap.xml\nCrawl-delay: 1"
  },
  {
    "path": "utils/getDefaultOgimage.js",
    "content": "export default function getDefaultOgimage(content) {\n  const encodedTitle = encodeURI(content.title);\n  const length = content.title.length;\n  const textSize = length > 36 ? 56 : length > 22 ? 64 : length > 14 ? 74 : 84; // 正確な文字数ではないが大体の指標としては十分と判断する\n  return `https://images.blog.microcms.io/assets/f5d83e38f9374219900ef1b0cc4d85cd/92c09085ec6243cca78046fa644dd8cd/banner-bg.png?blend-mode=normal&blend-x=78&blend-y=200&blend64=${Buffer.from(\n    `https://assets.imgix.net/~text?txtsize=${textSize}&w=672&txtfont=Noto%20Sans%20JP%20Black&txt-color=212149&txt=${encodedTitle}`,\n    'ascii'\n  ).toString('base64')}`;\n}\n"
  },
  {
    "path": "utils/microcms.js",
    "content": "const { createClient } = require('microcms-js-sdk');\nrequire('dotenv').config();\nconst { API_KEY, SERVICE_ID } = process.env;\nexport const client = createClient({\n  serviceDomain: SERVICE_ID,\n  apiKey: API_KEY,\n});\n"
  }
]