decaporg/decap-cms

A Git-based CMS for Static Site Generators

decap-cms's Issues

GitHub as a backend does not work

Hello Developers,

I make my first steps with the Netlify CMS and do not understand how one can realize GitHub as a backend. I've already prepared everything on GitHub.com in own account for and have generated the client ID and Secret Key.

But I do not understand where you can find Access tab in the Dashboard. I see in the browser at /admin no such tab and does not find it. Or do I have to GitHub.com anywhere the client ID and Secret Key Enter?

Can you maybe help me figure it out ?!

Thanks in advance.

Add a home link

User needs:

• a way to get back to the dashboard

Currently, there is no way in the UI to return to the overview. Add a link in the top bar to return home (index / overview).

Acceptance criteria:

• User can see and click a link in the header that returns them to home. The text can just say "Dashboard" for now.

Image Widget - remove/delete

Create new post should initiate a "pull request" workflow

Note: The action of creating a new item should map onto the Github concept of a PR.

• Create new item == create a branch
• Submit item for review == Submit pull request
• Mark as OK to go live == Approve and merge pull request
• Publish == Master deployed

Acceptance criteria:

• Creating a new post should create a branch in the repository
• Branched items should be noted in the UI as "Draft"
• A user can click a button to mark the post as "For review", flagging the branch as a PR that is ready for approval
• A user can click a button to mark the post as "Ready to go live", approving the PR and merging it into master (but not actually live!).
• A user can click a button to publish the post, deploying master.

Technicalities of when PR is merged in are up to implementer - the stuff I said are just suggestions - it might make some sense to simply use a comment on a PR to note if something is "good to go live" rather than merge at that point, but I'll let those that know best decide. :)

Media Files - improve uploading

• Upload files in background
• Prepare as "blobs" to be committed on the backend

see TODO.md#media-files

Gitlab as backend.

As a gitlab user, it would be nice if you support gitlab too as the backend :)

Rich Text Editor

Implement Rich Text Editor, with the following characteristics

• Investigate base editor (Draft.js, slate.js, etc)
• Markdown renderer
• Visual Editor: Separate each content unit into an identifiable block (headings, paragraphs etc)
• Styles in popover menu
• Lateral menu for Block content creation (image block, embed block, horizontal rule block, etc)
• Image Uploads within editor
• Automatically remove images from upload queue if user deletes image inside editor
• Video Embeds
• Ability to deal with custom types of block contents (Defined in site configuration, e.g. image carrousel element)
• Switch views (Complete "visual" editor / Plain text markdown code view)

Starter Sites/Examples

see TODO.md#starter-sites

We should at first have starter sites for:

• Jekyll
• Middleman
• Roots
• Hugo

Later there are more to come and themes etc, would be great. But these four seems like the most important to start with.

Apply colour scheme from prototype CMS to new UI

Pick up the header/search box design, background colours and text styles that are already on the ember prototype.

I can work with whoever grabs this to tweak after that.

Suggestion for improve splitting with content editing and preview

Might be good to integrate this? https://github.com/tomkp/react-split-pane

Improve List Field

see TODO.md#list-field

Preview pane gets stuck

In the demo site, edit a post, then click "New Post" from the dropdown in the header. Now preview pane is stuck with the old post.

Markdown editor - minor issues

I'm grouping a bunch of minor issues for the text editor here to avoid creating a bunch of small tickets. Feel free to split them up if any of them need more discussion.

• Newline should always start paragraph block. If you're in a H1 and press enter, new block should be normal paragraph text.
• Pressing backspace or delete when a component (like the youtube embed) should delete the component
• Paste needs to format text properly (right now all text becomes H1)
• Type something, press shift+enter creates line-break, typing more deletes everything before the line break
• Make a paragraph with an internal line break in raw mode. Switch to rich mode. After line break, press enter. Now change block before line break to H1. Both paragraphs becomes H1.
• We will need to fix the flickering since it gets real bad when there's an image component

There is no obvious way to create a table for non-tec users.

I assume this whole thing is done to enable non-tec users like grandma to edit things.
But grandma has Libreoffice and she knows how to do tables, believe me.
Unfortunately grandma can not find any way to create or copy paste a table into this editor.
She would be happy, if she had a way to import a csv file.
I am now teaching her markdown - but then we do not need this editor anymore. Also she is laughing at me because she does not believe that tables with markdowns are so primitive, plus she just wants to copy-paste.
Conclusion: please do not stop development just because the most ultra-simplistic things are implemented - a product like this should also support tables.

Image uploads made on the text editor are not persisting the correct file path.

Add notes for drafts

User needs:

• to be able to discuss issues, changes and ideas for a draft with others
• to see any feedback received from others
  #52 is a pre-requisite for this ticket.

Acceptance criteria:

• User can type in a comment box and hit "send" to add a comment to the notes panel

Delete Entries

see TODO.md#delete-entries

fromFile/toFile - use promises

see TODO.md#formats

Date not added to new posts

Creating new posts in the admin UI fails to prepend the date to the filename.

File Widget

• Add/upload file
• Remove/delete file
• Edit file

netlify-api backend not being used when configured

i have tried setting up a netlify-cms instance configured to use a local netlify-git-api backend:

backend:
  name: netlify-api
  url: http://localhost:8080

the netlify-git-api daemon is running and accessible via HTTP on localhost, but the netlify-cms instance always tries to authorize via github.com. the app/backends/netlify-api.js module in the master branch of netlify-cms has references to https://github.com/netlify/cms-local-backend, which i imagine was an earlier name for the netlify-git-api repo: is the netlify-git-api backend supposed to be functional in master (i may have misconfigured its use somehow)?

Metadata Branch

This refers to using a orphan branch to store metadata.

• On mount, check if metadata branch exists. If not, create it.
• PersistToMetadata, retrieveFromMetadata

Content / "name" list broken on change

I can click on a new list to view, but the breadcrumb doesn't change?

meaningful commit messages

ability to have a custom commit message for the next save

Paginate published posts in overview

User needs:

• to not be shown every post ever published ever on one screen, for the sake of their computer memory

Rather than show ALL posts in the overview forever and ever, just show the first 20, and paginate there after. Given the new proposed wireframe, it would actually make a lot of sense to do a "show more" button at the bottom and incrementally add more posts to the end of the page.

Acceptance criteria:

• A user can see only the first 20 previously published items in the overview screen
• A user can scroll to the end of the first 20 items and click "show more" to reveal the next 20 (repeat to end)

Sketch UX for asset management in articles

Allow user to see an overview of posts that are being worked on

User needs:

• to see all posts that are currently in draft
• to see any posts that are looking for someone to review them
• to see any posts that are waiting to be published (go live)

UI: Show each of these types of posts in a kanban-style view, with 3 columns (see wireframe here: https://phae.github.io/netlify-sketch/review.html)

Acceptance criteria:

• Items are shown in 3 distinct columns, with items that do not fit into those columns split into a seperate section below
• Items are shown in most-recently-edited order first
• Items show date last edited
• Items show title of the post, which is also a link to go into that item's editing screen

Draft Support

• Publish flag, dependent on roots, jekyll, etc

see TODO.md#draft-functionality

remove hashbang

/admin/#/collections/blog

New error

Recent updates appear to have broken netlify-cms in some way. I am getting on the error below on https://moonsquads.netlify.com/admin/

Error while processing route: index.list Cannot read property 'loadEntries' of undefined TypeError: Cannot read property 'loadEntries' of undefined
    at loadEntries (https://cms.netlify.com/assets/cms.js:2405:29)
    at prepare (https://cms.netlify.com/assets/cms.js:2399:12)
    at setupController (https://cms.netlify.com/assets/cms.js:4160:18)
    at superWrapper [as setupController] (https://cms.netlify.com/assets/vendor.js:30338:22)
    at _emberRuntimeSystemObject.default.extend.setup (https://cms.netlify.com/assets/vendor.js:35136:12)
    at Object.callHook (https://cms.netlify.com/assets/vendor.js:58320:38)
    at handlerEnteredOrUpdated (https://cms.netlify.com/assets/vendor.js:57100:12)
    at setupContexts (https://cms.netlify.com/assets/vendor.js:57068:9)
    at finalizeTransition (https://cms.netlify.com/assets/vendor.js:57246:7)
    at https://cms.netlify.com/assets/vendor.js:56681:14

Managing multiple sites

Is it possible to manage multiple sites using the same admin instance in netlify? If not, how complicated would it be to add such a feature (and is it on the roadmap already?)? I don't have much experience with Ember, but this is one feature I'm looking for. The multiple backends feature that netlify has seems really cool., and generally, it seems like a very nice looking UI for static site generation.

Config: media upload folder can have different upload and public paths

MediaFolder should allow for the specification of both a source and a public paths.

Gallery Widget

see TODO.md#gallery-widget

Like the image field, but for a bunch of images that can be reordered, etc.

The list widget with an image widget can do the trick, but galleries are so common that it would be great to have a robust ui for it.

_{(EDIT by @tech4him1 to fix link and add quote)}

Navigations

see TODO.md#navigations

Authors & Profiles

see TODO.md#authors--profiles

Add sorting ability to list of entries

User needs:

• to more efficiently be able to locate a post when browsing manually

So, we should add some basic filters to reorder the list of posts that have already gone live.

Minimum options for now.

Acceptance criteria:

• User can click a link to re-order the posts from newest to oldest, and visa versa
• User can click a link to re-order the posts in alphabetical and reverse-alphabetical
  #50 is prerequisite for this.

When deleting a post the list doesn't refresh

When a user clicks "delete" on a post it still shows up on the posts list. The user has to do a manual refresh before it goes away.

Add a link to "create a new post" in UI

User needs:

• to be able to quickly and easily know how to start a new piece of work

In the first column of the workflow, add a link beneath the first heading to "add a new post".

See wireframe: https://phae.github.io/netlify-sketch/index.html

Acceptance criteria:

• User can click a link to create a new post (new branch)

Draft Handling

While the live preview in the style of the site, should lower the need to publish draft versions before publishing the live version of an update, Netlify CMS still ought to have some handling for drafts.

Here's a few options for draft handling:

Rely on the static site generator

A lot of static site generators have support for draft content, typically in one or two ways:

1. There's a boolean value in the meta data like "published" or "draft".
2. There's two different folders, one for drafts and one for published posts.

It's definitively viable to build an abstraction on top of this, exposing a method to fetch all drafts, promoting a draft to published or demoting a published post to a draft.

The tricky part here is how to handle preview builds.

One option that comes to mind here is adding support on netlify's end to indicate a draft build in the commit message. The downside of this is that this would tie the draft feature a lot to netlify unless other continuous deployment services added support for the same commit message format...

Rely on Git

The other option is to ignore the built-in support for drafts in the different static site generator and use git branches for draft handling.

Pull Request

One way to handle drafts is to automatically create a new branch for each draft and trigger a pull request. Netlify has built-in support for doing preview builds of pull requests and this is something that can also be configured with other continuous deployment setups like Travis-CI.

This does leave the question of how to get the preview URL for the pull-request build back to the content editor?

Staging Branch

Another option is a staging branch. With netlify a really common pattern for sites is to have a private staging version of the site that builds from one branch and a production version of the site that builds from the master branch.

The very simplest draft handling in this case would simply be to have content editors just work with the CMS on the staging branch and always just see staging previews.

However, actually merging changes into the production branch can be tricky since we can't really guarantee that the changes can be trivially fast forwarded, if someone has been doing work directly against the master branch. On sites with many content editors it also makes it tricky to publish changes gradually. If several content editors are working on drafts for different entries, then simply merging the staging branch into the master branch would publish all of them.

Not sure if there's a way to handle this without accidentally introducing a lot of the complexity of handling branching and merging in git to content editors (which is a no-go).

Other suggestions/Comments?

What's the main use-cases for drafts? Any other ideas for draft implementations?

Add a "notes pane" to the edit screen

User needs:

• a convenient place to see what's happened with a post over time, in context

As an MVP of basic discussion on PRs, add a panel to the side of the edit screen to house information.

For now, just list the major actions. See: https://phae.github.io/netlify-sketch/review.html (the coloured boxes in particular showing status changes) Commenting etc. can go in a seperate issue.

Acceptance criteria:

• User can click a link marked "Notes" from a tab menu above the preview pane.
• In most-recent-first order, a user can see who created the post first, who reviewed it and who published it.

Image widgets in lists have media folder set to 'null'

Image widgets used normally prepend the correct path to the uploaded image, based on the media_folder and public_folder keys in config.yml. However, if you use the image widget as part of a list widget, then the media folder is set to null. I presume that this is something to do with how the image widget is inheriting properties from the list widget.

The code I'm using to generate the list looks like this:

## config.yml
...
media_folder: "src/images/uploads" # Folder where user uploaded files should go
public_folder: "src" # strip this from the media_folder

collections:
  - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit
    label: "Post" # Used in the UI, ie.: "New Post"
    folder: "src/content/posts" # The path to the folder where the documents are stored
    sort: "date:desc" # Default is title:asc
    create: true # Allow users to create new documents in this collection  
    fields: # The fields each document in this collection have
      - {label: "Title", name: "title", widget: "string", tagname: "h1"}
      - {label: "Subtitle (optional)", name: "Subtitle (optional)", widget: "string", tagname: "h3", optional: true}
      - {label: "Featured Image (optional)", name: "featuredImage", widget: "image", optional: true}
      - {label: "Content", name: "body", widget: "markdown"}
      - label: "Image Attachments"
        name: "imageAttachments"
        widget: "list"
        fields: 
          - {label: "Description", name: "description", widget: "string"}
          - {label: "Image", name: "image", widget: "image"}

The image widget used for featuredImage gets the path fine (i.e. images/uploads/filename.jpg), but the image widget used in imageAttachments gets null (i.e. null/filename.jpg).

I note that on the TODO page there's a suggestion that you could make a gallery widget by using an image widget in a list (which is where I got the idea) so I assume that this use case has been tested — am I just missing something in the config?

Cheers,
Sam

Delete post

It shouldn't be possible to delete a post if create: false is set in the config.yml file

Jekyll layout template

Specifying a layout template per content type isn't clear in the README. For example, Jekyll frontmatter for a post should include layout: post. This isn't being generated with new posts. How should this configuration be made?

Environments

• Separate local/production builds

see TODO.md#environments

Roles

Permission control through roles would be great. Supporting the same roles as ghost would be great here:

• Admin: can administrate all parts of the blog and add users
  • not necessary to have an interface for adding users in the first version
• Editor: a user who has can manage and publish posts, including the posts of other users.
• Author: a user who can only publish and manage their own posts.

This can be enforced by storing a .netlify-cms.yml file with role permissions in the git repo and reject/permit commits through a git hook that reads this yml file.

Deleting the only post deletes a lot more stuff in Jekyll

I've set up a demo blog using the Jekyll + netlify CMS starter project and I get an issue where deleting a post through the CMS causes the following files/folders to also be deleted:

• about.md
• feed.xml
• index.html
• _sass/
• admin/
• css/

To reproduce:

1. setup a new project according to the Jekyll + netlify CMS instructions
2. set up a single user and go to /admin
3. edit the Welcome to Jekyll post and click the delete button in the settings menu

This doesn't happen when deleting a post if there are others, just when deleting the last post so there are no posts left.

Ember error with code examples

On the README there is a section with an example about how to setup a select dropdown widget.
https://github.com/netlify/netlify-cms#extending-and-overriding

When I drop in the example directly as shown I get the following error.
Uncaught TypeError: Cannot read property 'isLegacyViewHelper' of undefined vendor.js:16670

Any thoughts?

I am using jekyll and running the site locally.

These are the contents of my admin/index.html file

---

---
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Content Manager</title>
  <!-- Include the stylesheets from your site here -->
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="//cms.netlify.com/assets/cms.css" />
  <!-- Include a CMS specific stylesheet here -->

  <!-- Set the CMS environment -->
  <script>window.CMS_ENV="{{jekyll.environment}}";</script>

  <base href="/admin/">
</head>
<body>
  <script src="//cms.netlify.com/assets/vendor.js"></script>
  <script src="//cms.netlify.com/assets/cms.js"></script>
</body>
</html>

{% raw %}
<script type="text/x-handlebars" data-template-name='components/widgets/author-control'>
  <div class="form-group">
    <label>{{widget.label}}</label>
    {{view "select" content=widget.field.authors value=widget.value}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name='components/widgets/author-preview'>
  Written by
  <span class="author">{{widget.value}}</span>
</script>
{% endraw %}

Improve Preview Pane Scroll Behavior

see TODO.md#preview-pane-scroll-behavior

Image Widget - display filename

Widget Relations

see TODO.md#relations