From b8bc395e9f491a650623602ae5c4c4c5ef38f0af Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Mon, 27 Jun 2022 19:40:36 +0900
Subject: [PATCH 01/24] woking on the tutorial

---
 pages/tutorial.vue | 180 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 pages/tutorial.vue

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
new file mode 100644
index 0000000..759ffbd
--- /dev/null
+++ b/pages/tutorial.vue
@@ -0,0 +1,180 @@
+<script setup>
+const repositories = ref({
+  origin: {
+    main: {
+      name: 'origin/main',
+      commits: []
+    },
+  },
+  local: {
+    main: {
+      name: 'main',
+      commits: []
+    }
+  }
+})
+
+const createKey = () => {
+  return Math.random().toString(32).substring(2)
+}
+
+const currentBranch = ref('main')
+const currentCommit = ref(null)
+
+const edit = ref(false)
+const doEdit = () => {
+  edit.value = true
+}
+
+const add = ref(false)
+const doAdd = () => {
+  add.value = true
+}
+
+const commitAble = computed(() => edit.value && add.value ? true : false )
+const doCommit = () => {
+  const randomKey = createKey()
+  repositories.value.local[currentBranch.value].commits.push(randomKey)
+  edit.value = false
+}
+
+const doPush = () => {
+
+}
+
+const doSwitch = () => {
+
+}
+
+
+const clone = ref(false)
+
+const doClone = () => {
+  repositories.value.local.main.commits.push(currentCommit.value)
+  clone.value = true
+}
+
+onMounted(() => {
+  currentCommit.value = createKey()
+  repositories.value.origin.main.commits.push(currentCommit.value)
+})
+
+</script>
+
+<template>
+
+  <div class="max-w-7xl mx-auto section-inner">
+
+    <div id="branches">
+
+      <div
+        v-for="(repository, index) in repositories"
+        :key="index"
+      >
+
+        <div
+          v-for="(branch, index) in repository"
+          :key="index"
+          >
+
+          <div>{{branch.name}}</div>
+
+          <div
+            v-for="(commit, index) in branch.commits"
+            :key="index"
+            class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-yellow-500 text-white"
+            >
+
+            <div class="hs-tooltip inline-block">
+              <button type="button" class="hs-tooltip-toggle inline-flex items-center gap-x-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:text-white dark:focus:ring-offset-gray-800">
+
+                <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                  <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+                </svg>
+                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
+                  {{commit}}
+                </span>
+
+              </button>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+    <div
+      id="buttons"
+      class="flex justify-center py-12">
+
+      <div v-show="!clone">
+        <button
+          @click="doClone"
+          type="button"
+          class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-gray-500 text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all text-sm dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800"
+          >
+          clone
+        </button>
+      </div>
+
+      <div v-show="clone">
+
+        <div class="space-x-4">
+
+          <button
+            @click="doEdit"
+            type="button"
+            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-gray-800 text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-800 focus:ring-offset-2 transition-all text-sm dark:focus:ring-gray-900 dark:focus:ring-offset-gray-800">
+            Edit
+          </button>
+
+          <span>$ git</span>
+
+          <button
+            @click="doAdd"
+            type="button"
+            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+            :class="{'focus:outline-none focus:ring-2 bg-red-300 focus:ring-offset-2 transition-all cursor-not-allowed': add, 'hover:bg-red-600 bg-red-500': !add}"
+            :disabled="add"
+            >
+            add .
+          </button>
+
+          <button
+            @click="doCommit"
+            type="button"
+            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+            :class="{'focus:outline-none focus:ring-2 bg-yellow-300 focus:ring-offset-2 transition-all cursor-not-allowed': !commitAble, 'hover:bg-yellow-600 bg-yellow-500': commitAble}"
+            :disabled="!commitAble"
+            >
+            commit
+          </button>
+
+          <button
+            @click="doSwitch"
+            type="button"
+            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-green-500 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+            >
+            git push -u origin {{currentBranch}}
+          </button>
+
+          <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
+            switch branchX
+          </button>
+
+          <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
+            switch -c branchX
+          </button>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</template>
\ No newline at end of file

From 584863511845f3d70b4c54f8f25c0b8a4c9434b2 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Mon, 27 Jun 2022 20:03:07 +0900
Subject: [PATCH 02/24] failed installing preline

---
 pages/tutorial.vue | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 759ffbd..3430777 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -46,7 +46,6 @@ const doSwitch = () => {
 
 }
 
-
 const clone = ref(false)
 
 const doClone = () => {
@@ -85,20 +84,6 @@ onMounted(() => {
             class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-yellow-500 text-white"
             >
 
-            <div class="hs-tooltip inline-block">
-              <button type="button" class="hs-tooltip-toggle inline-flex items-center gap-x-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:text-white dark:focus:ring-offset-gray-800">
-
-                <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-                  <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
-                </svg>
-                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
-                  {{commit}}
-                </span>
-
-              </button>
-            </div>
-
           </div>
 
         </div>

From 9f8a9ea405960dc5050cf157d96063b6260adf4b Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 00:20:24 +0900
Subject: [PATCH 03/24] done: add, commit, switch, switch -c

---
 pages/tutorial.vue | 85 +++++++++++++++++++++++++++++++++-------------
 tailwind.config.js |  4 ++-
 2 files changed, 65 insertions(+), 24 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 3430777..bbc56bd 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -1,24 +1,24 @@
 <script setup>
 const repositories = ref({
-  origin: {
-    main: {
+  origin: [
+    {
       name: 'origin/main',
       commits: []
-    },
-  },
-  local: {
-    main: {
+    }
+  ],
+  local: [
+    {
       name: 'main',
       commits: []
     }
-  }
+  ]
 })
 
 const createKey = () => {
   return Math.random().toString(32).substring(2)
 }
 
-const currentBranch = ref('main')
+const currentBranch = ref(0)
 const currentCommit = ref(null)
 
 const edit = ref(false)
@@ -42,20 +42,34 @@ const doPush = () => {
 
 }
 
-const doSwitch = () => {
+const doSwitchBranch = () => {
+  currentBranch.value == Object.keys(repositories.value.local).length -1
+  ? currentBranch.value = 0
+  : currentBranch.value += 1
+}
 
+const doCreateBranch = () => {
+  const count = Object.keys(repositories.value.local).length
+  const commitsLength = toRaw(repositories.value.local[currentBranch.value].commits.length)
+  const spacer = toRaw(repositories.value.local[currentBranch.value].spacer)
+  repositories.value.local[count] = {
+    name: `dev-${count}`,
+    commits: [],
+    spacer: commitsLength + (spacer ? spacer : 0)
+  }
+  currentBranch.value = count
+  add.value = false
 }
 
 const clone = ref(false)
-
 const doClone = () => {
-  repositories.value.local.main.commits.push(currentCommit.value)
+  repositories.value.local[0].commits.push(currentCommit.value)
   clone.value = true
 }
 
 onMounted(() => {
   currentCommit.value = createKey()
-  repositories.value.origin.main.commits.push(currentCommit.value)
+  repositories.value.origin[0].commits.push(currentCommit.value)
 })
 
 </script>
@@ -69,20 +83,39 @@ onMounted(() => {
       <div
         v-for="(repository, index) in repositories"
         :key="index"
+        class="mb-8"
       >
 
         <div
           v-for="(branch, index) in repository"
           :key="index"
+          class="mb-2 p-4 flex items-center"
+          :class="{'bg-slate-200': branch.name === repositories.local[currentBranch].name}"
           >
 
-          <div>{{branch.name}}</div>
+          <div class="w-28">{{branch.name}}</div>
+
+          <div class="flex">
 
-          <div
-            v-for="(commit, index) in branch.commits"
-            :key="index"
-            class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-yellow-500 text-white"
+            <div
+              v-show="branch.spacer"
+              class="flex"
             >
+              <div
+              v-for="(space, index) of branch.spacer"
+              :key="index"
+              class="mr-4 w-8 h-8"
+              ></div>
+
+            </div>
+
+            <div
+              v-for="(commit, index) in branch.commits"
+              :key="index"
+              :id="commit"
+              class="mr-4 w-8 h-8 bg-yellow-500 rounded-full"
+              >
+            </div>
 
           </div>
 
@@ -139,19 +172,25 @@ onMounted(() => {
           </button>
 
           <button
-            @click="doSwitch"
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-green-500 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
             >
-            git push -u origin {{currentBranch}}
+            git push -u origin {{repositories.local[currentBranch].name}}
           </button>
 
-          <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
-            switch branchX
+          <button
+            @click="doSwitchBranch"
+            type="button"
+            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
+            switch {{(currentBranch == Object.keys(repositories.local).length -1) ? repositories.local[0].name : repositories.local[currentBranch+1].name}}
           </button>
 
-          <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
-            switch -c branchX
+          <button
+            @click="doCreateBranch"
+            type="button"
+            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+            >
+            switch -c dev-x
           </button>
 
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 174fcde..b71f714 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,9 @@ module.exports = {
   plugins: [
     require('@tailwindcss/typography'),
   ],
-  content: ['content/**/*.{md,yml,json,json5,csv}'],
+  content: [
+    'content/**/*.{md,yml,json,json5,csv}',
+  ],
   theme: {
     extend: {
       colors: {

From 8d283ba4e025b75f3c8f854dd4953dcf84d6c37b Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 13:47:40 +0900
Subject: [PATCH 04/24] pushing bug

---
 pages/tutorial.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index bbc56bd..f5accb0 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -39,7 +39,9 @@ const doCommit = () => {
 }
 
 const doPush = () => {
-
+  const branchSnap = toRaw(repositories.value.local[currentBranch.value])
+  branchSnap.name = 'origin/' + branchSnap.name
+  repositories.value.origin.push(branchSnap)
 }
 
 const doSwitchBranch = () => {
@@ -83,13 +85,13 @@ onMounted(() => {
       <div
         v-for="(repository, index) in repositories"
         :key="index"
-        class="mb-8"
+        class="mb-4"
       >
 
         <div
           v-for="(branch, index) in repository"
           :key="index"
-          class="mb-2 p-4 flex items-center"
+          class="mb-2 p-2 flex items-center"
           :class="{'bg-slate-200': branch.name === repositories.local[currentBranch].name}"
           >
 
@@ -104,7 +106,7 @@ onMounted(() => {
               <div
               v-for="(space, index) of branch.spacer"
               :key="index"
-              class="mr-4 w-8 h-8"
+              class="mr-2 w-4 h-4"
               ></div>
 
             </div>
@@ -113,7 +115,7 @@ onMounted(() => {
               v-for="(commit, index) in branch.commits"
               :key="index"
               :id="commit"
-              class="mr-4 w-8 h-8 bg-yellow-500 rounded-full"
+              class="mr-2 w-4 h-4 bg-yellow-500 rounded-full"
               >
             </div>
 
@@ -172,6 +174,7 @@ onMounted(() => {
           </button>
 
           <button
+            @click="doPush"
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-green-500 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
             >

From 18c1c09ba8a73dd040d3e085890e374ffab738e4 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 14:15:33 +0900
Subject: [PATCH 05/24] push bug

---
 pages/tutorial.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index f5accb0..fd41581 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -41,6 +41,7 @@ const doCommit = () => {
 const doPush = () => {
   const branchSnap = toRaw(repositories.value.local[currentBranch.value])
   branchSnap.name = 'origin/' + branchSnap.name
+  // ↓ it's acting weeiiirrrd, the behavior, as pushing an object to "repositories.origin", it will also push to "repositories.local" as same even if it's raw (not ref() ), is like a bug.
   repositories.value.origin.push(branchSnap)
 }
 

From cc5bfc15d44fd1ab35fdbef29601187bf40b6397 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 14:40:43 +0900
Subject: [PATCH 06/24] remove: 'repositories'

---
 pages/tutorial.vue | 41 ++++++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index fd41581..377e687 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -1,18 +1,21 @@
 <script setup>
-const repositories = ref({
-  origin: [
+const origin = ref(
+  [
     {
       name: 'origin/main',
       commits: []
     }
-  ],
-  local: [
+  ]
+)
+
+const local = ref(
+  [
     {
       name: 'main',
       commits: []
     }
   ]
-})
+)
 
 const createKey = () => {
   return Math.random().toString(32).substring(2)
@@ -34,28 +37,28 @@ const doAdd = () => {
 const commitAble = computed(() => edit.value && add.value ? true : false )
 const doCommit = () => {
   const randomKey = createKey()
-  repositories.value.local[currentBranch.value].commits.push(randomKey)
+  local.value[currentBranch.value].commits.push(randomKey)
   edit.value = false
 }
 
 const doPush = () => {
-  const branchSnap = toRaw(repositories.value.local[currentBranch.value])
+  const branchSnap = toRaw(.local[currentBranch.value])
   branchSnap.name = 'origin/' + branchSnap.name
-  // ↓ it's acting weeiiirrrd, the behavior, as pushing an object to "repositories.origin", it will also push to "repositories.local" as same even if it's raw (not ref() ), is like a bug.
-  repositories.value.origin.push(branchSnap)
+  // ↓ it's acting weeiiirrrd, the behavior, as pushing an object to "origin", it will also push to "local" as same even if it's raw (not ref() ), is like a bug.
+  origin.value.push(branchSnap)
 }
 
 const doSwitchBranch = () => {
-  currentBranch.value == Object.keys(repositories.value.local).length -1
+  currentBranch.value == Object.keys(local.value).length -1
   ? currentBranch.value = 0
   : currentBranch.value += 1
 }
 
 const doCreateBranch = () => {
-  const count = Object.keys(repositories.value.local).length
-  const commitsLength = toRaw(repositories.value.local[currentBranch.value].commits.length)
-  const spacer = toRaw(repositories.value.local[currentBranch.value].spacer)
-  repositories.value.local[count] = {
+  const count = Object.keys(local.value).length
+  const commitsLength = toRaw(local.value[currentBranch.value].commits.length)
+  const spacer = toRaw(.local[currentBranch.value].spacer)
+  local.value[count] = {
     name: `dev-${count}`,
     commits: [],
     spacer: commitsLength + (spacer ? spacer : 0)
@@ -66,13 +69,13 @@ const doCreateBranch = () => {
 
 const clone = ref(false)
 const doClone = () => {
-  repositories.value.local[0].commits.push(currentCommit.value)
+  local.value[0].commits.push(currentCommit.value)
   clone.value = true
 }
 
 onMounted(() => {
   currentCommit.value = createKey()
-  repositories.value.origin[0].commits.push(currentCommit.value)
+  origin.value[0].commits.push(currentCommit.value)
 })
 
 </script>
@@ -93,7 +96,7 @@ onMounted(() => {
           v-for="(branch, index) in repository"
           :key="index"
           class="mb-2 p-2 flex items-center"
-          :class="{'bg-slate-200': branch.name === repositories.local[currentBranch].name}"
+          :class="{'bg-slate-200': branch.name === local[currentBranch].name}"
           >
 
           <div class="w-28">{{branch.name}}</div>
@@ -179,14 +182,14 @@ onMounted(() => {
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-green-500 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
             >
-            git push -u origin {{repositories.local[currentBranch].name}}
+            git push -u origin {{local[currentBranch].name}}
           </button>
 
           <button
             @click="doSwitchBranch"
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
-            switch {{(currentBranch == Object.keys(repositories.local).length -1) ? repositories.local[0].name : repositories.local[currentBranch+1].name}}
+            switch {{(currentBranch == Object.keys(local).length -1) ? local[0].name : local[currentBranch+1].name}}
           </button>
 
           <button

From 48fc43a0f15d1624b979a5367952efd5ad1d6ea5 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 15:31:48 +0900
Subject: [PATCH 07/24] found bug

---
 pages/tutorial.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 377e687..e8e58bc 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -17,6 +17,8 @@ const local = ref(
   ]
 )
 
+const repositories = computed(() => [origin.value, local.value])
+
 const createKey = () => {
   return Math.random().toString(32).substring(2)
 }
@@ -42,10 +44,11 @@ const doCommit = () => {
 }
 
 const doPush = () => {
-  const branchSnap = toRaw(.local[currentBranch.value])
-  branchSnap.name = 'origin/' + branchSnap.name
-  // ↓ it's acting weeiiirrrd, the behavior, as pushing an object to "origin", it will also push to "local" as same even if it's raw (not ref() ), is like a bug.
-  origin.value.push(branchSnap)
+  const snapLocalBranch = toRaw(local.value)
+  const snapCurrentBranch = toRaw(currentBranch.value)
+  const copiedBranch = toRaw(snapLocalBranch[snapCurrentBranch])
+  copiedBranch.name = 'origin/' + copiedBranch.name
+  origin.value.push({ name: 'test', commits: copiedBranch.commits, spacer: copiedBranch.spacer })
 }
 
 const doSwitchBranch = () => {
@@ -56,8 +59,8 @@ const doSwitchBranch = () => {
 
 const doCreateBranch = () => {
   const count = Object.keys(local.value).length
-  const commitsLength = toRaw(local.value[currentBranch.value].commits.length)
-  const spacer = toRaw(.local[currentBranch.value].spacer)
+  const commitsLength = toRaw(local.value)[toRaw(currentBranch.value)].commits.length
+  const spacer = toRaw(local.value)[toRaw(currentBranch.value)].spacer
   local.value[count] = {
     name: `dev-${count}`,
     commits: [],
@@ -128,6 +131,7 @@ onMounted(() => {
         </div>
       </div>
 
+
     </div>
 
     <div

From 0ccaf478fe8f9c3152486250a3f5ca9df4a56931 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 16:00:48 +0900
Subject: [PATCH 08/24] chore: tailwind.config

---
 pages/tutorial.vue | 2 +-
 tailwind.config.js | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index e8e58bc..fd95ba5 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -48,7 +48,7 @@ const doPush = () => {
   const snapCurrentBranch = toRaw(currentBranch.value)
   const copiedBranch = toRaw(snapLocalBranch[snapCurrentBranch])
   copiedBranch.name = 'origin/' + copiedBranch.name
-  origin.value.push({ name: 'test', commits: copiedBranch.commits, spacer: copiedBranch.spacer })
+  origin.value.push({ name: 'test', co1mmits: copiedBranch.commits, spacer: copiedBranch.spacer })
 }
 
 const doSwitchBranch = () => {
diff --git a/tailwind.config.js b/tailwind.config.js
index b71f714..fe7e4de 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,9 +5,7 @@ module.exports = {
   plugins: [
     require('@tailwindcss/typography'),
   ],
-  content: [
-    'content/**/*.{md,yml,json,json5,csv}',
-  ],
+  content: ['content/**/*.{md,yml,json,json5,csv}'],
   theme: {
     extend: {
       colors: {
@@ -16,4 +14,4 @@ module.exports = {
       },
     },
   },
-}
+}
\ No newline at end of file

From 5c0c3b0fc1f62c49b4d0be8f5b2f6fb5d312efe2 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 19:06:54 +0900
Subject: [PATCH 09/24] fix: origin branch ->  array to object

---
 pages/tutorial.vue | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index fd95ba5..7b95d50 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -1,11 +1,11 @@
 <script setup>
 const origin = ref(
-  [
-    {
+  {
+    main: {
       name: 'origin/main',
       commits: []
     }
-  ]
+  }
 )
 
 const local = ref(
@@ -43,12 +43,19 @@ const doCommit = () => {
   edit.value = false
 }
 
-const doPush = () => {
-  const snapLocalBranch = toRaw(local.value)
-  const snapCurrentBranch = toRaw(currentBranch.value)
-  const copiedBranch = toRaw(snapLocalBranch[snapCurrentBranch])
-  copiedBranch.name = 'origin/' + copiedBranch.name
-  origin.value.push({ name: 'test', co1mmits: copiedBranch.commits, spacer: copiedBranch.spacer })
+const doPushUpStream = () => { // the first push ... origin にまだ存在しないブランチをプッシュ
+  const snapLocalBranch = toRaw(local.value) // the raw data of local branch (not ref) ... ローカルreposの状況をスナップショット！
+  const snapCurrentBranch = toRaw(currentBranch.value) // the raw data of current branch name (not ref) ... 現在のブランチの名前のスナップショット！
+  const copiedBranch = snapLocalBranch[snapCurrentBranch] // copying the current branch's state (taking snap shot!) ... push するブランチオブジェクトを格納！
+
+  const newName = 'origin/' + copiedBranch.name // new branch's name on origin ... origin のブランチになるので冒頭に origin/ をつける
+
+  origin.value[newName] = { // pushing new branch to origin containing name, commits, spacer data ... origin へ新たなブランチをプッシュ！
+    name: copiedBranch.name,
+    commits: copiedBranch.commits,
+    spacer: copiedBranch.spacer
+  }
+  // スナップショット（静的）なはずなのに、originへ追加した途端、ref()に戻ってしまう（localのデータと連動し始める）
 }
 
 const doSwitchBranch = () => {
@@ -62,7 +69,7 @@ const doCreateBranch = () => {
   const commitsLength = toRaw(local.value)[toRaw(currentBranch.value)].commits.length
   const spacer = toRaw(local.value)[toRaw(currentBranch.value)].spacer
   local.value[count] = {
-    name: `dev-${count}`,
+    name: `dev_${count}`,
     commits: [],
     spacer: commitsLength + (spacer ? spacer : 0)
   }
@@ -78,7 +85,7 @@ const doClone = () => {
 
 onMounted(() => {
   currentCommit.value = createKey()
-  origin.value[0].commits.push(currentCommit.value)
+  origin.value['main'].commits.push(currentCommit.value)
 })
 
 </script>
@@ -182,7 +189,7 @@ onMounted(() => {
           </button>
 
           <button
-            @click="doPush"
+            @click="doPushUpStream"
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-green-500 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
             >

From 8aaf31db26be29f068e950491a6c1a6fc61b0c46 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 19:29:23 +0900
Subject: [PATCH 10/24] add: comment

---
 pages/tutorial.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 7b95d50..881d8da 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -56,6 +56,8 @@ const doPushUpStream = () => { // the first push ... origin にまだ存在し
     spacer: copiedBranch.spacer
   }
   // スナップショット（静的）なはずなのに、originへ追加した途端、ref()に戻ってしまう（localのデータと連動し始める）
+  // array.push()する前に、スナップショットオブジェクトの値を変更したり試したが、きちんとRawなデータでrefのデータとは切り離されていた。
+  // array.push()した途端、全て参照し始めた
 }
 
 const doSwitchBranch = () => {

From e5d596a1f4c6f9b3a04ea2f0f49f1a43d4190a0b Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 22:29:07 +0900
Subject: [PATCH 11/24] fix: branch name

---
 pages/tutorial.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 881d8da..1a1fc24 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -50,8 +50,8 @@ const doPushUpStream = () => { // the first push ... origin にまだ存在し
 
   const newName = 'origin/' + copiedBranch.name // new branch's name on origin ... origin のブランチになるので冒頭に origin/ をつける
 
-  origin.value[newName] = { // pushing new branch to origin containing name, commits, spacer data ... origin へ新たなブランチをプッシュ！
-    name: copiedBranch.name,
+  origin.value[copiedBranch.name] = { // pushing new branch to origin containing name, commits, spacer data ... origin へ新たなブランチをプッシュ！
+    name: newName,
     commits: copiedBranch.commits,
     spacer: copiedBranch.spacer
   }

From dfc6a1d48a83069098848234f3180daa2203da77 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 22:40:19 +0900
Subject: [PATCH 12/24] chore: view

---
 pages/tutorial.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 1a1fc24..35afa87 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -101,7 +101,8 @@ onMounted(() => {
       <div
         v-for="(repository, index) in repositories"
         :key="index"
-        class="mb-4"
+        class="mb-8 py-4"
+        :class="{'bg-slate-200': index === 0}"
       >
 
         <div

From 8f487b7200e44f6dca6a5e6efdf32cbce1330e94 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Tue, 28 Jun 2022 22:57:15 +0900
Subject: [PATCH 13/24] modify: solved commits array problem

---
 pages/tutorial.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 35afa87..07876ac 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -44,16 +44,18 @@ const doCommit = () => {
 }
 
 const doPushUpStream = () => { // the first push ... origin にまだ存在しないブランチをプッシュ
-  const snapLocalBranch = toRaw(local.value) // the raw data of local branch (not ref) ... ローカルreposの状況をスナップショット！
-  const snapCurrentBranch = toRaw(currentBranch.value) // the raw data of current branch name (not ref) ... 現在のブランチの名前のスナップショット！
-  const copiedBranch = snapLocalBranch[snapCurrentBranch] // copying the current branch's state (taking snap shot!) ... push するブランチオブジェクトを格納！
 
-  const newName = 'origin/' + copiedBranch.name // new branch's name on origin ... origin のブランチになるので冒頭に origin/ をつける
+  const snapBranch = local.value[currentBranch.value]
 
-  origin.value[copiedBranch.name] = { // pushing new branch to origin containing name, commits, spacer data ... origin へ新たなブランチをプッシュ！
+  const newCommitsArr = []
+  snapBranch.commits.forEach(commit => newCommitsArr.push(commit))
+
+  const newName = 'origin/' + snapBranch.name // new branch's name on origin ... origin のブランチになるので冒頭に origin/ をつける
+
+  origin.value[snapBranch.name] = { // pushing new branch to origin containing name, commits, spacer data ... origin へ新たなブランチをプッシュ！
     name: newName,
-    commits: copiedBranch.commits,
-    spacer: copiedBranch.spacer
+    commits: newCommitsArr,
+    spacer: snapBranch.spacer
   }
   // スナップショット（静的）なはずなのに、originへ追加した途端、ref()に戻ってしまう（localのデータと連動し始める）
   // array.push()する前に、スナップショットオブジェクトの値を変更したり試したが、きちんとRawなデータでrefのデータとは切り離されていた。

From f1d06b7ba08b8c48ae50ce01a5a522c0d52b7ad4 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Wed, 29 Jun 2022 00:41:26 +0900
Subject: [PATCH 14/24] done: git push command

---
 pages/tutorial.vue | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 07876ac..1c22b07 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -43,23 +43,32 @@ const doCommit = () => {
   edit.value = false
 }
 
-const doPushUpStream = () => { // the first push ... origin にまだ存在しないブランチをプッシュ
+const push = ref(true)
+const doPush = () => {
+  const snapBranch = local.value[currentBranch.value]
+  const targetBranchName = snapBranch.name
+  const targetBranch = origin.value[targetBranchName]
+
+  const newCommitsArr = []
+  snapBranch.commits.forEach(commit => newCommitsArr.push(commit))
+
+  targetBranch.commits = newCommitsArr
+}
+
+const doPushUpStream = () => {
 
   const snapBranch = local.value[currentBranch.value]
 
   const newCommitsArr = []
   snapBranch.commits.forEach(commit => newCommitsArr.push(commit))
 
-  const newName = 'origin/' + snapBranch.name // new branch's name on origin ... origin のブランチになるので冒頭に origin/ をつける
+  const newName = 'origin/' + snapBranch.name
 
-  origin.value[snapBranch.name] = { // pushing new branch to origin containing name, commits, spacer data ... origin へ新たなブランチをプッシュ！
+  origin.value[snapBranch.name] = {
     name: newName,
     commits: newCommitsArr,
     spacer: snapBranch.spacer
   }
-  // スナップショット（静的）なはずなのに、originへ追加した途端、ref()に戻ってしまう（localのデータと連動し始める）
-  // array.push()する前に、スナップショットオブジェクトの値を変更したり試したが、きちんとRawなデータでrefのデータとは切り離されていた。
-  // array.push()した途端、全て参照し始めた
 }
 
 const doSwitchBranch = () => {
@@ -193,6 +202,14 @@ onMounted(() => {
             commit
           </button>
 
+          <button
+            @click="doPush"
+            type="button"
+            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-green-500 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+            >
+            git push
+          </button>
+
           <button
             @click="doPushUpStream"
             type="button"
@@ -213,7 +230,7 @@ onMounted(() => {
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
             >
-            switch -c dev-x
+            switch -c dev_{{local.length}}
           </button>
 
         </div>

From 626e7fc3b22574f2ed6c8cb30d9e84281a9fa8e4 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Wed, 29 Jun 2022 01:40:36 +0900
Subject: [PATCH 15/24] modify: add 'can' to every state

---
 pages/tutorial.vue | 47 +++++++++++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 1c22b07..eacbfad 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -26,48 +26,47 @@ const createKey = () => {
 const currentBranch = ref(0)
 const currentCommit = ref(null)
 
-const edit = ref(false)
+const edited = ref(false)
 const doEdit = () => {
-  edit.value = true
+  edited.value = true
 }
 
-const add = ref(false)
+const canAdd = ref(true)
 const doAdd = () => {
-  add.value = true
+  canAdd.value = false
 }
 
-const commitAble = computed(() => edit.value && add.value ? true : false )
+const canCommit = computed(() => edited.value && !canAdd.value ? true : false )
 const doCommit = () => {
   const randomKey = createKey()
   local.value[currentBranch.value].commits.push(randomKey)
-  edit.value = false
+  edited.value = false
 }
 
-const push = ref(true)
+const snapBranch = computed(() => local.value[currentBranch.value])
+const targetBranchName = computed(() => snapBranch.value.name)
+const targetBranch = computed(() => origin.value[targetBranchName.value])
+
+const canPush = computed(() => targetBranchName.value ? true : false )
 const doPush = () => {
-  const snapBranch = local.value[currentBranch.value]
-  const targetBranchName = snapBranch.name
-  const targetBranch = origin.value[targetBranchName]
 
   const newCommitsArr = []
-  snapBranch.commits.forEach(commit => newCommitsArr.push(commit))
+  snapBranch.value.commits.forEach(commit => newCommitsArr.push(commit))
 
-  targetBranch.commits = newCommitsArr
+  targetBranch.value.commits = newCommitsArr
 }
 
 const doPushUpStream = () => {
 
-  const snapBranch = local.value[currentBranch.value]
-
   const newCommitsArr = []
-  snapBranch.commits.forEach(commit => newCommitsArr.push(commit))
+  snapBranch.value.commits.forEach(commit => newCommitsArr.push(commit))
 
-  const newName = 'origin/' + snapBranch.name
+  const newName = 'origin/' + snapBranch.value.name
 
-  origin.value[snapBranch.name] = {
+  origin.value[snapBranch.value.name] = {
     name: newName,
     commits: newCommitsArr,
-    spacer: snapBranch.spacer
+    spacer: snapBranch.value.spacer
   }
 }
 
@@ -87,7 +86,7 @@ const doCreateBranch = () => {
     spacer: commitsLength + (spacer ? spacer : 0)
   }
   currentBranch.value = count
-  add.value = false
+  canAdd.value = true
 }
 
 const clone = ref(false)
@@ -106,6 +105,8 @@ onMounted(() => {
 <template>
 
   <div class="max-w-7xl mx-auto section-inner">
+    <p>origin - target: {{targetBranch}}</p>
+    <p>local - snap: {{snapBranch}}</p>
 
     <div id="branches">
 
@@ -186,8 +187,8 @@ onMounted(() => {
             @click="doAdd"
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
-            :class="{'focus:outline-none focus:ring-2 bg-red-300 focus:ring-offset-2 transition-all cursor-not-allowed': add, 'hover:bg-red-600 bg-red-500': !add}"
-            :disabled="add"
+            :class="{'focus:outline-none focus:ring-2 bg-red-300 focus:ring-offset-2 transition-all cursor-not-allowed': !canAdd, 'hover:bg-red-600 bg-red-500': canAdd}"
+            :disabled="!canAdd"
             >
             add .
           </button>
@@ -196,8 +197,8 @@ onMounted(() => {
             @click="doCommit"
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
-            :class="{'focus:outline-none focus:ring-2 bg-yellow-300 focus:ring-offset-2 transition-all cursor-not-allowed': !commitAble, 'hover:bg-yellow-600 bg-yellow-500': commitAble}"
-            :disabled="!commitAble"
+            :class="{'focus:outline-none focus:ring-2 bg-yellow-300 focus:ring-offset-2 transition-all cursor-not-allowed': !canCommit, 'hover:bg-yellow-600 bg-yellow-500': canCommit}"
+            :disabled="!canCommit"
             >
             commit
           </button>

From 90baf193e712ac96100108cc6b04812520519c3e Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Wed, 29 Jun 2022 01:52:20 +0900
Subject: [PATCH 16/24] chore: view

---
 pages/tutorial.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index eacbfad..f24d90b 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -47,7 +47,7 @@ const snapBranch = computed(() => local.value[currentBranch.value])
 const targetBranchName = computed(() => snapBranch.value.name)
 const targetBranch = computed(() => origin.value[targetBranchName.value])
 
-const canPush = computed(() => targetBranchName.value ? true : false )
+const canPush = computed(() => targetBranch.value?.name ? true : false )
 const doPush = () => {
 
   const newCommitsArr = []
@@ -105,8 +105,6 @@ onMounted(() => {
 <template>
 
   <div class="max-w-7xl mx-auto section-inner">
-    <p>origin - target: {{targetBranch}}</p>
-    <p>local - snap: {{snapBranch}}</p>
 
     <div id="branches">
 
@@ -206,7 +204,9 @@ onMounted(() => {
           <button
             @click="doPush"
             type="button"
-            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-green-500 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-green-500 text-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+            :class="{'focus:outline-none focus:ring-2 bg-green-300 focus:ring-offset-2 transition-all cursor-not-allowed': !canPush, 'hover:bg-green-600 bg-green-500': canPush}"
+            :disabled="!canPush"
             >
             git push
           </button>
@@ -240,6 +240,11 @@ onMounted(() => {
 
     </div>
 
+    <div class="bg-slate-900 text-white p-4">
+      <p class="text-xs">origin - target: {{targetBranch}}</p>
+      <p class="text-xs">local - snap: {{snapBranch}}</p>
+    </div>
+
   </div>
 
 </template>
\ No newline at end of file

From 57534e0591305619389d9cf8b226b828597862a6 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Wed, 29 Jun 2022 14:56:45 +0900
Subject: [PATCH 17/24] modify: foreach() to Spread syntax

---
 pages/tutorial.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index f24d90b..5409549 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -49,23 +49,17 @@ const targetBranch = computed(() => origin.value[targetBranchName.value])
 
 const canPush = computed(() => targetBranch.value?.name ? true : false )
 const doPush = () => {
-
-  const newCommitsArr = []
-  snapBranch.value.commits.forEach(commit => newCommitsArr.push(commit))
-
-  targetBranch.value.commits = newCommitsArr
+  targetBranch.value.commits = [...snapBranch.value.commits]
 }
 
+const canPushUpStream = computed(() => !canPush.value )
 const doPushUpStream = () => {
 
-  const newCommitsArr = []
-  snapBranch.value.commits.forEach(commit => newCommitsArr.push(commit))
-
   const newName = 'origin/' + snapBranch.value.name
 
   origin.value[snapBranch.value.name] = {
     name: newName,
-    commits: newCommitsArr,
+    commits: [...snapBranch.value.commits],
     spacer: snapBranch.value.spacer
   }
 }
@@ -214,7 +208,9 @@ onMounted(() => {
           <button
             @click="doPushUpStream"
             type="button"
-            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-green-500 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+            class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-green-500 text-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+            :class="{'focus:outline-none focus:ring-2 bg-green-300 focus:ring-offset-2 transition-all cursor-not-allowed': !canPushUpStream, 'hover:bg-green-600 bg-green-500': canPushUpStream}"
+            :disabled="!canPushUpStream"
             >
             git push -u origin {{local[currentBranch].name}}
           </button>

From cea29f7ad2fd5b67985012a23ae128b6d6b50246 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Wed, 29 Jun 2022 15:03:27 +0900
Subject: [PATCH 18/24] add: action comments

---
 pages/tutorial.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 5409549..d644708 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -26,16 +26,19 @@ const createKey = () => {
 const currentBranch = ref(0)
 const currentCommit = ref(null)
 
+/** edit */
 const edited = ref(false)
 const doEdit = () => {
   edited.value = true
 }
 
+/** git add */
 const canAdd = ref(true)
 const doAdd = () => {
   canAdd.value = false
 }
 
+/** git commit */
 const canCommit = computed(() => edited.value && !canAdd.value ? true : false )
 const doCommit = () => {
   const randomKey = createKey()
@@ -43,6 +46,7 @@ const doCommit = () => {
   edited.value = false
 }
 
+/** git push */
 const snapBranch = computed(() => local.value[currentBranch.value])
 const targetBranchName = computed(() => snapBranch.value.name)
 const targetBranch = computed(() => origin.value[targetBranchName.value])
@@ -64,6 +68,14 @@ const doPushUpStream = () => {
   }
 }
 
+/** github pull request */
+
+/** github approval pull request */
+
+/** git pull */
+
+
+/** git switch */
 const doSwitchBranch = () => {
   currentBranch.value == Object.keys(local.value).length -1
   ? currentBranch.value = 0
@@ -83,6 +95,7 @@ const doCreateBranch = () => {
   canAdd.value = true
 }
 
+/** git clone */
 const clone = ref(false)
 const doClone = () => {
   local.value[0].commits.push(currentCommit.value)

From 2c1493d97cba49987c3860ece233b685379079de Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Wed, 29 Jun 2022 16:20:57 +0900
Subject: [PATCH 19/24] modify: local-> array to object

---
 pages/tutorial.vue | 61 +++++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index d644708..0f3fae3 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -9,12 +9,12 @@ const origin = ref(
 )
 
 const local = ref(
-  [
-    {
+  {
+    main: {
       name: 'main',
       commits: []
     }
-  ]
+  }
 )
 
 const repositories = computed(() => [origin.value, local.value])
@@ -23,8 +23,15 @@ const createKey = () => {
   return Math.random().toString(32).substring(2)
 }
 
-const currentBranch = ref(0)
+/** current state */
+const currentBranchIndex = ref(0)
+const currentBranchName = computed(() => {
+  const branchNames = Object.keys(local.value)
+  return branchNames[currentBranchIndex.value]
+})
+const currentBranch = computed(() => local.value[currentBranchName.value])
 const currentCommit = ref(null)
+const countBranch = computed(() => Object.keys(local.value).length)
 
 /** edit */
 const edited = ref(false)
@@ -42,29 +49,27 @@ const doAdd = () => {
 const canCommit = computed(() => edited.value && !canAdd.value ? true : false )
 const doCommit = () => {
   const randomKey = createKey()
-  local.value[currentBranch.value].commits.push(randomKey)
+  currentBranch.value.commits.push(randomKey)
   edited.value = false
 }
 
 /** git push */
-const snapBranch = computed(() => local.value[currentBranch.value])
-const targetBranchName = computed(() => snapBranch.value.name)
-const targetBranch = computed(() => origin.value[targetBranchName.value])
+const targetBranch = computed(() => origin.value[currentBranchName.value])
 
 const canPush = computed(() => targetBranch.value?.name ? true : false )
 const doPush = () => {
-  targetBranch.value.commits = [...snapBranch.value.commits]
+  targetBranch.value.commits = [...currentBranch.value.commits]
 }
 
 const canPushUpStream = computed(() => !canPush.value )
 const doPushUpStream = () => {
 
-  const newName = 'origin/' + snapBranch.value.name
+  const newName = 'origin/' + currentBranchName.value
 
-  origin.value[snapBranch.value.name] = {
+  origin.value[currentBranchName.value] = {
     name: newName,
-    commits: [...snapBranch.value.commits],
-    spacer: snapBranch.value.spacer
+    commits: [...currentBranch.value.commits],
+    spacer: currentBranch.value.spacer
   }
 }
 
@@ -77,28 +82,28 @@ const doPushUpStream = () => {
 
 /** git switch */
 const doSwitchBranch = () => {
-  currentBranch.value == Object.keys(local.value).length -1
-  ? currentBranch.value = 0
-  : currentBranch.value += 1
+  currentBranchIndex.value === countBranch.value -1
+  ? currentBranchIndex.value = 0
+  : currentBranchIndex.value += 1
 }
 
 const doCreateBranch = () => {
-  const count = Object.keys(local.value).length
-  const commitsLength = toRaw(local.value)[toRaw(currentBranch.value)].commits.length
-  const spacer = toRaw(local.value)[toRaw(currentBranch.value)].spacer
-  local.value[count] = {
-    name: `dev_${count}`,
+  const newBranchName = `dev_${countBranch.value}`
+  const commitsLength = toRaw(local.value)[toRaw(currentBranchName.value)].commits.length
+  const spacer = toRaw(local.value)[toRaw(currentBranchName.value)].spacer
+  local.value[newBranchName] = {
+    name: newBranchName,
     commits: [],
     spacer: commitsLength + (spacer ? spacer : 0)
   }
-  currentBranch.value = count
+  currentBranchIndex.value = countBranch.value -1
   canAdd.value = true
 }
 
 /** git clone */
 const clone = ref(false)
 const doClone = () => {
-  local.value[0].commits.push(currentCommit.value)
+  currentBranch.value.commits.push(currentCommit.value)
   clone.value = true
 }
 
@@ -126,7 +131,7 @@ onMounted(() => {
           v-for="(branch, index) in repository"
           :key="index"
           class="mb-2 p-2 flex items-center"
-          :class="{'bg-slate-200': branch.name === local[currentBranch].name}"
+          :class="{'bg-slate-200': branch.name === local[currentBranchName].name}"
           >
 
           <div class="w-28">{{branch.name}}</div>
@@ -225,14 +230,14 @@ onMounted(() => {
             :class="{'focus:outline-none focus:ring-2 bg-green-300 focus:ring-offset-2 transition-all cursor-not-allowed': !canPushUpStream, 'hover:bg-green-600 bg-green-500': canPushUpStream}"
             :disabled="!canPushUpStream"
             >
-            git push -u origin {{local[currentBranch].name}}
+            git push -u origin {{local[currentBranchName].name}}
           </button>
 
           <button
             @click="doSwitchBranch"
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
-            switch {{(currentBranch == Object.keys(local).length -1) ? local[0].name : local[currentBranch+1].name}}
+            switch {{(currentBranchIndex === countBranch) ? 'main' : `dev_${currentBranchIndex+1}`}}
           </button>
 
           <button
@@ -240,7 +245,7 @@ onMounted(() => {
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
             >
-            switch -c dev_{{local.length}}
+            switch -c dev_{{countBranch}}
           </button>
 
         </div>
@@ -251,7 +256,7 @@ onMounted(() => {
 
     <div class="bg-slate-900 text-white p-4">
       <p class="text-xs">origin - target: {{targetBranch}}</p>
-      <p class="text-xs">local - snap: {{snapBranch}}</p>
+      <p class="text-xs">local - snap: {{currentBranch}}</p>
     </div>
 
   </div>

From 6596990ae310ffbe15a515d6d926660b70a36535 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Wed, 29 Jun 2022 16:33:09 +0900
Subject: [PATCH 20/24] fix: commitsLength-> Spread syntax

---
 pages/tutorial.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 0f3fae3..b8c4311 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -89,8 +89,8 @@ const doSwitchBranch = () => {
 
 const doCreateBranch = () => {
   const newBranchName = `dev_${countBranch.value}`
-  const commitsLength = toRaw(local.value)[toRaw(currentBranchName.value)].commits.length
-  const spacer = toRaw(local.value)[toRaw(currentBranchName.value)].spacer
+  const commitsLength = [...currentBranch.value.commits].length
+  const spacer = currentBranch.value.spacer
   local.value[newBranchName] = {
     name: newBranchName,
     commits: [],
@@ -237,7 +237,7 @@ onMounted(() => {
             @click="doSwitchBranch"
             type="button"
             class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
-            switch {{(currentBranchIndex === countBranch) ? 'main' : `dev_${currentBranchIndex+1}`}}
+            switch {{(currentBranchIndex === countBranch-1) ? 'main' : `dev_${currentBranchIndex+1}`}}
           </button>
 
           <button

From e5912c9d038d4d3c3bc6da0bfa9e5e069f9f32ac Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Thu, 30 Jun 2022 19:47:04 +0900
Subject: [PATCH 21/24] wip: branching design

---
 pages/tutorial.vue | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index b8c4311..667738b 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -1,4 +1,7 @@
 <script setup>
+// @TODO change random key to color code
+// @TODO describe direction line between commits
+
 const origin = ref(
   {
     main: {
@@ -18,6 +21,7 @@ const local = ref(
 )
 
 const repositories = computed(() => [origin.value, local.value])
+const branching = ref([])
 
 const createKey = () => {
   return Math.random().toString(32).substring(2)
@@ -50,6 +54,7 @@ const canCommit = computed(() => edited.value && !canAdd.value ? true : false )
 const doCommit = () => {
   const randomKey = createKey()
   currentBranch.value.commits.push(randomKey)
+  currentCommit.value = randomKey
   edited.value = false
 }
 
@@ -65,7 +70,6 @@ const canPushUpStream = computed(() => !canPush.value )
 const doPushUpStream = () => {
 
   const newName = 'origin/' + currentBranchName.value
-
   origin.value[currentBranchName.value] = {
     name: newName,
     commits: [...currentBranch.value.commits],
@@ -97,6 +101,7 @@ const doCreateBranch = () => {
     spacer: commitsLength + (spacer ? spacer : 0)
   }
   currentBranchIndex.value = countBranch.value -1
+  branching.value.push(currentCommit.value)
   canAdd.value = true
 }
 
@@ -130,11 +135,11 @@ onMounted(() => {
         <div
           v-for="(branch, index) in repository"
           :key="index"
-          class="mb-2 p-2 flex items-center"
+          class="py-2 flex items-center"
           :class="{'bg-slate-200': branch.name === local[currentBranchName].name}"
           >
 
-          <div class="w-28">{{branch.name}}</div>
+          <div class="w-28 text-xs">{{branch.name}}</div>
 
           <div class="flex">
 
@@ -154,6 +159,7 @@ onMounted(() => {
               v-for="(commit, index) in branch.commits"
               :key="index"
               :id="commit"
+              :class="{'branching': branching?.find(id => id === commit ? true : false)}"
               class="mr-2 w-4 h-4 bg-yellow-500 rounded-full"
               >
             </div>
@@ -257,8 +263,28 @@ onMounted(() => {
     <div class="bg-slate-900 text-white p-4">
       <p class="text-xs">origin - target: {{targetBranch}}</p>
       <p class="text-xs">local - snap: {{currentBranch}}</p>
+      <p class="text-xs">branching: {{branching}}</p>
     </div>
 
   </div>
 
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+
+.branching {
+  position: relative;
+}
+.branching::before {
+  content: '';
+  position: absolute;
+  display: block;
+  top: calc(50% - 1px);
+  left: .5rem;
+  width: 2rem;
+  height: 2px;
+  background: gray;
+  transform: rotate(45deg);
+  transform-origin: left center;
+}
+</style>
\ No newline at end of file

From b17d4f842d068e279fae926dd4d427a8dec0406d Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Fri, 1 Jul 2022 14:00:07 +0900
Subject: [PATCH 22/24] working on making branch view.... start

---
 pages/tutorial.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 667738b..2c5c2ba 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -136,10 +136,13 @@ onMounted(() => {
           v-for="(branch, index) in repository"
           :key="index"
           class="py-2 flex items-center"
-          :class="{'bg-slate-200': branch.name === local[currentBranchName].name}"
           >
 
-          <div class="w-28 text-xs">{{branch.name}}</div>
+          <div
+            class="w-28 text-xs"
+            :class="{'bg-slate-200': branch.name === local[currentBranchName].name}">
+            {{branch.name}}
+          </div>
 
           <div class="flex">
 

From 22e6a88b5029648284d818ce1e0a95e54fa1fab9 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Fri, 1 Jul 2022 17:58:51 +0900
Subject: [PATCH 23/24] wip: heron's formula

---
 pages/tutorial.vue | 76 ++++++++++++++++++++++++++++------------------
 1 file changed, 47 insertions(+), 29 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 2c5c2ba..50e3776 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -20,6 +20,7 @@ const local = ref(
   }
 )
 
+/** View Settings */
 const repositories = computed(() => [origin.value, local.value])
 const branching = ref([])
 
@@ -100,8 +101,8 @@ const doCreateBranch = () => {
     commits: [],
     spacer: commitsLength + (spacer ? spacer : 0)
   }
+  branching.value.push({id: currentCommit.value, index: currentBranchIndex.value, count_branch: countBranch.value})
   currentBranchIndex.value = countBranch.value -1
-  branching.value.push(currentCommit.value)
   canAdd.value = true
 }
 
@@ -117,6 +118,9 @@ onMounted(() => {
   origin.value['main'].commits.push(currentCommit.value)
 })
 
+
+/** Heron's  */
+
 </script>
 
 <template>
@@ -126,34 +130,36 @@ onMounted(() => {
     <div id="branches">
 
       <div
-        v-for="(repository, index) in repositories"
-        :key="index"
+        v-for="(repository, key, repoIndex) in repositories"
+        :key="repoIndex"
         class="mb-8 py-4"
-        :class="{'bg-slate-200': index === 0}"
+        :class="{'bg-slate-200': repoIndex === 0}"
       >
 
         <div
-          v-for="(branch, index) in repository"
-          :key="index"
-          class="py-2 flex items-center"
+          v-for="(branch, key, braIndex) in repository"
+          :key="braIndex"
+          class="flex items-center"
           >
 
-          <div
-            class="w-28 text-xs"
-            :class="{'bg-slate-200': branch.name === local[currentBranchName].name}">
-            {{branch.name}}
+          <div class="w-28">
+            <span
+              :class="{'bg-slate-200': branch.name === local[currentBranchName].name}"
+              class="text-xs">
+              {{branch.name}}
+            </span>
           </div>
 
-          <div class="flex">
+          <div class="flex box-border">
 
             <div
               v-show="branch.spacer"
               class="flex"
             >
               <div
-              v-for="(space, index) of branch.spacer"
-              :key="index"
-              class="mr-2 w-4 h-4"
+                v-for="(space, index) of branch.spacer"
+                :key="spaIndex"
+                class="w-6 h-6"
               ></div>
 
             </div>
@@ -162,9 +168,22 @@ onMounted(() => {
               v-for="(commit, index) in branch.commits"
               :key="index"
               :id="commit"
-              :class="{'branching': branching?.find(id => id === commit ? true : false)}"
-              class="mr-2 w-4 h-4 bg-yellow-500 rounded-full"
+              class="w-6 h-6 border-t-2 border-l-2 border-con"
+            >
+              <div
+                v-show="branching.filter(data => data.id === commit).length"
+                :set="branchingData = branching?.filter(data => data.id === commit)[0]"
+                class="branching"
+                :style="{
+                  'width': `${Math.sqrt(((1.5 ** 2)+(1.5 * (branchingData?.count_branch - (branchingData?.index + 1))) ** 2))}rem`,
+                  'transform': `rotate(${}deg)`
+                }"
               >
+                {{branchingData}}
+              </div>
+
+              <div class="commit w-3 h-3 bg-yellow-500 rounded-full"></div>
+
             </div>
 
           </div>
@@ -172,7 +191,6 @@ onMounted(() => {
         </div>
       </div>
 
-
     </div>
 
     <div
@@ -275,19 +293,19 @@ onMounted(() => {
 
 <style scoped>
 
-.branching {
-  position: relative;
+.commit {
+  position: absolute;
+  top: -25%;
+  left: -25%;
 }
-.branching::before {
-  content: '';
+.branching {
   position: absolute;
-  display: block;
-  top: calc(50% - 1px);
-  left: .5rem;
-  width: 2rem;
+  top: 0;
+  left: 0;
   height: 2px;
-  background: gray;
-  transform: rotate(45deg);
-  transform-origin: left center;
+  background: black;
+  transform-origin: 0 0;
+  transform: rotate(45deg)
 }
+
 </style>
\ No newline at end of file

From 5c61fb966a5173904e95097c87c8d4448ae18ee4 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Fri, 1 Jul 2022 19:18:33 +0900
Subject: [PATCH 24/24] finished......making branch view

---
 pages/tutorial.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/pages/tutorial.vue b/pages/tutorial.vue
index 50e3776..62b606f 100644
--- a/pages/tutorial.vue
+++ b/pages/tutorial.vue
@@ -119,7 +119,19 @@ onMounted(() => {
 })
 
 
-/** Heron's  */
+/** Heron's formula  */
+const calcTriangle = (branchingData) => {
+  const c = 1.5
+  const b = (branchingData?.count_branch - (branchingData?.index + 1)) * c
+  const a = Math.sqrt((c ** 2) + (b ** 2))
+  const tan = Math.atan2(b, c)
+  const deg = tan * 180 / Math.PI
+
+  return {
+    width: a,
+    rotate: deg
+  }
+}
 
 </script>
 
@@ -158,7 +170,7 @@ onMounted(() => {
             >
               <div
                 v-for="(space, index) of branch.spacer"
-                :key="spaIndex"
+                :key="index"
                 class="w-6 h-6"
               ></div>
 
@@ -175,11 +187,10 @@ onMounted(() => {
                 :set="branchingData = branching?.filter(data => data.id === commit)[0]"
                 class="branching"
                 :style="{
-                  'width': `${Math.sqrt(((1.5 ** 2)+(1.5 * (branchingData?.count_branch - (branchingData?.index + 1))) ** 2))}rem`,
-                  'transform': `rotate(${}deg)`
+                  'width': `${branchingData ? calcTriangle(branchingData).width : null}rem`,
+                  'transform': `rotate(${branchingData ? calcTriangle(branchingData).rotate : null}deg)`
                 }"
               >
-                {{branchingData}}
               </div>
 
               <div class="commit w-3 h-3 bg-yellow-500 rounded-full"></div>
@@ -305,7 +316,6 @@ onMounted(() => {
   height: 2px;
   background: black;
   transform-origin: 0 0;
-  transform: rotate(45deg)
 }
 
 </style>
\ No newline at end of file