feat: replace github-corners with element and css structure. #97

jaywcjlove · Jan 1, 2025 · 855820f · 855820f
1 parent a89f35f
commit 855820f
Show file tree

Hide file tree

Showing 9 changed files with 256 additions and 241 deletions.
diff --git a/README-zh.md b/README-zh.md
@@ -207,11 +207,6 @@ If a task list item description begins with a parenthesis, you'll need to escape
 
 ## API
 
-```js
-import 'markdown-to-html-cli/github-fork-ribbon.css';
-import 'markdown-to-html-cli/github.css';
-```
-
 ```ts
 import { ParsedArgs } from 'minimist';
 import { Options } from 'rehype-document';

diff --git a/packages/action/dist/action.js b/packages/action/dist/action.js
diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -215,11 +215,6 @@ If a task list item description begins with a parenthesis, you'll need to escape
 
 ## API
 
-```js
-import 'markdown-to-html-cli/github-fork-ribbon.css';
-import 'markdown-to-html-cli/github.css';
-```
-
 ```ts
 import { ParsedArgs } from 'minimist';
 import { Options } from 'rehype-document';

diff --git a/packages/cli/src/create.ts b/packages/cli/src/create.ts
@@ -7,8 +7,8 @@ import remarkGemoji from 'remark-gemoji';
 // @ts-ignore
 import rehypeUrls from 'rehype-urls';
 import rehypeFormat from 'rehype-format';
-import { githubCorners } from './nodes/github-corners.js';
-import { githubCornersFork } from './nodes/github-corners-fork.js';
+import { githubCorners, githubCornersStyle } from './nodes/github-corners.js';
+import { githubCornersFork, githubCornersForkStyle } from './nodes/github-corners-fork.js';
 import { octiconLink } from './nodes/octiconLink.js';
 import { imgBase64 as toBase64 } from './nodes/imgBase64.js';
 import { markdownStyle, mdStyle } from './nodes/markdown-style.js';
@@ -104,8 +104,20 @@ export function create(options: MDToHTMLOptions = {}) {
 
     if (Array.isArray(documentOptions.style)) {
       documentOptions.style.push(mdStyle);
+      if (options['github-corners']) {
+        documentOptions.style.push(githubCornersStyle);
+      }
+      if (options['github-corners-fork']) {
+        documentOptions.style.push(githubCornersForkStyle);
+      }
     } else if (typeof documentOptions.style === 'string') {
       documentOptions.style = [documentOptions.style, mdStyle];
+      if (options['github-corners']) {
+        documentOptions.style.push(githubCornersStyle);
+      }
+      if (options['github-corners-fork']) {
+        documentOptions.style.push(githubCornersForkStyle);
+      }
     }
     documentOptions.script = documentOptions.script || [];
     if (Array.isArray(documentOptions.script)) {

diff --git a/packages/cli/src/nodes/github-corners-fork.css b/packages/cli/src/nodes/github-corners-fork.css
@@ -0,0 +1,91 @@
+.github-fork-ribbon {
+  width: 12.1em;
+  height: 12.1em;
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  right: 0;
+  z-index: 9999;
+  pointer-events: none;
+  font-size: 13px;
+  text-decoration: none;
+  text-indent: -999999px;
+}
+
+.github-fork-ribbon.fixed {
+  position: fixed;
+}
+
+.github-fork-ribbon:hover, .github-fork-ribbon:active {
+  background-color: rgba(0, 0, 0, 0.0);
+}
+
+.github-fork-ribbon:before, .github-fork-ribbon:after {
+  /* The right and left classes determine the side we attach our banner to */
+  position: absolute;
+  display: block;
+  width: 15.38em;
+  height: 1.54em;
+
+  top: 3.23em;
+  right: -3.23em;
+
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.github-fork-ribbon:before {
+  content: "";
+
+  /* Add a bit of padding to give some substance outside the "stitching" */
+  padding: .38em 0;
+
+  /* Set the base colour */
+  background-color: #a00;
+
+  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+
+  /* Add a drop shadow */
+  -webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
+  box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
+
+  pointer-events: auto;
+}
+
+.github-fork-ribbon:after {
+  /* Set the text from the data-ribbon attribute */
+  content: attr(data-ribbon);
+
+  /* Set the text properties */
+  color: #fff;
+  font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.54em;
+  text-decoration: none;
+  text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
+  text-align: center;
+  text-indent: 0;
+
+  /* Set the layout properties */
+  padding: .15em 0;
+  margin: .15em 0;
+
+  /* Add "stitching" effect */
+  border-width: .08em 0;
+  border-style: dotted;
+  border-color: #fff;
+  border-color: rgba(255, 255, 255, 0.7);
+}
diff --git a/packages/cli/src/nodes/github-corners-fork.ts b/packages/cli/src/nodes/github-corners-fork.ts
@@ -1,96 +1,10 @@
 import { Element } from 'hast';
+import fs from 'fs-extra';
+import path from 'path';
 
-const style = `.github-fork-ribbon {
-  width: 12.1em;
-  height: 12.1em;
-  position: absolute;
-  overflow: hidden;
-  top: 0;
-  right: 0;
-  z-index: 9999;
-  pointer-events: none;
-  font-size: 13px;
-  text-decoration: none;
-  text-indent: -999999px;
-}
-
-.github-fork-ribbon.fixed {
-  position: fixed;
-}
-
-.github-fork-ribbon:hover, .github-fork-ribbon:active {
-  background-color: rgba(0, 0, 0, 0.0);
-}
-
-.github-fork-ribbon:before, .github-fork-ribbon:after {
-  /* The right and left classes determine the side we attach our banner to */
-  position: absolute;
-  display: block;
-  width: 15.38em;
-  height: 1.54em;
-
-  top: 3.23em;
-  right: -3.23em;
-
-  -webkit-box-sizing: content-box;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.github-fork-ribbon:before {
-  content: "";
-
-  /* Add a bit of padding to give some substance outside the "stitching" */
-  padding: .38em 0;
-
-  /* Set the base colour */
-  background-color: #a00;
-
-  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
-  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
-  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
-  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
-
-  /* Add a drop shadow */
-  -webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
-  box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
-
-  pointer-events: auto;
-}
-
-.github-fork-ribbon:after {
-  /* Set the text from the data-ribbon attribute */
-  content: attr(data-ribbon);
-
-  /* Set the text properties */
-  color: #fff;
-  font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
-  line-height: 1.54em;
-  text-decoration: none;
-  text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
-  text-align: center;
-  text-indent: 0;
-
-  /* Set the layout properties */
-  padding: .15em 0;
-  margin: .15em 0;
-
-  /* Add "stitching" effect */
-  border-width: .08em 0;
-  border-style: dotted;
-  border-color: #fff;
-  border-color: rgba(255, 255, 255, 0.7);
-}`;
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+const cssFilePath = path.join(__dirname, 'github-corners-fork.css');
+export const githubCornersForkStyle = fs.readFileSync(cssFilePath, 'utf-8');
 
 interface GithubCorners {
   href?: string;
@@ -112,18 +26,6 @@ export function githubCornersFork(opts: GithubCorners): Element {
       'data-ribbon': 'Fork me on GitHub',
       href,
     },
-    children: [
-      {
-        type: 'element',
-        tagName: 'style',
-        properties: {},
-        children: [
-          {
-            type: 'text',
-            value: style
-          }
-        ]
-      }
-    ]
+    children: []
   }
 }
diff --git a/packages/cli/src/nodes/github-corners.css b/packages/cli/src/nodes/github-corners.css
@@ -0,0 +1,12 @@
+a:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; }
+svg { z-index: 99; position: fixed; border: 0px; top: 0px; right: 0; }
+@media (max-width:500px) {
+  a:hover .octo-arm { animation: none; }
+  .octo-arm { animation: octocat-wave 560ms ease-in-out; }
+}
+
+@keyframes octocat-wave {
+  0%, 100% { transform: rotate(0); }
+  20%, 60% { transform: rotate(-25deg); }
+  40%, 80% { transform: rotate(10deg); }
+}