Skip to content

Commit 78842d7

Browse files
committed
docs: refactor build doc script and doc html
1 parent b8d1cc0 commit 78842d7

File tree

8 files changed

+1620
-1086
lines changed

8 files changed

+1620
-1086
lines changed

README.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<div align="center">
2-
<img src="https://yuskawu.github.io/github-corner-element/github-corner.png" width="150" height="150" alt="github-corner">
2+
<a href="https://github.com/YuskaWu/github-corner-element">
3+
<img src="https://yuskawu.github.io/github-corner-element/github-corner.png" width="150" height="150" alt="github-corner">
4+
</a>
35
</div>
46
<br />
57
<div align="center">
@@ -22,7 +24,7 @@ A web component for the corner banner of GitHub, inspired by [Tim Holman](https:
2224

2325
## Browser Compatibility
2426

25-
It's compatible with browsers which supports [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components)(including `Custom elements`, `Shadow DOM` and `HTML Template`). For modern browsers it should be fine, but old browser may not work. Checkout the compatibility [here](https://caniuse.com/?search=web%20component).
27+
It's compatible with browsers which supports [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components)(including `Custom elements`, `Shadow DOM` and `HTML Template`). For modern browsers it should be fine, but old browser may not work. Check out the compatibility on [Can I use](https://caniuse.com/?search=web%20component) website.
2628

2729
## Installations
2830

@@ -88,7 +90,7 @@ There are five parts in shadow DOM that can be selected by [::part()](https://de
8890

8991
You can use devtool to inspect shadow DOM and checkout the position of these parts.
9092

91-
Here is an example to style the parts inside shadow DOM(see live demo [here](https://yuskawu.github.io/github-corner-element/example#ex-styling)):
93+
Here is an example to style the parts inside shadow DOM(see [live demo](https://yuskawu.github.io/github-corner-element/example#ex-styling)):
9294

9395
```html
9496
<style>
@@ -125,7 +127,7 @@ Here is an example to style the parts inside shadow DOM(see live demo [here](htt
125127

126128
There is a [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) named `"svg"`, 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.
127129

128-
Here is an example to draw eyes on octocat(see live demo [here](https://yuskawu.github.io/github-corner-element/example#ex-slot-eyes)):
130+
Here is an example to draw eyes on octocat(see [live demo](https://yuskawu.github.io/github-corner-element/example#ex-slot-eyes)):
129131

130132
```html
131133
<github-corner>

build-docs.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import { execSync } from 'child_process'
2+
import fs from 'fs'
3+
import showdown from 'showdown'
4+
import showdownHighlight from 'showdown-highlight'
5+
import docMeta from './doc-meta.json' assert { type: 'json' }
6+
7+
const SAVE_PATH = './docs/index.html'
8+
const GITHUB_CSS_FILE_PATH =
9+
'./node_modules/github-markdown-css/github-markdown.css'
10+
const HLJS_CSS_FILE_PATH = './node_modules/highlight.js/styles/github.css'
11+
12+
const converter = new showdown.Converter({
13+
ghCompatibleHeaderId: true,
14+
simpleLineBreaks: true,
15+
ghMentions: true,
16+
tables: true,
17+
emoji: true,
18+
parseImgDimensions: true,
19+
extensions: [showdownHighlight],
20+
})
21+
22+
converter.setFlavor('github')
23+
24+
const githubCssText = fs.readFileSync(GITHUB_CSS_FILE_PATH, 'utf-8')
25+
const hljsCssText = fs.readFileSync(HLJS_CSS_FILE_PATH, 'utf-8')
26+
const readmeText = fs.readFileSync('./README.md', 'utf-8')
27+
const readmeHtml = converter.makeHtml(readmeText)
28+
29+
const html = `
30+
<!DOCTYPE html>
31+
<html>
32+
<head>
33+
<title>${docMeta['title']}</title>
34+
<link rel="icon" type="image/png" href="./favicon.png">
35+
36+
<meta charset="utf-8" />
37+
<meta name="viewport" content="width=device-width, initial-scale=1" />
38+
<meta name="author" content="Yuska Wu, [email protected]" />
39+
<meta name="description" content="${docMeta['description']}" />
40+
41+
<!-- FB sharing meta data -->
42+
<meta property="og:url" content="${docMeta['url']}" />
43+
<meta property="og:type" content="website" />
44+
<meta property="og:title" content="${docMeta['title']}" />
45+
<meta property="og:description" content="${docMeta['description']}" />
46+
<meta property="og:image" content="${docMeta['image'].url}" />
47+
<meta property="og:image:type" content="image/png" />
48+
49+
<!-- Twitter sharing meta data -->
50+
<meta name="twitter:card" content="summary_large_image" />
51+
<meta name="twitter:title" content="${docMeta['title']}" />
52+
<meta name="twitter:description" content="${docMeta['description']}" />
53+
<meta name="twitter:image" content="${docMeta['image'].url}" />
54+
55+
<style>
56+
${hljsCssText}
57+
${githubCssText}
58+
59+
.markdown-body {
60+
box-sizing: border-box;
61+
max-width: 980px;
62+
margin: 0 auto;
63+
padding: 2rem;
64+
}
65+
66+
@media (max-width: 767px) {
67+
.markdown-body {
68+
padding: 1rem;
69+
}
70+
}
71+
</style>
72+
73+
<script type="application/ld+json">
74+
{
75+
"@context": "http://schema.org",
76+
"@type": "WebSite",
77+
"name": "${docMeta['title']}",
78+
"description": "${docMeta['description']}",
79+
"url": "${docMeta['url']}"
80+
}
81+
</script>
82+
83+
<!-- Google Tag Manager -->
84+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
85+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
86+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
87+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
88+
})(window,document,'script','dataLayer','GTM-WBCJWPM');</script>
89+
<!-- End Google Tag Manager -->
90+
91+
</head>
92+
<body>
93+
<!-- Google Tag Manager (noscript) -->
94+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WBCJWPM"
95+
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
96+
<!-- End Google Tag Manager (noscript) -->
97+
98+
<main class="markdown-body">
99+
${readmeHtml}
100+
</main>
101+
</body>
102+
</html>
103+
`
104+
105+
fs.writeFileSync(SAVE_PATH, html, 'utf-8')
106+
107+
execSync(`npx prettier --write ${SAVE_PATH}`)

build-readme-html.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

doc-meta.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"url": "https://yuskawu.github.io/github-corner-element/",
3+
"title": "github-corner-elemen",
4+
"description": "A web component for the corner banner of GitHub.",
5+
"image": {
6+
"url": "https://yuskawu.github.io/github-corner-element/github-corner.png",
7+
"type": "image/png"
8+
}
9+
}

docs/favicon.png

23.8 KB
Loading

0 commit comments

Comments
 (0)