-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
134 lines (108 loc) · 6.64 KB
/
index.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
<html><head><link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css">
<style>
github-button{
position:absolute;
margin-left:15px;
margin-top:-2px;
}
.markdown-body h2{
border-bottom:none;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/GitHub-Buttons-Web-Component/version/1.0.0/src/github-buttons-wc.js" defer></script> </head><body><div class="color-bg-canvas-inset pb-6">
<header class="container-lg mx-auto p-responsive d-flex flex-items-center flex-wrap flex-md-nowrap pt-3 pb-6">
<div class="container-lg mx-auto py-6 p-responsive">
<!--<p>Docs / GitHub Buttons</p> wonder whats coming ;) -->
<h1>GitHub Buttons Web Component</h1>
<p>Showcase your GitHub success with GitHub star buttons, follower buttons & more.</p>
<p>A web component made by <a href="https://github.com/MarketingPipeline">@MarketingPipeline</a>. Source code is available on <a href="https://github.com/MarketingPipeline/GitHub-Buttons-Web-Component">GitHub</a>. Licensed <a href="https://github.com/MarketingPipeline/GitHub-Buttons-Web-Component/blob/main/LICENSE">MIT</a>.</p>
<hr>
<div class="markdown-body">
<h2 class="no_toc" id="contents">Contents</h2>
<ul>
<li><a href="#example-and-usage">Example and Usage</a><ul>
<li><a href="#howtoshowstarbuttongithubbuttonrepomarketingpipelinemarkdowntaggithubbutton">How to show Star Button</a></li>
<li><a href="#howtoshowwatchbuttongithubbuttontypewatchrepomarketingpipelinemarkdowntaggithubbutton">How to show Watch Button </a></li>
<li><a href="#howtoshowforkbuttongithubbuttontypeforkrepomarketingpipelinemarkdowntaggithubbutton">How to show Fork Button</a></li>
<li><a href="#howtoshowfollowersbuttongithubbuttontypefollowersrepomarketingpipelinegithubbutton">How to show Followers Button </a></li>
<li><a href="#howtoshowsponsorbuttongithubbuttontypesponsorrepomarketingpipelinegithubbutton">How to show Sponsor Button</a></li>
<li><a href="#howtoshowpullrequestsbuttongithubbuttontypepullsrepomarketingpipelinemarkdowntaggithubbutton">How to show Pull Requests Button </a></li>
<li><a href="#howtoshowissuesbuttongithubbuttontypeissuesrepomarketingpipelinemarkdowntaggithubbutton">How to show Issues Button</a></li>
<li><a href="#howtoshowcustombuttongithubbuttononclickalerthelloworldiconhttpsuploadwikimediaorgwikipediacommonsthumbee0snicesvg800pxsnicesvgpngtypecustomtextgithubbuttonsbymarketingpipelinegithubbutton">How to show Custom Button</a></li></ul></li>
<li><a href="#options">Options</a></li>
</ul>
<h2 id="exampleandusage">Example and Usage</h2>
<p>How to use <b><i>GitHub Buttons</i></b>:</p>
<p>include this <a href="https://github.com/MarketingPipeline/GitHub-Buttons-Web-Component/blob/main/version/1.0.0/src/github-buttons-wc.js">script</a> in your HTML document.</p>
<pre><script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/GitHub-Buttons-Web-Component/version/1.0.0/src/github-buttons-wc.js" defer></script></pre>
<h3 id="howtoshowstarbuttongithubbuttonrepomarketingpipelinemarkdowntaggithubbutton">How to show Star Button <github-button repo="MarketingPipeline/Markdown-Tag"></github-button></h3>
<pre><code><github-button repo="MarketingPipeline/Markdown-Tag"></github-button>
</code></pre>
<h3 id="howtoshowwatchbuttongithubbuttontypewatchrepomarketingpipelinemarkdowntaggithubbutton">How to show Watch Button <github-button type="watch" repo="MarketingPipeline/Markdown-Tag"></github-button></h3>
<pre><code><github-button type="watch" repo="MarketingPipeline/Markdown-Tag"></github-button>
</code></pre>
<h3 id="howtoshowforkbuttongithubbuttontypeforkrepomarketingpipelinemarkdowntaggithubbutton">How to show Fork Button <github-button type="fork" repo="MarketingPipeline/Markdown-Tag"></github-button></h3>
<pre><code><github-button type="fork" repo="MarketingPipeline/Markdown-Tag"></github-button>
</code></pre>
<h3 id="howtoshowfollowersbuttongithubbuttontypefollowersrepomarketingpipelinegithubbutton">How to show Followers Button <github-button type="followers" repo="MarketingPipeline"></github-button></h3>
<pre><code><github-button type="followers" repo="MarketingPipeline"></github-button>
</code></pre>
<h3 id="howtoshowsponsorbuttongithubbuttontypesponsorrepomarketingpipelinegithubbutton">How to show Sponsor Button <github-button type="sponsor" repo="MarketingPipeline"></github-button></h3>
<pre><code><github-button type="sponsor" repo="MarketingPipeline"></github-button>
</code></pre>
<h3 id="howtoshowpullrequestsbuttongithubbuttontypepullsrepomarketingpipelinemarkdowntaggithubbutton">How to show Pull Requests Button <github-button type="pulls" repo="MarketingPipeline/Markdown-Tag"></github-button></h3>
<pre><code><github-button type="pulls" repo="MarketingPipeline/Markdown-Tag"></github-button>
</code></pre>
<h3 id="howtoshowissuesbuttongithubbuttontypeissuesrepomarketingpipelinemarkdowntaggithubbutton">How to show Issues Button <github-button type="issues" repo="MarketingPipeline/Markdown-Tag"></github-button></h3>
<pre><code><github-button type="issues" repo="MarketingPipeline/Markdown-Tag"></github-button>
</code></pre>
<h3 id="howtoshowcustombuttongithubbuttononclickalerthelloworldiconhttpsuploadwikimediaorgwikipediacommonsthumbee0snicesvg800pxsnicesvgpngtypecustomtextgithubbuttonsbymarketingpipelinegithubbutton">How to show Custom Button <github-button onclick="alert('Hello World ♥')" icon="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/800px-SNice.svg.png" type="custom" text="GitHub Buttons by @MarketingPipeline"></github-button></h3>
<pre><code><github-button type="custom" text="Custom Button Text"></github-button>
</code></pre>
<h2 id="options">Options</h2>
<table>
<tbody><tr>
<th>Attribute</th>
<th>Meaning</th>
<th>Default</th>
<th>Required</th>
</tr>
<tr>
<td>repo</td>
<td> Your GitHub username + repo or GitHub Profile <b>(Not Required For Custom Button)</b></td>
<td><code>Undefined</code></td>
<td>Yes</td>
</tr>
<tr>
<td>type</td>
<td>The type of button to show </td>
<td><code>Star Count</code></td>
<td>No</td>
</tr>
<tr>
<td>icon</td>
<td>The icon to use in the button </td>
<td><code>GitHub Icon</code></td>
<td>No</td>
</tr>
<tr>
<td>href</td>
<td>The href / link for the button</td>
<td><code>Defined by Type</code></td>
<td>No</td>
</tr>
<tr>
<td>new-window</td>
<td>If <code>True</code>, button link will open in a new window</td>
<td><code>False</code></td>
<td>No</td>
</tr>
<tr>
<td>text</td>
<td>Text to show <b>(Custom Button's Have No Default Text)</b></td>
<td><code>Defined by Type</code></td>
<td>No</td>
</tr>
</tbody></table></div>
</div>
</header></div></body></html>