Skip to content

Instantly share code, notes, and snippets.

@balupton
Last active October 11, 2015 23:48
Show Gist options
  • Save balupton/3939146 to your computer and use it in GitHub Desktop.
Save balupton/3939146 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

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
Copy link
Author

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
Copy link
Author

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
Copy link

Perfect, that's exactly what I needed =]

@zenorocha
Copy link

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

@balupton
Copy link
Author

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
Copy link

fizzvr commented Apr 19, 2013

👍

@tad-lispy
Copy link

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
Copy link

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
Copy link

@thesec
Copy link

thesec commented Oct 9, 2013

@jeffmcneill
Copy link

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