PagePress

One of my passions as a developer is creating tools that help people get their ideas on the web. Another is utilizing modern web technologies. For this year’s Static Showdown, I decided to combine both.

For those of you unfamiliar with the Showdown, it’s a challenge to build something cool for the web in 48 hours … without the use of any server-side code (An exception is given to publicly available back-end services like Firebase).


Concept

I had a vision of what I wanted to accomplish in those 48 hours. PagePress: a single-page app that works as a content management system, organized around page layouts, page types that use those layouts, and the pages themselves. The contest prohibits the creation of any digital assets before the start time, so I had to break out the old pencil and paper. The full scope of the project started with my concept of a layout editor.

My initial sketch of how the PagePress layout editor might work.

This sketch depicts a layout editor organized around rows. In each row, up to 12 columns are allowed. Individual columns can be resized to take up the space of multiple columns, but all columns in a single row can only take up 12 column-widths. There are options to remove a column or edit its contents by selecting a block from a popup menu. Let’s see how close the final product comes to the initial idea.

Page Layouts

The Page Layouts tool in the PagePress Dashboard.

Here’s a layout created with the Page Layouts tool in the PagePress Dashboard. This particular layout was taken directly from my initial sketch. You give it a name, add a row, then add columns to the row. You can +1 a column to increase its size or -1 a column to decrease its size. No column may be less than 1 unit wide or more than 12 units wide, and all columns in a single row can only add up to 12 units. Options are provided for removing columns and rows. Additionally, you can justify the columns in a given row. Saving the page layout allows it to be used within the next tool: Page Types.

Page Types

The Page Types tool within the PagePress Dashboard.

Here’s a page type created with the Page Types tool in the PagePress Dashboard and utilizing the page layout created above. Give it a name, then click on any of the available slots to show the block choose. For the initial release, the available blocks are limited to dynamic (per-page) content, static (pages inherit from the page type) content, and page title (aligned left, center, or right). Clicking on most of the block options simply updates the corresponding slot to show the name of the selected block type. Selecting “Static content” actually opens a WYSIWYG editor (more on that later) so that you can save content to the page type itself. Saving the page type allows it to be used within the next tool: Pages.

Pages

The Pages tool within the PagePress Dashboard.

Here’s a page created with the Pages tool in the PagePress Dashboard and utilizing the page type created above. The white slots are those defined by the page type as either the “None” block, one of the “Page title” blocks, or the “Static content” block. The darkened slots are “Dynamic content” that create specifically for this page. Give the page a name, then click on any of the darkened slots to add in your content. Saving the page publishes it to the front-end.

The “New Page” created in the process of this walkthrough.

Something to note on the Pages tool shown above is the presence of the “Home Page” and “404 Page” buttons. These pages, due to their nature, are given special versions of the page editor that appear in modal dialogs.

Editing

Speaking about editing, here’s the WYSIWYG editor used for editing dynamic content in pages and static content in page types:

The WYSIWYG editor in the PagePress Dashboard.

The editor supports the following actions:

  • Bold
  • Italic
  • Underline
  • Strike-through
  • Clear Format
  • Link
  • Image
  • Ordered List
  • Unordered List
  • Indent
  • Outdent
  • Justify
  • Headings (H1-H6)
  • Blockquote
  • Undo
  • Redo

Navigation

Clicking on the menu button at the top left reveals the Navigation menu:

The Navigation menu in the PagePress Dashboard.

Notifications

The PagePress Dashboard provides notifications for various events.

The icon at the top right shows current network connectivity. If your connection is lost, it will show no bars.

The connectivity indicator in the PagePress Dashboard.

Additionally, creating, editing, or deleting layouts, types, and pages (as well as gaining or losing network connectivity) generates toast notifications at the bottom left of the screen.

Technology

  • Polymer — A library for developing custom elements.
  • Paper Elements — A set of custom elements adhering to Material Design.
  • Iron Elements — A set of custom elements without the Material Design influence. Also includes some utility elements (layout, AJAX, media queries, etc.)
  • Google Web Components — A set of custom elements for utilizing certain Google services (e.g. Firebase)
  • wysiwyg-e — Another project of mine; a custom element providing WYSIWYG editing capabilities.
  • slugify — A GitHub gist for turning page titles into URL slugs.

Known Issues

With any project (especially one with a 48-hour deadline) there are bound to be issues. I’ve begun to document these issues on a page I created with PagePress. See below for a link to that page.

To Do

In addition to known issues, there are features that I’d like PagePress to have that there just wasn’t time to incorporate. I’m also documenting feature ideas on a page I created with PagePress. See below for a link to that page.

Links

For any Static Showdown judges in the room…

I did all my testing using Chrome. While I plan to test against other browsers after the contest is done, I recommend you use Chrome while judging my entry.

I also recommend starting at the Dashboard, rather than the home page. See above for a direct link.


Thanks for taking the time to read about my project. I welcome comments, suggestions, or questions.