cannot 'middleman build' workable site with html files in other folders

[rdthree]

I have a site with one index.html file in the source directory, and 3 others in another folder in the source directory. pretty much the same setup as middleman-guides.

i am trying to deploy the site on a shared folder at work, so its not a http type of setup.

"activate: relative_assets" makes the css not show up

when i build the site and go to the build directory, the links from index.html work. however the links ffrom index.html have wacky css styling and their links don't work.

however, if i put all my html.markdown files in the root of "source", then the site builds just fine with working links and css...

...is there something i can do to have html.markdown files in different folders and build a workable site?

[tdreyno]

Would you be able to upload a copy of your site so I can debug it?

[rdthree]

I'm not sure how to upload it, so I'll post the contents of some files.

I need my links to be relative and because the navigation is located in the one layout shared across all html pages, it gets confused depending on what page is open. The navigation works ok on the root index.html, but then gets all lost on the other pages. CSS has been problematic too.

The link problem persists whether or not i turn on relative assets. This app seems to address the issue (https://github.com/mdub/pith#readme) can middleman work similarly? Should i use a different template language?

Here is the layout.haml (notice i tried two different things in the ul-li):

!!! 5
%html
%head
%title
%meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
%meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}
%script{:type => "text/javascript", :content => "text/javascript"}
%link(rel="stylesheet" type="text/css" href="../stylesheets/site.css")

%body
    #frame
        .container
            %aside
                %header
                    %h1= link_to "Middleman", "index.html"

                %nav
                    %ul
                        %li.div= link_to 'Home', "index.html"
                        %li
                            %a(href="guides/getting-started.html" title="Getting Started") Getting Started
                        %li= link_to 'Tool Tip 1', "guides/tooltip1.html"
                        %li= link_to 'Tool Tip 2', "guides/tooltip2.html"
                        %li= link_to 'Tool Tip 3', "guides/tooltip3.html"

                        %li.div= link_to 'Example Files', "#"

                        %li= link_to 'Video Archive', 'file://bsrv3/DEPT/Deptapps/DBD/Common/Google SketchUp Learning Center/6_In_House_Video_Tutorials'

                        %li.div= link_to 'Design+Build Home', 'http://bweb1/designbuild/Private/Dept/Default.htm'
            %article#main(role="main")
                = yield
                %footer
                    %p.left Push and Pull 3d

Here is "config.rb"

require "builder"
require "redcarpet"

#mime_type :php, 'application/x-httpd-php'

#helpers do
  #def is_guide_page?
  #  request.path_info =~ /guides/
  #end

  #def edit_guide_url
  #  file_name = request.path_info.split("guides/").last
  #  "https://github.com/tdreyno/middleman-guides/blob/master/source/guides/#{file_name}.markdown"
  #end
#end

set :markdown, :layout_engine => :haml
set :markdown_engine, :redcarpet

# activate :directory_indexes

#require 'rack/codehighlighter'
#use Rack::Codehighlighter, 
#  :pygments_api,
#  :element => "pre>code",
#  :pattern => /\A:::([-_+\w]+)\s*\n/,
#  :markdown => true

# Build-specific configuration
configure :build do
  compass_config do |config|
    config.line_comments = false
  end

  # For example, change the Compass output style for deployment
  #activate :minify_css

  # Minify Javascript on build
  #activate :minify_javascript

  #activate :relative_assets

  # Enable cache buster
  #activate :cache_buster
end

[tdreyno]

relative_assets does not rewrite links to be relative. You'll need to write you own link helper if you want one that automatically generates relative links depending on where it's called from.

[rdthree]

okay, i can try that. i didnt see any examples in the 'helpers' section. is there something i can read to understand the helpers and 'do' stuff well enough write my own? i really like your app and the freedom it provides, i just need to make my relative links work well.

the "pith" app suggests doing following and i'd like to do the same with the middleman:

Relative links

It's sensible to use relative URIs when linking to other pages (and resources) in your static site, making the site easier to relocate. But generating relative-links from partials and layouts is tricky. Pith makes it easy with the "href" function:

%a{:href => href("other.html")} Other page

%img{:src => href("/images/logo.png")} Any path beginning with a slash ("/") is resolved relative to the root of the site; anything else is resolved relative to the current input-file (even if that happens to be a layout or partial). Either way, "href" always returns a relative link.

There's also a "link" function, for even easier hyper-linking:

link("other.html", "Other page")

[tdreyno]

It would look something like:

helpers do
  def relative_link_to(text, url)
    # Get current path
    # Get path of url
    # Get relative relation between paths
    # Pass new data to the original link_to helper
    link_to(text, relative_url)
  end
end

If you get something working, let me know. It might be nice to be included as an official helper.

[rdthree]

ok, now im getting in over my head. should i read a something to learn more about ruby at this point? what do i need to do to get to the level of making my own 'helpers do' statements? its been a whirlwind of sass, haml, padrino, etc...

[tdreyno]

Should definitely learn Ruby, but, that can take a while, you know?

[rdthree]

your not kidding. well, for now i can still search like a boss! here is what i found from pith - i tested it and it worked in pith, too. still have to try and make it work in middleman.

https://github.com/mdub/pith/blob/master/lib/pith/render_context.rb

here are bits n pieces...do you see anything middleman compatible here?:

def relative_url_to(target_path)
  url = target_path.relative_path_from(page.path.parent).to_s
  url = url.sub(/index\.html$/, "") if project.assume_directory_index
  url = url.sub(/\.html$/, "") if project.assume_content_negotiation
  url = "./" if url.empty?
  Pathname(url)
end

def href(target_ref)
  relative_url_to(resolve_reference(target_ref))
end

def link(target_ref, label = nil)
  target_path = resolve_reference(target_ref)
  label ||= begin 
    target_input = input(target_path)
    record_dependency_on(target_input.file)
    target_input.title
  rescue ReferenceError
    "???" 
  end
  url = relative_url_to(target_path)
  %{<a href="#{url}">#{label}</a>}
end

[tdreyno]

Most everything in there is Pith-specific. However, the meat is Pathname which is a ruby library for figuring out relative paths. You should be able to implement "relative_url_to" with the current path (in Middleman and Rack: request.path_info) and the root (settings.views).

[rdthree]

ok, i'm off to learn Ruby on Rails, Sinatra and Padrino. Hopefully that will give me a foundation to understand this stuff. If you have any tips let me know. For now, I'm going to start using Pith but I hope to be back to Middleman once relative paths are more attainable.

[tdreyno]

Closing