Protosite

Protosite is a CMA/CMS that's comprised of a client layer and an API layer that can be used together, or in their component parts.

The API layer is built with Rails and GraphQL, and the client layer is built using Vue.

Protosite has a core concept of that by defining the shape of all data we can provide standard tooling to manipulate and present that data. Which in practical terms manifests by simply using JSON Schema to define all CMSable component data. We can define validation rules, input style (checkboxes vs. multi select for instance), and any number of additional attributes to enable expressive ways to collect data from content teams.

Further, and maybe more importantly, the schema is useful in keeping code and data inline and versioned. If data doesn't match the schema of the component trying to present it (for instance if the component has been updated with new attributes), we can provide tooling to migrate data forward, or notify someone of the issue.

Installation

To create a new Rails app based on Protosite you can use the template when creating your app.

rails new -m https://raw.githubusercontent.com/jejacks0n/protosite/master/template.rb

Existing apps can use a similar technique, but require webpack to be installed and vue to be setup (via. rails webpacker:install:vue) before running the template.

rails app:template LOCATION=https://raw.githubusercontent.com/jejacks0n/protosite/master/template.rb
rails protosite:install:migrations db:migrate

This adds a npm package and gem to your project. It also installs the boilerplate code that you can expand on with your custom implementation.

Configuration

After installation, you can configure it in your initializers (config/initializers/protosite.rb). You may also want to review and make changes to the basic client implementation in the application.js file and editor implementation in the protosite.js file.

The plan is to get things working nicely and then provide documentation and tutorials on how to customize all aspects of Protosite. Protosite is written at a core level in such a way that makes customization possible, with the intent to also keep a certain level of simplicity.

Development / Contributing

Clone the repo, and have ruby and node installed. Install dependencies for development using bundler and yarn.

bundle install to install ruby dependencies
yarn unlink (just in case)
yarn link && yarn link "@protosite/vue-protosite" to use the local package in dev
yarn install to install node dependencies

Next, because of how node_modules works, we need to link it inside our test app.

ln -s spec/dummy/node_modules node_modules

Next, you'll want a database with a user and some page data. This will give you an admin user, with the login of admin@protosite / password and some default page data that's good for examples.

rake app:db:migrate

Now you should now be able to run the specs.

rake to run rubocop and the specs
rake spec to just run the specs

You can start the server with foreman (or whatever you want to do, but this works nice).

foreman start -f spec/dummy/Procfile

After you have the server running locally, you can login to protosite locally using admin@protosite / password login. This will redirect you back to the root of the application which has a small demo of Protosite in action.

You can also browse to the graphiql interface to inspect the schema and to run test queries etc.