filter for generating relative paths

3 views
Skip to first unread message

Joel VanderWerf

unread,
Mar 21, 2009, 6:24:19 PM3/21/09
to Webby

Hi,

RelPath is a filter which turns local links into links with relative,
but complete, paths instead of absolute ones. It's like basepath, except
that the resulting output tree is relocatable. The tree can be viewed
with just a browser and no server, so it is suitable for distributed
documentation.

To use it:

1. Put relpath.rb in the lib/ dir of your project

2. Add relpath to the end of the list of filters in the layout (not the
filters in the content file).

No configuration in SITE is necessary.

As with basepath, links are modified only if they begin with "/". The
same xpath mechanism is used, so the list of xpaths can be controlled in
SITE.

Note that if you have a link like /foo in your content, clicking on the
resulting link in a browser will open the foo directory, rather than the
index.html in the foo dir. So you may want to use /foo/index.html instead.

--
vjoel : Joel VanderWerf : path berkeley edu : 510 665 3407

relpath.rb

Joel VanderWerf

unread,
Mar 23, 2009, 3:53:17 PM3/23/09
to Ryan Sobol, webby...@googlegroups.com

Ryan,

(hope you don't mind if I cc this to the webby group)

Sure, here's the steps to use starting from a freshly generated webby site:

webby-gen website webby-test
cp relpath.rb webby-test/lib

Edit layouts/default.txt so that the top looks like this:

---
extension: html
filter:
- erb
- relpath
---

webby build
firefox output/index.html

And then you should see the nicely rendered website. It should look the
same as when using autobuild. This shows that the references (e.g. to
css files) are not broken, even if you move the file tree around.

If you do this without the relpath, the website looks broken, *unless*
you either use a server ("webby autobuild") or manually set the basepath.

HTH.
Joel

Ryan Sobol wrote:
> Nice work, Joel. Do you have a usage example to supplement your
> instructions? I'm having a difficult time 'seeing' how to use the
> filter. I'm not totally familiar with the basepath filter and I'm just
> getting my feet wet with webby.
>
> Thanks!
>
> - RYAN

>> require 'hpricot'
>>
>> module Webby
>> class Renderer
>> attr_reader :page
>> end
>>
>> module Filters
>>
>> # To use: add relpath to the end of the list of filters in the layout.
>> It won't
>> # work in the content file itself.
>> class RelPath
>> def initialize( str, mode, path )
>> @str = str
>> @mode = mode.downcase.to_sym
>> dir = File.dirname(path)
>> depth = 0
>> while (parent = File.dirname(dir)) != dir
>> dir = parent
>> depth += 1
>> end
>> depth -= 1 # because of the 'content/' prefix
>> @prefix = "../" * depth
>> end
>>
>> def filter
>> doc = @mode == :xml ? Hpricot.XML(@str) : Hpricot(@str)
>> attr_rgxp = %r/\[@(\w+)\]$/o
>> sub_rgxp = %r/\A\//o # <-- note this rgxp _consumes_ the "/"
>>
>> ::Webby.site.xpaths.each do |xpath|
>> @attr_name = nil
>> doc.search(xpath).each do |element|
>> @attr_name ||= attr_rgxp.match(xpath)[1]
>> a = element.get_attribute(@attr_name)
>> element.set_attribute(@attr_name, a) if a.sub!(sub_rgxp, @prefix)
>> end
>> end
>>
>> doc.to_html
>> end
>> end
>>
>> register :relpath do |input, cursor|
>> RelPath.new(input, cursor.page.extension,
>> cursor.renderer.page.path).filter
>> end
>>
>> end # module Filters
>> end # module Webby

Nathan Henderson

unread,
Mar 24, 2009, 6:48:06 AM3/24/09
to Webby, vj...@path.berkeley.edu
Awesome, this is just what I was looking for!

Would it be possible to have paths within stylesheets modified to be
relative too?

e.g.: background-image: url("/path/to/image.gif")

-- Nathan

On Mar 23, 3:53 pm, Joel VanderWerf <vj...@path.berkeley.edu> wrote:
> Ryan,
>
> (hope you don't mind if I cc this to the webby group)
>
> Sure, here's the steps to use starting from a freshly generated webby site:
>
> webby-gen website webby-test
> cp relpath.rb webby-test/lib
>
> Edit layouts/default.txt so that the top looks like this:
>
> ---
> extension: html
> filter:
>    - erb
>    - relpath
> ---
>
> webby build
> firefox output/index.html
>
> And then you should see the nicely rendered website. It should look the
> same as when using autobuild. This shows that the references (e.g. tocssfiles) are not broken, even if you move the file tree around.
>
> If you do this without the relpath, the website looks broken, *unless*
> you either use a server ("webby autobuild") or manually set the basepath.
>
> HTH.
> Joel
>
>
>
>
>
> Ryan Sobol wrote:
> > Nice work, Joel.  Do you have a usage example to supplement your
> > instructions?  I'm having a difficult time 'seeing' how to use the
> > filter.  I'm not totally familiar with the basepath filter and I'm just
> > getting my feet wet with webby.
>
> > Thanks!
>
> > - RYAN
>
> > On Mar 21, 2009, at 3:24 PM, Joel VanderWerf wrote:
>
> >> Hi,
>
> >> RelPath is a filter which turns local links into links withrelative,
> >> but complete,pathsinstead of absolute ones. It's like basepath,

Joel VanderWerf

unread,
Mar 24, 2009, 2:11:10 PM3/24/09
to webby...@googlegroups.com
Nathan Henderson wrote:
> Awesome, this is just what I was looking for!
>
> Would it be possible to have paths within stylesheets modified to be
> relative too?
>
> e.g.: background-image: url("/path/to/image.gif")

I don't know. AFAIK xpaths only operate on html/xml files, so this would
depend on some other way of parsing css files? Suggestions. anyone?

Johannes

unread,
Mar 24, 2009, 4:19:25 PM3/24/09
to webby...@googlegroups.com
Joel VanderWerf schrieb:

>
> Nathan Henderson wrote:
>> Awesome, this is just what I was looking for!
>>
>> Would it be possible to have paths within stylesheets modified to be
>> relative too?
>>
>> e.g.: background-image: url("/path/to/image.gif")
>
> I don't know. AFAIK xpaths only operate on html/xml files, so this
> would depend on some other way of parsing css files? Suggestions. anyone?
>
mhm not really a css pro, but if all css-"urls" are just: url("...")
then it would be kinda easy to parse and gsub that with a regexp :) i
give it a try tomorrow :)

universa1

unread,
Mar 25, 2009, 6:05:38 AM3/25/09
to Webby
> >> e.g.: background-image: url("/path/to/image.gif")
>
> > I don't know. AFAIK xpaths only operate on html/xml files, so this
> > would depend on some other way of parsing css files? Suggestions. anyone?
>
> mhm not really a css pro, but if all css-"urls" are just: url("...")
> then it would be kinda easy to parse and gsub that with a regexp :) i
> give it a try tomorrow :)

alright, i've some basic version up and running, i basically added a
special case for css-files and you need to add the relpath filter to
your css files directly and as the last one, since they don't have a
layout ;)

i've pastied the updated code at:
http://pastie.org/426366

maybe that's just what you need :-)

Joel VanderWerf

unread,
Apr 6, 2009, 1:01:19 PM4/6/09
to webby...@googlegroups.com

fyi, nanoc has just added a relative path filter which works on css
files using the following regex, slightly different from yours:

when :css
content.gsub(/url\((['"]?)(\/.+?)\1\)/) do
'url(' + $1 + relative_path_to($2) + $1 + ')'
end

Reply all
Reply to author
Forward
0 new messages