3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-21 04:57:05 +02:00
Code Issues Projects Releases Packages Wiki Activity

Update color configurations

Browse source
This commit is contained in:
Frank Li 2017-08-10 16:03:43 -07:00
parent 8a9dc08a88
commit 4646fc98c5
3 changed files with 72 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

56
lib/server/generate.js
View file

@ -17,6 +17,7 @@ function execute() {
const React = require("react"); const React = require("react");
const mkdirp = require("mkdirp"); const mkdirp = require("mkdirp");
const glob = require("glob"); const glob = require("glob");
const chalk = require("chalk");
const Site = require("../core/Site.js"); const Site = require("../core/Site.js");
const siteConfig = require(CWD + "/siteConfig.js"); const siteConfig = require(CWD + "/siteConfig.js");
const translate = require("./translate.js"); const translate = require("./translate.js");
@ -151,7 +152,7 @@ function execute() {
link = link.replace("/en/", "/" + language + "/"); link = link.replace("/en/", "/" + language + "/");
link = link.replace( link = link.replace(
"/VERSION/", "/VERSION/",
metadata.version && (metadata.version !== latestVersion) metadata.version && metadata.version !== latestVersion
? "/" + metadata.version + "/" ? "/" + metadata.version + "/"
: "/" : "/"
); );
@ -275,21 +276,24 @@ function execute() {
"/" + "/" +
file.split("/static/")[1]; file.split("/static/")[1];
if (file.match(/\.css$/)) { if (file.match(/\.css$/)) {
let cssContent = fs.readFileSync(file); let cssContent = fs.readFileSync(file, "utf8");
cssContent = cssContent
.toString() if (
.replace( !siteConfig.colors.primaryColor ||
new RegExp("{primaryColor}", "g"), !siteConfig.colors.secondaryColor ||
siteConfig.colors.primaryColor !siteConfig.colors.prismColor
) {
console.error(
`${chalk.yellow(
"Missing color configuration."
)} Make sure siteConfig.colors includes primaryColor, secondaryColor, and prismColor fields.`
); );
cssContent = cssContent.replace( }
new RegExp("{secondaryColor}", "g"),
siteConfig.colors.secondaryColor Object.keys(siteConfig.colors).forEach(key => {
); const color = siteConfig.colors[key];
cssContent = cssContent.replace( cssContent = cssContent.replace(new RegExp("\\$" + key, "g"), color);
new RegExp("{prismColor}", "g"), });
siteConfig.colors.prismColor
);
mkdirp.sync(targetFile.replace(new RegExp("/[^/]*$"), "")); mkdirp.sync(targetFile.replace(new RegExp("/[^/]*$"), ""));
fs.writeFileSync(targetFile, cssContent); fs.writeFileSync(targetFile, cssContent);
@ -305,23 +309,13 @@ function execute() {
if (file.match(/\.css$/) && !isSeparateCss(file)) { if (file.match(/\.css$/) && !isSeparateCss(file)) {
const mainCss = const mainCss =
CWD + "/build/" + siteConfig.projectName + "/css/main.css"; CWD + "/build/" + siteConfig.projectName + "/css/main.css";
let cssContent = fs.readFileSync(file); let cssContent = fs.readFileSync(file, "utf8");
cssContent = fs.readFileSync(mainCss) + "\n" + cssContent; cssContent = fs.readFileSync(mainCss, "utf8") + "\n" + cssContent;
cssContent = cssContent Object.keys(siteConfig.colors).forEach(key => {
.toString() const color = siteConfig.colors[key];
.replace( cssContent = cssContent.replace(new RegExp("\\$" + key, "g"), color);
new RegExp("{primaryColor}", "g"), });
siteConfig.colors.primaryColor
);
cssContent = cssContent.replace(
new RegExp("{secondaryColor}", "g"),
siteConfig.colors.secondaryColor
);
cssContent = cssContent.replace(
new RegExp("{prismColor}", "g"),
siteConfig.colors.prismColor
);
fs.writeFileSync(mainCss, cssContent); fs.writeFileSync(mainCss, cssContent);
} else if (!fs.lstatSync(file).isDirectory()) { } else if (!fs.lstatSync(file).isDirectory()) {

29
lib/server/server.js
View file

@ -19,6 +19,7 @@ function execute(port) {
const toSlug = require("../core/toSlug.js"); const toSlug = require("../core/toSlug.js");
const mkdirp = require("mkdirp"); const mkdirp = require("mkdirp");
const glob = require("glob"); const glob = require("glob");
const chalk = require("chalk");
const translate = require("./translate.js"); const translate = require("./translate.js");
const versionFallback = require("./versionFallback"); const versionFallback = require("./versionFallback");
@ -424,20 +425,22 @@ function execute(port) {
cssContent + "\n" + fs.readFileSync(file, { encoding: "utf8" }); cssContent + "\n" + fs.readFileSync(file, { encoding: "utf8" });
}); });
cssContent = cssContent if (
.toString() !siteConfig.colors.primaryColor ||
.replace( !siteConfig.colors.secondaryColor ||
new RegExp("{primaryColor}", "g"), !siteConfig.colors.prismColor
siteConfig.colors.primaryColor ) {
console.error(
`${chalk.yellow(
"Missing color configuration."
)} Make sure siteConfig.colors includes primaryColor, secondaryColor, and prismColor fields.`
); );
cssContent = cssContent.replace( }
new RegExp("{secondaryColor}", "g"),
siteConfig.colors.secondaryColor Object.keys(siteConfig.colors).forEach(key => {
); const color = siteConfig.colors[key];
cssContent = cssContent.replace( cssContent = cssContent.replace(new RegExp("\\$" + key, "g"), color);
new RegExp("{prismColor}", "g"), });
siteConfig.colors.prismColor
);
res.send(cssContent); res.send(cssContent);
}); });

62
lib/static/css/main.css
View file

@ -66,7 +66,7 @@ article p img {
} }
a { a {
color: {primaryColor}; color: $primaryColor;
text-decoration: none; text-decoration: none;
} }
@ -104,7 +104,7 @@ blockquote {
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: "Helvetica Neue", Arial, sans-serif; font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 300; font-weight: 300;
color: {primaryColor}; color: $primaryColor;
} }
header h2 { header h2 {
@ -114,7 +114,7 @@ header h2 {
.homeContainer { .homeContainer {
background: #fff; background: #fff;
color: {primaryColor}; color: $primaryColor;
text-align: center; text-align: center;
} }
@ -217,7 +217,7 @@ header h2 {
text-align: left; text-align: left;
} }
.container .wrapper h2 { .container .wrapper h2 {
color: {primaryColor}; color: $primaryColor;
font-size: 22px; font-size: 22px;
line-height: 1em; line-height: 1em;
margin-top: 20px; margin-top: 20px;
@ -231,13 +231,13 @@ header h2 {
padding: 10px 0; padding: 10px 0;
} }
.container .wrapper h3 { .container .wrapper h3 {
color: {primaryColor}; color: $primaryColor;
font-size: 18px; font-size: 18px;
margin-top: 10px; margin-top: 10px;
padding: 10px 0; padding: 10px 0;
} }
.container .wrapper h4 { .container .wrapper h4 {
color: {primaryColor}; color: $primaryColor;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
margin: 0; margin: 0;
@ -308,7 +308,7 @@ header h2 {
padding-top: 1em; padding-top: 1em;
} }
.mainContainer .wrapper .post .docPagination { .mainContainer .wrapper .post .docPagination {
background: {primaryColor}; background: $primaryColor;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
position: absolute; position: absolute;
@ -477,7 +477,7 @@ header h2 {
} }
.fixedHeaderContainer { .fixedHeaderContainer {
box-sizing: border-box; box-sizing: border-box;
background: {primaryColor}; background: $primaryColor;
color: #fff; color: #fff;
height: 50px; height: 50px;
padding: 10px 0 8px; padding: 10px 0 8px;
@ -552,9 +552,9 @@ header h2 {
} }
.button { .button {
margin: 4px; margin: 4px;
border: 1px solid {primaryColor}; border: 1px solid $primaryColor;
border-radius: 3px; border-radius: 3px;
color: {primaryColor}; color: $primaryColor;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
@ -565,7 +565,7 @@ header h2 {
transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;
} }
.button:hover { .button:hover {
background: {primaryColor}; background: $primaryColor;
color: #fff; color: #fff;
} }
@ -619,19 +619,19 @@ input[type="search"] {
right: 0 !important; right: 0 !important;
} }
.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header { .navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header {
background: {primaryColor}; background: $primaryColor;
color: white; color: white;
font-family: "Helvetica Neue", Arial, sans-serif; font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight { .navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
background-color: {primaryColor}; background-color: $primaryColor;
color: #fff; color: #fff;
} }
.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--title .algolia-docsearch-suggestion--highlight, .navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--title .algolia-docsearch-suggestion--highlight,
.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight { .navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight {
color: {primaryColor}; color: $primaryColor;
} }
.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary, .navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary,
.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column { .navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column {
@ -680,7 +680,7 @@ code,
a code, a code,
.mainContainer .wrapper a code, .mainContainer .wrapper a code,
.mainContainer .wrapper a:focus code { .mainContainer .wrapper a:focus code {
color: {primaryColor}; color: $primaryColor;
font-family: Hack, monospace; font-family: Hack, monospace;
font-size: 90%; font-size: 90%;
font-weight: 300; font-weight: 300;
@ -697,12 +697,12 @@ a:hover code {
font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace; font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
border-left: 4px solid {primaryColor}; border-left: 4px solid $primaryColor;
overflow-x: scroll; overflow-x: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding: 5px 10px; padding: 5px 10px;
margin: 14px 0 14px 20px; margin: 14px 0 14px 20px;
background-color: {prismColor}; background-color: $prismColor;
} }
.prism + .prism { .prism + .prism {
@ -1038,7 +1038,7 @@ a:hover code {
margin-top: 50px; margin-top: 50px;
width: 100%; width: 100%;
padding: 0; padding: 0;
background: {secondaryColor}; background: $secondaryColor;
color: #fff; color: #fff;
} }
.navigationSlider .slidingNav.slidingNavActive ul { .navigationSlider .slidingNav.slidingNavActive ul {
@ -1051,7 +1051,7 @@ a:hover code {
margin: 0; margin: 0;
} }
.navigationSlider .slidingNav ul li a { .navigationSlider .slidingNav ul li a {
color: {primaryColor}; color: $primaryColor;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1066,7 +1066,7 @@ a:hover code {
} }
.navigationSlider .slidingNav ul li a:focus, .navigationSlider .slidingNav ul li a:focus,
.navigationSlider .slidingNav ul li a:hover { .navigationSlider .slidingNav ul li a:hover {
background: {primaryColor}; background: $primaryColor;
} }
.languages-icon { .languages-icon {
@ -1084,7 +1084,7 @@ a:hover code {
} }
ul#languages-dropdown-items { ul#languages-dropdown-items {
display: flex; display: flex;
background-color: {primaryColor}; background-color: $primaryColor;
flex-direction: column; flex-direction: column;
min-width: 120px; min-width: 120px;
} }
@ -1165,7 +1165,7 @@ ul#languages li {
width: 100%; width: 100%;
} }
.reactNavSearchWrapper input#search_input_react:focus, .reactNavSearchWrapper input#search_input_react:active { .reactNavSearchWrapper input#search_input_react:focus, .reactNavSearchWrapper input#search_input_react:active {
background-color: {primaryColor}; background-color: $primaryColor;
color: #fff; color: #fff;
} }
.reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline { .reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline {
@ -1197,7 +1197,7 @@ ul#languages li {
ul#languages-dropdown-items { ul#languages-dropdown-items {
display: flex; display: flex;
background-color: {primaryColor}; background-color: $primaryColor;
flex-direction: row; flex-direction: row;
} }
} }
@ -1427,10 +1427,10 @@ nav.toc .toggleNav .navGroup h3 i:not(:empty) {
transition: color 0.2s; transition: color 0.2s;
} }
nav.toc .toggleNav .navGroup h3:hover { nav.toc .toggleNav .navGroup h3:hover {
color: {primaryColor}; color: $primaryColor;
} }
nav.toc .toggleNav .navGroup h3:hover i:not(:empty) { nav.toc .toggleNav .navGroup h3:hover i:not(:empty) {
color: {primaryColor}; color: $primaryColor;
} }
nav.toc .toggleNav .navGroup.navGroupActive { nav.toc .toggleNav .navGroup.navGroupActive {
background: #e0e0e0; background: #e0e0e0;
@ -1442,7 +1442,7 @@ nav.toc .toggleNav .navGroup.navGroupActive ul {
padding-top: 10px; padding-top: 10px;
} }
nav.toc .toggleNav .navGroup.navGroupActive h3 { nav.toc .toggleNav .navGroup.navGroupActive h3 {
background: {primaryColor}; background: $primaryColor;
color: #fff; color: #fff;
} }
nav.toc .toggleNav ul { nav.toc .toggleNav ul {
@ -1465,10 +1465,10 @@ nav.toc .toggleNav ul li a {
transition: color 0.3s; transition: color 0.3s;
} }
nav.toc .toggleNav ul li a:hover, nav.toc .toggleNav ul li a:focus { nav.toc .toggleNav ul li a:hover, nav.toc .toggleNav ul li a:focus {
color: {primaryColor}; color: $primaryColor;
} }
nav.toc .toggleNav ul li a.navItemActive { nav.toc .toggleNav ul li a.navItemActive {
color: {primaryColor}; color: $primaryColor;
font-weight: 600; font-weight: 600;
} }
.docsSliderActive nav.toc .navBreadcrumb { .docsSliderActive nav.toc .navBreadcrumb {
@ -1672,7 +1672,7 @@ h6:hover .header-link {
text-align: center; text-align: center;
} }
.poweredByContainer { .poweredByContainer {
background: {primaryColor}; background: $primaryColor;
color: #fff; color: #fff;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -1740,7 +1740,7 @@ h6:hover .header-link {
padding-bottom: 80px; padding-bottom: 80px;
} }
.productShowcaseSection h2 { .productShowcaseSection h2 {
color: {primaryColor}; color: $primaryColor;
font-size: 30px; font-size: 30px;
line-height: 1em; line-height: 1em;
margin-top: 20px; margin-top: 20px;
@ -1837,7 +1837,7 @@ div.video iframe {
margin: 0 auto; margin: 0 auto;
} }
.showcaseSection .prose h1 { .showcaseSection .prose h1 {
color: {primaryColor}; color: $primaryColor;
font-family: "Helvetica Neue", Arial, sans-serif; font-family: "Helvetica Neue", Arial, sans-serif;
text-align: center; text-align: center;
padding: 1.4em 0 0.4em; padding: 1.4em 0 0.4em;