Major CSS purge, update branding
This commit is contained in:
parent
51e6a2a60c
commit
c7c2ea0349
|
@ -2,8 +2,8 @@ const path = require('path');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
siteMetadata: {
|
siteMetadata: {
|
||||||
title: `SilverStripe Documentation`,
|
title: `Silverstripe CMS Documentation`,
|
||||||
description: `Developer documentation for the SilverStripe CMS and framework.`,
|
description: `Developer documentation for the Silverstripe CMS and framework.`,
|
||||||
author: `The Silverstripe Community`,
|
author: `The Silverstripe Community`,
|
||||||
siteUrl: `https://doc.silverstripe.org`,
|
siteUrl: `https://doc.silverstripe.org`,
|
||||||
},
|
},
|
||||||
|
@ -69,20 +69,23 @@ module.exports = {
|
||||||
{
|
{
|
||||||
resolve: `gatsby-plugin-purgecss`,
|
resolve: `gatsby-plugin-purgecss`,
|
||||||
options: {
|
options: {
|
||||||
printRejected: true,
|
printRejected: false,
|
||||||
whitelist: ['algolia-autocomplete'],
|
whitelist: ['algolia-autocomplete', 'pre', 'code'],
|
||||||
ignore: ['prismjs/','docsearch.js/', 'src/theme/assets/search/algolia.css'],
|
ignore: ['prismjs/','docsearch.js/', 'src/theme/assets/search/algolia.css'],
|
||||||
content: [
|
content: [
|
||||||
path.join(process.cwd(), '.cache/gatsby-source-git/**/*.md'),
|
path.join(process.cwd(), '.cache/gatsby-source-git/**/*.md'),
|
||||||
|
path.join(process.cwd(), 'src/components/!(*.d).{ts,js,jsx,tsx}'),
|
||||||
|
path.join(process.cwd(), 'src/pages/!(*.d).{ts,js,jsx,tsx}'),
|
||||||
|
path.join(process.cwd(), 'src/templates/!(*.d).{ts,js,jsx,tsx}'),
|
||||||
],
|
],
|
||||||
extractors: [,
|
extractors: [
|
||||||
{
|
{
|
||||||
extractor: class {
|
extractor: class {
|
||||||
static extract(content) {
|
static extract(content) {
|
||||||
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
|
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
extensions: ['js', 'ts', 'jsx', 'tsx', 'md', 'mdx']
|
extensions: ['js', 'ts', 'jsx', 'tsx']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
extractor: class {
|
extractor: class {
|
||||||
|
|
|
@ -5,7 +5,25 @@ exports.wrapPageElement = ({ element, props }) => {
|
||||||
return <Layout {...props}>{element}</Layout>
|
return <Layout {...props}>{element}</Layout>
|
||||||
};
|
};
|
||||||
|
|
||||||
exports.onRenderBody = ({ setPostBodyComponents }) => {
|
exports.onRenderBody = ({ setPostBodyComponents, setHeadComponents }) => {
|
||||||
|
// Rules that cannot be touched by purgecss because they come in from client side rendering
|
||||||
|
setHeadComponents([
|
||||||
|
<style type="text/css" dangerouslySetInnerHTML={{
|
||||||
|
__html: `
|
||||||
|
:not(pre) > code[class*="language-"] {
|
||||||
|
background: #f5f6f8;
|
||||||
|
color: #5d6778;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
.algolia-autocomplete {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.gatsby-highlight {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}} />
|
||||||
|
]);
|
||||||
setPostBodyComponents([
|
setPostBodyComponents([
|
||||||
<script key='docsearch' type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" />,
|
<script key='docsearch' type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" />,
|
||||||
process.env.NODE_ENV === 'production' &&
|
process.env.NODE_ENV === 'production' &&
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
module.exports = () => ({
|
|
||||||
plugins: [
|
|
||||||
require("tailwindcss"),
|
|
||||||
require('autoprefixer'),
|
|
||||||
],
|
|
||||||
})
|
|
|
@ -12,6 +12,7 @@ export default function HTML(props) {
|
||||||
name="viewport"
|
name="viewport"
|
||||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||||
/>
|
/>
|
||||||
|
<link rel="icon" type="image/png" href="ss-favicon.png"/>
|
||||||
{props.headComponents}
|
{props.headComponents}
|
||||||
</head>
|
</head>
|
||||||
<body {...props.bodyAttributes} className="docs-page">
|
<body {...props.bodyAttributes} className="docs-page">
|
||||||
|
|
|
@ -50,15 +50,10 @@ body {
|
||||||
&.section {
|
&.section {
|
||||||
&::before {
|
&::before {
|
||||||
background: $gray-700;
|
background: $gray-700;
|
||||||
// height: 4px;
|
|
||||||
// top: 50%;
|
|
||||||
// margin-top: -2pxp;
|
|
||||||
}
|
}
|
||||||
&.active {
|
&.active {
|
||||||
&::before {
|
&::before {
|
||||||
background: $theme-color-primary;
|
background: $theme-color-primary;
|
||||||
// height: 100%;
|
|
||||||
// top: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -146,21 +141,10 @@ code {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
:not(pre) > code[class*="language-"] {
|
|
||||||
background: $gray-200;
|
|
||||||
color: $theme-text-color-secondary;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3 {
|
h1, h2, h3 {
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
margin: 2rem 0 1rem 0;
|
margin: 2rem 0 1rem 0;
|
||||||
|
@ -187,9 +171,7 @@ h1, h2, h3 {
|
||||||
color: $gray-800;
|
color: $gray-800;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.gatsby-highlight {
|
|
||||||
margin: 2rem 0;
|
|
||||||
}
|
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
.docs-logo-wrapper {
|
.docs-logo-wrapper {
|
||||||
width: auto;
|
width: auto;
|
||||||
|
@ -213,6 +195,7 @@ h1, h2, h3 {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
/* purgecss ignore */
|
||||||
.algolia-autocomplete .ds-dropdown-menu {
|
.algolia-autocomplete .ds-dropdown-menu {
|
||||||
min-width: 400px;
|
min-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 29 KiB |
Loading…
Reference in New Issue