-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathcontributing.html
214 lines (176 loc) · 6.38 KB
/
contributing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to contribute to a external proyect?</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
font-weight: 400;
margin-bottom: 0;
}
.remark-slide-content h1 { font-size: 3em; }
.remark-slide-content h2 { font-size: 2em; }
.remark-slide-content h3 { font-size: 1.6em; }
.footnote {
position: absolute;
bottom: 3em;
}
li p { line-height: 1.25em; }
.red { color: #fa0000; }
.large { font-size: 2em; }
a, a > code {
color: rgb(249, 38, 114);
text-decoration: none;
}
code {
background: none repeat scroll 0 0 #F8F8FF;
border: 1px solid #DEDEDE;
border-radius: 3px ;
padding: 0 0.2em;
}
.remark-code, .remark-inline-code { font-family: "Bitstream Vera Sans Mono", "Courier", monospace; }
.remark-code-line-highlighted { background-color: #373832; }
.pull-left {
float: left;
width: 47%;
}
.pull-right {
float: right;
width: 47%;
}
.pull-right ~ p {
clear: both;
}
#slideshow .slide .content code {
font-size: 0.8em;
}
#slideshow .slide .content pre code {
font-size: 0.9em;
padding: 15px;
}
.main-title, .title {
background: #272822;
color: #777872;
text-shadow: 0 0 20px #333;
}
.title h1, .title h2, .main-title h1, .main-title h2 {
color: #f3f3f3;
line-height: 0.8em;
}
/* Custom */
.remark-code {
display: block;
padding: 0.5em;
}
</style>
</head>
<body>
<textarea id="source">
### How to contribute to a external proyect?
<p>
If you want to contribute to a project and make it better, your help is very welcome. Contributing is also a great way to learn more about social coding on Github, new technologies and and their ecosystems and how to make constructive, helpful bug reports, feature requests and the noblest of all contributions: a good, clean pull request.
</p>
Look for project's contributions instruction below (in this case we are trying to contribute to Vue.js project 👀):
<h1 align="center">
<img src="../../assets/imgs/vue.png" alt="Vue" width="325px">
</h1>
---
**1. Create a personal fork of the project on Github**
<p>
First of all, what is a fork?
A fork is a copy of a repository that you manage. Forks let you make changes to a project without affecting the original repository. You can fetch updates from or submit changes to the original repository with pull requests.
In order to make a fork we need to create a folder in our machine where the project will be located.
With you UNIX terminal go to this new folder.
In GitHub go to the github project you'd like to contribute. Select Fork --> Create a new fork
<h1 align="center">
<img src="../../assets/imgs/fork.png" alt="1.step" width="700px">
</h1>
---
And then Create fork.
<h1 align="center">
<img src="../../assets/imgs/fork2.png" alt="1.step" width="700px">
</h1>
At this instance if you go to your repositories you can see the project you forked.
---
**2. Clone the fork on your local machine**
On you own repository select Code and copy the http link
<h1 align="center">
<img src="../../assets/imgs/clone.png" alt="1.step" width="520px">
</h1>
Type in a UNIX terminal (over the folder you created before): ```git clone url-of-the-repository```.
(Example: ``` git clone https://github.com/pavox20/vue.git ```)
Note*: If you know about ssh or GitHub CLI you can make a clone by using the other urls.
Note**: If you created your fork a while ago be sure to pull upstream changes into your local repository. To do this type the command: ```git pull origin <branch>``` e.g.: ```git pull origin main```
---
**3. Implement/fix your feature**
<p>
If you cloned the project succesfully you can implement/fix your feature into you IDE.
Recomendations:
* Create a new branch to work on! Branch from *develop* if it exists, else from master.
* To create a new Branch you need to type *git branch develop* and then to switch to this new branch type *git checkout develop*
* Follow the code style of the project, including indentation.
* If the project has tests run them!
* Write or adapt tests as needed.
* Add or change the documentation as needed.
* Push your branch to your fork on Github, the remote *origin*.
* In our case would be *git push origin main*
</p>
<h1 align="center">
<img src="../../assets/imgs/hello-world.png" alt="3.step" width="700px">
</h1>
---
For instance in our example we add this commented line one the Vue project
<h1 align="center">
<img src="../../assets/imgs/commented-line.png" alt="3.step" width="600px">
</h1>
and then we type this comands in our terminal
<h1 align="center">
<img src="../../assets/imgs/comands.png" alt="3.step" width="600px">
</h1>
---
**4. Make a pull request**
Then in gitHub go to your repository you forked. Select: Contribute --> Open pull Request
<h1 align="center">
<img src="../../assets/imgs/pull.png" alt="3.step" width="700px">
</h1>
---
After that, add a resume of what you contributed
<h1 align="center">
<img src="../../assets/imgs/addComments.png" alt="3.step" width="750px">
</h1>
Finally, select Create pull request.
¡Congrats! you have created your first Pull Request.
---
**5. If i'm the owner of the project, how can I check the pull request someone sent?**
Go to your repository and select pull requests, then select the pull request someone added
<h1 align="center">
<img src="../../assets/imgs/request.png" alt="3.step" width="750px">
</h1>
---
Review it and if it completes the requirments merge it into one project branch.
<h1 align="center">
<img src="../../assets/imgs/merge.png" alt="3.step" width="750px">
</h1>
---
<h1 align="center">
Thanks for come this far :)
<img src="https://media3.giphy.com/media/el7VG1XOOvi24oRXFt/giphy.gif?cid=ecf05e47pzrnh08rghvoc7vwcdcorgakut03n0r1bg0n63ay&rid=giphy.gif&ct=g" alt="3.step" width="500px">
</h1>
---
## Bibliography:
- Marc Diethelm. (2014). Contributing. 03/08/2022, de GitHub Sitio web: https://github.com/MarcDiethelm/contributing/blob/master/README.md
- Alejandro Llangantes. (202). Clase 22: Pull Requests. 03/08/2022, de Notion web: https://perpetual-donkey-b4c.notion.site/Clases-grabadas-7148cef220b64a178e9f2688de74bc8f
<p align = "center">
<img width="600" src = "https://media3.giphy.com/media/kCVIL0CLNWv2E/giphy.gif?cid=ecf05e4742njf0np4aqfoftzz44c0po6nmy17w4xia21xmox&rid=giphy.gif&ct=g">
</p>
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script>
var slideshow = remark.create();
</script>
<script></script>
</body>
</html>