Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jejacks0n/protosite

Protosite: A flexible Vue and Rails based CMA/CMS.
https://github.com/jejacks0n/protosite

cms graphql protosite rails vue

Last synced: about 1 month ago
JSON representation

Protosite: A flexible Vue and Rails based CMA/CMS.

Host: GitHub
URL: https://github.com/jejacks0n/protosite
Owner: jejacks0n
License: other
Created: 2018-11-09T20:07:12.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2023-01-03T23:13:23.000Z (almost 2 years ago)
Last Synced: 2024-10-06T03:55:29.209Z (about 2 months ago)
Topics: cms, graphql, protosite, rails, vue
Language: Ruby
Homepage:
Size: 1.57 MB
Stars: 4
Watchers: 3
Forks: 0
Open Issues: 36
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE

Awesome Lists containing this project

README

Protosite
=========

[![Build Status](https://travis-ci.org/jejacks0n/protosite.svg?branch=master)](https://travis-ci.org/jejacks0n/protosite)
[![Maintainability](https://api.codeclimate.com/v1/badges/2fe64b2099900239713a/maintainability)](https://codeclimate.com/github/jejacks0n/protosite/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/2fe64b2099900239713a/test_coverage)](https://codeclimate.com/github/jejacks0n/protosite/test_coverage)
[![License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)
[![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)

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.

```shell
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.

```shell
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](http://localhost:3000/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](http://localhost:3000/protosite/graphiql) to inspect the schema and to run
test queries etc.

## License

Licensed under the [MIT License](http://creativecommons.org/licenses/MIT/)

All licenses for the bundled Javascript libraries are included (MIT/BSD).

## Make Code Not War