Skip to content

Commit b8d1cc0

Browse files
YuskaWuYuskaWu
committed
docs: build readme html
1 parent 4766f7c commit b8d1cc0

File tree

2 files changed

+387
-4
lines changed

2 files changed

+387
-4
lines changed

‎README.md‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
1-
# github-corner-element
1+
<div align="center">
2+
<img src="https://yuskawu.github.io/github-corner-element/github-corner.png" width="150" height="150" alt="github-corner">
3+
</div>
4+
<br />
5+
<div align="center">
6+
<a href="https://www.webcomponents.org/element/github-corner-element">
7+
<img src="https://img.shields.io/badge/webcomponents.org-published-blue.svg" alt="webcomponents.org">
8+
</a>
9+
<a href="https://www.npmjs.com/package/github-corner-element">
10+
<img src="https://img.shields.io/npm/v/github-corner-element" alt="npm">
11+
</a>
12+
<a>
13+
<img src="https://img.shields.io/bundlephobia/minzip/github-corner-element" alt="npm bundle size">
14+
</a>
15+
</div>
216

3-
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/github-corner-element)
4-
[![npm](https://img.shields.io/npm/v/github-corner-element)](https://www.npmjs.com/package/github-corner-element)
5-
![npm bundle size](https://img.shields.io/bundlephobia/minzip/github-corner-element)
17+
# github-corner-element
618

719
A web component for the corner banner of GitHub, inspired by [Tim Holman](https://github.com/tholman)'s [GitHub Corners](https://github.com/tholman/github-corners).
820

‎docs/index.html‎

Lines changed: 371 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,371 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<title>github-corner-element</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<style>
9+
body {
10+
font: 400 16px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
11+
color: #111;
12+
background-color: #fdfdfd;
13+
-webkit-text-size-adjust: 100%;
14+
-webkit-font-feature-settings: 'kern' 1;
15+
-moz-font-feature-settings: 'kern' 1;
16+
-o-font-feature-settings: 'kern' 1;
17+
font-feature-settings: 'kern' 1;
18+
font-kerning: normal;
19+
padding: 30px;
20+
}
21+
22+
@media only screen and (max-width: 600px) {
23+
body {
24+
padding: 5px;
25+
}
26+
27+
main {
28+
padding: 0px 20px 20px 20px !important;
29+
}
30+
}
31+
32+
main {
33+
margin: 0px;
34+
max-width: 900px;
35+
border: 1px solid #e1e4e8;
36+
padding: 10px 40px;
37+
padding-bottom: 20px;
38+
border-radius: 2px;
39+
margin-left: auto;
40+
margin-right: auto;
41+
}
42+
43+
hr {
44+
color: #bbb;
45+
background-color: #bbb;
46+
height: 1px;
47+
flex: 0 1 auto;
48+
margin: 1em 0;
49+
padding: 0;
50+
border: none;
51+
}
52+
53+
/**
54+
* Links
55+
*/
56+
a {
57+
color: #0366d6;
58+
text-decoration: none;
59+
}
60+
a:visited {
61+
color: #0366d6;
62+
}
63+
a:hover {
64+
color: #0366d6;
65+
text-decoration: underline;
66+
}
67+
68+
pre {
69+
background-color: #f6f8fa;
70+
border-radius: 3px;
71+
font-size: 85%;
72+
line-height: 1.45;
73+
overflow: auto;
74+
padding: 16px;
75+
}
76+
77+
/**
78+
* Code blocks
79+
*/
80+
81+
code {
82+
background-color: rgba(27, 31, 35, 0.05);
83+
border-radius: 3px;
84+
font-size: 85%;
85+
margin: 0;
86+
word-wrap: break-word;
87+
padding: 0.2em 0.4em;
88+
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
89+
monospace;
90+
}
91+
92+
pre > code {
93+
background-color: transparent;
94+
border: 0;
95+
display: inline;
96+
line-height: inherit;
97+
margin: 0;
98+
overflow: visible;
99+
padding: 0;
100+
word-wrap: normal;
101+
font-size: 100%;
102+
}
103+
104+
/**
105+
* Blockquotes
106+
*/
107+
blockquote {
108+
margin-left: 30px;
109+
margin-top: 0px;
110+
margin-bottom: 16px;
111+
border-left-width: 3px;
112+
padding: 0 1em;
113+
color: #828282;
114+
border-left: 4px solid #e8e8e8;
115+
padding-left: 15px;
116+
font-size: 18px;
117+
letter-spacing: -1px;
118+
font-style: italic;
119+
}
120+
blockquote * {
121+
font-style: normal !important;
122+
letter-spacing: 0;
123+
color: #6a737d !important;
124+
}
125+
126+
/**
127+
* Tables
128+
*/
129+
table {
130+
border-spacing: 2px;
131+
display: block;
132+
font-size: 14px;
133+
overflow: auto;
134+
width: 100%;
135+
margin-bottom: 16px;
136+
border-spacing: 0;
137+
border-collapse: collapse;
138+
}
139+
140+
td {
141+
padding: 6px 13px;
142+
border: 1px solid #dfe2e5;
143+
}
144+
145+
th {
146+
font-weight: 600;
147+
padding: 6px 13px;
148+
border: 1px solid #dfe2e5;
149+
}
150+
151+
tr {
152+
background-color: #fff;
153+
border-top: 1px solid #c6cbd1;
154+
}
155+
156+
table tr:nth-child(2n) {
157+
background-color: #f6f8fa;
158+
}
159+
160+
/**
161+
* Others
162+
*/
163+
164+
img {
165+
max-width: 100%;
166+
}
167+
168+
p {
169+
line-height: 24px;
170+
font-weight: 400;
171+
font-size: 16px;
172+
color: #24292e;
173+
}
174+
175+
ul {
176+
margin-top: 0;
177+
}
178+
179+
li {
180+
color: #24292e;
181+
font-size: 16px;
182+
font-weight: 400;
183+
line-height: 1.5;
184+
}
185+
186+
li + li {
187+
margin-top: 0.25em;
188+
}
189+
190+
body {
191+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
192+
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
193+
color: #24292e;
194+
}
195+
196+
a:visited {
197+
color: #0366d6;
198+
}
199+
200+
h1,
201+
h2,
202+
h3 {
203+
border-bottom: 1px solid #eaecef;
204+
color: #111;
205+
/* Darker */
206+
}
207+
208+
</style>
209+
<style>
210+
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
211+
Theme: GitHub
212+
Description: Light theme as seen on github.com
213+
Author: github.com
214+
Maintainer: @Hirse
215+
Updated: 2021-05-15
216+
217+
Outdated base version: https://github.com/primer/github-syntax-light
218+
Current colors taken from GitHub's CSS
219+
*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
220+
</style>
221+
</head>
222+
<body>
223+
<main>
224+
<div align="center">
225+
<img src="https://yuskawu.github.io/github-corner-element/github-corner.png" width="150" height="150" alt="github-corner">
226+
</div>
227+
<p><br /></p>
228+
<div align="center">
229+
<a href="https://www.webcomponents.org/element/github-corner-element">
230+
<img src="https://img.shields.io/badge/webcomponents.org-published-blue.svg" alt="webcomponents.org">
231+
</a>
232+
<a href="https://www.npmjs.com/package/github-corner-element">
233+
<img src="https://img.shields.io/npm/v/github-corner-element" alt="npm">
234+
</a>
235+
<a>
236+
<img src="https://img.shields.io/bundlephobia/minzip/github-corner-element" alt="npm bundle size">
237+
</a>
238+
</div>
239+
<h1 id="github-corner-element">github-corner-element</h1>
240+
<p>A web component for the corner banner of GitHub, inspired by <a href="https://github.com/tholman">Tim Holman</a>'s <a href="https://github.com/tholman/github-corners">GitHub Corners</a>.</p>
241+
<p><a href="https://yuskawu.github.io/github-corner-element/example">Demo</a></p>
242+
<h2 id="browser-compatibility">Browser Compatibility</h2>
243+
<p>It's compatible with browsers which supports <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Component</a>(including <code>Custom elements</code>, <code>Shadow DOM</code> and <code>HTML Template</code>). For modern browsers it should be fine, but old browser may not work. Checkout the compatibility <a href="https://caniuse.com/?search=web%20component">here</a>.</p>
244+
<h2 id="installations">Installations</h2>
245+
<p>Use npm command to install pacakge:</p>
246+
<pre><code class="hljs bash language-bash">npm install github-corner-element</code></pre>
247+
<p>Then import it directly in your app entry to register <code>github-corner</code> element:</p>
248+
<pre><code class="hljs javascript language-javascript"><span class="hljs-comment">// register `github-corner` element in the entry file</span>
249+
<span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;github-corner-element&#x27;</span></code></pre>
250+
<p>Alternatively, you can load from <a href="https://unpkg.com/">UNPKG</a> CDN as well:</p>
251+
<pre><code class="hljs html language-html"><span class="hljs-comment">&lt;!-- latest version --&gt;</span>
252+
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/github-corner-element&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
253+
<span class="hljs-comment">&lt;!-- specific version --&gt;</span>
254+
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/[email protected]&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
255+
<span class="hljs-comment">&lt;!-- load in ES Module mode --&gt;</span>
256+
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/github-corner-element/dist/github-corner-element.es.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
257+
<h2 id="usage">Usage</h2>
258+
<p>After installation you can use it as well as a normal HTML element:</p>
259+
<pre><code class="hljs html language-html"><span class="hljs-tag">&lt;<span class="hljs-name">github-corner</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://github.com/YuskaWu/github-corner-element&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">github-corner</span>&gt;</span></code></pre>
260+
<h2 id="attributes">Attributes</h2>
261+
<p>In addition to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">global attributes</a>, you can also use<br />
262+
the following additional attributes on <code>github-corner</code> element:</p>
263+
<table>
264+
<thead>
265+
<tr>
266+
<th id="attribute_name">Attribute Name</th>
267+
<th id="type">Type</th>
268+
<th id="default_value">Default Value</th>
269+
<th id="description">Description</th>
270+
</tr>
271+
</thead>
272+
<tbody>
273+
<tr>
274+
<td>href</td>
275+
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href">href attribute</a> of anchor element</td>
276+
<td>none</td>
277+
<td>The URL of github page.</td>
278+
</tr>
279+
<tr>
280+
<td>size</td>
281+
<td>value of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">width CSS property</a></td>
282+
<td>5rem</td>
283+
<td>The width and height of github-corner element.</td>
284+
</tr>
285+
<tr>
286+
<td>placement</td>
287+
<td>'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'</td>
288+
<td>'top-right'</td>
289+
<td>The placement of github-corner element, it can be one of the four corners.</td>
290+
</tr>
291+
<tr>
292+
<td>octocat-color</td>
293+
<td>value of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">color CSS property</a></td>
294+
<td>white</td>
295+
<td>The color of the octocat.</td>
296+
</tr>
297+
<tr>
298+
<td>banner-color</td>
299+
<td>value of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">color CSS property</a></td>
300+
<td>black</td>
301+
<td>The color of the banner.</td>
302+
</tr>
303+
<tr>
304+
<td>wave-duration</td>
305+
<td>value of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration">animation-duration CSS property</a></td>
306+
<td>0.5s</td>
307+
<td>The duration to wave octocat's hand.</td>
308+
</tr>
309+
</tbody>
310+
</table>
311+
<p>Checkout this <a href="https://yuskawu.github.io/github-corner-element/example">page</a> for more examples.</p>
312+
<h2 id="styling">Styling</h2>
313+
<p>As normal HTML element, you can style it with <code>class</code> and <code>style</code> attribute. But if you want to style elements which is inside the shadow DOM, then you have to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">::part()</a> CSS pseudo-element.</p>
314+
<p>There are five parts in shadow DOM that can be selected by <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">::part()</a>:</p>
315+
<ul>
316+
<li>anchor</li>
317+
<li>banner</li>
318+
<li>octocat</li>
319+
<li>octocat-arm</li>
320+
<li>octocat-body</li>
321+
</ul>
322+
<p>You can use devtool to inspect shadow DOM and checkout the position of these parts.</p>
323+
<p>Here is an example to style the parts inside shadow DOM(see live demo <a href="https://yuskawu.github.io/github-corner-element/example#ex-styling">here</a>):</p>
324+
<pre><code class="hljs html language-html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">
325+
<span class="hljs-selector-class">.custom-style</span><span class="hljs-selector-pseudo">::part</span>(banner) {
326+
fill: <span class="hljs-number">#cceb34</span>;
327+
stroke: <span class="hljs-number">#d453f5</span>;
328+
stroke-<span class="hljs-attribute">width</span>: <span class="hljs-number">16</span>;
329+
<span class="hljs-attribute">transition</span>: fill <span class="hljs-number">0.2s</span>;
330+
}
331+
332+
<span class="hljs-selector-class">.custom-style</span><span class="hljs-selector-pseudo">:hover</span><span class="hljs-selector-pseudo">::part</span>(banner) {
333+
fill: white;
334+
}
335+
336+
<span class="hljs-selector-class">.custom-style</span><span class="hljs-selector-pseudo">::part</span>(octocat) {
337+
fill: <span class="hljs-number">#d453f5</span>;
338+
stroke: black;
339+
stroke-<span class="hljs-attribute">width</span>: <span class="hljs-number">3</span>;
340+
}
341+
342+
<span class="hljs-selector-class">.custom-style</span><span class="hljs-selector-pseudo">::part</span>(octocat-arm) {
343+
<span class="hljs-attribute">animation-name</span>: wave-hand;
344+
<span class="hljs-attribute">animation-duration</span>: <span class="hljs-number">0.2s</span>;
345+
<span class="hljs-attribute">animation-iteration-count</span>: infinite
346+
}
347+
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
348+
...
349+
<span class="hljs-tag">&lt;<span class="hljs-name">github-corner</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-style&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">github-corner</span>&gt;</span></code></pre>
350+
<blockquote>
351+
<p>NOTE: Using this way will have more specificity, styling by the attributes listed above will be overwritten.</p>
352+
</blockquote>
353+
<h2 id="svg-slot">svg slot</h2>
354+
<p>There is a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot">slot</a> named <code>"svg"</code>, SVG element on the slot will be cloned and append into the SVG container inside shadow DOM. If you want to add additional SVG to draw something special, or you want to define SVG gradients, you can use the slot to do so.</p>
355+
<p>Here is an example to draw eyes on octocat(see live demo <a href="https://yuskawu.github.io/github-corner-element/example#ex-slot-eyes">here</a>):</p>
356+
<pre><code class="hljs html language-html"><span class="hljs-tag">&lt;<span class="hljs-name">github-corner</span>&gt;</span>
357+
<span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;svg&quot;</span>&gt;</span>
358+
<span class="hljs-tag">&lt;<span class="hljs-name">circle</span> <span class="hljs-attr">cx</span>=<span class="hljs-string">&quot;160&quot;</span> <span class="hljs-attr">cy</span>=<span class="hljs-string">&quot;75&quot;</span> <span class="hljs-attr">r</span>=<span class="hljs-string">&quot;4&quot;</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">&quot;black&quot;</span> /&gt;</span>
359+
<span class="hljs-tag">&lt;<span class="hljs-name">circle</span> <span class="hljs-attr">cx</span>=<span class="hljs-string">&quot;160&quot;</span> <span class="hljs-attr">cy</span>=<span class="hljs-string">&quot;75&quot;</span> <span class="hljs-attr">r</span>=<span class="hljs-string">&quot;6&quot;</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">&quot;black&quot;</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">&quot;transparent&quot;</span> /&gt;</span>
360+
<span class="hljs-tag">&lt;<span class="hljs-name">circle</span> <span class="hljs-attr">cx</span>=<span class="hljs-string">&quot;180&quot;</span> <span class="hljs-attr">cy</span>=<span class="hljs-string">&quot;95&quot;</span> <span class="hljs-attr">r</span>=<span class="hljs-string">&quot;4&quot;</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">&quot;black&quot;</span> /&gt;</span>
361+
<span class="hljs-tag">&lt;<span class="hljs-name">circle</span> <span class="hljs-attr">cx</span>=<span class="hljs-string">&quot;180&quot;</span> <span class="hljs-attr">cy</span>=<span class="hljs-string">&quot;95&quot;</span> <span class="hljs-attr">r</span>=<span class="hljs-string">&quot;6&quot;</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">&quot;black&quot;</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">&quot;transparent&quot;</span> /&gt;</span>
362+
<span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
363+
<span class="hljs-tag">&lt;/<span class="hljs-name">github-corner</span>&gt;</span></code></pre>
364+
<blockquote>
365+
<p>NOTE: You can only put an SVG element on the slot, other elements will be ignored.</p>
366+
</blockquote>
367+
<h2 id="license">License</h2>
368+
<p>MIT</p>
369+
</main>
370+
</body>
371+
</html>

0 commit comments

Comments
 (0)