🤔 Is RSS/Atom support planned for in the future? I could see cuttlebelle being very useful for a simple blog 😍 .

I tried creating a .env file and paste this code BROWSER=none. But I have found that this works only in create-react-app.

Please suggest a solution for this asap.

I'm trying to deploy to firebase which requires a /404.html to be present.

The index folder is special. It represents the root of your website. It will compile to yourwebsite.com/. Note that the _shared folder does not have an index.yml file. That means this folder won’t be generating any web pages.

pages like /404/index.yml create site/404/index.html Is there a way to add site/404.html?

This can be either done with webpack or watching for assets inside an assets folder... Not sure yet.

G'day,

I'm getting a couple of security warnings when I npm i:

I'm having a problem where components are being rendered but the _pages object is missing on the first render. If I save the component file manually after cuttlebelle is already watching it renders properly. All variables are missing (declared in .yml and the .md files).

I can put together an example but just wondering if you had any thoughts first...

Most important feature, imo.

So when I declare proptypes like: level: PropTypes.oneOf([ 1, 2, 3, 4, 5, 6 ]).isRequired, then the docs should show these options.

first i tried running staystatic small example for a blog. it failed. i reported back a month ago.
decided to build your "website" git repo - turns out it fails the same way.
it does not seem to be windows friendly with many error on you commands.

trying with linux:
on windows's ubuntu - it builds without noticeable errors. but the index page looks completely broken much like i remembered from the staystatic blog.

sadly, no errors to report. can you try it on a windows machine ? (node 8-10)
btw, yes I ran all the correct commands.

To make it consistent how we call components we need to name our props, even the default ones.

So this:

const Header = ( props ) => ()

becomes this:

const Header = ({ _ID, _body, _parents }) => ()

I started playing with Cuttlebelle. I am coming from a ReactJS perspective, I so felt at home. However, does Cuttlebelle only use JSX for layout? E.g. I created a very simple component to change internal state on click. It didn't work. It didn't even log console messages.

I am trying to do some action on click event. But something like this doesn't work. (By doesn't work, I mean page renders, but nothing happens on click)

<footer onClick={() => console.log('footer')}>
       { footer }
</footer>

Does cuttlebelle strip out the event handlers?

How create a docker for this?

Jest is already installed, just need to write the tests

I am trying to create a proxy of a local website using cuttlebelle -w but I cannot change the settings for browser-sync.

It would be nice to be able to pass an object to cuttlebelle -w with additional options for browser-sync 💯 . Happy to help out with this if needed.

Many markdown variants support latex math: https://github.com/cben/mathdown/wiki/math-in-markdown

Any plans to add support for this?

Per the docs, to enable props documentation it only relies on PropTypes, can we expand that to check for Flow types (and possibly TS in the future?) and render those accordingly.

Docgen supports Flow, should be able to update the docs cli https://github.com/cuttlebelle/cuttlebelle/blob/master/src/docs.js#L462 to cater for it.

Hi

Any plans of releasing a version 1.0.0 (no alpha?)

When changing layouts/components under ./code/ cuttlebelle successfully detects the change and rebuilds the site, however changes in the React components are not reflected in the output.

Easy way to test this is to change the default page to have a minor change (prefix the <title> or something) after starting cuttlebelle -w - the change will not be reflected despite everything giving a green light.

Init would scaffold you a nice start with the default layouts and some useful additions.

Please

Hi! Um searching for a new, modern generator for me needs, and i'm loving cuttlebell concept so far. Does it os able to deal with multilanguage content?

So I've been reading through the docs and playing around with a sample site and this project looks really great!

Is it possible to create multiple paths with a single index.yaml file, though? I haven't been able to find a way yet.

Something like this

posts/index.yaml

posts:
  - post1.md
  - post2.md
  - post3.md
  - post4.md

Generating

/posts/post1/index.html
/posts/post2/index.html
/posts/post3/index.html
/posts/post4/index.html

This would be really useful to avoid a lot of boilerplate if each of those items have the same layout to avoid having a separate folder & yaml for each one; like blog posts

If I add the following line to page.js it will not render.

const Page = ({
  title, stylesheet, header, main, footer, script, _relativeURL, _ID, _pages,
}) => {
  const a = Object.assign({}, _pages});
...

 🔔  INFO:    Generating pages
 🔥  ERROR:   The react component page had trouble rendering:
 🔥  ERROR:   Error: Cannot find module 'babel-runtime/core-js/object/assign'

Adding a server to watch will help development.
I would also like to add optional soothing sounds to the end of each watch task so we don't have to watch the watch.

I need to create a page with several fragments coming from different files.

Example:

dir1/
    body1.md
    example1.json
    body2.md
    example2.json
    summary.md

All this would create 1 file index.html with a compound of those files (for example, a concatenation).

Is there a way to create a Layout or perhaps something to generate this?

Maybe I'm not yet familiar how to do it properly, but let's say I want to apply Bootstrap's img-fluid class to an image, or put it in a col so that it is responsively placed next to the text or below. Right now I have to create custom React components to layout stuff on the page.
This seems to be an overkill.
It would be very handy if I could use HTML tags and css classes for my content.

It's really difficult debugging js layouts when cuttlebelle only outputs single-line errors without stack traces or line numbers. In render.js, errors caught in the babel and react stages are logged using Log.error( error ) and it only needs to be changed to Log.error(error.stack) to achieve this. Or, the stack could be printed only with --verbose.

Is there a JS API for the generator? It would be ulono for integration with a complex Assembly such as to cause the Assembly inside the Gulp.

What's the recommended way to add pagination to blog posts or any other content type?

Thanks! Love the project.

When a markdown file is saved with Windows line endings (CRLF), and processed using Cuttlebelle on the Linux Subsystem for Windows, the parser apparently interprets the entire file as a single line.

For example, the front matter is interpreted as an H2, as shown in this example:

I assume that it expects prop-types to be installed as a node module when running cuttlebelle init.

This is a bit odd as I am initialising the project with nothing in it.

Marked is a bit old now, and is not well suited to plugin development.

I have implemented Markdown-It locally and have updated the tests etc. to match and I'm happy to provide as a PR. It allows for multiple plugins to be loaded, both custom and Markdown-It plugins from NPM. One thing I couldn't do was replace Marked-Man for the man page creation though.

There is also Remark, which is probably more widely used and seems to have more plugins authored. It wouldn't take much work to switch out my Markdown-It implementation for Remark as they are quite similar.

I feel like a really good plugin system for markdown will really help usability of Cuttlebelle, with less need to switch from one file to another in the index.yml for each page to achieve layout that could be more easily done with extended markdown.

I want this for myself, so will likely move to Remark, just wanted to do something with the most potential to share back to upstream if it is desirable.

In summary:

1. Should Cuttlebelle switch to a newer Markdown processor?
2. If so, should it be Markdown-It, or Remark, or something else?

could not see in the docs. testing blog features

Hi. I'm curious . Why did you choose GPL? Isn't MIT or another permissive license better in this case or is your choice intentional?

With 100000 files with 500bytes i'm getting:

$ cuttlebelle
 🐙           Cuttlebelle v1.0.0-alpha.67
🔥  ERROR:   Reading file failed for /opt/cuttlebelle/src/content/posts/2019-09-23-065514/index.ym/l🔥  ERROR:   {"errno":-24,"code":"EMFILE","syscall":"open","path":"/opt/cuttlebelle/src/content/posts/2019-09-23-065514/index.yml"}
🔥  ERROR:   Trying to initilize the pages failed.
🔥  ERROR:   "{\"errno\":-24,\"code\":\"EMFILE\",\"syscall\":\"open\",\"path\":\"/opt/cuttlebelle/src/content/posts/2019-09-23-065514/index.yml\"}"    

https://github.com/ssgberk/ssg-frameworks/tree/fea944a1e08f0a7e1e8d7889cbec907e50a86d69/JavaScript/cuttlebelle

Hello!

We were happy Cuttlebelle users from version v1.0.0-alpha.57 now. I would like to require if you have release notes.

When we started using v1.0.0-alpha.59, our site was wrongly generated. I think version v1.0.0-alpha.58 was OK (from our point of view) but version v1.0.0-alpha.59 had issues with sub lists and graphs.

Example:

# Example Contents

  1. [Setup](#Setup)
  1. [Basics](#Basics)
    1. [Testing connectivity and parameters](#Testing connectivity and parameters)
  1. [example_exception.json)](#example_exception.json))
    1. [Lookup the company's record.](#Lookup the company's record.)
  1. [Push Notifications API](#Push Notifications API)
  1. [Setup connection parameters.](#Setup connection parameters.)
    1. [Define a handler](#Define a handler)
    1. [More stuff More stuff More stuff More stuff More stuff More stuff More stuff More stuff More stuff More stuff More stuff More stuff More stuff ](#More stuff More stuff More stuff More stuff More stuff More stuff More stuff )
  1. [More stuff API](#More stuff  API)

You could try to render it with both versions of cuttlebelle to see the difference (and brokeness)

Classes should be the least we need to be able to add to each markdown render method:

https://github.com/chjj/marked#overriding-renderer-methods

Steps to repro:

1. Install cuttlebelle globally
2. Init new project
3. Run cuttlebelle docs inside the new project.

Should error out saying that you're missing these modules:

• babel-preset-es2015
• babel-preset-react
• babel-preset-stage-0
• prop-types
• react

Steps to reproduce:

1. Open Safari
2. Go to https://cuttlebelle.com
3. Wait a couple of minutes

Currently the generator seems to allow case insensitive content files to build correctly.

E.g.
index.yml

main:
 - introduction.md

File is actually named Introduction.md

This is allowed, requesting the generation to fail with errors instead.

What currently happens

Given a content structure like this:

.
└── index
    ├── body1.md
    ├── body2.md
    ├── body3.md
    └── index.yml

Props applied in body1.md, body2.md and body3.md are all merged with the props of index.yml.

Example:
body1.md

---
title: Body 1 title
---

Some text

body2.md

---
title: Body 2 title
---

Some text

and index.yml

title: Homepage
main:
  - body1.md
  - body2.md
  - body3.md

The props for this page inside _pages for example will be determined by a race condition on whichever partial will finish rendering first.

_pages: {
  title: 'Body 2 title',
  main: [
    'body1.md',
    'body2.md',
    'body3.md',
  ],
}

What should happen

Props should be namespaced to their partials. Given the structure and content above the props for the index page inside _pages should be something like:

_pages: {
  title: 'Homepage',
  main: {
    'body1.md': { title: 'Body 1 title' },
    'body2.md': { title: 'Body 2 title' },
    'body3.md': { title: 'Body 3 title' },
  },
}

Note that the direct prop to the layout in this case main will remain pure html you can just use in your layout.

Building this out now which will be a breaking change.

I produce mostly multi language websites. I would like to produce an output as:

-- mysite.com/
--- /index.html
--- /en
---- /information
---- /blog
---- /section
--- /it
---- /informazioni
---- /blog
---- /sezione
--- /pt
---- /informações
---- /blog
---- /seção

I would like to organize the content as:

-- content
--- _shared/
--- index/
---- index.yml (root index,html)
---- index.en.yml (/en/index.html)
---- index.it.yml (/it/index.html)
---- index.pt.yml (/pt/index.html)
--- info/
---- index.en.yml
---- index.it.yml
---- index.pt.yml
--- section/
---- index.en.yml
---- index.it.yml
---- index.pt.yml

Is it possible?