feat: git memo

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

src/App.vue

@@ -135,6 +135,7 @@
     .pretty-scrollbar{
         &::-webkit-scrollbar {
             width: 5px!important;
+            height: 5px !important;
         }
 
         /* Track */

src/components/CopyableCodeContent.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="copyable-code-content" @click="copy($slots.default[0].text)">
+        <pre class="pretty-scrollbar"><slot></slot></pre>
+        <v-icon>far fa-copy</v-icon>
+    </div>
+</template>
+
+<script>
+    import {copyable} from "../mixins/copyable.mixin";
+
+    export default {
+        name: "CopyableCodeContent",
+        mixins: [copyable]
+    }
+</script>
+
+<style lang="less" scoped>
+    .copyable-code-content {
+        cursor: pointer;
+        background-color: rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        padding: 8px 15px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+
+        pre {
+            flex: 1;
+            overflow-x: auto;
+        }
+
+        .v-icon {
+            opacity: 0;
+        }
+
+        &:hover {
+            .v-icon {
+                opacity: 1;
+            }
+        }
+    }
+</style>

src/components/MemoViewer.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="memo-viewer" v-bind:style="{ columns: `auto ${colWidth}` }">
+        <div class="section" v-for="(group,i) in memo" :key="i">
+            <h2>{{group.section}}</h2>
+
+            <div class="tip" v-for="(tips,i) in group.child" :key="i">
+                <v-card>
+                    <v-card-text>
+                        <template v-for="tip in (Array.isArray(tips) ? tips : [tips])">
+                            <p :key="tip.text">{{tip.text}}</p>
+                            <CopyableCodeContent class="code" :key="tip.code">{{tip.code}}</CopyableCodeContent>
+                        </template>
+                    </v-card-text>
+                </v-card>
+                </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import CopyableCodeContent from "./CopyableCodeContent";
+
+    export default {
+        name: "MemoViewer",
+        props: {
+            memo: Array,
+            colWidth: {
+                type: String,
+                default: '400px'
+            }
+        },
+        components: {
+            CopyableCodeContent
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .memo-viewer {
+        column-gap: 30px;
+        column-rule: 1px solid #373739;
+        column-fill: auto;
+
+    }
+    .section {
+        break-inside: avoid-column;
+        display: inline-block;
+        margin-bottom: 20px;
+        width: 100%;
+
+        h2 {
+            margin: 25px 0 15px;
+            display: inline-block;
+        }
+
+        .tip {
+            margin: 20px 0;
+
+            .v-card{
+                background-color: rgba(47, 46, 46, 0.44);
+            }
+
+            p {
+                margin-bottom: 10px;
+
+                &:not(:first-child){
+                    margin-top: 16px;
+                }
+            }
+        }
+    }
+
+</style>

src/mixins/copyable.mixin.js

@@ -0,0 +1,10 @@
+import {copyToClipboard} from "../utils/helpers";
+
+export const copyable = {
+    methods: {
+        copy(text, toastText = 'Copied to clipboard !'){
+            copyToClipboard(text);
+            this.$toast.success(toastText)
+        }
+    }
+}

src/router.js

@@ -109,6 +109,19 @@ const toolsComponents = [
                 keywords: ['text', 'dolor', 'sit', 'placeholder', 'fill', 'dummy']
             }
         ],
+    },
+    {
+        title: 'Memos',
+        child: [
+            {
+                text: 'Git memo',
+                path: '/git-memo',
+                icon: 'fa-code-branch',
+                component: () => import('./routes/tools/GitMemo'),
+                keywords: ['git', 'push', 'rebase', 'merge', 'tag', 'commit', 'checkout']
+            }
+        ]
+
     }
 ];
 

src/routes/tools/GitMemo.vue

@@ -0,0 +1,125 @@
+<template>
+    <v-row>
+        <v-col cols="12" xl="12">
+            <v-card>
+                <v-card-title>Git Memo</v-card-title>
+                <v-card-text>
+                    <MemoViewer :memo="tips"/>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
+
+<script>
+    import MemoViewer from "../../components/MemoViewer";
+
+    export default {
+        name: "GitMemo",
+        data: () => ({
+           tips: [
+               {
+                   section: 'Basic configuration',
+                   child:[
+                       {
+                           text: 'Set the name that will be associated to every operation',
+                           code: 'git config --global user.name "[nom]"'
+                       },
+                       {
+                           text: 'Set the email address that will be associated to every operation',
+                           code: 'git config --global user.email "[email]"'
+                       },
+                       {
+                           text: 'Tell git to always push tags',
+                           code: 'git config --global push.followTags true'
+                       }
+                   ]
+               },
+               {
+                   section: 'Get started',
+                   child:[
+                       {
+                           text: 'Create a git repo',
+                           code: 'git init'
+                       },
+                       {
+                           text: 'Clone an existing repository',
+                           code: 'git clone [repo url]'
+                       },
+                       {
+                           text: 'Add current files to next commit',
+                           code: 'git add .'
+                       },
+                       {
+                           text: 'Commit tracked files changes',
+                           code: 'git commit -am "[commit message]"'
+                       },
+                       {
+                           text: 'List files that has changed',
+                           code: 'git status'
+                       },
+                       {
+                           text: 'List changes in tracked files',
+                           code: 'git diff'
+                       }
+                   ]
+               },
+               {
+                   section: 'Setup SSH',
+                   child:[
+                        [
+                            {
+                                text: '1). Generate an SSH key.',
+                                code: 'ssh-keygen -t rsa -b 4096 -C "[email]"'
+                            },
+                            {
+                                text: '2). Start the ssh-agent in the background.',
+                                code: 'eval "$(ssh-agent -s)"'
+                            },
+                            {
+                                text: '3). Add your SSH private key to the ssh-agent.',
+                                code: 'ssh-add ~/.ssh/id_rsa'
+                            },
+                            {
+                                text: '4). Add your SSH public key to your git server (for github: Settings -> SSH and GPG keys)',
+                                code: 'cat ~/.ssh/id_rsa.pub'
+                            },
+                            {
+                                text: '5). (Optional) Testing your SSH connection',
+                                code: 'ssh -T git@github.com'
+                            },
+
+                        ]
+                   ]
+               },
+               {
+                   section: 'I\'ve made a mistake',
+                   child:[
+                       {
+                           text: 'Change last commit message',
+                           code: 'git commit --amend'
+                       },
+                       {
+                           text: 'Undo most recent commit and keep changes',
+                           code: 'git reset HEAD~1'
+                       },
+                       {
+                           text: 'Undo most recent commit and get rid of changes',
+                           code: 'git reset HEAD~1 --hard'
+                       },
+                       {
+                           text: 'Reset branch to remote state',
+                           code: 'git fetch origin\ngit reset --hard origin/[branch-name]'
+                       }
+                   ]
+               }
+           ]
+        }),
+        components: {
+            MemoViewer
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+</style>