Major CSS purge, update branding

This commit is contained in:
Aaron Carlino 2019-11-15 16:04:03 +13:00
parent 51e6a2a60c
commit c7c2ea0349
6 changed files with 31 additions and 32 deletions

View File

@ -2,8 +2,8 @@ const path = require('path');
module.exports = {
siteMetadata: {
title: `SilverStripe Documentation`,
description: `Developer documentation for the SilverStripe CMS and framework.`,
title: `Silverstripe CMS Documentation`,
description: `Developer documentation for the Silverstripe CMS and framework.`,
author: `The Silverstripe Community`,
siteUrl: `https://doc.silverstripe.org`,
},
@ -69,20 +69,23 @@ module.exports = {
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: true,
whitelist: ['algolia-autocomplete'],
printRejected: false,
whitelist: ['algolia-autocomplete', 'pre', 'code'],
ignore: ['prismjs/','docsearch.js/', 'src/theme/assets/search/algolia.css'],
content: [
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 {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
},
extensions: ['js', 'ts', 'jsx', 'tsx', 'md', 'mdx']
extensions: ['js', 'ts', 'jsx', 'tsx']
},
{
extractor: class {

View File

@ -5,7 +5,25 @@ exports.wrapPageElement = ({ element, props }) => {
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([
<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' &&

View File

@ -1,6 +0,0 @@
module.exports = () => ({
plugins: [
require("tailwindcss"),
require('autoprefixer'),
],
})

View File

@ -12,6 +12,7 @@ export default function HTML(props) {
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="icon" type="image/png" href="ss-favicon.png"/>
{props.headComponents}
</head>
<body {...props.bodyAttributes} className="docs-page">

View File

@ -50,15 +50,10 @@ body {
&.section {
&::before {
background: $gray-700;
// height: 4px;
// top: 50%;
// margin-top: -2pxp;
}
&.active {
&::before {
background: $theme-color-primary;
// height: 100%;
// top: 0;
}
}
}
@ -146,21 +141,10 @@ code {
flex-grow: 1;
}
.algolia-autocomplete {
width: 100%;
}
.navbar {
justify-content: flex-start;
}
:not(pre) > code[class*="language-"] {
background: $gray-200;
color: $theme-text-color-secondary;
text-shadow: none;
}
h1, h2, h3 {
font-weight: 100;
margin: 2rem 0 1rem 0;
@ -187,9 +171,7 @@ h1, h2, h3 {
color: $gray-800;
}
}
.gatsby-highlight {
margin: 2rem 0;
}
@media (max-width: 1200px) {
.docs-logo-wrapper {
width: auto;
@ -213,6 +195,7 @@ h1, h2, h3 {
left: 0;
right: 0;
}
/* purgecss ignore */
.algolia-autocomplete .ds-dropdown-menu {
min-width: 400px;
}

BIN
static/ss-favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB