Skip to content

Commit 855820f

Browse files
jaywcjlovejaywcjlove
committed
feat: replace github-corners with element and css structure. #97 
1 parent a89f35f commit 855820f

File tree

9 files changed

+256
-241
lines changed

9 files changed

+256
-241
lines changed

‎README-zh.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -207,11 +207,6 @@ If a task list item description begins with a parenthesis, you'll need to escape
207207

208208
## API
209209

210-
```js
211-
import 'markdown-to-html-cli/github-fork-ribbon.css';
212-
import 'markdown-to-html-cli/github.css';
213-
```
214-
215210
```ts
216211
import { ParsedArgs } from 'minimist';
217212
import { Options } from 'rehype-document';

‎packages/action/dist/action.js‎

Lines changed: 73 additions & 37 deletions
Large diffs are not rendered by default.

‎packages/cli/README.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -215,11 +215,6 @@ If a task list item description begins with a parenthesis, you'll need to escape
215215

216216
## API
217217

218-
```js
219-
import 'markdown-to-html-cli/github-fork-ribbon.css';
220-
import 'markdown-to-html-cli/github.css';
221-
```
222-
223218
```ts
224219
import { ParsedArgs } from 'minimist';
225220
import { Options } from 'rehype-document';

‎packages/cli/src/create.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import remarkGemoji from 'remark-gemoji';
77
// @ts-ignore
88
import rehypeUrls from 'rehype-urls';
99
import rehypeFormat from 'rehype-format';
10-
import { githubCorners } from './nodes/github-corners.js';
11-
import { githubCornersFork } from './nodes/github-corners-fork.js';
10+
import { githubCorners, githubCornersStyle } from './nodes/github-corners.js';
11+
import { githubCornersFork, githubCornersForkStyle } from './nodes/github-corners-fork.js';
1212
import { octiconLink } from './nodes/octiconLink.js';
1313
import { imgBase64 as toBase64 } from './nodes/imgBase64.js';
1414
import { markdownStyle, mdStyle } from './nodes/markdown-style.js';
@@ -104,8 +104,20 @@ export function create(options: MDToHTMLOptions = {}) {
104104

105105
if (Array.isArray(documentOptions.style)) {
106106
documentOptions.style.push(mdStyle);
107+
if (options['github-corners']) {
108+
documentOptions.style.push(githubCornersStyle);
109+
}
110+
if (options['github-corners-fork']) {
111+
documentOptions.style.push(githubCornersForkStyle);
112+
}
107113
} else if (typeof documentOptions.style === 'string') {
108114
documentOptions.style = [documentOptions.style, mdStyle];
115+
if (options['github-corners']) {
116+
documentOptions.style.push(githubCornersStyle);
117+
}
118+
if (options['github-corners-fork']) {
119+
documentOptions.style.push(githubCornersForkStyle);
120+
}
109121
}
110122
documentOptions.script = documentOptions.script || [];
111123
if (Array.isArray(documentOptions.script)) {

‎packages/cli/src/nodes/github-corners-fork.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.github-fork-ribbon {
2+
width: 12.1em;
3+
height: 12.1em;
4+
position: fixed;
5+
overflow: hidden;
6+
top: 0;
7+
right: 0;
8+
z-index: 9999;
9+
pointer-events: none;
10+
font-size: 13px;
11+
text-decoration: none;
12+
text-indent: -999999px;
13+
}
14+
15+
.github-fork-ribbon.fixed {
16+
position: fixed;
17+
}
18+
19+
.github-fork-ribbon:hover, .github-fork-ribbon:active {
20+
background-color: rgba(0, 0, 0, 0.0);
21+
}
22+
23+
.github-fork-ribbon:before, .github-fork-ribbon:after {
24+
/* The right and left classes determine the side we attach our banner to */
25+
position: absolute;
26+
display: block;
27+
width: 15.38em;
28+
height: 1.54em;
29+
30+
top: 3.23em;
31+
right: -3.23em;
32+
33+
-webkit-box-sizing: content-box;
34+
-moz-box-sizing: content-box;
35+
box-sizing: content-box;
36+
37+
-webkit-transform: rotate(45deg);
38+
-moz-transform: rotate(45deg);
39+
-ms-transform: rotate(45deg);
40+
-o-transform: rotate(45deg);
41+
transform: rotate(45deg);
42+
}
43+
44+
.github-fork-ribbon:before {
45+
content: "";
46+
47+
/* Add a bit of padding to give some substance outside the "stitching" */
48+
padding: .38em 0;
49+
50+
/* Set the base colour */
51+
background-color: #a00;
52+
53+
/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
54+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
55+
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
56+
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
57+
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
58+
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
59+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
60+
61+
/* Add a drop shadow */
62+
-webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
63+
-moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
64+
box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
65+
66+
pointer-events: auto;
67+
}
68+
69+
.github-fork-ribbon:after {
70+
/* Set the text from the data-ribbon attribute */
71+
content: attr(data-ribbon);
72+
73+
/* Set the text properties */
74+
color: #fff;
75+
font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
76+
line-height: 1.54em;
77+
text-decoration: none;
78+
text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
79+
text-align: center;
80+
text-indent: 0;
81+
82+
/* Set the layout properties */
83+
padding: .15em 0;
84+
margin: .15em 0;
85+
86+
/* Add "stitching" effect */
87+
border-width: .08em 0;
88+
border-style: dotted;
89+
border-color: #fff;
90+
border-color: rgba(255, 255, 255, 0.7);
91+
}

‎packages/cli/src/nodes/github-corners-fork.ts‎

Lines changed: 6 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,10 @@
11
import { Element } from 'hast';
2+
import fs from 'fs-extra';
3+
import path from 'path';
24

3-
const style = `.github-fork-ribbon {
4-
width: 12.1em;
5-
height: 12.1em;
6-
position: absolute;
7-
overflow: hidden;
8-
top: 0;
9-
right: 0;
10-
z-index: 9999;
11-
pointer-events: none;
12-
font-size: 13px;
13-
text-decoration: none;
14-
text-indent: -999999px;
15-
}
16-
17-
.github-fork-ribbon.fixed {
18-
position: fixed;
19-
}
20-
21-
.github-fork-ribbon:hover, .github-fork-ribbon:active {
22-
background-color: rgba(0, 0, 0, 0.0);
23-
}
24-
25-
.github-fork-ribbon:before, .github-fork-ribbon:after {
26-
/* The right and left classes determine the side we attach our banner to */
27-
position: absolute;
28-
display: block;
29-
width: 15.38em;
30-
height: 1.54em;
31-
32-
top: 3.23em;
33-
right: -3.23em;
34-
35-
-webkit-box-sizing: content-box;
36-
-moz-box-sizing: content-box;
37-
box-sizing: content-box;
38-
39-
-webkit-transform: rotate(45deg);
40-
-moz-transform: rotate(45deg);
41-
-ms-transform: rotate(45deg);
42-
-o-transform: rotate(45deg);
43-
transform: rotate(45deg);
44-
}
45-
46-
.github-fork-ribbon:before {
47-
content: "";
48-
49-
/* Add a bit of padding to give some substance outside the "stitching" */
50-
padding: .38em 0;
51-
52-
/* Set the base colour */
53-
background-color: #a00;
54-
55-
/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
56-
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
57-
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
58-
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
59-
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
60-
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
61-
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
62-
63-
/* Add a drop shadow */
64-
-webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
65-
-moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
66-
box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
67-
68-
pointer-events: auto;
69-
}
70-
71-
.github-fork-ribbon:after {
72-
/* Set the text from the data-ribbon attribute */
73-
content: attr(data-ribbon);
74-
75-
/* Set the text properties */
76-
color: #fff;
77-
font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
78-
line-height: 1.54em;
79-
text-decoration: none;
80-
text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
81-
text-align: center;
82-
text-indent: 0;
83-
84-
/* Set the layout properties */
85-
padding: .15em 0;
86-
margin: .15em 0;
87-
88-
/* Add "stitching" effect */
89-
border-width: .08em 0;
90-
border-style: dotted;
91-
border-color: #fff;
92-
border-color: rgba(255, 255, 255, 0.7);
93-
}`;
5+
const __dirname = path.dirname(new URL(import.meta.url).pathname);
6+
const cssFilePath = path.join(__dirname, 'github-corners-fork.css');
7+
export const githubCornersForkStyle = fs.readFileSync(cssFilePath, 'utf-8');
948

959
interface GithubCorners {
9610
href?: string;
@@ -112,18 +26,6 @@ export function githubCornersFork(opts: GithubCorners): Element {
11226
'data-ribbon': 'Fork me on GitHub',
11327
href,
11428
},
115-
children: [
116-
{
117-
type: 'element',
118-
tagName: 'style',
119-
properties: {},
120-
children: [
121-
{
122-
type: 'text',
123-
value: style
124-
}
125-
]
126-
}
127-
]
29+
children: []
12830
}
12931
}

‎packages/cli/src/nodes/github-corners.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
a:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; }
2+
svg { z-index: 99; position: fixed; border: 0px; top: 0px; right: 0; }
3+
@media (max-width:500px) {
4+
a:hover .octo-arm { animation: none; }
5+
.octo-arm { animation: octocat-wave 560ms ease-in-out; }
6+
}
7+
8+
@keyframes octocat-wave {
9+
0%, 100% { transform: rotate(0); }
10+
20%, 60% { transform: rotate(-25deg); }
11+
40%, 80% { transform: rotate(10deg); }
12+
}

0 commit comments

Comments
 (0)