Help! Trying to build a dynamic data portfolio

#1

Hi all!

I’m currently re-building my portfolio (and learning middleman along the way to simplify things) but having trouble setting up things exactly the way I want them. I’ve gone through all the docs and googled, but I just don’t getit / can’t really find the answer I’m looking for, so thought I’d try here:

This overall structure I want on my site:

  • A landing page, listing projects names as links from a json file.

  • A project page where I want to inject an image, project title and project description from json depending on which list item is clicked on the landing page.

These are the files I’m working with:

projects.json,
this is the data file from which I want to inject data into the sub pages.

{
    "projects": {
        "project_1": [
            {"title":"Project 1",
             "intro":"project intro",
             "description":"project description"
           }
        ],
        "project_2": [
            {"title":"Project 2",
             "intro":"project intro",
             "description":"project description"
            }
        ]
    }
}

 
project_titles.json,
this is the file from which I create the list on the index page.

{
  "Projects": [
    "Project 1",
    "Project 2",
    "Project 3"
  ]
}

 
index.html.erb,
this currently the landing page where all projects are listed from the json. No idea how to give these items a path to the corresponding sub page built with the proxy method…

 Work
   <% data.project_titles.project_titles.each do | title | %>
   <%= title %>
   <% end %>

 

  • project_page.erb, layout file
  • project_page.html.erb

These are the files I want to use as templates and with placeholder for the data to be injected, have no clue what do to here thought :confused:

Using the proxy method in config.rb, I’ve managed to build a sub page for each project in the json, but:

  1. How do I inject the corresponding content from json into each sub page during build?
  2. Also, how should I think in terms of the html structure for each sub page to inject the data?

Am I going about this the right way, or am I making it difficult for myself?
All help is greatly appreciated!

Cheers!

#2

Here’s what I did:

I merged your 2 json files into 1 yml for the sake of clarity. I also added an extra field named url. The extra field is not completely necessary, I would rather use a “string to safe url” helper over project.title, but it’s the fastest way for this example. The result:

- title: "Project 1"
  url: "project-1"
  intro: "project intro"
  description: "project description"
- title: "Project 2"
  url: "project-2"
  intro: "project intro"
  description: "project description"

The loop for listing all the projects also changes:

   <% data.projects.each do | project | %>
    <%= project.title %>
   <% end %>

Then, in config.rb, this is how the dynamic pages are gererated:

data.projects.each do |project|
  proxy "/projects/#{project.url}.html", "/projects/project_page.html", 
    :locals => { 
      :project_title => project.title,
      :project_intro => project.intro,
      :project_description => project.description,
    }, 
    :ignore => true
end

After that, you can render any local defined in the proxy as a regular variable within your project_page.html.erb, like this:

<h1><%= project_title %></h1>
<h2><%= project_intro %><h2>
<p><%= project_description %><p>

Dynamic pages are a great feature, but keep in mind that they might be overkill in some cases.

1 Like
#3

Thank you so much for this!

I’m still in the phase of learning both ruby and middleman and had no idea how to do it… I know I could probably figure out the answer from the docs (sometimes it’s right in front of your eyes, but you don’t really know what to look for).

Cheers!

1 Like
#4

Happy to help! I’m in the same boat, I learn Ruby as I break stuff in Middleman.