@brillout/docpress 0.16.4 → 0.16.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Layout.tsx +2 -0
- package/dist/types/Config.d.ts +4 -1
- package/package.json +1 -1
- package/renderer/onRenderHtml.tsx +42 -4
- package/types/Config.ts +6 -1
package/Layout.tsx
CHANGED
|
@@ -53,6 +53,8 @@ const bodyMaxWidth = 1300
|
|
|
53
53
|
const scrollFadeMask: React.CSSProperties = {
|
|
54
54
|
maskImage:
|
|
55
55
|
'linear-gradient(to bottom, rgba(0,0,0,0.3) 0px, black 20px, black calc(100% - 20px), rgba(0,0,0,0.3) 100%)',
|
|
56
|
+
// Force hardware acceleration to fix Chrome rendering bug (temporary bold text upon scrolling)
|
|
57
|
+
transform: 'translateZ(0)',
|
|
56
58
|
}
|
|
57
59
|
|
|
58
60
|
// Avoid whitespace at the bottom of pages with almost no content
|
package/dist/types/Config.d.ts
CHANGED
|
@@ -7,7 +7,10 @@ type Config = {
|
|
|
7
7
|
/** Sets `<meta name="description" content="${tagline}" />` */
|
|
8
8
|
tagline: string;
|
|
9
9
|
logo: string;
|
|
10
|
-
favicon?: string
|
|
10
|
+
favicon?: string | {
|
|
11
|
+
browser: string;
|
|
12
|
+
google: string;
|
|
13
|
+
};
|
|
11
14
|
banner?: string;
|
|
12
15
|
github: string;
|
|
13
16
|
discord?: string;
|
package/package.json
CHANGED
|
@@ -18,16 +18,13 @@ async function onRenderHtml(pageContext: PageContextServer): Promise<any> {
|
|
|
18
18
|
|
|
19
19
|
const pageHtml = ReactDOMServer.renderToString(page)
|
|
20
20
|
|
|
21
|
-
const faviconUrl = pageContext.globalContext.config.docpress.favicon ?? pageContext.globalContext.config.docpress.logo
|
|
22
|
-
assert(faviconUrl)
|
|
23
|
-
|
|
24
21
|
const { documentTitle } = pageContext.resolved
|
|
25
22
|
assert(documentTitle)
|
|
26
23
|
return escapeInject`<!DOCTYPE html>
|
|
27
24
|
<html>
|
|
28
25
|
<head>
|
|
29
26
|
<meta charset="UTF-8" />
|
|
30
|
-
|
|
27
|
+
${getFaviconTags(pageContext.globalContext.config.docpress)}
|
|
31
28
|
<title>${documentTitle}</title>
|
|
32
29
|
${descriptionTag}
|
|
33
30
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
@@ -98,3 +95,44 @@ function getOpenGraphTags(url: string, documentTitle: string, config: Config) {
|
|
|
98
95
|
${metaTwitter}
|
|
99
96
|
`
|
|
100
97
|
}
|
|
98
|
+
|
|
99
|
+
// Resources:
|
|
100
|
+
// - https://www.google.com/s2/favicons?domain=vike.dev
|
|
101
|
+
// - https://stackoverflow.com/questions/59568586/favicon-don%c2%b4t-show-up-in-google-search-result/59577456#59577456
|
|
102
|
+
// - https://developers.google.com/search/docs/appearance/favicon-in-search
|
|
103
|
+
//
|
|
104
|
+
// Examples:
|
|
105
|
+
// - Nice looking on Goolge Search Results:
|
|
106
|
+
// https://www.wikipedia.org
|
|
107
|
+
// - Single PNG:
|
|
108
|
+
// https://rubyonrails.org
|
|
109
|
+
// - Favicon shown in browser is different than favicon shown in Google:
|
|
110
|
+
// https://evilmartians.com
|
|
111
|
+
// Shown in Google: <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
112
|
+
// Shown in Browser: <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
|
113
|
+
function getFaviconTags(config: Config) {
|
|
114
|
+
const { faviconBrowser, faviconGoogle } = getFavicons(config)
|
|
115
|
+
assert(faviconBrowser)
|
|
116
|
+
const faviconTagGoogle = !faviconGoogle
|
|
117
|
+
? ''
|
|
118
|
+
: escapeInject`
|
|
119
|
+
<link rel="apple-touch-icon" href="${faviconGoogle}" />
|
|
120
|
+
`
|
|
121
|
+
return escapeInject`
|
|
122
|
+
<link rel="icon" href="${faviconBrowser}" type="image/svg+xml" />
|
|
123
|
+
${faviconTagGoogle}
|
|
124
|
+
`
|
|
125
|
+
}
|
|
126
|
+
function getFavicons(config: Config) {
|
|
127
|
+
let faviconBrowser: string
|
|
128
|
+
let faviconGoogle: null | string = null
|
|
129
|
+
if (!config.favicon) {
|
|
130
|
+
faviconBrowser = config.logo
|
|
131
|
+
} else if (typeof config.favicon === 'string') {
|
|
132
|
+
faviconBrowser = config.favicon
|
|
133
|
+
} else {
|
|
134
|
+
faviconBrowser = config.favicon.browser
|
|
135
|
+
faviconGoogle = config.favicon.google
|
|
136
|
+
}
|
|
137
|
+
return { faviconBrowser, faviconGoogle }
|
|
138
|
+
}
|
package/types/Config.ts
CHANGED