Ever wish you could run a dynamic, fast-moving media startup without any effort or budget? You can, with the power of CSVaulter, which will randomly update your static site page by replacing content based on the information in a CSV (comma seperated value, i.e., spreadsheet). Every time a visitor refreshes the page, they're giving a randomly selected experience, making it feel like your destination has its finger on the pulse of what's hot and always offering something new. Since there's no server required, you can even host your new media empire for free on GitHub Pages.
First, ensure you have a CSV file filled with the Content™ you want to dynamically display. This can include headlines, links, image URLs, paragraphs, etc.
Sample CSV format:
variable-id,variable-title,variable-description,variable-image,variable-article-1-url,variable-article-1-headline
1,"Title 1","Description 1","https://example.com/image1.jpg","https://example.com/article1","Headline 1"
2,"Title 2","Description 2","https://example.com/image2.jpg","https://example.com/article2","Headline 2"
Upload this somewhere on the web.
Include CSVaulter (and Papa Parse) in your HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Dynamic Site</title>
</head>
<body>
<!-- Your content here -->
<!-- Papa Parse for CSV parsing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<!-- CSVaulter: The hero your website deserves -->
<script src="path/to/CSVaulter.js" data-csv-url="path_to_your_csv_file.csv"></script>
</body>
</html>
Use data-csv-replace attributes to earmark elements for dynamic content replacement. Ensure that the underlying content is something that will work as a fallback in case users have JavaScript disabled.
<h2 data-csv-replace="variable-title">Fallback Title</h2>
<p data-csv-replace="variable-description">Fallback Description</p>
<img data-csv-replace="variable-image" src="fallback-image.jpg" alt="Fallback Image">
<a data-csv-replace="variable-article-1-url" href="fallback-url.html">Fallback Link</a>
Load your page, and watch as CSVaulter breathes life into your content. With each refresh, a new possibility unfolds. It's like your site is living its best life, thanks to you (and a little CSV magic). Note that due to cross-site scripting restrictions, this probably won't work locally unless you tweak you developer settings.
Want to target a specific row based on whimsy or user interaction, or make it so that people can share specific iterations easily? Toss a #rowId at the end of your URL (e.g., yourdomain.com/#2) and watch CSVaulter fetch content from that specific row like a well-trained retriever.
Vaulter can also be used to update images, links, etc. as in the above examples.
This code is an abomination and pox upon the earth. If you want to make it better, feel free to fork and update. Will probably license under MIT at some point.
