chrisdiana / cms.js Goto Github PK

I really like CMS.js, but there is one thing holding me back from using it in place of a normal blog CMS. I like the most recent post to be at the top of the page, but with CMS.js, the most recent is at the very bottom of the page. This really isn't user-friendly as it means viewers have to scroll all the way down to the bottom to see the latest posts, with the older posts just wasting screen real estate up at the top.

Is there a way to fix this? Can I change the order of the posts somehow?

When loading several pages, I have noticed that my navigation bar (.cms_nav) was lacking some links. My guess, the reason for that is that the end of content load is compared with page count using an ID-like-variable, not an actual counter.

Short explanation

Pages are loaded asynchronously and the "counter" (value that is accessed by Ajax success) is passed by iterating the filenames in getFiles(). The navigation bar is loaded when the counter is equal to the count of the pages. There can be a situation where a last page is loaded first and the navigation bar is created prematurely.

Long explanation

Load flow goes like this:

• CMS.getFiles(type) is invoked at line 428 where type === 'page'
• Inside getFiles(type) Ajax call is performed to get files in the directory
• On success .md filenames are extracted
• For each file CMS.getContent() is invoked at line 350 with iterated "counter"
• Each file is fetched in CMS.getContent() using an Ajax call
• On success 'parseContent()' is invoked passing a "counter"
• If counter === numFiles (i.e., if the "counter" of the file is the same as the count of files), the CMS.contentLoaded() is invoked (at line 245) and (if posts are loaded already), navigation bar is loaded

This means, that if the last page (alphanumerically on the getFiles() Ajax load) is loaded first, then counter === numFiles is true, and the navigation is not loaded properly.

Replication

Create pages A.mb, B.mb and C.mb. Make A substantially larger so it would load last. Navigation bar should only contain C (and maybe B) and not A.
Make sure to clean the cache.

It would be great to have a CLI utility to start a project (in addition to how it is set now with cloning). Thanks for the suggestion @ButuzGOL!

Maybe something like:

npm install -g cms.js
cms.js init
git push

It would be nice to directly add a DOT graph inside a post, something like https://github.com/geeklearningio/graphviz-markdown-preview.

To produce an SVG element from the graph definition there is http://viz-js.com/

I think it would be great if we would split up the "large" file into smaller chunks so it's more readable.
Is there any interest in it?

I'm not entirely sure how difficult this would be to create, or maybe it could just as easily be done as a .BAT file, but I think it'd be pretty cool to have some sort of simple script that if you did:

$ cmsjs new post 'Post Title Here'
-or-
$ cmsjs new page 'Page Title' pageTemplate

it would automatically create a new blank document in the appropriate folder (/posts or /pages), while also passing the appropriate variables into both the file name itself (if needed; posts would have the file creation date inserted) and into the front matter (pages would have a template defined).

Pages might be a little bit more difficult to set up properly, as you would probably want to include a way to insert a navigation item into the array in js/config.js, so maybe you could have something like:

$ cmsjs new page 'Page Title' pageTemplate navName targetWindow

...or use the page title as navName, and just drop that variable from the string above. targetWindow would be set as "blank" or "self", allowing navigation links to be opened in a new or same tab.

Anyways, I'm not sure how difficult something like this would be to implement, but it could be useful for people who expect to be doing a lot of publishing to their cms.js-powered site. I personally plan to use it to keep track of daily notes and logs of a project I'm working on. I don't require anything robust or feature-packed, just something quick, simple, and unobtrusive like cms.js.

In this issue, @ButuzGOL suggests porting cms.js to NPM. According to some reading I've been doing, CLI tools can also be created in Node.JS, which to me, makes the idea of a CLI tool for cms.js even more legit.

Thoughts?

I'm almost through with recoding cms.js to not rely on jQuery. Would that be something that I could attempt to merge, or should I keep that one on my own branch?

The main reason I ask is that some of my code replacements relies on ES6 which is fully supported in current browsers but is relatively new and may not work in older browsers.

I did already merge one piece of code for that which is a new way to do for: 'for (this of that)'.

Anyway, it's significant enough that I also wanted to get some opinions as I know while there would be advantages to not requiring jQuery that there may be reasons people want it to stay.

• create own themes
• directory structure for own themes
• ajax for getting the template.tpl

Hi there and nice to see @cdmedia back on track!

(As I'm not javascript-savvy enough, I'd rather try it with words.)

It would be nice to have theme support. A variable in config.js named theme = '' (default empty) could be set to the name of a directory in the newly created directory theme.

The structure of a theme would be a css directory and a file template.tpl. For example the default theme would be a directory css with poole.min.css and style.css in it and a file called template.tpl which includes the things we need for a own template. I'm unclear of how much we can put out of the index.html to the template, the css part in the <head> element? ...

In the config.js the variable would allow a corresponding ajax to get the themes/THEME/template.tpl and var tpl would get the individual themes content.

This would definitively allow more flexibility.

thanks

the code

function p(t) {
    var e = new Date(t);
    return e.setDate(e.getDate() + 1), [e.getDate(), e.getMonth() + 1, e.getFullYear()].join("/")
}

should be

function p(t) {
    var e = new Date(t);
    return [e.getDate(), e.getMonth() + 1, e.getFullYear()].join("/")
}

Hi there,

should we add <meta name="keywords" content="foo"> to the <head> of the index.html or possibly to template.tpl (if we would include such an option, see #74).

As a bonus, we should allow author: x, description: y and keywords: z as structured input via yaml in the pages and posts md files.

thanks

On line 331 in cmd.js the date parsing looks like this:

file.date = new Date(filename.substring(0, 10));

With a filename like /posts/2016-01-01_example-post.md the result is "/posts/201" - hardly a parsable date.

This is an ES6 feature not supported by all browsers

First of all, great project! I was looking for something just like this for a while for my personal blog.

I was setting it up according to the instructions, but I came across an issue. According to the user pages docs, these use the master branch instead of gh-pages.

cms.js still tries to use gh-pages for the posts though, because it only knows whether it's in Github mode or not and makes no distinction between personal and project pages.

So github is serving master for files (including config.js), but cms.js queries the gh-pages branch for posts. This can be remedied by keeping a copy of master in gh-pages, but it sounds like a specific case that should be catered for.

Keep up the good work!

Add support on how to use with Node.js Ecstatic server or Node.js HTTP-Server

So is the idea that you set the configuration and modify your theme in the master branch, and write your posts in the gh-pages branch?

It's the master branch that is served by Github but cms.js gets posts from gh-pages branch?

I made a simple theme, but I found some problems, such as the article list page, should not put the markdown into HTML, To my understanding, should select only p, filter out the img, h1...
The other question, in the article doesn't support HTML input, such as < p style = "XXXX" > < / p >

https://github.com/hi-caicai/cms.js-themes

Hi there,

in our index.html we use <script id="foo-template" type="x-template">. Should we consider using the html5 element <template> for this?

• template element vs. others
• MDN html reference: template

for consideration,
thanks

On line https://github.com/cdmedia/cms.js/blob/master/js/cms.js#L263 and https://github.com/cdmedia/cms.js/blob/master/js/cms.js#L265 url is defined inside an if statement. You should make it custom to define all variables at the top of a function scope, to make it easier to spot mistakenly global variables or add 'use strict'; at the top to catch these reference errors.

I didn't see anything about this in other issues. I have a habit of using the underlined h2 style in markdown.

like this
---------

I was getting some strange errors that I figured out has to do with the parseSeperator string in the settings object. I made a fix in parseContent method. I honestly don't even know if this is a real problem for other people, or just me. Am I doing something weird?

Would be cool to have the ability to have a "search for" with either title or title and content.

You could use HTML5 History API instead of window.location.hash. It allows to change state, title and URL of page without reloading the page.

One problem is that pages aren't real so refreshing the page will probably land on an invalid URL. Is it possible to handle that?

Here is a demo: https://html5demos.com/history/

for example navigating to http://chrisdiana.github.io/cms.js/demo/#/pages/about also requests all other pages:

Hi,

default ordering of posts would better be news on top ?
with an option in the config.js for changing.

b.date - a.date

see comment on commit: 8ba9ceb#commitcomment-15583266

According to the doc (https://developer.github.com/v3/#rate-limiting), one can only access github api 60 times per hour without auth. Do you think it is a problem?

Handle 'layout' tag in posts header (currently it's ignored).
Allowable values seem to be (from samples): 'default' and 'post'.

Nice and Light Weight Project Better have SEO Friendly Tags like
change `titlle , meta keywords, meta descriptions' on each page load.

This is a note for @maybegeek's PR #30. There was some conflicts that cause rendering to break so I had to revert momentarily. I'll make sure to merge your fix in once they are ironed out.

default: frontpage = '' = blog
user option: blog not on frontpage, instead page as frontpage, listing of posts defaults to #posts in that case
user option: blog not on frontpage, instead oage as frontpage and in the config user can choose an url for the listing: #mypostings

for right to left languages

Currently I like how it starts

1. git clone
2. git push to your project

But then I thought about to move marked and jquery as deps using npm
So I get

1. git clone
2. npm install
3. move files from node_model to lib
4. git push

Also I thought about steps

1. npm install -g cms.js
2. cms.js init
3. git push

I thought about it because

1. break project to sep files
2. use babel
3. min sources
4. write test
5. use dependancy manager
6. new features for project how to update own project

what do you think ?

HI - Great App, thanks for the job !

I would like to ask if there is a way to use cms.js without htaccess/apache, because i would like to use it with a free neocities.org account.

Don't know if neocities use apache, but if they do, with a supporter account we can upload restricted files maybe like htaccess.

Cheers - nibreh

Could we have a separate template for posts on the homepage? I have a certain layout I want there and a different layout I want when a user visits the actual post page.

Edit: I figured out how to implement this with only a 4-5 additional lines of JavaScript. #56 is the PR with those changes. Sorry, I didn't realize how easy it was to add that functionality until after I posted this issue!

Hi there,

our navigation could get more styleable, if we had a class value (e.g. current) for the currently viewed item:

<a ... class="cms_nav_link current" ... >

• For the pages we would have currently viewed page title == menu item title
• We also would have to check for static front page and the list view of posts (which could have a own static page), as well as decide if we want to add a class value (perhaps current-parent) to the menu item in which the posts are, even if they are viewed in single view.

thanks

I miss some CI config. We coukd run the linting for every commit and PR.
I suggest using Travis CI.

Please, don't name it cms.
cms.js do not let the user manage it's content.
The content is managed outside (by a text editor).

Every CMS provide:

• server side to store the data
• backend to write the content
• front end to let visitor view the content

CMS.js provide:

• tools to transform text into web page using theme.

So it is not a CMS.
https://en.wikipedia.org/wiki/Content_management_system

I would recommend to change the name.

On line 267 in cms.js file.name already has the url folder but url is made up by concatenating urlFolder + '/' + file.name;. The result is posts//posts/2016-01-01_example-post.md which seems to be an error.

Add post tags feature

I'm liking this as a system quite a bit, but have mixed feelings (or maybe just confusion) about the impact of taking a content site (vs app) and blocking immediate render. Is there a work-around for people who share this concern?

Address blank screen for loading issues. Possibly loader.

Many people use a cms or something like Jekyll for the SEO value. With this having no server to render pages, nothing will be indexed. Any solutions for this as it's a cms?

see blog

Thanks for this great package! Something I have been looking for for a long time :)

However, it occurred to me that config.js is open to the world, so anyone can read my github credentials by pointing their browser at js/config.js. Or am I missing something here?

Changing the file permissions from 644 to 640 doesn't work (blank screen), even when I change the file's group to www-data.

Any suggestions?

It's possible to use https://github.com/azu/git-commit-push-via-github-api to create commits on Github using its API, so could it be possible to add support to create new blog entries directly from the browser, adding new files with its content?

This is cool, I wish I could get it working on my web hosting account. CMS.js always reports that something went wrong, and to check config.js for the pages directory and .htaccess.

But I never changed the name of the pages directory, and the .htaccess from the download is present in that directory without modification. The mode is set to Apache.

Putting in the whole path like http://www.mywebhost.com/pages into config.js doesn't work either.

Order posts from newest to oldest

Maybe this is a silly question, but I don't see anywhere explicitly stated that there is support for nginx. Because I use nginx on my server I tried to make it working: I used the Apache Mode and then included in my configuration of nginx something like this:

server {
        listen 80;
        root "path to the directory of files";
        index index.html index.htm;
        server_name "name of the virtual host";

        location / {
                try_files $uri $uri/ /index.html;
                autoindex on;
        }
}

The important line is the instruction autoindex on, without it the web page displays an error.
Everything seems working fine.

I noticed CMS.js uses file creation/modification date to order posts. Is there any chance to use Date field in .md file to do so?

---
layout: post 
title: post title
date: 20160729

---

This did not work on my windows machine due to different line endings,

I changed this

to var infoData = data[1].split(/[\n\r]+/);

I think that should cover all cases but have not tested

Hey all first I want to say thank everyone who has contributed to the project. It's been awesome getting to see this thing grow. I've been MIA for a while and I apologize for not being as involved as I would like. That being said, if anyone is interested in helping administer PRs/testing/QC on CMS.js please send me a PM or email [email protected]. I really don't have the time right now to contribute but would really like to keep this alive and possibly jump back in once some time is freed up.