Update site to support nightly mode

website/src/components/icon.js

@@ -19,6 +19,7 @@ import { ReactComponent as NoIcon } from '../images/icons/no.svg'
 import { ReactComponent as NeutralIcon } from '../images/icons/neutral.svg'
 import { ReactComponent as OfflineIcon } from '../images/icons/offline.svg'
 import { ReactComponent as SearchIcon } from '../images/icons/search.svg'
+import { ReactComponent as MoonIcon } from '../images/icons/moon.svg'
 
 import classes from '../styles/icon.module.sass'
 
@@ -41,6 +42,7 @@ const icons = {
     neutral: NeutralIcon,
     offline: OfflineIcon,
     search: SearchIcon,
+    moon: MoonIcon,
 }
 
 const Icon = ({ name, width, height, inline, variant, className }) => {

website/src/components/landing.js

@@ -2,7 +2,9 @@ import React, { Fragment } from 'react'
 import classNames from 'classnames'
 
 import pattern from '../images/pattern_blue.jpg'
+import patternNightly from '../images/pattern_nightly.jpg'
 import patternOverlay from '../images/pattern_landing.jpg'
+import patternOverlayNightly from '../images/pattern_landing_nightly.jpg'
 import logoSvgs from '../images/logos'
 
 import Grid from './grid'
@@ -14,9 +16,10 @@ import Link from './link'
 import { chunkArray } from './util'
 import classes from '../styles/landing.module.sass'
 
-export const LandingHeader = ({ style = {}, children }) => {
-    const wrapperStyle = { backgroundImage: `url(${pattern})` }
-    const contentStyle = { backgroundImage: `url(${patternOverlay})`, ...style }
+export const LandingHeader = ({ nightly, style = {}, children }) => {
+    const overlay = nightly ? patternOverlayNightly : patternOverlay
+    const wrapperStyle = { backgroundImage: `url(${nightly ? patternNightly : pattern})` }
+    const contentStyle = { backgroundImage: `url(${overlay})`, ...style }
     return (
         <header className={classes.header}>
             <div className={classes.headerWrapper} style={wrapperStyle}>

website/src/components/main.js

@@ -5,15 +5,22 @@ import classNames from 'classnames'
 import patternBlue from '../images/pattern_blue.jpg'
 import patternGreen from '../images/pattern_green.jpg'
 import patternPurple from '../images/pattern_purple.jpg'
+import patternNightly from '../images/pattern_nightly.jpg'
 import classes from '../styles/main.module.sass'
 
-const patterns = { blue: patternBlue, green: patternGreen, purple: patternPurple }
+const patterns = {
+    blue: patternBlue,
+    green: patternGreen,
+    purple: patternPurple,
+    nightly: patternNightly,
+}
 
 export const Content = ({ Component = 'div', className, children }) => (
     <Component className={classNames(classes.content, className)}>{children}</Component>
 )
 
 const Main = ({ sidebar, asides, wrapContent, theme, footer, children }) => {
+    const pattern = patterns[theme]
     const mainClassNames = classNames(classes.root, {
         [classes.withSidebar]: sidebar,
         [classes.withAsides]: asides,
@@ -23,10 +30,7 @@ const Main = ({ sidebar, asides, wrapContent, theme, footer, children }) => {
         <main className={mainClassNames}>
             {wrapContent ? <Content Component="article">{children}</Content> : children}
             {asides && (
-                <div
-                    className={classes.asides}
-                    style={{ backgroundImage: `url(${patterns[theme]}` }}
-                />
+                <div className={classes.asides} style={{ backgroundImage: `url(${pattern}` }} />
             )}
             {footer}
         </main>

website/src/images/icons/moon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+</svg>

website/src/styles/alert.module.sass

@@ -3,11 +3,13 @@
     bottom: 0
     left: 0
     width: 100%
-    background: var(--color-subtle-light)
+    background: var(--color-back)
     z-index: 100
     font: var(--font-size-sm)/var(--line-height-md) var(--font-primary)
     text-align: center
     padding: 1rem
+    box-shadow: var(--box-shadow)
+    color: var(--color-theme)
 
 .warning
     --alert-bg: var(--color-yellow-light)

website/src/styles/layout.sass

@@ -47,6 +47,11 @@
     --color-theme-purple-light: hsla(255, 61%, 54%, 0.06)
     --color-theme-purple-opaque: hsla(255, 61%, 54%, 0.11)
 
+    --color-theme-nightly: hsl(257, 99%, 67%)
+    --color-theme-nightly-dark: hsl(257, 99%, 57%)
+    --color-theme-nightly-light: hsla(257, 99%, 67%, 0.06)
+    --color-theme-nightly-opaque: hsla(257, 99%, 67%, 0.11)
+
     // Regular colors
     --color-back: hsl(0, 0%, 100%)
     --color-front: hsl(213, 15%, 12%)
@@ -106,6 +111,12 @@
     --color-theme-light: var(--color-theme-purple-light)
     --color-theme-opaque: var(--color-theme-purple-opaque)
 
+.theme-nightly
+    --color-theme: var(--color-theme-nightly)
+    --color-theme-dark: var(--color-theme-nightly-dark)
+    --color-theme-light: var(--color-theme-nightly-light)
+    --color-theme-opaque: var(--color-theme-nightly-opaque)
+
 
 /* Fonts */
 

website/src/styles/sidebar.module.sass

@@ -22,6 +22,9 @@ $crumb-bar: 2px
     & > *
         padding: 0 2rem 0.35rem
 
+    &:last-child
+        margin-bottom: 5rem
+
 .label
     color: var(--color-dark)
     font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)

website/src/templates/docs.js

@@ -31,7 +31,7 @@ const Docs = ({ pageContext, children }) => (
                 theme,
                 version,
             } = pageContext
-            const { sidebars = [], modelsRepo, languages } = site.siteMetadata
+            const { sidebars = [], modelsRepo, languages, nightly } = site.siteMetadata
             const isModels = section === 'models'
             const sidebar = pageContext.sidebar
                 ? { items: pageContext.sidebar }
@@ -83,7 +83,7 @@ const Docs = ({ pageContext, children }) => (
                     {sidebar && <Sidebar items={sidebar.items} pageMenu={pageMenu} slug={slug} />}
                     <Main
                         section={section}
-                        theme={theme}
+                        theme={nightly ? 'nightly' : theme}
                         sidebar
                         asides
                         wrapContent
@@ -146,6 +146,7 @@ const query = graphql`
                     models
                     starters
                 }
+                nightly
                 sidebars {
                     section
                     items {

website/src/templates/index.js

@@ -75,10 +75,23 @@ const scopeComponents = {
     InlineCode,
 }
 
-const AlertSpace = () => {
+const AlertSpace = ({ nightly }) => {
     const isOnline = useOnlineStatus()
     return (
         <>
+            {nightly && (
+                <Alert
+                    title="You're viewing the pre-release docs."
+                    icon="moon"
+                    closeOnClick={false}
+                >
+                    The page reflects{' '}
+                    <Link to="https://pypi.org/project/spacy-nightly/">
+                        <InlineCode>spacy-nightly</InlineCode>
+                    </Link>
+                    , not the latest <Link to="https://spacy.io">stable version</Link>.
+                </Alert>
+            )}
             {!isOnline && (
                 <Alert title="Looks like you're offline." icon="offline" variant="warning">
                     But don't worry, your visited pages should be saved for you.
@@ -130,9 +143,10 @@ class Layout extends React.Component {
         const { data, pageContext, location, children } = this.props
         const { file, site = {} } = data || {}
         const mdx = file ? file.childMdx : null
-        const { title, section, sectionTitle, teaser, theme = 'blue', searchExclude } = pageContext
-        const bodyClass = classNames(`theme-${theme}`, { 'search-exclude': !!searchExclude })
         const meta = site.siteMetadata || {}
+        const { title, section, sectionTitle, teaser, theme = 'blue', searchExclude } = pageContext
+        const uiTheme = meta.nightly ? 'nightly' : theme
+        const bodyClass = classNames(`theme-${uiTheme}`, { 'search-exclude': !!searchExclude })
         const isDocs = ['usage', 'models', 'api', 'styleguide'].includes(section)
         const content = !mdx ? null : (
             <MDXProvider components={mdxComponents}>
@@ -149,7 +163,7 @@ class Layout extends React.Component {
                     sectionTitle={sectionTitle}
                     bodyClass={bodyClass}
                 />
-                <AlertSpace />
+                <AlertSpace nightly={meta.nightly} />
                 <Navigation
                     title={meta.title}
                     items={meta.navigation}
@@ -167,11 +181,11 @@ class Layout extends React.Component {
                         mdxComponents={mdxComponents}
                     />
                 ) : (
-                    <>
+                    <div>
                         {children}
                         {content}
                         <Footer wide />
-                    </>
+                    </div>
                 )}
             </>
         )
@@ -184,6 +198,7 @@ export const pageQuery = graphql`
     query($slug: String!) {
         site {
             siteMetadata {
+                nightly
                 title
                 description
                 navigation {

website/src/templates/universe.js

@@ -30,8 +30,8 @@ function filterResources(resources, data) {
     return sorted.filter(res => (res.category || []).includes(data.id))
 }
 
-const UniverseContent = ({ content = [], categories, pageContext, location, mdxComponents }) => {
-    const { theme, data = {} } = pageContext
+const UniverseContent = ({ content = [], categories, theme, pageContext, mdxComponents }) => {
+    const { data = {} } = pageContext
     const filteredResources = filterResources(content, data)
     const activeData = data ? content.find(({ id }) => id === data.id) : null
     const markdownComponents = { ...mdxComponents, code: InlineCode }
@@ -302,15 +302,16 @@ const Universe = ({ pageContext, location, mdxComponents }) => (
     <StaticQuery
         query={query}
         render={data => {
-            const content = data.site.siteMetadata.universe.resources
-            const categories = data.site.siteMetadata.universe.categories
+            const { universe, nightly } = data.site.siteMetadata
+            const theme = nightly ? 'nightly' : pageContext.theme
             return (
                 <UniverseContent
-                    content={content}
-                    categories={categories}
+                    content={universe.resources}
+                    categories={universe.categories}
                     pageContext={pageContext}
                     location={location}
                     mdxComponents={mdxComponents}
+                    theme={theme}
                 />
             )
         }}
@@ -323,6 +324,7 @@ const query = graphql`
     query UniverseQuery {
         site {
             siteMetadata {
+                nightly
                 universe {
                     resources {
                         type

website/src/widgets/landing.js

@@ -68,7 +68,7 @@ const Landing = ({ data }) => {
     const counts = getCounts(data.languages)
     return (
         <>
-            <LandingHeader>
+            <LandingHeader nightly={data.nightly}>
                 <LandingTitle>
                     Industrial-Strength
                     <br />
@@ -268,6 +268,7 @@ const landingQuery = graphql`
     query LandingQuery {
         site {
             siteMetadata {
+                nightly
                 repo
                 languages {
                     models