Create a gist now

Instantly share code, notes, and snippets.

@balupton /README.md
Last active Oct 11, 2015

Embed
What would you like to do?
DocPad: Absolute URL Helper

DocPad: Absolute URL Helper

Uses a docpad configuration file to specify template data that we can use in our document to generate absolute urls.

module.exports =
# =================================
# Template Data
# These are variables that will be accessible via our templates
templateData:
# Site Information
site:
# Site Production URL
url: 'http://your-website.com'
# -----------------------------
# Helpers
# Get the Absolute URL of a document
getUrl: (document) ->
return @site.url + (document.url or document.get?('url'))
Via helper: <a href="<%= @getUrl(@document) %>">visit me</a>
Without helper: <a href="<%= @site.url+@document.url %>">visit me</a>
@zenorocha

This comment has been minimized.

Show comment
Hide comment
@zenorocha

zenorocha Oct 23, 2012

This doesn't solve my problem =/

I have my local instance based on http://localhost:9887 and I use Github Pages to host my website at: http://zenorocha.github.com/alloyui.com by running this shell script.

When I call for my scripts like: <script src="/js/alloy-ui/aui/aui.js"></script>

I can see them on my local instance but not on my github pages instance because the path is different.

/js/alloy-ui/aui/aui.js goes to http://zenorocha.github.com/js/alloy-ui/aui/aui.js and not http://zenorocha.github.com/alloyui.com/js/alloy-ui/aui/aui.js

What I want do to, is to grab the full url to normalize this like: <script src="<%= @document.baseURL %>/js/alloy-ui/aui/aui.js"></script>

zenorocha commented Oct 23, 2012

This doesn't solve my problem =/

I have my local instance based on http://localhost:9887 and I use Github Pages to host my website at: http://zenorocha.github.com/alloyui.com by running this shell script.

When I call for my scripts like: <script src="/js/alloy-ui/aui/aui.js"></script>

I can see them on my local instance but not on my github pages instance because the path is different.

/js/alloy-ui/aui/aui.js goes to http://zenorocha.github.com/js/alloy-ui/aui/aui.js and not http://zenorocha.github.com/alloyui.com/js/alloy-ui/aui/aui.js

What I want do to, is to grab the full url to normalize this like: <script src="<%= @document.baseURL %>/js/alloy-ui/aui/aui.js"></script>

@zenorocha

This comment has been minimized.

Show comment
Hide comment
@zenorocha

zenorocha Oct 23, 2012

Maybe that enviroment variable in docpad.coffee can help but I don't have an idea how to use and didn't find any documentation about that.

zenorocha commented Oct 23, 2012

Maybe that enviroment variable in docpad.coffee can help but I don't have an idea how to use and didn't find any documentation about that.

@balupton

This comment has been minimized.

Show comment
Hide comment
@balupton

balupton Oct 24, 2012

Yeah, the environment stuff is pretty new so the docs haven't caught up yet.

Perhaps the following will be better for your use case:

module.exports = 

    # =================================
    # Template Data
    # These are variables that will be accessible via our templates

    templateData:

        # -----------------------------
        # Site Information

        site:

            # Site Production URL
            url: 'http://zenorocha.github.com/alloyui.com'

        # -----------------------------
        # Helpers

        # Get the Absolute URL of a document
        getUrl: (document) ->
            return @site.url + (document.url or document.get?('url'))

    # =================================
    # Environments

    environments:
        development:
            templateData:
                site:
                    url: 'http://localhost:9778'
Owner

balupton commented Oct 24, 2012

Yeah, the environment stuff is pretty new so the docs haven't caught up yet.

Perhaps the following will be better for your use case:

module.exports = 

    # =================================
    # Template Data
    # These are variables that will be accessible via our templates

    templateData:

        # -----------------------------
        # Site Information

        site:

            # Site Production URL
            url: 'http://zenorocha.github.com/alloyui.com'

        # -----------------------------
        # Helpers

        # Get the Absolute URL of a document
        getUrl: (document) ->
            return @site.url + (document.url or document.get?('url'))

    # =================================
    # Environments

    environments:
        development:
            templateData:
                site:
                    url: 'http://localhost:9778'
@balupton

This comment has been minimized.

Show comment
Hide comment
@balupton

balupton Oct 24, 2012

It is worth mentioning that when you are doing your github deploy, you should generate with the following: docpad generate --env static - more info here

Owner

balupton commented Oct 24, 2012

It is worth mentioning that when you are doing your github deploy, you should generate with the following: docpad generate --env static - more info here

@zenorocha

This comment has been minimized.

Show comment
Hide comment
@zenorocha

zenorocha Oct 24, 2012

Perfect, that's exactly what I needed =]

zenorocha commented Oct 24, 2012

Perfect, that's exactly what I needed =]

@zenorocha

This comment has been minimized.

Show comment
Hide comment
@zenorocha

zenorocha Oct 24, 2012

What's the difference between docpad generate and docpad generate --env static?
Couldn't find this info on that Deploy guide.

zenorocha commented Oct 24, 2012

What's the difference between docpad generate and docpad generate --env static?
Couldn't find this info on that Deploy guide.

@balupton

This comment has been minimized.

Show comment
Hide comment
@balupton

balupton Oct 24, 2012

Using --env static runs your app under the production and static environments.

That static environment will turn off things like cleanurls and livereload that are dependent on the node.js server.

The production environment will try and compress and compilations that happen (when supported) versus giving you readable output. E.g. minified stylesheets, html, etc.

Owner

balupton commented Oct 24, 2012

Using --env static runs your app under the production and static environments.

That static environment will turn off things like cleanurls and livereload that are dependent on the node.js server.

The production environment will try and compress and compilations that happen (when supported) versus giving you readable output. E.g. minified stylesheets, html, etc.

@fizzvr

This comment has been minimized.

Show comment
Hide comment
@fizzvr

fizzvr commented Apr 19, 2013

👍

@lzrski

This comment has been minimized.

Show comment
Hide comment
@lzrski

lzrski Apr 27, 2013

When it comes to scripts, styles, etc. called via @getBlock().toHtml() wouldn't it be possible and appropriate to translate absolute urls to relative, at least in static env?

Like that:

@getBlock('scripts').add(['/vendor/jquery.js']).toHTML()

returns

<script defer="defer"  src="../../vendor/jquery.js"></script>

when rendered document is, say out/blog/2013-04-27/man-i-love-docpad.html.

This would require detecting out path and generating relative path from absolute given. Seems easy. What do you think?

lzrski commented Apr 27, 2013

When it comes to scripts, styles, etc. called via @getBlock().toHtml() wouldn't it be possible and appropriate to translate absolute urls to relative, at least in static env?

Like that:

@getBlock('scripts').add(['/vendor/jquery.js']).toHTML()

returns

<script defer="defer"  src="../../vendor/jquery.js"></script>

when rendered document is, say out/blog/2013-04-27/man-i-love-docpad.html.

This would require detecting out path and generating relative path from absolute given. Seems easy. What do you think?

@Hypercubed

This comment has been minimized.

Show comment
Hide comment
@Hypercubed

Hypercubed May 27, 2013

I'm surprised there is not a push to solve this issue. One of the first things I do while building and testing a new site is deploy it to github pages,... but ghpages are stored in a sub-directory so all navigation links, scripts, and styles generated by the docpad skeletons are broken. In any event here is my solution.

I add a helper that fixes absolute urls (urls starting with a forward slash). The helper function takes strings, documents, and arrays so it is multi-use. I thought about making this a plugin but I'm not sure if this is the best (or even good) solution.

Here is my code:

        # Get the Absolute URL of a document
        getUrl: (_, site) ->
            site = site || @site.url

            if (typeof _ == "string")
                if (_[0] == "/" && _[1] != "/")
                    return site+_
                return _

            if (typeof _ == "object")
                if (_.url)
                    return @getUrl(_.url,site)
                if (_.map)
                    _getUrl = arguments.callee
                    return _.map((d) ->
                        return _getUrl(d,site)
                    )

            return _

Used like this

@getUrl(document)

or for scripts and styles

@getBlock('styles').add(@getUrl(@site.styles)).toHTML()

Hypercubed commented May 27, 2013

I'm surprised there is not a push to solve this issue. One of the first things I do while building and testing a new site is deploy it to github pages,... but ghpages are stored in a sub-directory so all navigation links, scripts, and styles generated by the docpad skeletons are broken. In any event here is my solution.

I add a helper that fixes absolute urls (urls starting with a forward slash). The helper function takes strings, documents, and arrays so it is multi-use. I thought about making this a plugin but I'm not sure if this is the best (or even good) solution.

Here is my code:

        # Get the Absolute URL of a document
        getUrl: (_, site) ->
            site = site || @site.url

            if (typeof _ == "string")
                if (_[0] == "/" && _[1] != "/")
                    return site+_
                return _

            if (typeof _ == "object")
                if (_.url)
                    return @getUrl(_.url,site)
                if (_.map)
                    _getUrl = arguments.callee
                    return _.map((d) ->
                        return _getUrl(d,site)
                    )

            return _

Used like this

@getUrl(document)

or for scripts and styles

@getBlock('styles').add(@getUrl(@site.styles)).toHTML()
@Hypercubed

This comment has been minimized.

Show comment
Hide comment
@thesec

This comment has been minimized.

Show comment
Hide comment

thesec commented Oct 9, 2013

@jeffmcneill

This comment has been minimized.

Show comment
Hide comment
@jeffmcneill

jeffmcneill Jun 8, 2014

I need to output for several different websites which share some content but also have unique content. Basically the sites are focused on specific countries, but some content references multiple countries (and so is on all sites (and this is fine with Google).

E.g.,
nepal.com/projects // unique content to this site
nepal.com/summer-volunteering-in-south-asia // shared content
india.com/projects // unique content to this site
nepal.com/summer-volunteering-in-south-asia // shared content (identical to above)

How should I organize using docpad? Should this be two different docpad installations where I manually copy the shared content? Or can this be one docpad but use folders/subfolders such as:

/india-projects
/summer-volunteering-in-south-asia
/nepal-projects

And then produce multiple static sites (or a single site with inbound redirection/rewrite of base URL based on site request)?

jeffmcneill commented Jun 8, 2014

I need to output for several different websites which share some content but also have unique content. Basically the sites are focused on specific countries, but some content references multiple countries (and so is on all sites (and this is fine with Google).

E.g.,
nepal.com/projects // unique content to this site
nepal.com/summer-volunteering-in-south-asia // shared content
india.com/projects // unique content to this site
nepal.com/summer-volunteering-in-south-asia // shared content (identical to above)

How should I organize using docpad? Should this be two different docpad installations where I manually copy the shared content? Or can this be one docpad but use folders/subfolders such as:

/india-projects
/summer-volunteering-in-south-asia
/nepal-projects

And then produce multiple static sites (or a single site with inbound redirection/rewrite of base URL based on site request)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment