├── .babelrc
├── .editorconfig
├── .env.example
├── .eslintrc.js
├── .firebaserc
├── .gitignore
├── .prettierrc
├── README.md
├── assets
    ├── README.md
    └── css
    │   └── tailwind.css
├── components
    ├── README.md
    ├── common
    │   ├── AppAccordion.vue
    │   ├── AppNavbar.vue
    │   ├── TheFooter.vue
    │   └── signIn
    │   │   ├── SignInButton.vue
    │   │   ├── SignInButtonNav.vue
    │   │   └── SingIn.vue
    └── partials
    │   ├── AccountDropdown.vue
    │   ├── ButtonPostCreate.vue
    │   ├── NodeTreeEditor
    │       ├── NodeTreeEdit.vue
    │       ├── NodeTreeEditor.vue
    │       ├── QustionNodeEdit.vue
    │       └── ResultNodeEdit.vue
    │   └── post
    │       ├── InputTags.vue
    │       ├── PostForm.vue
    │       ├── PostList.vue
    │       ├── PostListRecent.vue
    │       └── PostPlay.vue
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── jest.config.js
├── jsconfig.json
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── now.json
├── nuxt.config.js
├── package.json
├── pages
    ├── README.md
    ├── index.vue
    ├── posts
    │   ├── _id
    │   │   ├── edit.vue
    │   │   └── index.vue
    │   └── create.vue
    └── users
    │   └── _userId
    │       └── posts
    │           └── index.vue
├── plugins
    ├── README.md
    ├── firebase.ts
    └── vue-tags-input.js
├── static
    ├── README.md
    ├── favicon.ico
    ├── icon.png
    └── images
    │   └── ogp.png
├── store
    └── README.md
├── stylelint.config.js
├── tailwind.config.js
├── tsconfig.json
├── types
    ├── error.ts
    └── struct.ts
├── utils
    ├── constants
    │   ├── defalutNodeTreeData.ts
    │   └── nodeTreeSamples.ts
    ├── externals
    │   └── firebase.ts
    └── transformer
    │   └── toObject.ts
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "test": {
 4 |       "presets": [
 5 |         [
 6 |           "@babel/preset-env",
 7 |           {
 8 |             "targets": {
 9 |               "node": "current"
10 |             }
11 |           }
12 |         ]
13 |       ]
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
 1 | BASE_URL=http://localhost:3000
 2 | OGP_API_URL=
 3 | 
 4 | FIREBASE_API_KEY=
 5 | FIREBASE_AUTH_DOMAIN=
 6 | FIREBASE_DATABASEURL=
 7 | FIREBASE_PROJECT_ID=
 8 | FIREBASE_STORAGE_BUCKET=
 9 | FIREBASE_MESSAGING_SENDER_ID=
10 | FIREBASE_APP_ID=
11 | FIREBASE_MEASUREMENT_ID=


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   extends: [
 8 |     '@nuxtjs/eslint-config-typescript',
 9 |     'prettier',
10 |     'prettier/vue',
11 |     'plugin:prettier/recommended',
12 |     'plugin:nuxt/recommended'
13 |   ],
14 |   plugins: [
15 |     'prettier'
16 |   ],
17 |   // add your custom rules here
18 |   rules: {
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "shindan-chart-maker"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "arrowParens": "always",
4 |   "singleQuote": true
5 | }
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 診断チャートメーカー
 2 | 
 3 | ![img](./static/images/ogp.png)
 4 | 
 5 | ## 動的OGP画像のAPI 🌄
 6 | [retoruto\-carry/shindan\-chart\-maker\-ogp](https://github.com/retoruto-carry/shindan-chart-maker-ogp)
 7 | 
 8 | 環境変数のOGP_API_URLにはこのAPIのエンドポイントを指定する
 9 | 
10 | ## Build Setup 🏗️
11 | ```bash
12 | # install dependencies
13 | $ yarn install
14 | 
15 | # serve with hot reload at localhost:3000
16 | $ yarn dev
17 | 
18 | # build for production and launch server
19 | $ yarn build
20 | $ yarn start
21 | 
22 | # generate static project
23 | $ yarn generate
24 | ```
25 | 
26 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
27 | 
28 | ## 参考にしたコード 🙏
29 | 
30 | - [pokemon63/README\.md at master · potato4d/pokemon63](https://github.com/potato4d/pokemon63/blob/master/README.md)
31 |   - Nuxt × Typescript × Firebaseの雛形として参考にした
32 | 
33 | - [Tree view from unordered list](https://codepen.io/ross-angus/pen/jwxMjL?__cf_chl_jschl_tk__=b500ef43c274ced69c7789135ae5f91dc41a5715-1592141349-0-AdPgBdhmtpDdcEolihJ21YSARcg6WRbMriSlAPjrWsPgVKYiQGxhxX-Q31P4zm0q6BkG4uM_54CeBVcs3L3khMq0QI1tf2BPou_eS8ZV12KQZd6O67IntsyyWPwit0lWQl78gUUYV62-lyo20r1MuDIKBos3M6Iu6xV8CZoeLFhzr7VHFMasY8VZ6sc3drm8fJFExMtPZ85KU6DaavBiOOrHpeqcNOZP47U2elfubZnNMt_pNa78AfEteY3yuBys63e1Rhm5_-yJ3zau5cO_y5gVdpFlL047KNPDbDp-kWOPzBFqp32WmTxi9HD6D5Xoin_rhnlyfahU7a3GxV4C56lVbDj5IZpDdOb7OMpuZDff)
34 |   - フローチャートのCSSの参考にした


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | /* purgecss start ignore */
2 | @import 'tailwindcss/base';
3 | @import 'tailwindcss/components';
4 | /* purgecss end ignore */
5 | @import 'tailwindcss/utilities';
6 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/components/common/AppAccordion.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex align-center flex-col">
 3 |     <div
 4 |       class="cursor-pointer border border-gray-400 p-2 bg-white inline-block hover:opacity-75 hover:shadow hover:-mb-3 rounded-t"
 5 |       @click="handleToggle"
 6 |     >
 7 |       <p class="text-left text-gray-600">
 8 |         <i
 9 |           class="mdi mr-1"
10 |           :class="[isOpen ? 'mdi-chevron-right' : 'mdi-chevron-down']"
11 |         />
12 |         {{ title }}
13 |       </p>
14 |     </div>
15 |     <div v-show="isOpen" class="border p-4">
16 |       <slot></slot>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script lang="ts">
22 | import Vue from 'vue'
23 | 
24 | type LocalData = {
25 |   isOpen: Boolean
26 | }
27 | 
28 | export default Vue.extend({
29 |   name: 'AppAccordion',
30 |   props: {
31 |     title: {
32 |       type: String,
33 |       required: true
34 |     }
35 |   },
36 |   data(): LocalData {
37 |     return {
38 |       isOpen: false
39 |     }
40 |   },
41 |   methods: {
42 |     handleToggle(): void {
43 |       this.isOpen = !this.isOpen
44 |     }
45 |   }
46 | })
47 | </script>
48 | 


--------------------------------------------------------------------------------
/components/common/AppNavbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <div
 4 |       class="bg-white shadow border-b border-gray-200 h-12 md:h-16 flex items-center fixed top-0 inset-x-0 z-100"
 5 |     >
 6 |       <div
 7 |         class="mx-auto w-full max-w-screen-lg flex items-center justify-between px-4 py-2"
 8 |       >
 9 |         <nuxt-link to="/">
10 |           <span class="text-gray-900 font-bold text-sm md:text-lg">
11 |             診断チャートメーカー
12 |           </span>
13 |         </nuxt-link>
14 |         <client-only>
15 |           <div class="flex items-center">
16 |             <nuxt-link
17 |               to="/posts/create"
18 |               class="align-middle text-gray-700 mr-6"
19 |             >
20 |               <i class="mdi mdi-pencil" />
21 |               <span class="hidden md:inline">作成</span>
22 |             </nuxt-link>
23 |             <account-dropdown
24 |               v-if="$auth.currentUser"
25 |               :photo-url="$auth.currentUser.photoURL"
26 |             />
27 |             <sign-in-button-nav v-else />
28 |           </div>
29 |         </client-only>
30 |       </div>
31 |     </div>
32 |   </header>
33 | </template>
34 | 
35 | <script lang="ts">
36 | import Vue from 'vue'
37 | import accountDropdown from '~/components/partials/AccountDropdown.vue'
38 | import signInButtonNav from '~/components/common/signIn/SignInButtonNav.vue'
39 | 
40 | export default Vue.extend({
41 |   name: 'AppNavbar',
42 |   components: {
43 |     accountDropdown,
44 |     signInButtonNav
45 |   },
46 |   methods: {
47 |     handleLogoClicked(): void {
48 |       this.$router.push('/')
49 |     }
50 |   }
51 | })
52 | </script>
53 | 
54 | <style scoped>
55 | .z-100 {
56 |   z-index: 100;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/components/common/TheFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full bg-gray-100 py-8 text-gray-600 text-center">
 3 |     created by
 4 |     <a
 5 |       href="https://twitter.com/retoruto_carry"
 6 |       target="_blank"
 7 |       class="underline"
 8 |     >
 9 |       @retoruto_carry
10 |     </a>
11 |   </div>
12 | </template>
13 | 
14 | <script lang="ts">
15 | import Vue from 'vue'
16 | export default Vue.extend({
17 |   name: 'TheFooter'
18 | })
19 | </script>
20 | 


--------------------------------------------------------------------------------
/components/common/signIn/SignInButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <sign-in>
 3 |     <template v-slot:default="{ signIn, isProcessing }">
 4 |       <button
 5 |         class="bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded"
 6 |         @click="signIn()"
 7 |       >
 8 |         <template v-if="!isProcessing">
 9 |           <i class="mdi mdi-twitter" />
10 |           ログイン
11 |         </template>
12 |         <template v-else>
13 |           <div class="spinner h-6 w-16" />
14 |         </template>
15 |       </button>
16 |     </template>
17 |   </sign-in>
18 | </template>
19 | 
20 | <script>
21 | import signIn from './SingIn'
22 | export default {
23 |   components: {
24 |     signIn
25 |   }
26 | }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/components/common/signIn/SignInButtonNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <sign-in>
 3 |     <template v-slot:default="{ signIn, isProcessing }">
 4 |       <button
 5 |         class="bg-transparent text-gray-600 text-sm md:text-base py-1 px-2 border border-gray-600 rounded"
 6 |         @click="signIn"
 7 |       >
 8 |         <template v-if="!isProcessing">
 9 |           <i class="mdi mdi-twitter" />
10 |           ログイン
11 |         </template>
12 |         <template v-else>
13 |           <div class="spinner spinner-customize h-6 w-16" />
14 |         </template>
15 |       </button>
16 |     </template>
17 |   </sign-in>
18 | </template>
19 | 
20 | <script>
21 | import signIn from './SingIn'
22 | export default {
23 |   components: {
24 |     signIn
25 |   }
26 | }
27 | </script>
28 | 
29 | <style scoped>
30 | /* https://github.com/aniftyco/tailwindcss-spinner */
31 | .spinner-customize::after {
32 |   content: '';
33 |   position: absolute !important;
34 |   top: calc(50% - (1em / 2));
35 |   left: calc(50% - (1em / 2));
36 |   display: block;
37 |   width: 1em;
38 |   height: 1em;
39 |   border: 2px solid theme('colors.gray.600');
40 |   border-radius: 9999px;
41 |   border-right-color: transparent;
42 |   border-top-color: transparent;
43 |   animation: spinAround 500ms infinite linear;
44 | }
45 | </style>
46 | 


--------------------------------------------------------------------------------
/components/common/signIn/SingIn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <client-only>
 4 |       <slot
 5 |         v-if="!$auth.currentUser"
 6 |         :signIn="signIn"
 7 |         :isProcessing="isProcessing"
 8 |       />
 9 |     </client-only>
10 |   </div>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import Vue from 'vue'
15 | 
16 | type LocalData = {
17 |   isProcessing: Boolean
18 | }
19 | 
20 | export default Vue.extend({
21 |   data(): LocalData {
22 |     return {
23 |       isProcessing: false
24 |     }
25 |   },
26 |   methods: {
27 |     async signIn(): Promise<void> {
28 |       this.isProcessing = true
29 |       const result = await this.$auth.signInWithPopup(
30 |         new this.$firebase.auth.TwitterAuthProvider()
31 |       )
32 |       if (result.user) {
33 |         await this.$firestore
34 |           .collection('users')
35 |           .doc(result.user.uid)
36 |           .set({
37 |             displayName: result.user.displayName,
38 |             photoUrl: result.user.photoURL as string,
39 |             username: (result.additionalUserInfo as firebase.auth.AdditionalUserInfo)
40 |               .username
41 |           })
42 |         location.reload()
43 |       }
44 |     }
45 |   }
46 | })
47 | </script>
48 | 


--------------------------------------------------------------------------------
/components/partials/AccountDropdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <client-only>
 3 |     <div class="relative group inline-block">
 4 |       <button
 5 |         class="block h-8 w-8 rounded-full overflow-hidden border border-white focus:outline-none focus:border-white"
 6 |       >
 7 |         <img
 8 |           class="h-full w-full object-cover"
 9 |           :src="photoUrl"
10 |           alt="アイコン"
11 |         />
12 |       </button>
13 |       <div>
14 |         <div class="hidden group-hover:block absolute right-0 z-50">
15 |           <div class="mt-2 py-2 w-48 bg-white rounded shadow-xl">
16 |             <nuxt-link
17 |               v-show="$route.path !== '/posts/create'"
18 |               to="/posts/create"
19 |               class="block px-4 py-2 text-gray-800 hover:bg-gray-300 hover:text-gray-900"
20 |             >
21 |               <i class="mdi mdi-home mr-1" />
22 |               診断を作成
23 |             </nuxt-link>
24 |             <nuxt-link
25 |               :to="`/users/${$auth.currentUser.uid}/posts`"
26 |               class="block px-4 py-2 text-gray-800 hover:bg-gray-300 hover:text-gray-900"
27 |             >
28 |               <i class="mdi mdi-account mr-1" />
29 |               マイページ
30 |             </nuxt-link>
31 |             <a
32 |               class="block px-4 py-2 text-gray-800 hover:bg-gray-300 hover:text-gray-900"
33 |               @click="signOut"
34 |             >
35 |               <i class="mdi mdi-logout mr-1" />
36 |               ログアウト
37 |             </a>
38 |           </div>
39 |         </div>
40 |       </div>
41 |     </div>
42 |   </client-only>
43 | </template>
44 | 
45 | <script>
46 | export default {
47 |   props: {
48 |     photoUrl: {
49 |       type: String,
50 |       required: false,
51 |       default: ''
52 |     }
53 |   },
54 |   methods: {
55 |     async signOut() {
56 |       await this.$auth.signOut()
57 |       location.replace('/')
58 |     }
59 |   }
60 | }
61 | </script>
62 | 


--------------------------------------------------------------------------------
/components/partials/ButtonPostCreate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p class="text-sm text-gray-600">超簡単♪</p>
 4 |     <p class="text-gray-700 mb-1">あなたも診断を作ってみよう</p>
 5 |     <button
 6 |       class="block mx-auto bg-transparent hover:bg-red-500 text-red-500 font-semibold hover:text-white py-1 px-4 border border-red-500 hover:border-transparent rounded"
 7 |       @click="$router.push('/posts/create')"
 8 |     >
 9 |       <i class="mdi mdi-pencil mr-1" />
10 |       診断をつくる
11 |     </button>
12 |   </div>
13 | </template>
14 | 
15 | <script lang="ts">
16 | import Vue from 'vue'
17 | export default Vue.extend({
18 |   name: 'ButtonPostCreate'
19 | })
20 | </script>
21 | 


--------------------------------------------------------------------------------
/components/partials/NodeTreeEditor/NodeTreeEdit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="table text-center bg-gray-300">
  3 |     <template v-if="nodeTree.type === 'RESULT'">
  4 |       <ResultNodeEdit
  5 |         v-model="nodeTree.text"
  6 |         :is-show-delete-button="parentOwnNodeLength !== 1"
  7 |         @deleteResultNode="handleDeleteResultNode"
  8 |         @convertToQuestionNode="handleConvertToQuestionNode"
  9 |       />
 10 |     </template>
 11 |     <template v-if="nodeTree.type === 'QUESTION'">
 12 |       <QuestionNodeEdit
 13 |         :width="questionNodeWidth(nodeTree)"
 14 |         :question-string="nodeTree.text"
 15 |         :choice-label-strings="nodeTree.choiceNodes.map((a) => a.label)"
 16 |         :is-show-convert-button="!isRoot"
 17 |         @updateQuestionString="(v) => (nodeTree.text = v)"
 18 |         @updateChoiceLabelStrings="handleUpdateChoiceLabelStrings"
 19 |         @convertToResultNode="handleConvertToResultNode"
 20 |         @addChoice="handleAddChoice"
 21 |       />
 22 |       <div
 23 |         class="nodes table relative"
 24 |         :class="choiceNodesWrapperClass(nodeTree)"
 25 |       >
 26 |         <div
 27 |           v-for="(choiceNode, index) in nodeTree.choiceNodes"
 28 |           :key="index"
 29 |           class="node-wrapper table-cell relative"
 30 |         >
 31 |           <div class="vertical-bar mb-0"></div>
 32 |           <div
 33 |             class="inline-block text-gray-600 bg-gray-200 rounded-full border border-gray-400 mt-0"
 34 |             :style="{ fontSize: '0.5rem', padding: '0.25rem' }"
 35 |           >
 36 |             {{
 37 |               choiceNode.label === '' ? `選択肢${index + 1}` : choiceNode.label
 38 |             }}
 39 |           </div>
 40 |           <NodeTreeEdit
 41 |             :node-tree="choiceNode.nodeTree"
 42 |             :parent-own-node-length="nodeTree.choiceNodes.length"
 43 |             class="node relative"
 44 |             @deleteResultNode="handleDeleteResultNodeFromChild(index)"
 45 |             @convertToResultNode="handleConvertToResultNodeFromChild(index)"
 46 |           />
 47 |         </div>
 48 |       </div>
 49 |     </template>
 50 |   </div>
 51 | </template>
 52 | 
 53 | <script lang="ts">
 54 | import Vue, { PropType } from 'vue'
 55 | import { NodeTree, ResultNodeTree, QuestionNodeTree } from '~/types/struct'
 56 | import QuestionNodeEdit from '~/components/partials/NodeTreeEditor/QustionNodeEdit.vue'
 57 | import ResultNodeEdit from '~/components/partials/NodeTreeEditor/ResultNodeEdit.vue'
 58 | 
 59 | export default Vue.extend({
 60 |   name: 'NodeTreeEdit',
 61 |   components: {
 62 |     QuestionNodeEdit,
 63 |     ResultNodeEdit
 64 |   },
 65 |   props: {
 66 |     isRoot: {
 67 |       type: Boolean,
 68 |       required: false,
 69 |       default: false
 70 |     },
 71 |     nodeTree: {
 72 |       type: Object as PropType<NodeTree>,
 73 |       required: true
 74 |     },
 75 |     parentOwnNodeLength: {
 76 |       type: Number,
 77 |       required: false,
 78 |       default: 1
 79 |     }
 80 |   },
 81 |   methods: {
 82 |     choiceNodesWrapperClass(questionNodeTree: QuestionNodeTree): string {
 83 |       return questionNodeTree.choiceNodes.length === 2
 84 |         ? 'before-two-vertical-line'
 85 |         : 'before-vertical-line'
 86 |     },
 87 |     questionNodeWidth(questionNodeTree: QuestionNodeTree): string {
 88 |       return questionNodeTree.choiceNodes.length === 1
 89 |         ? '16rem'
 90 |         : `${10 * questionNodeTree.choiceNodes.length}rem`
 91 |     },
 92 |     handleDeleteResultNode(): void {
 93 |       this.$emit('deleteResultNode')
 94 |     },
 95 |     handleDeleteResultNodeFromChild(index: number): void {
 96 |       if (this.nodeTree.type === 'QUESTION') {
 97 |         this.nodeTree.choiceNodes.splice(index, 1)
 98 |       }
 99 |     },
100 |     handleConvertToQuestionNode(): void {
101 |       this.nodeTree.type = 'QUESTION'
102 |       this.$set(this.nodeTree, 'choiceNodes', [
103 |         {
104 |           label: '',
105 |           nodeTree: {
106 |             type: 'RESULT',
107 |             text: ''
108 |           }
109 |         },
110 |         {
111 |           label: '',
112 |           nodeTree: {
113 |             type: 'RESULT',
114 |             text: ''
115 |           }
116 |         }
117 |       ])
118 |     },
119 |     handleUpdateChoiceLabelStrings(labelStrings: string[]): void {
120 |       labelStrings.forEach((str, index) => {
121 |         if (this.nodeTree.type === 'QUESTION') {
122 |           this.nodeTree.choiceNodes[index].label = str
123 |         }
124 |       })
125 |     },
126 |     handleConvertToResultNode() {
127 |       return this.$emit('convertToResultNode')
128 |     },
129 |     handleConvertToResultNodeFromChild(index: number) {
130 |       if (this.nodeTree.type === 'QUESTION') {
131 |         const newResultNodeTree: ResultNodeTree = {
132 |           type: 'RESULT',
133 |           text: this.nodeTree.choiceNodes[index].nodeTree.text
134 |         }
135 |         this.nodeTree.choiceNodes[index].nodeTree = newResultNodeTree
136 |       }
137 |     },
138 |     handleAddChoice() {
139 |       if (this.nodeTree.type === 'QUESTION') {
140 |         this.nodeTree.choiceNodes.push({
141 |           label: '',
142 |           nodeTree: {
143 |             type: 'RESULT',
144 |             text: ''
145 |           }
146 |         })
147 |       }
148 |     }
149 |   }
150 | })
151 | </script>
152 | 
153 | <style scoped>
154 | .nodes {
155 |   margin-top: 1.2rem;
156 | }
157 | .node {
158 |   margin-top: 1.5rem;
159 | }
160 | 
161 | /* | */
162 | .vertical-bar {
163 |   width: 2px;
164 |   background-color: theme('colors.gray.900');
165 |   margin-right: auto;
166 |   margin-left: auto;
167 |   height: 0.8rem;
168 | }
169 | 
170 | /* | */
171 | .node:before {
172 |   outline: solid 1px theme('colors.gray.900');
173 |   content: '';
174 |   height: 1.3rem;
175 |   left: 50%;
176 |   position: absolute;
177 |   top: -1.3rem;
178 | }
179 | 
180 | /* ▼ */
181 | .node:after {
182 |   content: '';
183 |   position: absolute;
184 |   top: -0.4rem;
185 |   left: 50%;
186 |   margin-left: -0.4rem;
187 |   border: 0.4rem solid transparent;
188 |   border-top: 0.4rem solid theme('colors.gray.900');
189 |   z-index: 2;
190 | }
191 | 
192 | /* | | */
193 | .before-two-vertical-line:before {
194 |   border: solid theme('colors.gray.900');
195 |   background-color: theme('colors.gray.300');
196 |   z-index: 10;
197 |   border-width: 0px 0.1rem 0px 0.1rem;
198 |   content: '';
199 |   height: 1.2rem;
200 |   width: 4rem;
201 |   left: 50%;
202 |   position: absolute;
203 |   margin-left: -2rem;
204 |   top: -1.1rem;
205 | }
206 | 
207 | /* | */
208 | .before-vertical-line:before {
209 |   outline: solid 1px theme('colors.gray.900');
210 |   content: '';
211 |   height: 1.2rem;
212 |   width: 0;
213 |   left: 50%;
214 |   position: absolute;
215 |   top: -1.2rem;
216 | }
217 | 
218 | /* ___ */
219 | .node-wrapper:before {
220 |   outline: solid 0.1rem theme('colors.gray.900');
221 |   content: '';
222 |   left: 0;
223 |   position: absolute;
224 |   right: 0;
225 |   top: 0;
226 | }
227 | .node-wrapper:first-child:before {
228 |   left: 50%;
229 | }
230 | .node-wrapper:last-child:before {
231 |   right: 50%;
232 | }
233 | </style>
234 | 


--------------------------------------------------------------------------------
/components/partials/NodeTreeEditor/NodeTreeEditor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NodeTreeEdit :node-tree="nodeTree" :is-root="true" />
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | import Vue, { PropType } from 'vue'
 7 | import { NodeTree } from '~/types/struct'
 8 | import NodeTreeEdit from '~/components/partials/NodeTreeEditor/NodeTreeEdit.vue'
 9 | 
10 | export default Vue.extend({
11 |   name: 'NodeTreeEditor',
12 |   components: {
13 |     NodeTreeEdit
14 |   },
15 |   props: {
16 |     nodeTree: {
17 |       type: Object as PropType<NodeTree>,
18 |       required: true
19 |     }
20 |   }
21 | })
22 | </script>
23 | 


--------------------------------------------------------------------------------
/components/partials/NodeTreeEditor/QustionNodeEdit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="table text-center bg-gray-300 mx-auto">
 3 |     <div
 4 |       class="inline-block rounded mx-4 border border-gray-600 bg-white w-64"
 5 |       :style="{ width: width }"
 6 |     >
 7 |       <div class="border-b border-gray-600">
 8 |         <p class="text-sm text-gray-600 text-center relative bg-gray-700">
 9 |           <span class="text-white">
10 |             <i class="mdi mdi-comment-question-outline" />
11 |             質問
12 |           </span>
13 |           <button
14 |             v-show="isShowConvertButton"
15 |             type="button"
16 |             class="absolute right-0 mr-2 text-white"
17 |             @click="handleConvertClicked"
18 |           >
19 |             <i class="mdi mdi-trash-can-outline mr-1" />
20 |           </button>
21 |         </p>
22 |       </div>
23 |       <textarea
24 |         :value="questionString"
25 |         rows="4"
26 |         required
27 |         class="bg-white border border-gray-300 block w-full h-full text-sm p-1"
28 |         placeholder="テキストを入力"
29 |         @input="$emit('updateQuestionString', $event.target.value)"
30 |       />
31 |       <div class="flex content-between">
32 |         <div
33 |           v-for="(choiceLabelString, index) in choiceLabelStrings"
34 |           :key="index"
35 |           class="flex-1"
36 |         >
37 |           <input
38 |             :value="choiceLabelString"
39 |             class="border w-full text-gray-700 text-center text-sm"
40 |             type="text"
41 |             required
42 |             :placeholder="`選択肢${index + 1}を入力`"
43 |             @input="updateChoiceLabelString($event.target.value, index)"
44 |           />
45 |         </div>
46 |         <button
47 |           type="button"
48 |           class="text-sm bg-gray-200 border border-gray-300 hover:text-white hover:bg-gray-500 rounded-br"
49 |           @click="handleAddChoiceClicked"
50 |         >
51 |           <i class="mdi mdi-plus p-1" />
52 |         </button>
53 |       </div>
54 |     </div>
55 |   </div>
56 | </template>
57 | 
58 | <script lang="ts">
59 | import Vue, { PropType } from 'vue'
60 | 
61 | export default Vue.extend({
62 |   name: 'QuestionNodeEdit',
63 |   props: {
64 |     width: {
65 |       type: String,
66 |       required: false,
67 |       default: '16rem'
68 |     },
69 |     isShowConvertButton: {
70 |       type: Boolean,
71 |       required: true
72 |     },
73 |     questionString: {
74 |       type: String,
75 |       required: true
76 |     },
77 |     choiceLabelStrings: {
78 |       type: Array as PropType<String[]>,
79 |       required: true
80 |     }
81 |   },
82 |   methods: {
83 |     updateChoiceLabelString(newValue: string, index: number): void {
84 |       const newChoiceLabelStrings = this.choiceLabelStrings
85 |       newChoiceLabelStrings[index] = newValue
86 |       this.$emit('updateChoiceLabelStrings', newChoiceLabelStrings)
87 |     },
88 |     handleConvertClicked(): void {
89 |       this.$emit('convertToResultNode')
90 |     },
91 |     handleAddChoiceClicked(): void {
92 |       this.$emit('addChoice')
93 |     }
94 |   }
95 | })
96 | </script>
97 | 


--------------------------------------------------------------------------------
/components/partials/NodeTreeEditor/ResultNodeEdit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="table text-center bg-gray-300">
 3 |     <div
 4 |       class="inline-block rounded mx-4 border border-gray-600 bg-white w-64"
 5 |       :style="{ width: '16rem' }"
 6 |     >
 7 |       <div class="border-b border-gray-600">
 8 |         <p class="text-sm text-gray-600 text-center relative bg-red-600">
 9 |           <span class="text-white">
10 |             結果
11 |           </span>
12 |           <button
13 |             v-show="isShowDeleteButton"
14 |             type="button"
15 |             class="absolute right-0 mr-2 text-white"
16 |             @click="handleDeleteClicked"
17 |           >
18 |             <i class="mdi mdi-trash-can-outline mr-1" />
19 |           </button>
20 |         </p>
21 |       </div>
22 |       <textarea
23 |         :value="value"
24 |         rows="4"
25 |         required
26 |         class="bg-white border border-gray-300 block w-full h-full text-sm p-1"
27 |         placeholder="テキストを入力"
28 |         @input="$emit('input', $event.target.value)"
29 |       />
30 |       <div class="cursor-pointer" @click="handlePlusClicked">
31 |         <button
32 |           type="button"
33 |           class="block w-full text-xs text-gray-700 bg-gray-200 border border-gray-300 hover:text-white hover:bg-gray-500 rounded-b"
34 |         >
35 |           <i class="mdi mdi-plus" />
36 |           分岐を追加
37 |         </button>
38 |       </div>
39 |     </div>
40 |   </div>
41 | </template>
42 | 
43 | <script lang="ts">
44 | import Vue from 'vue'
45 | 
46 | export default Vue.extend({
47 |   name: 'ResultNodeEdit',
48 |   props: {
49 |     value: {
50 |       type: String,
51 |       required: true
52 |     },
53 |     isShowDeleteButton: {
54 |       type: Boolean,
55 |       required: true
56 |     }
57 |   },
58 |   methods: {
59 |     handleDeleteClicked(): void {
60 |       this.$emit('deleteResultNode')
61 |     },
62 |     handleAddChoice(): void {
63 |       this.$emit('addChoice')
64 |     },
65 |     handlePlusClicked(): void {
66 |       this.$emit('convertToQuestionNode')
67 |     }
68 |   }
69 | })
70 | </script>
71 | 


--------------------------------------------------------------------------------
/components/partials/post/InputTags.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <client-only>
  3 |     <vue-tags-input
  4 |       v-model="tag"
  5 |       :tags="value"
  6 |       :autocomplete-items="tagAutocompleteItems"
  7 |       :max-tags="4"
  8 |       :maxlength="40"
  9 |       placeholder="タグを入力してエンター"
 10 |       @tags-changed="updateTags"
 11 |     />
 12 |   </client-only>
 13 | </template>
 14 | 
 15 | <script lang="ts">
 16 | import Vue, { PropType } from 'vue'
 17 | import { TagObj } from '~/types/struct'
 18 | import { toTagObj } from '~/utils/transformer/toObject'
 19 | 
 20 | const TAG_AUTOCOMPLETE_LIMIT = 5
 21 | 
 22 | type LocalData = {
 23 |   tag: string
 24 |   isTagEditing: boolean
 25 |   tagAutocompleteItems: TagObj[]
 26 |   debounce: NodeJS.Timeout | null
 27 | }
 28 | 
 29 | export default Vue.extend({
 30 |   name: 'InputTags',
 31 |   props: {
 32 |     value: {
 33 |       type: Array as PropType<TagObj[]>,
 34 |       required: true
 35 |     }
 36 |   },
 37 |   data(): LocalData {
 38 |     return {
 39 |       tag: '',
 40 |       isTagEditing: false,
 41 |       tagAutocompleteItems: [],
 42 |       debounce: null
 43 |     }
 44 |   },
 45 |   watch: {
 46 |     tag(_newVal, _oldVal) {
 47 |       this.initTagAutocompleteItems()
 48 |     }
 49 |   },
 50 |   methods: {
 51 |     updateTags(newTags: TagObj[]) {
 52 |       this.tagAutocompleteItems = []
 53 |       this.$emit('input', newTags)
 54 |     },
 55 |     initTagAutocompleteItems(): TagObj[] | void {
 56 |       if (this.tag.length < 2) return
 57 |       if (this.debounce) clearTimeout(this.debounce)
 58 | 
 59 |       this.debounce = setTimeout(async () => {
 60 |         // 前方一致検索を文字コードを比較することで実現している
 61 |         const tagTextLength: number = this.tag.length
 62 |         const strFrontCode: string = this.tag.slice(0, tagTextLength - 1)
 63 |         const strEndCode: string = this.tag.slice(
 64 |           tagTextLength - 1,
 65 |           tagTextLength
 66 |         )
 67 | 
 68 |         const startCode: string = this.tag
 69 |         const endCode: string =
 70 |           strFrontCode + String.fromCharCode(strEndCode.charCodeAt(0) + 1)
 71 | 
 72 |         const tagDocuments = await this.$firestore
 73 |           .collection('tags')
 74 |           .where('text', '>=', startCode)
 75 |           .where('text', '<', endCode)
 76 |           .limit(TAG_AUTOCOMPLETE_LIMIT)
 77 |           .get()
 78 |         this.tagAutocompleteItems = tagDocuments.docs.map(
 79 |           (tagDocument): TagObj => {
 80 |             return toTagObj(tagDocument)
 81 |           }
 82 |         )
 83 |       }, 600)
 84 |     }
 85 |   }
 86 | })
 87 | </script>
 88 | 
 89 | <style>
 90 | .vue-tags-input {
 91 |   max-width: none !important;
 92 | }
 93 | .vue-tags-input .ti-input {
 94 |   padding: 4px 10px;
 95 |   border-radius: 0.3rem;
 96 | }
 97 | .vue-tags-input .ti-tag {
 98 |   color: #6c757d;
 99 |   background-color: white;
100 |   border-radius: 50rem !important;
101 |   border: 1px solid;
102 |   border-color: #6c757d;
103 |   padding: 0.25rem 0.5rem;
104 |   font-size: 0.875rem;
105 |   line-height: 1.5;
106 |   font-weight: 400;
107 |   text-align: center;
108 |   vertical-align: middle;
109 | }
110 | .vue-tags-input .ti-deletion-mark {
111 |   background-color: #dc3545 !important;
112 |   color: #fff;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/components/partials/post/PostForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <form @submit.prevent="handleSubmit">
  3 |     <h2 class="text-xl font-semibold mb-8">
  4 |       <i class="mdi mdi-format-title mr-1" />
  5 |       タイトル
  6 |     </h2>
  7 |     <input
  8 |       v-model="postFormData.title"
  9 |       required
 10 |       class="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline py-2 px-3 "
 11 |       type="text"
 12 |       placeholder="タイトルを入力"
 13 |       maxlength="100"
 14 |     />
 15 |     <h2 class="text-xl font-semibold mb-4 mt-8">
 16 |       <i class="mdi mdi-sitemap mr-1" />
 17 |       フローチャート
 18 |     </h2>
 19 |     <AppAccordion title="例を見てみよう" class="mb-8">
 20 |       <p class="text-left text-gray-500">
 21 |         クリックして、テンプレートを下のフローチャートに反映しよう
 22 |       </p>
 23 |       <div class="text-left mt-2">
 24 |         <button
 25 |           v-for="(nodeTreeSample, index) in nodeTreeSamples"
 26 |           :key="index"
 27 |           type="button"
 28 |           class="bg-white hover:bg-gray-200 text-gray-600 text-sm py-2 px-4 border border-gray-400 rounded mb-2 mr-4"
 29 |           @click="handleSetNodeTree(nodeTreeSample.nodeTree)"
 30 |         >
 31 |           {{ nodeTreeSample.title }}
 32 |         </button>
 33 |       </div>
 34 |       <p
 35 |         class="underline text-gray-600 text-left text-sm cursor-pointer"
 36 |         @click="handleResetNodeTree()"
 37 |       >
 38 |         初期状態へリセット
 39 |       </p>
 40 |     </AppAccordion>
 41 |     <div class="w-full overflow-scroll bg-gray-300 p-4">
 42 |       <NodeTreeEditor :node-tree="postFormData.nodeTree" />
 43 |     </div>
 44 |     <h2 class="text-xl font-semibold mb-4 mt-8">
 45 |       <i class="mdi mdi-pound mr-1" />
 46 |       ツイッターのタグ
 47 |     </h2>
 48 |     <div class="relative">
 49 |       <div class="absolute inset-y-0 left-0 flex items-center pl-3">
 50 |         <i class="mdi mdi-pound" />
 51 |       </div>
 52 |       <input
 53 |         v-model="postFormData.hashtag"
 54 |         maxlength="50"
 55 |         required
 56 |         placeholder="空白不可・_以外の記号不可"
 57 |         class="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline py-3 px-4 mb-3 block pl-10 pr-4 py-2"
 58 |       />
 59 |     </div>
 60 |     <h2 class="text-xl font-semibold mt-8">
 61 |       <i class="mdi mdi-tag mr-1" />
 62 |       タグ
 63 |     </h2>
 64 |     <p class="text-gray-500 mb-8">
 65 |       サイト内で関連のコンテンツの表示に使います
 66 |     </p>
 67 |     <InputTags v-model="postFormData.tags" />
 68 |     <h2 class="text-xl font-semibold mt-8 mb-4">
 69 |       <i class="mdi mdi-format-title mr-1" />
 70 |       ひとこと説明
 71 |     </h2>
 72 |     <input
 73 |       v-model="postFormData.subtitle"
 74 |       required
 75 |       class="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline py-2 px-3 "
 76 |       type="text"
 77 |       placeholder="ひとこと説明を入力"
 78 |       maxlength="100"
 79 |     />
 80 |     <button
 81 |       type="submit"
 82 |       :disabled="isSubmitting"
 83 |       class="mt-12 bg-red-500 hover:bg-red-700 text-white font-bold h-12 w-48 rounded-full"
 84 |     >
 85 |       <span v-if="!isSubmitting">
 86 |         {{ submitLabel }}
 87 |       </span>
 88 |       <div v-else class="spinner"></div>
 89 |     </button>
 90 |   </form>
 91 | </template>
 92 | 
 93 | <script lang="ts">
 94 | import Vue, { PropType } from 'vue'
 95 | 
 96 | import AppAccordion from '~/components/common/AppAccordion.vue'
 97 | import InputTags from '~/components/partials/post/InputTags.vue'
 98 | import NodeTreeEditor from '~/components/partials/NodeTreeEditor/NodeTreeEditor.vue'
 99 | 
100 | import { NodeTree, NodeTreeSample, PostFormData } from '~/types/struct'
101 | import { nodeTreeSamples } from '~/utils/constants/nodeTreeSamples'
102 | import { defaultNodeTreeData } from '~/utils/constants/defalutNodeTreeData'
103 | 
104 | export default Vue.extend({
105 |   components: {
106 |     NodeTreeEditor,
107 |     InputTags,
108 |     AppAccordion
109 |   },
110 |   props: {
111 |     value: {
112 |       type: Object as PropType<PostFormData>,
113 |       required: true
114 |     },
115 |     submitLabel: {
116 |       type: String,
117 |       required: true
118 |     },
119 |     isSubmitting: {
120 |       type: Boolean,
121 |       required: true
122 |     }
123 |   },
124 |   computed: {
125 |     nodeTreeSamples(): NodeTreeSample[] {
126 |       return nodeTreeSamples
127 |     },
128 |     postFormData: {
129 |       get(): PostFormData {
130 |         return this.value
131 |       },
132 |       set(value: PostFormData) {
133 |         this.$emit('input', value)
134 |       }
135 |     }
136 |   },
137 |   methods: {
138 |     handleSubmit(): void {
139 |       this.$emit('submit')
140 |     },
141 |     handleSetNodeTree(nodeTree: NodeTree): void {
142 |       this.postFormData.nodeTree = nodeTree
143 |     },
144 |     handleResetNodeTree(): void {
145 |       this.postFormData.nodeTree = defaultNodeTreeData
146 |     }
147 |   }
148 | })
149 | </script>
150 | 


--------------------------------------------------------------------------------
/components/partials/post/PostList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li v-for="post in posts" :key="post.id">
 5 |         <div class="mb-4">
 6 |           <nuxt-link :to="`/posts/${post.id}`">
 7 |             <div
 8 |               class="border bg-white p-4 max-w-xl text-left mx-auto hover:bg-gray-200 hover:shadow"
 9 |               :class="[
10 |                 $auth.currentUser && post.userId === $auth.currentUser.uid
11 |                   ? 'rounded-t'
12 |                   : 'rounded'
13 |               ]"
14 |             >
15 |               <p class="font-bold text-gray-700">
16 |                 {{ post.title }}
17 |               </p>
18 |               <p class="text-sm text-gray-600 truncate">
19 |                 {{ post.subtitle }}
20 |               </p>
21 |             </div>
22 |           </nuxt-link>
23 |           <div
24 |             v-if="$auth.currentUser && post.userId === $auth.currentUser.uid"
25 |           >
26 |             <nuxt-link :to="`/posts/${post.id}/edit`">
27 |               <div
28 |                 class="border-b border-r border-l bg-white px-4 py-1 mb-4 max-w-xl text-left mx-auto hover:bg-gray-200 hover:shadow rounded-b"
29 |               >
30 |                 <p class="text-xs text-gray-600">
31 |                   <i class="mdi mdi-pencil" />
32 |                   編集
33 |                 </p>
34 |               </div>
35 |             </nuxt-link>
36 |           </div>
37 |         </div>
38 |       </li>
39 |     </ul>
40 |   </div>
41 | </template>
42 | 
43 | <script lang="ts">
44 | import Vue, { PropType } from 'vue'
45 | import { Post } from '~/types/struct'
46 | 
47 | export default Vue.extend({
48 |   name: 'PostList',
49 |   props: {
50 |     posts: {
51 |       type: Array as PropType<Post[]>,
52 |       required: true
53 |     }
54 |   }
55 | })
56 | </script>
57 | 


--------------------------------------------------------------------------------
/components/partials/post/PostListRecent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="text-center">
 3 |     <h2 class="text-xl font-bold mt-2">新着一覧</h2>
 4 |     <PostList :posts="posts" class="mt-2" />
 5 |     <button
 6 |       v-show="hasNext && posts.length >= LIMIT"
 7 |       class="bg-red-500 hover:bg-red-700 text-white font-bold h-10 w-32 rounded mt-4"
 8 |       @click="readMorePosts"
 9 |     >
10 |       <span v-if="!isProcessing">もっと見る</span>
11 |       <div v-else class="spinner"></div>
12 |     </button>
13 |   </div>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import Vue from 'vue'
18 | import PostList from '~/components/partials/post/PostList.vue'
19 | import { Post } from '~/types/struct'
20 | import { toPost } from '~/utils/transformer/toObject'
21 | 
22 | const LIMIT: number = 20
23 | 
24 | type LocalData = {
25 |   hasNext: boolean
26 |   isProcessing: boolean
27 |   posts: Post[]
28 | }
29 | 
30 | export default Vue.extend({
31 |   components: {
32 |     PostList
33 |   },
34 |   data(): LocalData {
35 |     return {
36 |       hasNext: true,
37 |       isProcessing: false,
38 |       posts: []
39 |     }
40 |   },
41 |   computed: {
42 |     LIMIT(): number {
43 |       return LIMIT
44 |     }
45 |   },
46 |   async created() {
47 |     const postDocuments = await this.$firestore
48 |       .collection('posts')
49 |       .orderBy('createdAt', 'desc')
50 |       .limit(LIMIT)
51 |       .get()
52 |     this.posts = postDocuments.docs.map(
53 |       (postDocument): Post => {
54 |         return toPost(postDocument)
55 |       }
56 |     )
57 |   },
58 |   methods: {
59 |     async readMorePosts(): Promise<void> {
60 |       this.isProcessing = true
61 |       try {
62 |         const postDocuments = await this.$firestore
63 |           .collection('posts')
64 |           .orderBy('createdAt', 'desc')
65 |           .startAfter(this.posts[this.posts.length - 1].createdAt)
66 |           .limit(LIMIT)
67 |           .get()
68 |         const posts = postDocuments.docs.map(
69 |           (postDocument): Post => {
70 |             return toPost(postDocument)
71 |           }
72 |         )
73 |         this.posts = [...this.posts, ...posts]
74 |         this.hasNext = posts.length === LIMIT
75 |       } catch (e) {
76 |       } finally {
77 |         this.isProcessing = false
78 |       }
79 |     }
80 |   }
81 | })
82 | </script>
83 | 


--------------------------------------------------------------------------------
/components/partials/post/PostPlay.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="currentNodeTree.type === 'QUESTION'">
  4 |       <p
  5 |         class="border border-gray-600 rounded-lg max-w-xl text-lg mb-4 px-2 py-6 mx-auto"
  6 |       >
  7 |         <span class="whitespace-pre-wrap">{{ currentNodeTree.text }}</span>
  8 |       </p>
  9 |       <button
 10 |         v-for="(choiceNode, index) in currentNodeTree.choiceNodes"
 11 |         :key="index"
 12 |         class="bg-red-500 hover:bg-red-700 text-lg text-white font-bold py-2 px-4 rounded mx-2 mb-4"
 13 |         @click="handleChoiceClicked(index)"
 14 |       >
 15 |         {{ choiceNode.label }}
 16 |       </button>
 17 |     </template>
 18 |     <template v-else>
 19 |       <div class="border border-red-600 rounded-lg max-w-xl mx-auto">
 20 |         <p class="text-lg text-white bg-red-600 mb-2 p-2">結果</p>
 21 |         <p class="text-2xl text-red-500 font-bold px-2 pt-4 pb-6">
 22 |           <span class="whitespace-pre-wrap">{{ currentNodeTree.text }}</span>
 23 |         </p>
 24 |       </div>
 25 |       <button
 26 |         class="block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mx-auto mb-4 mt-8"
 27 |         @click="handleTweetResultClicked"
 28 |       >
 29 |         <i class="mdi mdi-twitter mr-1" />
 30 |         結果をツイート
 31 |       </button>
 32 |       <button
 33 |         class="block bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-2 px-4 rounded mx-auto mb-4"
 34 |         @click="handleTweetPostClicked"
 35 |       >
 36 |         <i class="mdi mdi-twitter mr-1" />
 37 |         この診断をシェア
 38 |       </button>
 39 |       <button
 40 |         class="block bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mx-auto"
 41 |         @click="handleResetClicked"
 42 |       >
 43 |         <i class="mdi mdi-refresh mr-1" />
 44 |         もう一度遊ぶ
 45 |       </button>
 46 |     </template>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script lang="ts">
 51 | import Vue, { PropType } from 'vue'
 52 | import { NodeTree, Post } from '~/types/struct'
 53 | 
 54 | type LocalData = {
 55 |   currentNodeTree: NodeTree | null
 56 | }
 57 | 
 58 | export default Vue.extend({
 59 |   props: {
 60 |     post: {
 61 |       type: Object as PropType<Post>,
 62 |       required: true
 63 |     }
 64 |   },
 65 |   data(): LocalData {
 66 |     return {
 67 |       currentNodeTree: this.post.nodeTree
 68 |     }
 69 |   },
 70 |   methods: {
 71 |     handleChoiceClicked(index: number): void {
 72 |       const currentNodeTree = this.currentNodeTree! as NodeTree
 73 |       if (currentNodeTree.type === 'QUESTION') {
 74 |         this.currentNodeTree = currentNodeTree.choiceNodes[index].nodeTree
 75 |       }
 76 |     },
 77 |     handleResetClicked(): void {
 78 |       const post = this.post! as Post
 79 |       this.currentNodeTree = post.nodeTree
 80 |     },
 81 |     handleTweetResultClicked(): void {
 82 |       const currentNodeTree = this.currentNodeTree! as NodeTree
 83 |       const post = this.post! as Post
 84 |       const tweet: string =
 85 |         'https://twitter.com/intent/tweet?url=' +
 86 |         encodeURIComponent(`${process.env.BASE_URL}/posts/${post.id}`) +
 87 |         '&text=' +
 88 |         encodeURIComponent(
 89 |           `【結果】\r\n${currentNodeTree.text}\r\n\r\n「${post.title}」で遊びました\r\n#${post.hashtag} #診断チャートメーカー`
 90 |         )
 91 |       window.open(tweet)
 92 |     },
 93 |     handleTweetPostClicked(): void {
 94 |       const post = this.post! as Post
 95 |       const tweet: string =
 96 |         'https://twitter.com/intent/tweet?url=' +
 97 |         encodeURIComponent(`${process.env.BASE_URL}/posts/${post.id}`) +
 98 |         '&text=' +
 99 |         encodeURIComponent(
100 |           `${post.title}\r\n#${post.hashtag} #診断チャートメーカー`
101 |         )
102 |       window.open(tweet)
103 |     }
104 |   }
105 | })
106 | </script>
107 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 |   "firestore": {
3 |     "rules": "firestore.rules",
4 |     "indexes": "firestore.indexes.json"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/firestore.indexes.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "indexes": [
 3 |     {
 4 |       "collectionGroup": "posts",
 5 |       "queryScope": "COLLECTION",
 6 |       "fields": [
 7 |         {
 8 |           "fieldPath": "userId",
 9 |           "order": "ASCENDING"
10 |         },
11 |         {
12 |           "fieldPath": "createdAt",
13 |           "order": "DESCENDING"
14 |         }
15 |       ]
16 |     }
17 |   ],
18 |   "fieldOverrides": []
19 | }
20 | 


--------------------------------------------------------------------------------
/firestore.rules:
--------------------------------------------------------------------------------
 1 | rules_version = '2';
 2 | 
 3 | service cloud.firestore {
 4 |   match /databases/{database}/documents {
 5 |     match /{document=**} {
 6 |       allow read;
 7 |     }
 8 | 
 9 |     match /users {
10 |       match /{userId} {
11 |         allow write:if true
12 |           && request.auth.uid == userId
13 |           && validateString(incomingData().displayName, 0, 512)
14 |           && validateString(incomingData().photoUrl, 0, 512)
15 |           && validateString(incomingData().username, 0, 512)
16 |         ;
17 |       }
18 |     }
19 | 
20 |     match /posts {
21 |       match /{postId} {
22 |         allow create: if true
23 |           && request.auth.uid == incomingData().userId
24 |           && validateString(incomingData().title, 0, 512)
25 |           && validateString(incomingData().subtitle, 0, 512)
26 |           && validateString(incomingData().hashtag, 0, 140)
27 |           && validateString(incomingData().nodeTree, 0, 16384)
28 |         ;
29 |         allow update: if true
30 |           && request.auth.uid == existingData().userId
31 |           && request.auth.uid == incomingData().userId
32 |           && validateString(incomingData().title, 0, 512)
33 |           && validateString(incomingData().subtitle, 0, 512)
34 |           && validateString(incomingData().nodeTree, 0, 16384)
35 |           && incomingData().createdAt == existingData().createdAt
36 |         allow delete: if request.auth.uid == existingData().userId
37 |         ;
38 |       }
39 |     }
40 | 
41 |     match /tags {
42 |       match /{tagId} {
43 |         allow write: if true
44 |           && isUserAuthenticated()
45 |           && validateString(incomingData().text, 0, 512)
46 |       }
47 |     }
48 |   }
49 | 
50 |   function incomingData() {
51 |     return request.resource.data;
52 |   }
53 | 
54 |   function existingData() {
55 |     return resource.data;
56 |   }
57 | 
58 |   function validateString(text, min, max) {
59 |     return text is string && min <= text.size() && text.size() <= max;
60 |   }
61 | 
62 |   function isUserAuthenticated() {
63 | 		return request.auth != null;
64 | 	}
65 | }


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleNameMapper: {
 3 |     '^@/(.*)$': '<rootDir>/$1',
 4 |     '^~/(.*)$': '<rootDir>/$1',
 5 |     '^vue$': 'vue/dist/vue.common.js'
 6 |   },
 7 |   moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
 8 |   transform: {
 9 |     '^.+\\.ts$': 'ts-jest',
10 |     '^.+\\.js$': 'babel-jest',
11 |     '.*\\.(vue)$': 'vue-jest'
12 |   },
13 |   collectCoverage: true,
14 |   collectCoverageFrom: [
15 |     '<rootDir>/components/**/*.vue',
16 |     '<rootDir>/pages/**/*.vue'
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <AppNavbar />
 4 |     <div class="container max-w-screen-lg mx-auto px-4 mt-24">
 5 |       <nuxt />
 6 |     </div>
 7 |     <TheFooter class="mt-24" />
 8 |   </div>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import Vue from 'vue'
13 | import AppNavbar from '~/components/common/AppNavbar.vue'
14 | import TheFooter from '~/components/common/TheFooter.vue'
15 | 
16 | export default Vue.extend({
17 |   components: {
18 |     AppNavbar,
19 |     TheFooter
20 |   }
21 | })
22 | </script>
23 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 2,
 3 |   "builds": [
 4 |     {
 5 |       "src": "nuxt.config.js",
 6 |       "use": "@nuxtjs/now-builder",
 7 |       "config": {}
 8 |     }
 9 |   ]
10 | }


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
  1 | require('dotenv').config()
  2 | 
  3 | const baseName = '診断チャートメーカー'
  4 | const baseDesc = 'フローチャート形式の診断を簡単につくれるサービスです'
  5 | const baseUrl = process.env.BASE_URL || 'http://localhost:3000'
  6 | 
  7 | export default {
  8 |   mode: 'universal',
  9 |   /*
 10 |    ** Headers of the page
 11 |    */
 12 |   head: {
 13 |     title: '診断チャートメーカー',
 14 |     meta: [
 15 |       { charset: 'utf-8' },
 16 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 17 |       {
 18 |         hid: 'description',
 19 |         name: 'description',
 20 |         content: baseDesc
 21 |       },
 22 |       { hid: 'og:site_name', property: 'og:site_name', content: baseName },
 23 |       { hid: 'og:type', property: 'og:type', content: 'article' },
 24 |       { hid: 'og:url', property: 'og:url', content: baseUrl },
 25 |       { hid: 'og:title', property: 'og:title', content: baseName },
 26 |       { hid: 'og:description', property: 'og:description', content: baseDesc },
 27 |       {
 28 |         hid: 'og:image',
 29 |         property: 'og:image',
 30 |         content: baseUrl + '/images/ogp.png'
 31 |       },
 32 |       { property: 'article:publisher', content: 'FacebookURL' },
 33 |       { property: 'fb:app_id', content: 'FacebookAppID' },
 34 |       { name: 'twitter:card', content: 'summary_large_image' },
 35 |       { name: 'twitter:site', content: '@retoruto_carry' }
 36 |     ],
 37 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
 38 |   },
 39 |   /*
 40 |    ** Customize the progress-bar color
 41 |    */
 42 |   loading: { color: '#fff' },
 43 |   /*
 44 |    ** Global CSS
 45 |    */
 46 |   css: ['@mdi/font/css/materialdesignicons.css'],
 47 |   /*
 48 |    ** Plugins to load before mounting the App
 49 |    */
 50 |   plugins: [
 51 |     '~/plugins/firebase.ts',
 52 |     { src: '~/plugins/vue-tags-input.js', mode: 'client' }
 53 |   ],
 54 |   /*
 55 |    ** Nuxt.js dev-modules
 56 |    */
 57 |   buildModules: [
 58 |     '@nuxt/typescript-build',
 59 |     // Doc: https://github.com/nuxt-community/stylelint-module
 60 |     '@nuxtjs/stylelint-module',
 61 |     // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
 62 |     '@nuxtjs/tailwindcss',
 63 |     [
 64 |       '@nuxtjs/google-analytics',
 65 |       {
 66 |         id: 'UA-55008158-13'
 67 |       }
 68 |     ]
 69 |   ],
 70 |   /*
 71 |    ** Nuxt.js modules
 72 |    */
 73 |   modules: [
 74 |     // Doc: https://axios.nuxtjs.org/usage
 75 |     '@nuxtjs/axios',
 76 |     '@nuxtjs/pwa',
 77 |     // Doc: https://github.com/nuxt-community/dotenv-module
 78 |     '@nuxtjs/dotenv'
 79 |   ],
 80 |   /*
 81 |    ** Axios module configuration
 82 |    ** See https://axios.nuxtjs.org/options
 83 |    */
 84 |   axios: {},
 85 | 
 86 |   env: {
 87 |     BASE_URL: process.env.BASE_URL,
 88 |     FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
 89 |     FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
 90 |     FIREBASE_DATABASE_URL: process.env.FIREBASE_DATABASE_URL,
 91 |     FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
 92 |     FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET,
 93 |     FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
 94 |     FIREBASE_APP_ID: process.env.FIREBASE_APP_ID,
 95 |     FIREBASE_MEASUREMENT_ID: process.env.FIREBASE_MEASUREMENT_ID || ''
 96 |   },
 97 | 
 98 |   /*
 99 |    ** Build configuration
100 |    */
101 |   build: {
102 |     babel: {
103 |       presets({ isServer }) {
104 |         return [
105 |           [
106 |             require.resolve('@nuxt/babel-preset-app'),
107 |             // require.resolve('@nuxt/babel-preset-app-edge'), // For nuxt-edge users
108 |             {
109 |               buildTarget: isServer ? 'server' : 'client',
110 |               corejs: { version: 3 }
111 |             }
112 |           ]
113 |         ]
114 |       }
115 |     },
116 |     /*
117 |      ** You can extend webpack config here
118 |      */
119 |     extend(config, { isServer }) {
120 |       if (isServer) {
121 |         config.externals = {
122 |           '@firebase/app': 'commonjs @firebase/app',
123 |           '@firebase/firestore': 'commonjs @firebase/firestore'
124 |         }
125 |       }
126 |     }
127 |   }
128 | }
129 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shindan-chart-maker",
 3 |   "version": "1.0.0",
 4 |   "description": "My amazing Nuxt.js project",
 5 |   "author": "retoruto-carry",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt-ts",
 9 |     "build": "nuxt-ts build",
10 |     "generate": "nuxt-ts generate",
11 |     "start": "nuxt-ts start",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "test": "jest"
14 |   },
15 |   "lint-staged": {
16 |     "*.{js,vue}": "yarn lint",
17 |     "*.{css,vue}": "stylelint"
18 |   },
19 |   "husky": {
20 |     "hooks": {
21 |       "pre-commit": "lint-staged"
22 |     }
23 |   },
24 |   "dependencies": {
25 |     "@johmun/vue-tags-input": "^2.1.0",
26 |     "@mdi/font": "^5.3.45",
27 |     "@nuxt/typescript-runtime": "^0.4.0",
28 |     "@nuxtjs/axios": "^5.3.6",
29 |     "@nuxtjs/dotenv": "^1.4.0",
30 |     "@nuxtjs/pwa": "^3.0.0-0",
31 |     "firebase": "^7.14.5",
32 |     "nuxt": "^2.0.0"
33 |   },
34 |   "devDependencies": {
35 |     "@nuxt/typescript-build": "^0.6.0",
36 |     "@nuxtjs/eslint-config-typescript": "^1.0.0",
37 |     "@nuxtjs/eslint-module": "^1.0.0",
38 |     "@nuxtjs/google-analytics": "^2.3.0",
39 |     "@nuxtjs/stylelint-module": "^3.1.0",
40 |     "@nuxtjs/tailwindcss": "^1.0.0",
41 |     "@vue/test-utils": "^1.0.0-beta.27",
42 |     "babel-eslint": "^10.0.1",
43 |     "babel-jest": "^24.1.0",
44 |     "eslint": "^6.1.0",
45 |     "eslint-config-prettier": "^6.10.0",
46 |     "eslint-plugin-nuxt": ">=0.4.2",
47 |     "eslint-plugin-prettier": "^3.1.2",
48 |     "husky": "^4.0.0",
49 |     "jest": "^24.1.0",
50 |     "lint-staged": "^10.0.0",
51 |     "prettier": "^1.19.1",
52 |     "stylelint": "^10.1.0",
53 |     "tailwindcss-spinner": "^1.0.0",
54 |     "ts-jest": "^25.0.0",
55 |     "vue-jest": "^4.0.0-0"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="text-center">
 3 |     <h1 class="text-3xl font-bold text-gray-900">診断チャートメーカー</h1>
 4 |     <ButtonPostCreate class="mt-8" />
 5 |     <h2 class="text-xl font-bold mt-12">新着一覧</h2>
 6 |     <PostList :posts="posts" class="mt-2" />
 7 |     <button
 8 |       v-show="hasNext && posts.length >= LIMIT"
 9 |       class="bg-red-500 hover:bg-red-700 text-white font-bold h-10 w-32 rounded mt-4"
10 |       @click="readMorePosts"
11 |     >
12 |       <span v-if="!isProcessing">もっと見る</span>
13 |       <div v-else class="spinner"></div>
14 |     </button>
15 |     <ButtonPostCreate class="mt-12" />
16 |   </div>
17 | </template>
18 | 
19 | <script lang="ts">
20 | import Vue from 'vue'
21 | import PostList from '~/components/partials/post/PostList.vue'
22 | import ButtonPostCreate from '~/components/partials/ButtonPostCreate.vue'
23 | import { Post } from '~/types/struct'
24 | import { toPost } from '~/utils/transformer/toObject'
25 | 
26 | const LIMIT: number = 30
27 | 
28 | type LocalData = {
29 |   hasNext: boolean
30 |   isProcessing: boolean
31 |   posts: Post[]
32 | }
33 | 
34 | export default Vue.extend({
35 |   components: {
36 |     PostList,
37 |     ButtonPostCreate
38 |   },
39 |   async asyncData({ app }) {
40 |     const postDocuments = await app.$firestore
41 |       .collection('posts')
42 |       .orderBy('createdAt', 'desc')
43 |       .limit(LIMIT)
44 |       .get()
45 |     const posts = postDocuments.docs.map(
46 |       (postDocument): Post => {
47 |         return toPost(postDocument)
48 |       }
49 |     )
50 |     return {
51 |       posts
52 |     }
53 |   },
54 |   data(): LocalData {
55 |     return {
56 |       hasNext: true,
57 |       isProcessing: false,
58 |       posts: []
59 |     }
60 |   },
61 |   computed: {
62 |     LIMIT(): number {
63 |       return LIMIT
64 |     }
65 |   },
66 |   methods: {
67 |     async readMorePosts(): Promise<void> {
68 |       this.isProcessing = true
69 |       try {
70 |         const postDocuments = await this.$firestore
71 |           .collection('posts')
72 |           .orderBy('createdAt', 'desc')
73 |           .startAfter(this.posts[this.posts.length - 1].createdAt)
74 |           .limit(LIMIT)
75 |           .get()
76 |         const posts = postDocuments.docs.map(
77 |           (postDocument): Post => {
78 |             return toPost(postDocument)
79 |           }
80 |         )
81 |         this.posts = [...this.posts, ...posts]
82 |         this.hasNext = posts.length === LIMIT
83 |       } catch (e) {
84 |       } finally {
85 |         this.isProcessing = false
86 |       }
87 |     }
88 |   }
89 | })
90 | </script>
91 | 


--------------------------------------------------------------------------------
/pages/posts/_id/edit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="text-center">
  3 |     <h1 class="text-2xl font-bold mb-8">「{{ post.title }}」を編集</h1>
  4 |     <PostForm
  5 |       v-model="postFormData"
  6 |       :is-submitting="isSubmitting"
  7 |       submit-label="更新"
  8 |       @submit="handleSubmit"
  9 |     />
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script lang="ts">
 14 | import Vue from 'vue'
 15 | import { DocumentNotExistError } from '~/types/error'
 16 | import { PostFormData, TagObj, Post } from '~/types/struct'
 17 | import { toPost, toPostFormData } from '~/utils/transformer/toObject'
 18 | import PostForm from '~/components/partials/post/PostForm.vue'
 19 | 
 20 | type LocalData = {
 21 |   post: Post | null
 22 |   postFormData: PostFormData | null
 23 |   isSubmitting: Boolean
 24 | }
 25 | 
 26 | export default Vue.extend({
 27 |   components: {
 28 |     PostForm
 29 |   },
 30 |   async asyncData({ app, params: { id }, error }) {
 31 |     try {
 32 |       const postDocument = await app.$firestore
 33 |         .collection('posts')
 34 |         .doc(id)
 35 |         .get()
 36 |       const post: Post = toPost(postDocument)
 37 |       const postFormData: PostFormData = toPostFormData(post)
 38 |       return {
 39 |         post,
 40 |         postFormData
 41 |       }
 42 |     } catch (e) {
 43 |       if (e instanceof DocumentNotExistError) {
 44 |         error({
 45 |           statusCode: 404,
 46 |           message: 'ページが見つかりませんでした'
 47 |         })
 48 |       }
 49 |     }
 50 |   },
 51 |   data(): LocalData {
 52 |     return {
 53 |       post: null,
 54 |       postFormData: null,
 55 |       isSubmitting: false
 56 |     }
 57 |   },
 58 |   methods: {
 59 |     async handleSubmit(): Promise<void> {
 60 |       this.isSubmitting = true
 61 | 
 62 |       this.postFormData = this.postFormData as PostFormData
 63 | 
 64 |       this.postFormData.tags = this.postFormData.tags.map(
 65 |         (tag: TagObj): TagObj => {
 66 |           return {
 67 |             text: tag.text.replace(/^#/, '')
 68 |           }
 69 |         }
 70 |       )
 71 | 
 72 |       await Promise.all(
 73 |         this.postFormData.tags.map(async (tag: TagObj) => {
 74 |           await this.$firestore
 75 |             .collection('tags')
 76 |             .doc(tag.text)
 77 |             .set({
 78 |               text: tag.text
 79 |             })
 80 |         })
 81 |       )
 82 | 
 83 |       this.$firestore
 84 |         .collection('posts')
 85 |         .doc((this.post as Post).id)
 86 |         .set({
 87 |           title: this.postFormData.title,
 88 |           subtitle: this.postFormData.subtitle,
 89 |           nodeTree: JSON.stringify(this.postFormData.nodeTree),
 90 |           userId: this.$auth.currentUser.uid,
 91 |           hashtag: this.postFormData.hashtag,
 92 |           tags: this.postFormData.tags.map((tag: TagObj): string => {
 93 |             return tag.text
 94 |           }),
 95 |           createdAt: (this.post as Post).createdAt
 96 |         })
 97 |         .then(() => {
 98 |           this.$router.push(`/posts/${(this.post as Post).id}`)
 99 |         })
100 |     }
101 |   }
102 | })
103 | </script>
104 | 


--------------------------------------------------------------------------------
/pages/posts/_id/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="text-center">
  3 |     <div class="border border-gray-400 rounded py-8 px-4">
  4 |       <h1 class="text-3xl mb-2">{{ post.title }}</h1>
  5 |       <p class="text-gray-800 mb-2">{{ post.subtitle }}</p>
  6 |       <p class="text-gray-600 text-sm">
  7 |         作者：<nuxt-link :to="`/users/${user.id}/posts`" class="underline">
  8 |           {{ user.displayName }}
  9 |         </nuxt-link>
 10 |         <a
 11 |           :href="`https://twitter.com/${user.username}`"
 12 |           target="__blank"
 13 |           class="text-blue-500 ml-1"
 14 |         >
 15 |           <i class="mdi mdi-twitter " />
 16 |         </a>
 17 |       </p>
 18 |       <button
 19 |         v-if="$auth.currentUser && post.userId === $auth.currentUser.uid"
 20 |         class="block mx-auto bg-transparent hover:bg-gray-600 text-gray-600 text-xs hover:text-white py-1 px-4 border border-gray-600 hover:border-transparent rounded mt-4"
 21 |         @click="$router.push(`/posts/${post.id}/edit`)"
 22 |       >
 23 |         <i class="mdi mdi-pencil" />
 24 |         この診断を編集
 25 |       </button>
 26 | 
 27 |       <div v-show="!isPlaying" class="mt-8">
 28 |         <button
 29 |           class="text-2xl bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-10 rounded-full mr-1 mb-2"
 30 |           @click="handleStartClicked()"
 31 |         >
 32 |           診断スタート
 33 |         </button>
 34 |         <button
 35 |           class="block text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded mx-auto mt-8"
 36 |           @click="handleTweetPostClicked()"
 37 |         >
 38 |           <i class="mdi mdi-twitter mr-1" />
 39 |           ツイート
 40 |         </button>
 41 |       </div>
 42 |       <PostPlay v-show="isPlaying" :post="post" class="mt-8" />
 43 |     </div>
 44 | 
 45 |     <ButtonPostCreate class="mt-12" />
 46 | 
 47 |     <template v-if="relatedPosts.length">
 48 |       <h2 class="text-xl font-bold mt-12">関連一覧</h2>
 49 |       <PostList :posts="relatedPosts" class="mt-2" />
 50 |     </template>
 51 | 
 52 |     <PostListRecent class="mt-12" />
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script lang="ts">
 57 | import Vue from 'vue'
 58 | import { DocumentNotExistError } from '~/types/error'
 59 | import { User, Post } from '~/types/struct'
 60 | import { toUser, toPost } from '~/utils/transformer/toObject'
 61 | import PostList from '~/components/partials/post/PostList.vue'
 62 | import PostPlay from '~/components/partials/post/PostPlay.vue'
 63 | import PostListRecent from '~/components/partials/post/PostListRecent.vue'
 64 | import ButtonPostCreate from '~/components/partials/ButtonPostCreate.vue'
 65 | 
 66 | type LocalData = {
 67 |   post: Post | null
 68 |   user: User | null
 69 |   relatedPosts: Post[]
 70 |   isPlaying: Boolean
 71 | }
 72 | 
 73 | export default Vue.extend({
 74 |   components: {
 75 |     PostListRecent,
 76 |     ButtonPostCreate,
 77 |     PostList,
 78 |     PostPlay
 79 |   },
 80 |   async asyncData({ app, params: { id }, error }) {
 81 |     try {
 82 |       const postDocument = await app.$firestore
 83 |         .collection('posts')
 84 |         .doc(id)
 85 |         .get()
 86 |       const post = toPost(postDocument)
 87 |       const userDocument = await app.$firestore
 88 |         .collection('users')
 89 |         .doc(post.userId)
 90 |         .get()
 91 |       let relatedPosts: Post[]
 92 |       if (post.tags.length) {
 93 |         const relatedPostDocuments = await app.$firestore
 94 |           .collection('posts')
 95 |           .where('tags', 'array-contains-any', post.tags)
 96 |           .get()
 97 |         relatedPosts = relatedPostDocuments.docs
 98 |           .map(
 99 |             (postDocument): Post => {
100 |               return toPost(postDocument)
101 |             }
102 |           )
103 |           .filter((p: Post) => p.id !== post.id)
104 |       } else {
105 |         relatedPosts = []
106 |       }
107 |       return {
108 |         post,
109 |         relatedPosts,
110 |         user: toUser(userDocument),
111 |         currentNodeTree: post.nodeTree
112 |       }
113 |     } catch (e) {
114 |       if (e instanceof DocumentNotExistError) {
115 |         error({
116 |           statusCode: 404,
117 |           message: 'ページが見つかりませんでした'
118 |         })
119 |       }
120 |     }
121 |   },
122 |   data(): LocalData {
123 |     return {
124 |       post: null,
125 |       relatedPosts: [],
126 |       user: null,
127 |       isPlaying: false
128 |     }
129 |   },
130 |   methods: {
131 |     handleStartClicked(): void {
132 |       this.isPlaying = true
133 |     },
134 |     handleTweetPostClicked(): void {
135 |       const post = this.post! as Post
136 |       const tweet: string =
137 |         'https://twitter.com/intent/tweet?url=' +
138 |         encodeURIComponent(`${process.env.BASE_URL}/posts/${post.id}`) +
139 |         '&text=' +
140 |         encodeURIComponent(
141 |           `${post.title}\r\n#${post.hashtag} #診断チャートメーカー`
142 |         )
143 |       window.open(tweet)
144 |     }
145 |   },
146 |   head() {
147 |     const post = this.post! as Post
148 |     const title = `${post.title} | 診断チャートメーカー`
149 |     return {
150 |       title,
151 |       meta: [
152 |         { property: 'og:title', hid: 'og:title', content: title },
153 |         {
154 |           property: 'og:url',
155 |           hid: 'og:url',
156 |           content: `${process.env.BASE_URL}/posts/${post.id}`
157 |         },
158 |         { name: 'twitter:title', hid: 'twitter:title', content: title },
159 |         {
160 |           hid: 'og:image',
161 |           property: 'og:image',
162 |           content: `${process.env.OGP_API_URL}?title=${post.title}`
163 |         }
164 |       ]
165 |     }
166 |   }
167 | })
168 | </script>
169 | 


--------------------------------------------------------------------------------
/pages/posts/create.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="text-center">
  3 |     <h1 class="text-2xl font-bold mb-8">新しい診断を作成しよう</h1>
  4 |     <PostForm
  5 |       v-model="postFormData"
  6 |       :is-submitting="isSubmitting"
  7 |       submit-label="作成"
  8 |       @submit="handleSubmit"
  9 |     />
 10 |     <aside
 11 |       v-show="!$auth.currentUser"
 12 |       class="w-full h-full fixed left-0 top-0 bg-gray-800 bg-opacity-75 rounded z-50 flex items-center justify-center"
 13 |     >
 14 |       <div class="bg-white p-10 rounded">
 15 |         <p class="font-bold">ログインして診断をつくろう</p>
 16 |         <p class="mb-8 mt-1 text-gray-600">作成にはログインが必要です</p>
 17 |         <SignInButton class="mb-4" />
 18 |         <nuxt-link to="/" class="text-xs underline text-red-600">
 19 |           トップへ
 20 |         </nuxt-link>
 21 |       </div>
 22 |     </aside>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script lang="ts">
 27 | import Vue from 'vue'
 28 | import { PostFormData, TagObj } from '~/types/struct'
 29 | import PostForm from '~/components/partials/post/PostForm.vue'
 30 | import SignInButton from '~/components/common/signIn/SignInButton.vue'
 31 | import { defaultNodeTreeData } from '~/utils/constants/defalutNodeTreeData'
 32 | 
 33 | type LocalData = {
 34 |   postFormData: PostFormData | null
 35 |   isSubmitting: Boolean
 36 | }
 37 | 
 38 | export default Vue.extend({
 39 |   components: {
 40 |     PostForm,
 41 |     SignInButton
 42 |   },
 43 |   data(): LocalData {
 44 |     return {
 45 |       postFormData: {
 46 |         title: '',
 47 |         subtitle: '',
 48 |         hashtag: '',
 49 |         tags: [],
 50 |         nodeTree: defaultNodeTreeData
 51 |       },
 52 |       isSubmitting: false
 53 |     }
 54 |   },
 55 |   methods: {
 56 |     async handleSubmit(): Promise<void> {
 57 |       this.isSubmitting = true
 58 | 
 59 |       this.postFormData = this.postFormData as PostFormData
 60 | 
 61 |       this.postFormData.tags = this.postFormData.tags.map(
 62 |         (tag: TagObj): TagObj => {
 63 |           return {
 64 |             text: tag.text.replace(/^#/, '')
 65 |           }
 66 |         }
 67 |       )
 68 | 
 69 |       await Promise.all(
 70 |         this.postFormData.tags.map(async (tag: TagObj) => {
 71 |           await this.$firestore
 72 |             .collection('tags')
 73 |             .doc(tag.text)
 74 |             .set({
 75 |               text: tag.text
 76 |             })
 77 |         })
 78 |       )
 79 | 
 80 |       this.$firestore
 81 |         .collection('posts')
 82 |         .add({
 83 |           title: this.postFormData.title,
 84 |           subtitle: this.postFormData.subtitle,
 85 |           nodeTree: JSON.stringify(this.postFormData.nodeTree),
 86 |           userId: this.$auth.currentUser.uid,
 87 |           hashtag: this.postFormData.hashtag,
 88 |           tags: this.postFormData.tags.map((tag: TagObj): string => {
 89 |             return tag.text
 90 |           }),
 91 |           createdAt: this.$firebase.firestore.FieldValue.serverTimestamp()
 92 |         })
 93 |         .then((ref) => {
 94 |           this.$router.push(`/posts/${ref.id}`)
 95 |         })
 96 |     }
 97 |   }
 98 | })
 99 | </script>
100 | 


--------------------------------------------------------------------------------
/pages/users/_userId/posts/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="text-center">
 3 |     <figure>
 4 |       <img :src="user.photoUrl" class="h-16 w-16 rounded-full mx-auto" />
 5 |     </figure>
 6 |     <h1 class="text-xl font-bold mt-4">
 7 |       {{ user.displayName }} さんの投稿一覧
 8 |     </h1>
 9 |     <ButtonPostCreate class="mt-8" />
10 |     <PostList :posts="posts" class="mt-8" />
11 |     <button
12 |       v-show="hasNext && posts.length >= LIMIT"
13 |       class="bg-red-500 hover:bg-red-700 text-white font-bold h-10 w-32 rounded mt-4"
14 |       @click="readMorePosts"
15 |     >
16 |       <span v-if="!isProcessing">もっと見る</span>
17 |       <div v-else class="spinner"></div>
18 |     </button>
19 |     <ButtonPostCreate class="mt-12" />
20 |   </div>
21 | </template>
22 | 
23 | <script lang="ts">
24 | import Vue from 'vue'
25 | import PostList from '~/components/partials/post/PostList.vue'
26 | import ButtonPostCreate from '~/components/partials/ButtonPostCreate.vue'
27 | import { Post } from '~/types/struct'
28 | import { toUser, toPost } from '~/utils/transformer/toObject'
29 | 
30 | const LIMIT: number = 30
31 | 
32 | type LocalData = {
33 |   hasNext: boolean
34 |   isProcessing: boolean
35 |   posts: Post[]
36 | }
37 | 
38 | export default Vue.extend({
39 |   components: {
40 |     PostList,
41 |     ButtonPostCreate
42 |   },
43 |   async asyncData({ app, params: { userId } }) {
44 |     const postDocuments = await app.$firestore
45 |       .collection('posts')
46 |       .orderBy('createdAt', 'desc')
47 |       .where('userId', '==', userId)
48 |       .get()
49 |     const posts = postDocuments.docs.map(
50 |       (postDocument): Post => {
51 |         return toPost(postDocument)
52 |       }
53 |     )
54 |     const userDocument = await app.$firestore
55 |       .collection('users')
56 |       .doc(userId)
57 |       .get()
58 |     return {
59 |       posts,
60 |       user: toUser(userDocument)
61 |     }
62 |   },
63 |   data(): LocalData {
64 |     return {
65 |       hasNext: true,
66 |       isProcessing: false,
67 |       posts: []
68 |     }
69 |   },
70 |   computed: {
71 |     LIMIT(): number {
72 |       return LIMIT
73 |     }
74 |   }
75 | })
76 | </script>
77 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/plugins/firebase.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { Plugin } from '@nuxt/types'
 3 | import * as _firebase from 'firebase'
 4 | import * as Firebase from '../utils/externals/firebase'
 5 | 
 6 | declare module '@nuxt/types' {
 7 |   interface Context {
 8 |     $firebase: typeof _firebase
 9 |     $firestore: firebase.firestore.Firestore
10 |     $storage: firebase.storage.Storage
11 |     $functions: firebase.functions.Functions
12 |     $messaging: firebase.messaging.Messaging
13 |     $analytics: firebase.analytics.Analytics
14 |   }
15 |   interface NuxtAppOptions {
16 |     $firebase: typeof _firebase
17 |     $firestore: firebase.firestore.Firestore
18 |     $storage: firebase.storage.Storage
19 |     $functions: firebase.functions.Functions
20 |     $messaging: firebase.messaging.Messaging
21 |     $analytics: firebase.analytics.Analytics
22 |   }
23 | }
24 | 
25 | declare module 'vue/types/vue' {
26 |   interface Vue {
27 |     $auth: firebase.auth.Auth & {
28 |       user: firebase.User
29 |       currentUser: firebase.User
30 |     }
31 |     $firebase: typeof _firebase
32 |     $firestore: firebase.firestore.Firestore
33 |     $storage: firebase.storage.Storage
34 |     $functions: firebase.functions.Functions
35 |     $messaging: firebase.messaging.Messaging
36 |     $analytics: firebase.analytics.Analytics
37 |   }
38 | }
39 | 
40 | const _auth = (Firebase.auth as any) as firebase.auth.Auth & {
41 |   __defineGetter__: any
42 |   _vm: any
43 | }
44 | if (!_auth._vm) {
45 |   _auth._vm = new Vue({
46 |     data() {
47 |       return {
48 |         currentUser: _auth.currentUser !== null ? _auth.currentUser : undefined
49 |       }
50 |     },
51 |     created() {
52 |       _auth.onAuthStateChanged((user: any) => {
53 |         this.currentUser = user
54 |       })
55 |     }
56 |   })
57 |   _auth.__defineGetter__('currentUser', () => {
58 |     return _auth._vm.$data.currentUser
59 |   })
60 |   _auth.__defineGetter__('user', () => {
61 |     return _auth._vm.$data.currentUser
62 |   })
63 | }
64 | 
65 | const FirebasePlugin: Plugin = (_context, inject) => {
66 |   inject('firebase', Firebase.firebase)
67 |   inject('app', Firebase.app)
68 |   inject('firestore', Firebase.firestore)
69 |   inject('storage', Firebase.storage)
70 |   inject('functions', Firebase.functions)
71 |   inject('auth', _auth as firebase.auth.Auth)
72 |   inject('analytics', Firebase.analytics)
73 | }
74 | 
75 | export default FirebasePlugin
76 | 


--------------------------------------------------------------------------------
/plugins/vue-tags-input.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueTagsInput from '@johmun/vue-tags-input'
3 | 
4 | Vue.use(VueTagsInput)
5 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/retoruto-carry/shindan-chart-maker/b4a2ba80f34671d60ab650b089f623b207544951/static/favicon.ico


--------------------------------------------------------------------------------
/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/retoruto-carry/shindan-chart-maker/b4a2ba80f34671d60ab650b089f623b207544951/static/icon.png


--------------------------------------------------------------------------------
/static/images/ogp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/retoruto-carry/shindan-chart-maker/b4a2ba80f34671d60ab650b089f623b207544951/static/images/ogp.png


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   // add your custom config here
3 |   // https://stylelint.io/user-guide/configuration
4 |   rules: {}
5 | }
6 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  ** TailwindCSS Configuration File
 3 |  **
 4 |  ** Docs: https://tailwindcss.com/docs/configuration
 5 |  ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
 6 |  */
 7 | 
 8 | module.exports = {
 9 |   theme: {
10 |     spinner: (theme) => ({
11 |       default: {
12 |         color: theme('colors.white'),
13 |         size: '1em',
14 |         border: '2px',
15 |         speed: '500ms'
16 |       }
17 |     })
18 |   },
19 |   variants: {
20 |     display: ['responsive', 'group-hover'],
21 |     opacity: ['disabled'],
22 |     backgroundColor: ['disabled', 'hover'],
23 |     textColor: ['responsive', 'hover'],
24 |     cursor: ['disabled', 'hover'],
25 |     spinner: ['responsive']
26 |   },
27 |   plugins: [require('tailwindcss-spinner')()]
28 | }
29 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2018",
 4 |     "module": "esnext",
 5 |     "moduleResolution": "node",
 6 |     "lib": [
 7 |       "esnext",
 8 |       "esnext.asynciterable",
 9 |       "dom"
10 |     ],
11 |     "esModuleInterop": true,
12 |     "allowJs": true,
13 |     "sourceMap": true,
14 |     "strict": true,
15 |     "noEmit": true,
16 |     "experimentalDecorators": true,
17 |     "baseUrl": ".",
18 |     "paths": {
19 |       "~/*": [
20 |         "./*"
21 |       ],
22 |       "@/*": [
23 |         "./*"
24 |       ]
25 |     },
26 |     "types": [
27 |       "@types/node",
28 |       "@nuxt/types"
29 |     ]
30 |   },
31 |   "exclude": [
32 |     "node_modules",
33 |     ".nuxt",
34 |     "dist"
35 |   ]
36 | }
37 | 


--------------------------------------------------------------------------------
/types/error.ts:
--------------------------------------------------------------------------------
 1 | class BaseError extends Error {
 2 |   constructor(e?: string) {
 3 |     super(e)
 4 |     this.name = new.target.name
 5 |     // 下記の行はTypeScriptの出力ターゲットがES2015より古い場合(ES3, ES5)のみ必要
 6 |     Object.setPrototypeOf(this, new.target.prototype)
 7 |   }
 8 | }
 9 | 
10 | export class DocumentNotExistError extends BaseError {}
11 | 


--------------------------------------------------------------------------------
/types/struct.ts:
--------------------------------------------------------------------------------
 1 | export type NodeType = 'QUESTION' | 'RESULT'
 2 | 
 3 | type ChoiceNode = {
 4 |   label: string
 5 |   nodeTree: NodeTree
 6 | }
 7 | 
 8 | export type QuestionNodeTree = {
 9 |   text: string
10 |   type: 'QUESTION'
11 |   choiceNodes: ChoiceNode[]
12 | }
13 | 
14 | export type ResultNodeTree = {
15 |   text: string
16 |   type: 'RESULT'
17 | }
18 | 
19 | export type NodeTree = QuestionNodeTree | ResultNodeTree
20 | 
21 | export type NodeTreeSample = {
22 |   title: string
23 |   nodeTree: NodeTree
24 | }
25 | 
26 | export type User = {
27 |   id: string
28 |   displayName: string
29 |   photoUrl: string
30 |   username: string
31 | }
32 | 
33 | export type Post = {
34 |   id: string
35 |   title: string
36 |   subtitle: string
37 |   hashtag: string
38 |   tags: string[]
39 |   nodeTree: NodeTree
40 |   userId: string
41 |   createdAt: Date
42 | }
43 | 
44 | export type PostFormData = {
45 |   title: string
46 |   subtitle: string
47 |   hashtag: string
48 |   tags: TagObj[]
49 |   nodeTree: NodeTree
50 | }
51 | 
52 | export type PostDocumentData = {
53 |   id: string
54 |   title: string
55 |   subtitle: string
56 |   hashtag: string
57 |   tags: string[]
58 |   userId: string
59 | }
60 | 
61 | export type TagObj = {
62 |   text: string
63 | }
64 | 


--------------------------------------------------------------------------------
/utils/constants/defalutNodeTreeData.ts:
--------------------------------------------------------------------------------
 1 | import { NodeTree } from '~/types/struct'
 2 | 
 3 | export const defaultNodeTreeData: NodeTree = {
 4 |   type: 'QUESTION',
 5 |   text: '',
 6 |   choiceNodes: [
 7 |     {
 8 |       label: '',
 9 |       nodeTree: {
10 |         type: 'RESULT',
11 |         text: ''
12 |       }
13 |     },
14 |     {
15 |       label: '',
16 |       nodeTree: {
17 |         type: 'RESULT',
18 |         text: ''
19 |       }
20 |     }
21 |   ]
22 | }
23 | 


--------------------------------------------------------------------------------
/utils/constants/nodeTreeSamples.ts:
--------------------------------------------------------------------------------
  1 | import { NodeTree, NodeTreeSample } from '~/types/struct'
  2 | 
  3 | const sampleNodeTree1: NodeTree = {
  4 |   type: 'QUESTION',
  5 |   text: 'あなたはどっち派？',
  6 |   choiceNodes: [
  7 |     {
  8 |       label: 'きのこ',
  9 |       nodeTree: {
 10 |         type: 'RESULT',
 11 |         text: 'きのこ死すべし、慈悲は無い'
 12 |       }
 13 |     },
 14 |     {
 15 |       label: 'たけのこ',
 16 |       nodeTree: {
 17 |         type: 'RESULT',
 18 |         text: 'やっぱり、たけのこの方が美味しいよね'
 19 |       }
 20 |     }
 21 |   ]
 22 | }
 23 | const sample1: NodeTreeSample = {
 24 |   title: 'きのこたけのこ戦争',
 25 |   nodeTree: sampleNodeTree1
 26 | }
 27 | 
 28 | const sampleNodeTree2: NodeTree = {
 29 |   type: 'QUESTION',
 30 |   text: '私の事好き？',
 31 |   choiceNodes: [
 32 |     {
 33 |       label: '好きだよ',
 34 |       nodeTree: {
 35 |         type: 'RESULT',
 36 |         text: '私も好き❤️\n\nHAPPY END'
 37 |       }
 38 |     },
 39 |     {
 40 |       label: '嫌いだよ',
 41 |       nodeTree: {
 42 |         type: 'QUESTION',
 43 |         text: 'なんでそんなこと言うの？',
 44 |         choiceNodes: [
 45 |           {
 46 |             label: 'やっぱり好きだよ',
 47 |             nodeTree: {
 48 |               type: 'RESULT',
 49 |               text: '私も好き❤️\n\nHAPPY END'
 50 |             }
 51 |           },
 52 |           {
 53 |             label: '嫌いだよ',
 54 |             nodeTree: {
 55 |               type: 'QUESTION',
 56 |               text: 'なんでそんな事言うの？',
 57 |               choiceNodes: [
 58 |                 {
 59 |                   label: 'やっぱり好きだよ',
 60 |                   nodeTree: {
 61 |                     type: 'RESULT',
 62 |                     text: '私も好き❤️\n\nHAPPY END'
 63 |                   }
 64 |                 },
 65 |                 {
 66 |                   label: '嫌いだよ',
 67 |                   nodeTree: {
 68 |                     type: 'RESULT',
 69 |                     text:
 70 |                       '突如彼女は斧を振りかざした！\nズブシャァッ！\nあなたは死んでしまった。\n\nDEAD END'
 71 |                   }
 72 |                 }
 73 |               ]
 74 |             }
 75 |           }
 76 |         ]
 77 |       }
 78 |     }
 79 |   ]
 80 | }
 81 | const sample2: NodeTreeSample = {
 82 |   title: 'ノベルゲーム風',
 83 |   nodeTree: sampleNodeTree2
 84 | }
 85 | 
 86 | const sampleNodeTree3: NodeTree = {
 87 |   type: 'QUESTION',
 88 |   text: '無人島に持っていくなら？',
 89 |   choiceNodes: [
 90 |     {
 91 |       label: '水',
 92 |       nodeTree: {
 93 |         type: 'RESULT',
 94 |         text: 'あなたの性格は....\n\n几帳面！！！！！'
 95 |       }
 96 |     },
 97 |     {
 98 |       label: '食料',
 99 |       nodeTree: {
100 |         type: 'RESULT',
101 |         text: 'あなたの性格は....\n\nしっかりもの！！！！！'
102 |       }
103 |     },
104 |     {
105 |       label: 'ゲーム',
106 |       nodeTree: {
107 |         type: 'RESULT',
108 |         text: 'あなたの性格は....\n\nお気楽！！！！！'
109 |       }
110 |     },
111 |     {
112 |       label: 'テント',
113 |       nodeTree: {
114 |         type: 'RESULT',
115 |         text: 'あなたの性格は....\n\nぐうたら！！！！'
116 |       }
117 |     }
118 |   ]
119 | }
120 | const sample3: NodeTreeSample = {
121 |   title: '無人島にもっていくものであなたの性格がわかる',
122 |   nodeTree: sampleNodeTree3
123 | }
124 | 
125 | export const nodeTreeSamples: NodeTreeSample[] = [sample1, sample2, sample3]
126 | 


--------------------------------------------------------------------------------
/utils/externals/firebase.ts:
--------------------------------------------------------------------------------
 1 | import * as _firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | import 'firebase/storage'
 4 | import 'firebase/functions'
 5 | import 'firebase/auth'
 6 | import 'firebase/messaging'
 7 | import 'firebase/analytics'
 8 | 
 9 | const config: any = {
10 |   apiKey: process.env.FIREBASE_API_KEY,
11 |   authDomain: process.env.FIREBASE_AUTH_DOMAIN,
12 |   databaseURL: process.env.FIREBASE_DATABASE_URL,
13 |   projectId: process.env.FIREBASE_PROJECT_ID,
14 |   storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
15 |   messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
16 |   appId: process.env.FIREBASE_APP_ID
17 | }
18 | 
19 | if (process.env.FIREBASE_MEASUREMENT_ID) {
20 |   config.measurementId = process.env.FIREBASE_MEASUREMENT_ID
21 | }
22 | 
23 | export const app = !_firebase.apps.length
24 |   ? _firebase.initializeApp(config)
25 |   : _firebase.app()
26 | 
27 | function initialize(app: any) {
28 |   if (process.browser) {
29 |     try {
30 |       return app.analytics()
31 |     } catch (e) {
32 |       console.log(e)
33 |     }
34 |   }
35 |   return {
36 |     logEvent: () => {}
37 |   }
38 | }
39 | 
40 | export const firebase = _firebase
41 | export const firestore = app.firestore()
42 | export const storage = app.storage()
43 | export const functions = app.functions('asia-northeast1')
44 | export const analytics = initialize(app)
45 | export const auth = app.auth()
46 | 


--------------------------------------------------------------------------------
/utils/transformer/toObject.ts:
--------------------------------------------------------------------------------
 1 | import { firebase } from '../externals/firebase'
 2 | import {
 3 |   User,
 4 |   Post,
 5 |   PostDocumentData,
 6 |   TagObj,
 7 |   PostFormData
 8 | } from '../../types/struct'
 9 | import { DocumentNotExistError } from '../../types/error'
10 | 
11 | type Document = firebase.firestore.DocumentSnapshot<
12 |   firebase.firestore.DocumentData
13 | >
14 | export function toObject<T>(doc: Document): T {
15 |   const obj: any = {
16 |     id: doc.id,
17 |     ...doc.data()
18 |   }
19 |   return obj as T
20 | }
21 | 
22 | export function toUser(doc: Document): User {
23 |   if (!doc.exists) throw new DocumentNotExistError()
24 |   return toObject<User>(doc)
25 | }
26 | 
27 | export function toPost(doc: Document): Post {
28 |   if (!doc.exists) throw new DocumentNotExistError()
29 |   const _doc: any = doc
30 |   return {
31 |     ...toObject<PostDocumentData>(doc),
32 |     createdAt: _doc.data().createdAt.toDate(),
33 |     nodeTree: JSON.parse(_doc.data().nodeTree)
34 |   }
35 | }
36 | 
37 | export function toTagObj(doc: Document): TagObj {
38 |   if (!doc.exists) throw new DocumentNotExistError()
39 |   const _doc: any = doc
40 |   return {
41 |     text: _doc.data().text
42 |   }
43 | }
44 | 
45 | export function toPostFormData(post: Post): PostFormData {
46 |   return {
47 |     title: post.title,
48 |     subtitle: post.subtitle,
49 |     hashtag: post.hashtag,
50 |     tags: post.tags.map((t) => {
51 |       return {
52 |         text: t
53 |       }
54 |     }),
55 |     nodeTree: post.nodeTree
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------