grid-saastr

Adding Dynamic Content to a Static Web Page

Cloud-based data pipes are, by nature, pretty flexible and able to handle a bunch of different kinds of data busywork. One of those uses is to spin up dynamic content without spinning up a server. This makes it possible to host a rich, interactive website on static backends like S3, GitHub, or Forge.

We had occasion to do this ourselves today in an attempt at summarizing an experience of binge-listening to 95 SaaStr podcast episodes.

During the journey, we compiled a data set and then, in the post, offered the static CSV file for reference. But, we thought it might be fun to let follks search the set directly inside the blog post. Here’s how we knocked it out.

The Pipe

The actual pipe is pretty straightforward — grab a CSV file from GitHub, process it, filter it using a variable and convert it to JSON for ingesting. Here’s a visual representation of the pipe:

pipe-image

Here are the specific commands for each step used in the pipe:

input file: https://raw.githubusercontent.com/flexiodata/examples/master/saastr-podcast-search/saastr-podcast-20170205.csv
convert from: delimited to: table delimiter: comma qualifier: double-quote header: true
select col: url, title, description, date, guest, position, company, category, [biggest challenge], [saas resources], notes
filter where: contains(lower(concat(title,description,notes,[saas resources])),lower('${filter}'))
convert to: json

The Web Page

The web page to get this up and running is pretty trivial. We used a simple HTML table to display our query results:

<table id="myTable" style="min-width: 1400px">
  ...
  <thead>
    <th>Title</th>
    <th>Date</th>
    <th>Guest</th>
    <th>Position</th>
    <th>Company</th>
    <th>Category</th>
    <th>SaaS Resources</th>
    <th>Web Address</th>
  </thead>
  ...
</table>

Then we did some minor prettying up in the CSS for the app and the iframe

Here’s the HTML index page on Github.

The API

The API call is also straightforward. Here’s a snippet of the API call using jQuery:

$.ajax({
  type: 'post',
  url: 'https://www.flex.io/api/v1/pipes/flexio-saastr-podcast-search-v1/run?stream=0',
  beforeSend: function(xhr) {
    xhr.setRequestHeader('Authorization', 'Bearer tqswvznsttsmttpyjqhc');
  },
  data: $('form').serialize(),
  dataType: "json",
  success: function (rows) {
    // process json results here
  }
})

 

Putting it all together

The “app” itself is trivial — simply a text input for the search that is passed to the pipe, which grabs the results and inserts the data into the table on the fly.

Feel free to play with the app here.

Wanna give it a try? Sign up for the beta from our home page and, in the comment section, type in “static website” and we’ll bump you up in line for our next beta invite. Thanks!

Tags:
No Comments

Post A Comment