feat: git memo
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset
parent
c8c0dceb21
commit
cb0e3f91db
@ -135,6 +135,7 @@
|
||||
.pretty-scrollbar{
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px!important;
|
||||
height: 5px !important;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
|
||||
43
src/components/CopyableCodeContent.vue
Normal file
43
src/components/CopyableCodeContent.vue
Normal file
@ -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>
|
||||
73
src/components/MemoViewer.vue
Normal file
73
src/components/MemoViewer.vue
Normal file
@ -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>
|
||||
10
src/mixins/copyable.mixin.js
Normal file
10
src/mixins/copyable.mixin.js
Normal file
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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']
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
125
src/routes/tools/GitMemo.vue
Normal file
125
src/routes/tools/GitMemo.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user