SyntaxError: Unexpected token u

[thiagodebastos]

I am trying to make roots-records work but I cannot get it to read the file output by roots-yaml. It works fine if I pass in json key value pairs. Any pointers on what I am doing wrong here?

The error

compiling... ✘ SyntaxError: Unexpected token u

---

Config

# app.coffee
    extensions: [
        yaml(),
        dynamic_content(write: {'posts.json': 'posts', 'portfolio.json': 'portfolio'}),
        js_pipeline(files: ['assets/js/*.coffee', 'assets/js/*.js']),
        css_pipeline(files: 'assets/css/*.styl'),
        records({
             posts: {file: 'posts.json'}, # also tried {file: 'posts.json', path: 'code'}
            }),
        config(related_items: 3)
    ]

---

The posts.json file

{

    "items": 

[

    {
        "_render": false,
        "_content": false,
        "_url": "/posts/posts.html"
    }

],
"code": 
{

    "items": 

[

{

    "date": "2014-01-15T00:00:00.000Z",
    "title": "JSON Test",
    "description": "Creative journey and case study for the Dawn Lister Therapy Centre website.",
    "category": "code",
    "tags": 

    [
        "webdesign"
    ],
    "relatedimageurl": "http://lorempixel.com/325/250/abstract/1",
    "googlewebfonts": "Lato|Open+Sans:400,700,800",
    "height": "125px",
    "_content": false,
    "_url": "/posts/code/JSON-test.html"

},
{

    "date": "2014-01-15T00:00:00.000Z",
    "title": "Isotope Test",
    "description": "A testing page for Isotope JS",
    "category": "code",
    "tags": 

            [
                "test"
            ],
            "relatedimageurl": "http://lorempixel.com/325/250/abstract/1",
            "googlewebfonts": "Lato|Open+Sans:400,700,800",
            "height": "125px",
            "_content": false,
            "_url": "/posts/code/isotope-test.html"
        }
    ]

},
"creations": 
{

    "items": 

[

{

    "date": "2015-02-24T00:00:00.000Z",
    "title": "First Art",
    "category": "creations",
    "tags": 

            [
                "colourful",
                "lovely",
                "psychadelic"
            ],
            "height": "125px",
            "_content": false,
            "_url": "/posts/creations/01-first-art.html"
        }
    ]

},
"thoughts": 
{

    "items": 

[

{

    "date": "2014-03-03T00:00:00.000Z",
    "title": "Hello World",
    "category": "thoughts",
    "tags": 
    [
        "colourful",
        "fun",
        "happy"
    ],
    "height": "125px",
    "_content": false,
    "_url": "/posts/thoughts/01-hello-world.html"

},
{
    "date": "2015-02-23T00:00:00.000Z",
    "title": "My Second Post!",
    "category": "thoughts",
    "tags": 

                [
                    "inspiration",
                    "habit"
                ],
                "height": "125px",
                "_content": false,
                "_url": "/posts/thoughts/02-my-second-post.html"
            }
        ]
    }

}

[nporteschaikin]

Howdy, @thiagodebastos! Thanks for trying out roots-records. I replicated your settings locally and didn't encounter this error. However, I then removed posts.json from my base directory and did encounter the same error. Are you sure posts.json lives in your roots base folder?

cc @kylemac

[thiagodebastos]

Hi there @nporteschaikin , thank you for your response! No it doesn't, it is being written to the public directory by dynamic-content, is there a way I can make it write to the roots base folder?

From what I understand the json file is being written on each compile to /public, from where the site is being served.

This is my entire app.coffee file:

axis            = require 'axis'
rupture         = require 'rupture'
jeet            = require 'jeet'
autoprefixer    = require 'autoprefixer-stylus'
js_pipeline     = require 'js-pipeline'
css_pipeline    = require 'css-pipeline'
yaml            = require 'roots-yaml'
dynamic_content = require 'dynamic-content'
records         = require 'roots-records'

module.exports =
    ignores: ['readme.md', '_templates/**/*', '**/_*', '**/*.sublime*', '_layouts/**/*', '.gitignore', '.editorconfig', 'ship.*conf']

    dump_dirs: ['']

    extensions: [
        js_pipeline(files: ['assets/js/*.coffee', 'assets/js/*.js']),
        css_pipeline(files: 'assets/css/*.styl')
        yaml(),
        dynamic_content(write: {'/posts.json': 'posts', '/portfolio.json': 'portfolio'}),
        records({
             portfolio: {file: 'portfolio.json', path:'items'},
            })
    ]

    stylus:
        use: [axis(), rupture(), jeet(), autoprefixer()]
        sourcemap: true

    jade:
        pretty: true
        basedir: '/Users/Thiago/Sites/thiagodebastos/'

    locals:
            siteUrl: 'http://thiagodebastos.com'
            siteTitle: 'thiagodebastos.com'
            description: 'This is where Thiago de Bastos keeps you connected to things he creates, thinks and feels. An Art directed blog'
            author:
                name: 'Thiago de Bastos'
                email: 'thiago@thiagodebastos.com'
                github: 'thiagodebastos'
                twitter: 'thiagodebastos'
                facebook: 'thiago.davoodifar'
                behance: 'xingur'
            analytics: 'google'
            config:
                node_env: process.env.NODE_ENV = "development"

    server:
        clean_urls: true

---

Also, if it helps, here is my repo! :)

https://github.com/thiagodebastos/thiagodebastos.github.io/tree/roots

[thiagodebastos]

Slight discovery:

        records({
             portfolio: {file: 'public/posts.json'}
            })

Disable records --> roots compile --> enable records --> roots compile = success

roots clean && roots compile = SyntaxError: Unexpected token u

Is roots-records trying to access posts.json before it is written?

[kylemac]

@thiagodebastos based on your app.coffee, I need some clarification on what you're trying to accomplish. it looks like you're trying to have dynamic_content create a .json file and then have roots-records read that JSON file so you can use it's content in the view -- which is not necessary. You don't need roots-records to make the portfolio object available within your jade views - dynamic-content does that for you already.

the intention of roots-records is to parse a remote or pre-existing .json file into a view object. the intention of dynamic-content is to take structured files w/ front-matter (like your /portfolio directory) and turn that into view objects. sorry if their purposes or documentation weren't clear.

as an aside, i've also noted some unnecessary configuration in your project. have a peek at https://github.com/carrot/roots-template-blog/tree/master/root (the root directory is where the roots project is) and see how simple a blog can be. also, the blog concept maps directly to your likely intentions for posts and portfolio.

[jescalan]

Yeah, I think he's trying to do the "make all dynamic content available in each piece of dynamic content" type of deal here though, which is why he's using the json export. Extensions can't be chained together at the moment, so to grab that content I'd just run an ajax get on the single view page as soon as it loads to snag the related or next posts. That kind of content is usually on the bottom of the page anyway, so it typically doesn't cause an issue. On top of that, you can use a little more logic to grab those posts since you're doing it at runtime rather than pre-compiling.

[thiagodebastos]

Thanks for that! The reason why this is getting a little complex is partly because I am trying to understand all of Roots. The main issue I have been having with dynamic-content is that my JS knowledge is quite limited, I was confused about what roots-records did. All I want is to be able to use JSON data as variables within my template. At the moment, within each portfolio I have a section that lists related work. All it is doing right now is pulling in any other portfolio item, including the same portfolio item the page is about. Eg I am on solid-nutrition item and it lists dawn-lister as well as solid-nutrition. I think my limited JS knowhow may be my limitation, I am unsure of how to pull portfoli.items.title[i] from within the template, so instead I am injecting it with

$.getJSON('/portfolio.json', function(data) {
    $.each(data, function() {
        var related = '';
        $.each(this, function(index) {
            related +=
                '<li><a href=' + this._url + '>' +
                '<span"></span>' +
                '<img src=' + this.relatedimageurl + '>' +
                '</a>' +
                '</li>';
            document.getElementById("related").innerHTML = related;
        });
    });
});

Which is a royal pain in the butt. I want to be able to do what @jenius does in his static-dynamic video and use a template, but I don't understand enough to be able to do that just yet.

PS @kylemac wow that IS simple. Jeez. Here I am trying to get the most out of Jade templating and I think I have overdone it!

[thiagodebastos]

@jenius That's right :) I wanted to avoid so much AJAX as I am also trying to utilize as much Atomic Design as I can. I want to make a complete Atomic Design template with roots so I am digging as deep as I can. I think I need a day or two (maybe three) to brush on on some JS ;)

Also..

My structure is not that simple as I want to run a dynamic, art-directed blog. I want every page to be styled differently. I figure its the best way to learn/improve my design skills on a continued basis. If you have any suggestions on how to structure this (especially where to stick styl files) I'd love to hear it :)

One last thing

Using dynamic-content with posts from multiple parent directories does not always work correctly. Sometimes everything renders but one post is missed. More reason as to why I may need more control over json data :+1:

[jescalan]

Closing due to inactivity -- happy to continue discussing here if it's still an issue though!