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{
|
.pretty-scrollbar{
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 5px!important;
|
width: 5px!important;
|
||||||
|
height: 5px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Track */
|
/* 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']
|
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