torus-digital / torus_cms

An open source serverless content management system and static page generator

Torus CMS is an open source micro service based serverless content management system (CMS) for building, managing and deploying static sites in a light, cost-effective way. It's mobile compatible and it provides a friendly GUI, allowing you to easily publish content from any device.

Torus CMS is standalone and can be added to any static site. There is no need to migrate your site, learn a new language or do any maintenance.

How it works

Getting Started

Pre-requisites

• Make sure you have node.js and npm installed. You can checkout this tutorial to install npm and node in mac, linux (debian/ubuntu).
• Have an AWS account. If you don't have an AWS account, you can easily create one here. Don't worry, everything you do with this project will fall within the AWS free tier limit!

Steps

1. Clone the git repository

2. Go into the directory of the project cd torus_cms

3. Install all dependencies by running npm install

4. Install the amplify CLI if you havn't done so already npm install -g @aws-amplify/cli

5. run the deplyment script node deployment-script.js

6. Configure amplify by running amplify configure

   • If you need help with configuration check out this video tutorial

7. Create a file called .env withe the following variables

   AWS_ACCESS_KEY_ID=your-access-key
   AWS_SECRET_ACCESS_KEY=your-secret-access-key
   AWS_REGION=us-east-1
   AWS_ACCOUNT_NUMBER=your-aws-account-number
   

8. To find your AWS account number, go to the AWS console support center

9. Initialize a new amplify project inside your react app amplify init

10. Add authentication amplify add auth use the default configuration

11. Add an S3 storage bucket amplify add storage ** you can use the space bar to select multiple options

12. Add a graphQL API amplify add api to easily store and retrieve data from dynamoDB

13. Set up hosting for the amplify app amplify hosting add

    1. Select dev
    2. For the name of the bucket, enter admin.your-domain.com replace your-domain.com with your domain.

14. Re-run the deployment script. Add a -dev at the end of the name your sotrage bucket (e.g. yourstorage-bucket-dev). this assumes you named your environment dev.

15. Make sure to change the nameservers in your domain's DNS settings to use the four nameservers from route 53. This step will vary depending on your domain name registrar.

16. Add a two more variables to your .env file containing your API's invoke URL and your website's url.

REACT_APP_COPY_BUCKET_URL=your-invoke-url
REACT_APP_SITE_URL=http://your-domain.com

16. Now your ready to publish your app. Run amplify publish

    1. Do you want to generate code for your newly created api? No
    2. Be a bit patient ...

17. Your all set! now you can upload pictures and articles to your static site!

18. Instead of publishing the admin app you can also only publish the backend by running amplify push then you can run the app locally with npm start

torus_cms's Issues

disable save button

disable the save button when an article is opened and it hasn't been changed. (default behavior)

Docs V1

the first draft of the documentation that will be released together with the website during alpha.

FIX - on click disable button

onClick disable the button, then re-enable the button after the last action in the switch statement line

Rich text editor Improvements

fix the add pictures button.
add button for bootstrap rows, columns.
Remove the buttons that aren't being used often

FIX - Clean code + Add Comments

The code must be legible for most Devs.

Clean the code, delete unnecessary comments and unnecessary code. place clear comments that are helpful for beginning users.

FIX - Add A record for admin

add an A record in the hosted zone pointing to admin.your-domain.com. this has to be addded somewhere in the deployment script.

TEMPLATE - change vendor files to CDNs

in the template eliminate the use for the very heavy vendor folder and instead use only CDNs

Save and Post Functionalities

Add Picture -> Save Picture + Post Picture

add alerts

Torus CLI

The installation process of almost CMS is very tedious because it requires the user to do a bunch of things in the AWS console. Most of these steps can be automated using either the AWS CLI, an AWS CloudFormation file, or the AWS SDK. Writing a script with the SDK is probably the best option in terms of flexibility and convenience for the user.

integration with github

add the file and make a commit to the remote repository before the copy to bucket function is called..

• when an article is added call the create-a-file method
• when article is updated call the update-a-file method
• when an article is deleted call the delete-a-file method

template architecture

design and deploy a template architecture so that the user can change a format and this gets replicated across all pages that contain that format.

Update
This will change with the addition of Bootlib

Delete functionality - Articles

basic delete functionality for articles. will display an alert before permanently deleting and then un-publishing the article.

Preview URL functionality (after save)

https://aws-amplify.github.io/docs/js/storage#get

U.I Improvements

Includes a series of U.I. Improvements for the admin. This includes adding bootstrap, creating tables for each resource (pictures, articles), styling for buttons, paddings/margins, form component stylings, Alerts, loading bars.

define article fields

• fields for SEO
• fields for adding to storage
• fields for copying to bucket
• fields for creating index
• fields for Database
• user input fields
• fields for other functions

Add Bootstrap w/ basic stylings

• Paddings
• text colors
• background colors
• font styles
• button styles

Open article function

Function that fetches an article and opens it in the WSYG editor.

Component renders a row with a dropdown list and a button. the list displays all the article names and date added from the listArticles query.

user can select a name from the dropdown and click open. this will get the corresponding article from the DB, convert the html body into markdown, and then feed it to the WSYG editor. will also set the id variable and the corresponding other fields.

Collaborating

section that describes how to collaborate in almost cms

Open Pictures

functionality to open existing pictures

Add all Image fields to schema

• origin_file -> contains the name of the original file
• storage_path -> contains complete storage path of the article
• public_path -> contains the complete path of the file in the public site

Lambda Copy Function

Section in the docs that describes the copy to bucket function and its API

saving without change

Souldnt be able to save an article that was just opened and wasnt changed..

Picture - save & publish

sepparate save and publish functionalities for picture.

• functions
• buttons
• conditions & alerts

Image Preview Fucntionality

Add functionality to automatically preview an image that is uploaded.

GraphQL

Section of the docs about the graphQL API. Explains about the general concept of GraphQL and goes into the detail of mutations and queries and their format. Also has some code samples of how to use the graphQL API with amplify.

FIX - Add data valdiation

• None of the forms (pictures or articles) should allow submitting any empty required fields...

FIX - return value from graphQL functions

Add condition for the graphQl function that adds the article to the DB

use a switch expression that takes in the output of the mutation function to bind this

FIX - Amplify publish frontend build

Add testing with Jest

• Write possible test cases for the almost CMS app
• Add Jest and all the testing tools to the app
• Add automated testing to the repo

Define Image fields

• fields for SEO
• fields for adding to storage
• fields for copying to bucket
• fields for creating index
• fields for Database
• user input fields
• fields for other functions

Add branding and custom styling

Add the almost CMS logo and colors from the almost CMS website

Templates

Section in the Docs that explains the template structure and how to adapt an existing bootstrap or html template to work with almost.

Introduction

The introduction of the docs should give a clear idea of what almost is and walk the user through the installation.

FIX - article title has to be unique

user shouldn't be able to save articles with the same name as this would over-write the file in the s3 bucket but create a new entry in the database.

Amplify Storage

Section of the docs that describes the Amplify storage Api and some sample functions (add and read from storage)

FIX - optimize the addImage function

function to add picture to storage is SLOW... need to change it so it encodes the image in base64 and uses a different file upload method listed in the example bellow:

https://aws-amplify.github.io/docs/js/storage#put

add loaders to functions

add a progress bar that uses the output of the progress callback.

FIX - publishing without saving changes

if you save something, change it and then try to publish it almost shouldnt let you. you should save the changes and then publish.

design user experience

• wireframe
• styletile
• user journey

The Almost CMS App

the almost CMS app was made with amplify/react. It is the component that contains the GUI and that interacts with the Storage bucket through the stoarge API and with the Dynamo DB tables through the graphQL API. It also contains the auth module.

Customize Authentication

Initially just hide the create user button and only display it for admin. the admin will by default always be the first user that signs in. The authenticator module will have a condition that queries that user database. If the user table is empty it will display the create user button, else it wont.

the final idea is to remove the tag and instead place a button that opens up a modal form and sends an email to the admin. this can be done using SES in a similar way to the contact form but W/O the db part.

almost React CLI

The almost react CLI will allow the user to create custom dynamic components of different types with different names and custom build their app the way they want.

when the almost react CLI is ready all the github branches with sepparate functionalities will be combined into the same branch.

FIX - clear input after successful publish

When the AddArticle and Addpicture functions finish executing successfully, clear the inputs.

collaborating

this section will explain how you can collaborate

FIX- function that removes spaces & special chars

make a function that removes special characters and replaces spaces with dashes in order to convert the title into the file name. make another field called unique title to save this value.

related #97

FIX - TEMPLATE - Add fa-bars in nav

torus CLI cloudFront

a node.js script that uses the AWS sdk to create a digital certificate and a cloudfront distribution with https for your public site.

Uodate

This will change with the first sub project in Arjan: adding cloudformation templates.

Dependencies

• Arjan: migration to cloudformation

FIX - Add publication date to articles (in the template)

add the publication date in the article index and the publication and last modified dates in the article.

FIX - npm low severity vulnerabilities

for some reason, there is a low severity vulnerability that has to do with the package braces. this issue is fixed in version 2.3.2 of the package, however all the dependencies that mention braces have to be changed in the package-lock.json file to fix the issue. Every time i run npm install or npm update after changing the package version manually, it overwrites the dependencies to previous versions of the package.