diff --git a/gatsby-config.js b/gatsby-config.js index 94a6276..c4876a5 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -23,15 +23,15 @@ module.exports = { patterns: `docs/en/**` } }, - // { - // resolve: `gatsby-source-git`, - // options: { - // name: `3`, - // remote: `https://github.com/unclecheese/silverstripe-framework.git`, - // branch: `3`, - // patterns: `docs/en/**` - // } - // }, + { + resolve: `gatsby-source-git`, + options: { + name: `3`, + remote: `https://github.com/unclecheese/silverstripe-framework.git`, + branch: `pulls/3/gatsby-docs`, + patterns: `docs/en/**` + } + }, { resolve: 'gatsby-transformer-remark', options: { diff --git a/index.html b/index.html new file mode 100644 index 0000000..803c9f9 --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ +SilverStripe Documentation | SilverStripe Documentation

Getting Started with SilverStripe

+

Before you start developing your first web application, you'll need to install the latest version of SilverStripe onto +a web server. The Getting Started section will show you what +server requirements you will need to meet and how to +download and install SilverStripe.

+

To check out the features that SilverStripe offers without installing it, read the Feature Overview +and play with the interactive demo website.

+

Getting support

+

SilverStripe has an wide range of options for getting support:

+ +

Building your first SilverStripe Web application

+

Once you have completed the Getting Started guide and have got SilverStripe +installed and running, the following Tutorials will lead through the basics and core concepts of +SilverStripe.

+

Make sure you know the basic concepts of PHP5 before attempting to follow the tutorials. If you have not programmed with PHP5 be sure to read the Introduction to PHP5 (zend.com).

+

SilverStripe Concepts

+

The Developer Guides contain more detailed documentation on certain SilverStripe topics, 'how to' +examples and reference documentation.

Contributing to SilverStripe

+

The SilverStripe Framework, Content Management System and related websites are open source and welcome community +contributions.

Edit on Github
\ No newline at end of file diff --git a/package.json b/package.json index 5290355..f6e848d 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@types/styled-components": "^4.1.21", "autoprefixer": "^9.7.1", "babel-plugin-styled-components": "^1.10.6", + "classnames": "^2.2.6", "gatsby": "^2.17.10", "gatsby-image": "^2.2.30", "gatsby-plugin-manifest": "^2.2.26", @@ -36,7 +37,8 @@ "react-spring": "^8.0.27", "resize-observer-polyfill": "^1.5.1", "smooth-scroll": "^16.1.0", - "styled-components": "^4.4.1" + "styled-components": "^4.4.1", + "unist-util-select": "^3.0.0" }, "devDependencies": { "@types/react": "^16.9.11", diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx deleted file mode 100644 index 8830cef..0000000 --- a/src/components/Callout.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { StatelessComponent, ReactElement } from 'react'; - -export enum CalloutType { - hint = "hint", - notice = "notice", - info = "info", - warning = "warning", - alert = "alert", -} - -interface CalloutProps { - type: CalloutType; -} - -const lookup = { - hint: 'success', - notice: 'warning', - info: 'info', - warning: 'warning', - alert: 'danger', -} -const Callout: StatelessComponent = ({ type, children }): ReactElement => { - const alertClass = lookup[type] || 'info'; - - return ( -
-
- {children} -
-
- ); -}; - -export default Callout; diff --git a/src/components/ChildrenOf.tsx b/src/components/ChildrenOf.tsx index 9b328ec..873bec9 100644 --- a/src/components/ChildrenOf.tsx +++ b/src/components/ChildrenOf.tsx @@ -2,7 +2,7 @@ import React, { StatelessComponent, ReactElement } from 'react'; import { SilverstripeDocument, ChildrenOfProps } from '../types'; import { Link } from 'gatsby'; import { getChildren, getSiblings } from '../utils/nodes'; -import path from 'path'; + const createCards = (children: SilverstripeDocument[]): ReactElement[] => { return children.map(({ summary, slug, title, icon }) => { return ( @@ -26,7 +26,7 @@ const createCards = (children: SilverstripeDocument[]): ReactElement[] => { }) }; -const createList= (children: SilverstripeDocument[]): ReactElement[] => { +const createList = (children: SilverstripeDocument[]): ReactElement[] => { return children.map(({ summary, slug, title }) => { return ( diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 7aa318e..7e07a84 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,11 +1,26 @@ -import React, { StatelessComponent, SyntheticEvent, ReactElement } from 'react'; +import React, { StatelessComponent, ReactElement } from 'react'; import SearchBox from './SearchBox'; -import { Link } from 'gatsby'; +import { Link, navigate } from 'gatsby'; import logo from '../images/silverstripe-logo.svg'; -import { getHomePage } from '../utils/nodes'; +import { getNodes, getHomePage, getCurrentNode, getCurrentVersion } from '../utils/nodes'; interface HeaderProps { - handleSidebarToggle(e: SyntheticEvent): void + handleSidebarToggle(e: EventTarget): void +} + +const handleNavigate = (e: any): void => { + const currentNode = getCurrentNode(); + const ver = e.target.value; + + if (currentNode) { + const newPath = currentNode.slug.replace(/^\/en\/[0-9]+\//, `/en/${ver}/`); + const otherNode = getNodes().find(n => n.slug === newPath); + if (otherNode) { + navigate(otherNode.slug); + } else { + navigate(`/en/${ver}`); + } + } } const Header: StatelessComponent = ({ handleSidebarToggle }): ReactElement => { @@ -16,7 +31,7 @@ const Header: StatelessComponent = ({ handleSidebarToggle }): React
- + Silverstripe CMS documentation Documentation @@ -32,8 +47,8 @@ const Header: StatelessComponent = ({ handleSidebarToggle }): React
  • - - diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 07bab1e..601b9f9 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -1,22 +1,36 @@ -import React, { StatelessComponent, useState } from "react"; +import React, { StatelessComponent, useState, ReactNode } from "react"; import Header from './Header'; import Sidebar from './Sidebar'; +import { setCurrentNode } from '../utils/nodes'; -const Layout: StatelessComponent<{}> = ({ children}) => { +interface LayoutProps { + children?: ReactNode + pathContext: { + slug: string; + } +} +const Layout: StatelessComponent = ({ children, pathContext: { slug } }) => { const [isToggled, setSidebarOpen] = useState(false); + const handleNavigate = () => setSidebarOpen(false); + + // This is a wrapper component that only gets mounted once. + // These two method calls set the initial state for SSR. From here on, + // the state is updated each time the docs template renders + setCurrentNode(slug); + return ( <>
    setSidebarOpen(!isToggled)} />
    - -
    -
    -
    - {children} -
    -
    + +
    +
    +
    + {children} +
    +
    +
    -
    ); }; diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index b89b7f9..e8d8acd 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -1,13 +1,30 @@ -import React from 'react'; +import React, { StatelessComponent, ReactElement } from 'react'; import { getNavChildren, getHomePage, getCurrentNode } from '../utils/nodes'; import { SilverstripeDocument } from '../types'; import { Link } from 'gatsby'; +import classnames from 'classnames'; +import { LinkGetProps } from '@reach/router'; -const Nav = () => { +interface NavProps { + onNavigate?(e: React.MouseEvent): void; +}; + +const getLinkProps = (props: LinkGetProps): {} => { + const { isPartiallyCurrent, isCurrent } = props; + return { + className: classnames({ + 'active': isCurrent, + 'section': isPartiallyCurrent, + 'nav-link': true, + }), + }; +}; + +const Nav:StatelessComponent = ({ onNavigate }): ReactElement => { const currentNode = getCurrentNode(); const top = getHomePage(); if (!top) { - return ; + return