rajan / lesspod

Lesspod: Serverless CMS (Website + Blog Engine)

Serverless CMS (Website + Blog Engine) (In Active Development)

We're building the NEXT version of Lesspod here: https://github.com/lesspod/lesspod-2.0

Why Lesspod?

In 2015, carbon emissions from data centers exceeded the carbon emissions from air travel. There are 16 million websites being added to the Internet every month. Most websites require servers to host and most of the servers are underutilized. There are a lot of unused server resources costing us carbon emissions and money. We can reverse this damage by going serverless.

Lesspod's mission is to transition the Internet from server architecture to serverless architecture as soon as possible. To that end, we're building it as an open source project that anyone can utilize.

Our goal is to make it as simple as possible to host serverless websites and blogs. As we build Lesspod, we stare at the possibility of the serverless Internet.

Demo serverless website (Vuejs client): https://www.lesspod.org

Demo serverless website (Reactjs client): https://www.lesspod.com

Free Forever Web Hosting (Cloud Limits Apply)

Lesspod helps to host free websites and blogs for people who don't want to pay for recurring hosting fees within free limits offered by cloud providers like Google Firebase and AWS Lambda (costs something). Lesspod is dynamic and offers a better alternative to static sites which can be difficult to install and manage.

Choice of building blocks

We want to keep Lesspod as simple as possible for everyone to customize and build upon and it requires us to be as minimalist as practically posible.

• SQLite 3 (using sequelize ORM LOCAL ONLY for development purpose)
• Express 4 (Most popular node.js framework)
• EJS VueJS (Clean, Fast and Easiest to Learn)
• Serverless support (aws/firebase/azure etc)
• Bulma CSS framework for design
• Parcel.js Webpack 3/4 as a bundler
• js-cookie npm module (In future: Store for local storage: https://www.npmjs.com/package/store)

Note: The local api gets discarded on deploying to Firebase. So, It's vuejs talking directly to Firebase.

Contributing To Lesspod

Key software versions. Node: 10.0.0 and NPM: 6.0.0

Running the API component (Local): http://localhost:1234/

At this point we're directly talking to firebase and not making progress on the local API component. Eventually, we'll support AWS Lambda, Azure Cloud Functions etc. and add support for building locally and deploying on a set of faas/serverless platforms.

Skip following steps for now:

$ git clone https://github.com/Rajan/lesspod.git   //clone repo
$ cd lesspod  //move to project directory
$ npm install //install necessary packages 
$ node -r dotenv/config index.js //setup environment variables

Note: some npm modules may need to be installed manually.

Running the vuejs client in another commandline window: http://localhost:8080

$ cd client/vue
$ npm install
$ npm run dev

Running the react client in another commandline window: http://localhost:3000

$ cd client/react
$ npm install
$ npm run start

Keep things as simple to understand for others as possible. Also, add comments to any code being contributed.

To deploy Vuejs client to Firebase

1. Create a Firebase project and enable email auth, create firestore db, enable storage etc.
2. Execute npm init with all options ON.
3. Add firebase properties in the /client/vue/src/config.js
4. Install all npm packages.
5. Run "npm run build" and "firebase deploy".

We're also implementing Nuxt.js (WIP).

Note: Vuejs client is a bit behind the reactjs client and we're looking for contributors who can support the development of vuejs client.

Feel free to create an issue. Kindly include your package.json, OS and browser details.

Deploying React client to Firebase

Check out README inside /client/react for instructions.

Keep things as simple to understand for others as possible. Also, add comments to any code being contributed.

To Do List

Immediate Feature Goals

• Authentication/Authorization using SQLite, Passport and Express
• API Module for SQLite
• Adding New Pages + Menus
• Landing Page Design
• Deployment to Firebase (WIP)
• Unit Tests for local SQLite API
• Logged In Page Design (Dashboard basic)
• Blog Post Index Design
• Blog Post View Design
• Blog settings i.e. changing logo, tagline etc. (WIP)
• Profile Page
• Editor Selection and Integration (using Quill editor)
• Comments Integration (Disqus, Facebook and ?)
• e2e testing using npm run e2e inside /client/vue dir

Midterm Feature Goals

• Code coverage testing
• Page views tracking and reporting
• React client for Lesspod (Sai is on it)
• Theming System Design/Dev
• Plugin System Design/Dev
• More Themes
• Theme Generator Basic
• Menu Editor to re-link existing pages with Menus

Longterm Feature Goals

• Desktop client for Lesspod

We accept pull requests. Kindly add comments to your code before sending one.

lesspod's Issues

Deployment to Firebase (pod deploy firebase)

We need a system that will replace all the axios calls with firebase CRUD embedded in the web pages. The goal is to turn our local SQLite based system into Firebase based system in the cloud.

We could create a command like below which runs a shell script to accomplish the task.

pod deploy firebase

Firebase remaining: Menus, Page.vue, Navbar.vue, Posts.vue

Ideally, we should turn off the local API server and test it all and fix everything that fails.

Author and created date doesn't show up under post title in Viewpost (Firebase)

`npm run dev` does not work for vue client

Add new pages and display them

after a menu is deleted, the background color of home page changes to white

Blog post by months

We need to sort filter blog posts by a month/year combination (e.g. March 2018). We need to display the list of months for which there exist one or more posts.

editor is gone when post's content is cleared in Editpost.vue

This happens when the content is deleted completely

Tweet embed

Embed or add tweets with the ability to retweet that tweet.

Relevant/similar posts

Wordpress famously displays related/similar posts on the right side (generally).
It does kind of drive user engagement because once I read a good post, I want to read more.

Text not saving/displaying in the New Menu in deployed Firebase

Customize Icon, Favicon and the Logo

Everything should be customizable via profile and settings menus.
People should be able to change the logo, square icon and favicon.

Quality Writing Experience

Medium.com doesn't let people build email lists but they do offer a great writing experience.
We need to do the same with our Quill editor and create a great writing experience/UX/Design.

Enable/Disable blog menu

We need to add an option under settings to enable/disable blog menu.

Clicking on Logo (after being Logged In) logs you out

Add new menus and store the state

Video embed to the editor

Ability to embed youtube videos.

Menus are added but not preserved/displayed (Firebase)

Once added, they do show up but only once. After that they're gone.

Imageupload should work from editor

One should be able to upload an image from quill editor in Newpost.vue and the image should be rendered and saved further. We may need to use a backend which can be firebase in this case.

Landing Page Design

Needed components:

• Easy way to star the project (above the fold)
• Standard Login box and a link to Sign up
• Quick Description of the project (140-200 chars above the fold)
• A place for GIF or Video for a quick demo (above the fold)
• Request to contribute/donate etc.
• Include Readme alongside the login box on the right.

Serverless component not starting

while running node -r dotenv/config index.js the terminal throws

Error: Cannot find module '.env/config'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at module.js:669:12
    at Array.forEach (native)
    at Function.Module._preloadModules (module.js:668:12)
    at preloadModules (bootstrap_node.js:362:38)
    at startup (bootstrap_node.js:148:9)
    at bootstrap_node.js:504:3

Login to deployed firebase instance doesn't work

The account has been created.

Login problem in https://lesspodorg.firebaseapp.com/

vue.esm.js:1741 Error: Function Query.where() requires a valid third argument, but it was undefined.
    at new t (firebase.js:1)
    at validateDefined (firebase.js:1)
    at t.e.where (firebase.js:1)
    at o.fetchData (Home.vue:271)
    at o.created (Home.vue:147)
    at St (vue.esm.js:2921)
    at o.e._init (vue.esm.js:4630)
    at new o (vue.esm.js:4798)
    at vue.esm.js:4310
    at init (vue.esm.js:4131)

Logo Proposal

Good day Sir @Rajan I am a graphics designer and I am interested in contributing to your project by proposing a logo design which I am going to do as a gift for free here. If you will permit me I will start my design immediately. I have noticed that the project has no logo yet. Thanks and best regards!

-Tobaloidee

Query: Can we move the code base to from master branch to develop branch?

Moving the project from master to develop will help at release cycle, where the freezed features will live on master branch.

Its not an urgency, but required step

Editpost.vue: pageURL gets overwritten (Firebase)

When a menu-post is edited. The pageURL parameter is gone.
Maybe we also need to preserve other parameters.

List posts from an author

We need to give users a way to find posts from a particular author by listing all posts from a specific author. Also, list all authors for a blog and clicking on them should bring up the list of posts.

menu editor for menu deletion

At this point, it is simple to add menus and submenus but it isn't possible to delete them.

Need to write unit tests with Jest

We need to start writing unit tests so that the problems are discovered with new commits faster.

https://medium.com/pixelmatters/unit-testing-with-vue-approach-tips-and-tricks-part-1-b7d3209384dc

https://medium.com/@kevin_peters/unit-testing-vue-js-components-with-jest-86e14ef499da

Layout settings

There are some themes which are a single column, some are 2 column and some are 3 columns.
We need to offer all these options and let people customize it.

Recommended Posts -> Latest Posts

Real Latest Posts on Viewpost.vue instead of recommended post.

Latest post in Viewpost.vue not implemented in Firebase

Menus don't show up after logging in (Firebase)

If you log in locally, you will see menus like NEW and Person Name etc. with drop downs. so, Firebase work seems to be incomplete.

[BUG] [Vue warn]: Error in beforeMount hook: "TypeError: user is undefined"

How to reproduce:

Launch vue client (standalone)
click on blog
go to web console

Edit post doesn't go to home page after edit

Edit post doesn't go to home page after edit

Display post summary in /blog

We're currently displaying the only title of the blog post but we also need to display summary and make it all look and professional.

Email collection (subscribe) feature

We should have a floating form etc. to collect email and be able to see/download it in the csv format.

Image upload in the editor

People should be able to add images to the posts.

Vue Client: Unable to login after creating new account

warning (server component):
(sequelize) Warning: Model attributes (email) passed into finder method options of model User, but the options.where object is empty. Did you forget to use options.where?

error ( vue client):

POST http://localhost:1234/v1/users/login 422 (Unprocessable Entity)
Login.vue?03db:118 Error: Request failed with status code 422
    at e.exports (spread.js:25)
    at e.exports (spread.js:25)
    at XMLHttpRequest.l.(anonymous function) (https://unpkg.com/[email protected]/dist/axios.min.js:8:3278)

node: v8.9.4
npm: 5.6.0
os: OSX 10.13.4
note: New account accounted is added to db/users, verified.

ImageResize needs fixing in Newpost.vue

Uncommenting ImageResize code in main.js (under client/vue/src) and inside Newpost.vue produces errors. There are errors inherent to resize module.

unable to create a new post in vue client

content is always empty and hence the following condition fails.

if (title.length && content.length) {

Auto Login after registration is broken on the hosted instance

It shows navbar without the menu. The token is not being set or something.

Deploy Lesspod.org (to Firebase)

Mailchimp Integration for subscribe with email sticky bar

We pitched to an IITian and he requested it.

Add disqus comments to viewpost

(TODO) Please add immediate feature goals, mid term feature goals and long term feature goal checklist

Description: Please add the detailed checklist of features, divided into divisions as immediate, mid term and long term.

Menus shouldn't expect the user to be logged in (Firebase)

[Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property 'id' of undefined"

found in

---> <Navbar> at src/components/Navbar.vue
       <App> at src/App.vue
         <Root>
warn @ vue.esm.js?efeb:591
logError @ vue.esm.js?efeb:1737
globalHandleError @ vue.esm.js?efeb:1732
handleError @ vue.esm.js?efeb:1721
callHook @ vue.esm.js?efeb:2923
mountComponent @ vue.esm.js?efeb:2765
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
patch @ vue.esm.js?efeb:6091
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
patch @ vue.esm.js?efeb:6130
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
Vue._init @ vue.esm.js?efeb:4640
Vue @ vue.esm.js?efeb:4729
(anonymous) @ main.js?1c90:101
(anonymous) @ main.js:127
./src/main.js @ app.js:4638
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:4655
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
vue.esm.js?efeb:1741 TypeError: Cannot read property 'id' of undefined
    at VueComponent.initNavbar (Navbar.vue?cd91:218)
    at VueComponent.beforeMount (Navbar.vue?cd91:165)
    at callHook (vue.esm.js?efeb:2921)
    at mountComponent (vue.esm.js?efeb:2765)
    at VueComponent.Vue.$mount (vue.esm.js?efeb:8540)
    at VueComponent.Vue.$mount (vue.esm.js?efeb:10939)
    at init (vue.esm.js?efeb:4137)
    at createComponent (vue.esm.js?efeb:5608)
    at createElm (vue.esm.js?efeb:5555)
    at createChildren (vue.esm.js?efeb:5682)

If there are menus, they should show up without user being logged in.

Setting to disable user registration under Settings

Menus (logged out) not working in Firefox

Show posts even when user isn't logged in (Firebase)

http://localhost:8080/blog
Show menus even when the user isn't logged in as well.

(TODO) generate an issue template

Description: An issue template is required so that the person generating the issue have the idea of what are the information to be provided for the issue