apostrophecms / apostrophe

A full-featured, open-source content management framework built with Node.js that empowers organizations by combining in-context editing and headless architecture in a full-stack JS environment.

ApostropheCMS 3

ApostropheCMS is a full-featured, open source CMS built with Node.js that seeks to empower organizations by combining in-context editing and headless architecture in a full-stack JS environment.
Documentation »

Demo · Roadmap · Report Bug

About ApostropheCMS

ApostropheCMS is content software for everyone in an organization. It helps teams of all sizes create dynamic digital experiences with elegance and efficiency by blending powerful features, developer happiness, and a low learning curve for content creators. Apostrophe has powered websites and web apps for organizations large and small for over a decade.

Built With

• Node
• MongoDB
• Nunjucks

Getting Started

To get started with Apostrophe 3, follow these steps to set up a local development environment. For more detail, refer to the A3 getting started guide in the documentation.

Prerequisites

We recommend installing the following with Homebrew on macOS. If you're on Linux, you should use your package manager (apt or yum). If you're on Windows, we recommend the Windows Subsystem for Linux.

Software	Minimum Version	Notes
Node.js	12.x	Or better
npm	6.x	Or better
MongoDB	3.6	Or better
Imagemagick	Any	Faster image uploads, GIF support (optional)

Community

Discord - Twitter - Discussions

Contributing

We eagerly welcome open source contributions. Before submitting a PR, please read through our Contribution Guide

License

ApostropheCMS is released under the MIT License.

apostrophe's Issues

Reasonable default float and size for each widget, ability to specify from the template

The pullquote widget needs to be float left, 1/3 size by default. Most image-related widgets would benefit from an easy way to say in the template, "this is a hero unit, images should really be 1/2 size and centered by default." Etc.

Support for singleton widgets

You should be able to introduce widgets as singletons without the context of a rich text editor.

aposArea 'styles' control should be supported in options

The style controls should be configurable in an aposArea, such that I could say

{{ aposArea( slug: slug, area: area, edit: edit, controls: [ 'style', 'bold', 'italic' ], style: [ 'h3', 'normal' ] ) }}

[feature] Edit image description from slideshow modal

It would be ideal for the user to be able to change the image desc, title, etc. from the modal slideshow edit context. Currently the user has to go to media, and manage from there.

loading gif disappears after first upload during multi-file upload

When you select multiple files you only get a loading wheel for the first one, making it hard to tell if it recognized that you selected multiple files while the next one is being uploaded.

If user inserts twitter widget, then formats it, widget is turned into text and breaks.

Noticed this while trying the demo. To recreate do the following

1. Create a new page with single page template.
2. Edit the content slot.
3. Insert twitter widget.
4. Without closing / saving the slot, select the widget as if it were text.
5. Choose a heading style, ie: heading5 from the formatting dropdown.
6. Save the slot.

Results:

• Widget preview text appears and widget doesn't function as expected.

DOM hoister can make content a child of a widget

Make sure this never happens. You'll have to check for it in the hoister, because content that is already a child of a widget is usually there for a reason (snippet widget etc).

Thoughts on using Twitter's Bootstrap as CSS foundation?

Might make it easier to "modularize" components as they would all follow same ruleset. Also might make it easier to customize or "theme" site as well as admin components. I pretty much plan on extending/overriding the current styles with bootstrap anyway. Just wanted to get your feedback incase you had already considered it or you already based the css on a foundation like that?

Namespace the icons

Everything in Apostrophe is namespaced, including css. The icons currently do not have an apos- prefix on their CSS classes. Let's clean this up before it becomes a problem to change it.

Height of controls is inconsistent

The toolbar control height needs to be nailed down, no matter what is happening outside of that context CSS-wise. The dropdown you use to pick a container element is often not as tall as the icons. If there are controls that don't have icons yet, the height must be consistent with the icons, because this is going to come up with custom controls on projects.

Using other CSS Preprocessors

LESS is cool but I prefer using SASS (node-sass) or Stylus. Can I easily switch CSS Preprocessors from LESS to something else?

Top nav dropdowns remain open when modals open and are blocked by modal overlay.

I'm sure you guys are on top of this one, but I noticed there was no open issue for it.

To recreate

1. Login
2. Click menu item, for example "snippets"

Results

• Modal opens
• Submenu remains open and partially covers the "New Snippet" button
• User can't close the submenu because the modal overlay is on top of the nav item.

Discussion
The expected interaction would be for the top nav to close once a nav item is clicked. However, if you intentionally are leaving the submenu open, consider moving the top nav above the modal overlay so a user can still close the sub menu if they wish.

Note: could be related to #12 since namespacing the top nav "open" class (ie: "apos-accordion-items-open" would make it much easier to do a find / remove for the class when modal opens.

Sandbox project needs LESS middleware set up

Toolbar dropdowns should behave naturally - wipe down on mouse-over, and wipe up on mouse-out.

I can't see the controls when working on a long text

The toolbar is offscreen when I work on a long document. Could be overflow: scroll, could be a floating toolbar, but it's gotta be onscreen and it can't be in the way as I type.

Crop icon is needed

Caret should not wind up after first paragraph if I paste three paragraphs of vegan ipsum

When I paste three paragraphs from vegan ipsum, the caret winds up positioned after the first one. This is a side effect of our necessary and useful DOM flattening mechanism. Rangy's selection save and restore is not quite smart enough. Write a save and restore for the collapsed selection case (caret) that is smart/dumb enough to work.

'Normal' formatted text in a Rich Text Area needs a hook for styling

I found this out when I tried to apply padding to a block of normal text- it's simply wrapped in a <div>, which means I can't select it in CSS without blowing up the entire editing interface. Normal text should be wrapped in either a div with a class or a <p> tag. It sounds like this will require some post-processing after Save has been hit on a rich text area.

No license

Is this MIT license or some other? It looks promising but I can't find any license to suggest we can actually use it... please add a license.txt

minSize property on slideshows should be enforced for uploads

We're passing it to the cropper but that's no use if the image is too small to begin with. Make sure you communicate that the image was too small, otherwise NO POINTS!

The toolbar is way too wide for some areas

Maybe it becomes a floating toolbar, maybe we add an option to put the widgets in a dropdown on narrow areas... but the current setup is busted

HTML mode for Rich Text editor?

Ive caught some formatting bugs, specifically with the tables, and would like to get access to the HTML code underneath to fix any little bugs. Perhaps a button to switch to HTML mode like other editors?

Crop button is invisible in portrait images

It's not the size, it's the aspect ratio:

http://dl.dropbox.com/u/25049152/Screenshots/04w.png

broken appy link in readme

In the 'Configuring Apostrophe' section:

"You'll need to npm install the node-apostrophe npm package in your project, as well as uploadfs, mongodb and express. You might consider using http://github.com/punkave/appy, which eases the burden of setting up a typical Express app that supports all the usual stuff. But it's not a requirement."

Readme should be updated to reflect the state of appy/where you can get it/how it is related to A2.

Kill most widget previews in the widget editors entirely

The previews in the widget editors themselves are mostly useless now and they just don't look good. The need for these largely went away when we put floating and size controls in context.

anchor naming in URL should generate appropriate href

When you create a link within an aposArea, the dialog contains options for setting an href and an anchor name. If you are filling in an anchor name (the destination that you are linking to from within the page) the URL should automatically become href="/link/to/page#anchor-name".

Clean up links added with the link control

Auto-add http:// where appropriate and so on.

Build a new page tree reorganization tool, not based on jstree

http://mjsarfatti.com/sandbox/nestedSortable/ looks like our new friend.

Issues with usability of edit modals

I like the modals overall (reminds me of Drupals admin ;) ) however I believe there are a few usability issues with their current iteration:

When multiple modals are opened (a behavior which seems odd at first, but I'm beginning to see the usefulness of) multiple modal overlays are created.

• If a modal overlay exists, should we skip adding another one and just open open the window?
• Can we provide orientation to the user indicating how many modals are currently open?

It's not clear that pressing "esc" on the keyboard will close the modal

• Novice computer users might not be used to the "esc" to close convention.
• Only some modals do have a "X" close button... which makes it confusing when you first encounter a modal with no close button.
• I would suggest adding a "X" button AND a note "press esc to close" to all modals.

Keep up the good work!
-Matt

import statements and CSS minification

Using @import to load a font in a LESS file doesn't work when all of A2's styles are minified into one file, since @import statements need to come first in a stylesheet.

This shouldn't be too difficult to fix since font import statements don't have to be declared in a specific order relative to the rest of the stylesheet.

pageLink() macro uses item.url which is empty

I just noticed this now, and I swear it was working earlier, but the pageLink() helper renders a link with no href. Seems to be that it uses {%- if options.url -%} when url is empty. Should it be using {%- if options.slug -%} instead, which is not empty?

Support for areas not in the context of a rich text document

You should be able to create areas that don't feature a rich text wrapper. This would enable, for instance, allowing only videos or advertisements in a column.

You should be able to reorder the elements without using copy and paste as you would in a rich text context.

permissions settings are present even without people & groups modules

The page settings dialog contains "Who can see this?" and "Who can edit this?" dialogs even when apos-people and apos-groups aren't included in a project.

Split editor out of main module

Thus allowing us to more easily integrate different WYSIWYG editors.

Screenshot shows Apostrophe using the Raptor Editor.

Providing I get time, I will look at splitting out the editor into its own module, as when I start using Apostrophe I'd like to continue using Raptor Editor.

• Move editor JS & script includes into own module
• Main module can require this or similar modules to provide in-place editing of content
• Create apostrophe-raptor module

The current editor seems tightly coupled with the apostrophe module. I'd appreciate any advice you think relevant to someone looking to perform this decoupling work?

In Rich test editor, can you create </p> returns instead of <br />?

Seems I can't get the text editor to wrap paragraphs in

tags. Instead it seems the default behavior is to use
tags.

Is this a setting? Is there a way to over ride this ?

Help Stuart fold "sections" styles back into module, make available in sandbox

The "sections" module has groovy styles in CUSP but they are at project level. Help @stuartromanek get these into main.less in the sections module so there is a reasonable default behavior and so we can brag about this feature in a publicly available sandbox site. Our next project should not have to override the styles for sections unless it has a real need to present them differently.

Sizing and floating decisions should be made in context

We can put buttons for these jobs on the widgets in context. (Contexts that are super narrow are poor candidates for floating and custom sizes in any case.)

Once this is done, there is still a preview in most cases in the widget editor, but it is just there to preview what you picked and any decisions that don't fit well in context, like the number of items in a feed.

The slideshow widget loses its in-modal-dialog preview entirely because it is just not that interesting and eats real estate.

When using the media widget, recent media items are not clickable.

To recreate:

1. visit http://demo2.apostrophenow.com/slideshow
2. Click edit button for the bottom rich text slot
3. Click the "photo/image" icon
4. Modal opens: Under the existing media, "Recently Added In Media Library:" try clicking an existing photo.

Results:

• While interface suggests clicking an existing item will select it for use, nothing happens.

Cannot edit in IE10

"Cancel" and "Save" buttons of areas do nothing.

When creating a slideshow or marquee, options save to database save to database - but this is not well documented.

Adding here for reference, I was banging my head for a a while on this one. It's not a bug, its just and unexpected behavior that can result in insanity.

If you define an aposSingleton({type: "marquee", delay: 400, widgetClass: "custom class"}); etc. these options are saved to the database when the user first uploads a photo. (is this for performance?)

So, changing these options later in your design will not effect the data!!!! New settings will only take effect if 1.) the areas type is changed, or 2.) the DB entry is removed.

Aside: The more I dive into apostrophe, the more I realize how complex and full of option it is. Looking forward to the new documentation! :)

Loaders can't see req object, can't check permissions

The getArea method is supposed to come after permissions checks but that won't cut it if the area needs to call loaders which in turn need to check the permissions of resources. We're stubbing this out with an empty req object for now, which means we'll see only public resources if we check permissions in loaders. Probably getArea, getPage, etc. should take a req object and look at req.user as needed. That is a significant refactoring.

Perform a default crop when aspect ratio is specified

If an aspect ratio is specified for a slideshow, make sure you perform a default crop, taking both that and the minSize (if any) into account.

Slideshow functionality - swiping for touch screens

Since 100% of web projects moving forward range from mobile-accessible to fully responsive, slideshows should act accordingly and respond naturally to swipe gestures.

Thoughts?

change aposArea's options to accept 'page' and 'name'

Rather than supplying slug and area, the arguments for aposArea might be more convenient as 'page' and 'name', where page is either 'global' or the current page context. Backwards compatibility for slug and area would be good.

Small images get doubled

Just like Apostrophe 1.5, Apostrophe 2 won't scale an uploaded image bigger than it originally was. However in slideshows we use backgrounds in such a way that we wind up seeing double when the original is small:

http://dl.dropbox.com/u/25049152/Screenshots/04s.png

Slideshows: images currently in a slideshow no longer appear in the modal

Slideshow editor modal always shows an empty set even if the slideshows have images. The slideshow I'm editing in this screenshot has two images

Slideshows of uploaded files

Slideshows should exist. It should be possible to upload a mixed group of files of any type. The resulting presentation should just do the right thing, displaying images as a slideshow and displaying non-images as download links (we did this successfully on GP). The BlueImp file uploader should be used to support multiple file upload.

Widgets should use the new apos.modalFromTemplate function

Widgets should use apos.modalFromTemplate.

Singleton items should NOT have float / size controls

Because these are intended to be more rigid layout elements, the enduser should really only have control of the content of singleton items. For example, for a singleton image, I should be able to upload / choose a new image but should have no control over the size or placement of the image. That would be up to the front-end developer.

Namespace 'open' and 'previewing' classes

Kerry, please namespace all CSS classes. If we are not consistent from the start it will be a pain in the ass later. Thanks!

I came across these in layout.html but I'm not sure where all of the occurrences are.