hyperloop-website

Hyperloop Website V3

## Work in progress!

The new website will:

• be a 100% Hyperloop SPA (featuring Components, Stores, Routes and Operations)
• be built with Opal and Webpack (no Middleman)
• demonstrate the use of hyperloop-js as a simple alternative deployment method (hyperloop-js coming in via NPM)
• consist of just three files (index.html, app.js and app.css)
• have super fast client-side search
• will use HyperRouter for routing
• ultra-responsive UI based on SemanticUIReact (we are ditching bootstrap)
• work online and offline
• HTTP.get all DOCS pages directly from the gems with client-side markdown
• have live editing with (hopefully) a Ruby linter and good error messages
• will be as SEO friendly as the current site (through pre-rendering)
• be beautiful to behold!

Adding pages and sections

Adding a section

• Add a route to the Router app/components/router/app_router.rb
• Add a menu item to app/components/shared/app_menu.rb
• Create folder in components and add a xxx_page.rb component which will be rendered by the router. See one of the other examples, each folder has three files - xxx_page.rb, xxx_body.rb and xxx_sidebar.rb (assuming your want the three column layout)

Pages (PageBody and PageToc)

Not all sections need to load pages, but if you do then:

• See the init method in app/stores/site_store, you will need to add a loader which loads the pages an sets a new key in the @section_stores hash
• Pass the store to PageBody and PageToc and they will redner the Toc and current page and will also handle all navigation and loading of the correct page

Structure

• There is one singleton Store - SiteStore which contains many instances of SectionStore (one per section)

## Setup and build

Setup

• bundle
• npm install
• npm install webpack@3.4.1 -g <-- if you don't have Webpack command line

Build

• To build packs.js and app.js: webpack (-p for production mode)
• To build app.js: bundle exec rake build

Running the server

We use Rack and OpelHotReloader as a development environment. Website Components are rebuilt by sprockets on server start. You will need to build bundle.js (webpack).

To start the server:

foreman start Browse http://localhost:9292/

Code blocks

Runable code blocks

Code blocks need to render properly in Github and also on the site. Some code blocks are live and runanle.

Normal code block - (three-backticks ruby)

```ruby
class MyComp < Hyperloop::Component
  render(DIV) do
    H1 { 'Hello world' }
  end
end
```

Runable code block - (three-backticks ruby runable)

```ruby runable
class MyComp < Hyperloop::Component
  render(DIV) do
    H1 { 'Hello world' }
  end
end
```

All runable code blocks must have a Hyperloop Component class Anything < Hyperloop::Component somewhere near the beginning of the code block.