Pup

v1.x

The BasicsStatic Pages

As a convenience, Pup includes functionality for defining static pages whose content is written in Markdown. More specifically, Pup includes two static pages by default for displaying your product's "Terms of Service" and "Privacy Policy."

Static pages are made up of three pieces: the Markdown content for the page, the page component that renders the page, and the route that renders the page component. In order to add a new static page, you will need to add all three of these.

Defining your own static page

In order to define a new static page, it's best to start with the page component that will ultimately render the page. All static pages can be built using the foundational <Page /> component which automatically converts the specified content prop from a Markdown string into HTML. It also sets the page title and subtitle (if applicable).

All of the content for your page should be stored within the new component file that you create. In our <ExamplePage /> component to the right, we define a variable content above our component definition which contains a template literal string written in Markdown. This content variable is then passed as the content prop to our <Page /> component for rendering.

Rendering of Markdown content as HTML in the <Page /> component is handled via the <ReactMarkdown /> component (provided by the react-markdown NPM package).

If you'd like to customize the styles for your page, either create a page-specific stylesheet in that page's component directory (e.g., /imports/ui/pages/ExamplePage/ExamplePage.scss), or, modify the master static page CSS at /imports/ui/pages/Page/Page.scss.
/imports/ui/pages/ExamplePage/ExamplePage.js
import React from 'react';
import Page from '../Page/Page';

const content = `
### This is my Markdown page

I can type **any** Markdown I want into this file and it will ultimately be _parsed_ as HTML by Pup's _utility.getPage_ Method.

To learn more, you can [read about this Method here](http://cleverbeagle.com/pup/v1/the-basics/methods#utility-methods).
`;

const ExamplePage = () => (
  <div className="ExamplePage">
    <Page
      title="My Example Page"
      subtitle="A subtitle for my example page."
      content={content}
    />
  </div>
);

export default ExamplePage;
/imports/ui/layouts/App/App.js
[...]
import ExamplePage from '../../pages/ExamplePage/ExamplePage';

import './App.scss';

const App = props => (
  <Router>
    {!props.loading ? <div className="App">
      <Navigation {...props} />
      <Grid>
        <Switch>
          <Route exact name="index" path="/" component={Index} />
          [...]
          <Route exact name="examplePage" component={ExamplePage} path="/example-page" />
          <Route component={NotFound} />
        </Switch>
      </Grid>
      <Footer />
    </div> : ''}
  </Router>
);

App.propTypes = {[...]};

const getUserName = name => ({[...]}[typeof name]);

export default createContainer(() => {[...]}, App);