Evergreen Resource Finder

Turn a spreadsheet of documents into a searchable, filterable resource library on any website.

Works with Squarespace, WordPress, Wix, Webflow, Shopify (Online Store 2.0 themes), Ghost, Carrd and plain HTML: anywhere you can paste a block of HTML.

• Edit a spreadsheet, the page updates. Use a Google Sheet, a CSV file, or paste rows straight into the page.
• Search as you type across titles, descriptions, categories and tags.
• Filters:
  • category buttons
  • file-type filter: PDF, Word, Spreadsheet, Slides, Video, Link and more, detected from the link automatically
  • sorting: recommended, newest, oldest, A–Z
• Featured items stay at the top.
• Shareable searches. Filtered views are saved in the page address, so you can send someone a link to "Forms" or "volunteer".
• Fits your site. It uses your site's font and text color. You pick one brand color, and it works on light or dark designs.
• Accessible. Real labels, full keyboard support, screen-reader announcements and visible focus.
• No database, plugin, account or monthly fee. It's one script of about 22 KB (compact version) with no outside requests except the data link you choose.

Open demo/index.html to try it with sample data. It works by double-clicking the file, with no web server needed.

Quick start (5 minutes)

1. Make your list from templates/resources-template.csv. Open it in Google Sheets or Excel. Keep the first row, and replace the example rows with your documents.
2. Pick how the data gets to your page: | Option | Best for | File in embed/ | |---|---|---| | Google Sheet | Staff who update the list often | 1-google-sheet-embed.html | | Paste the rows | Short lists that rarely change | 2-pasted-data-embed.html | | Upload a CSV file | Sites where you can upload files | 3-hosted-file-embed.html |

1. Paste the snippet into your site and publish. INSTALL.md has click-by-click steps for Carrd, Ghost, Shopify, Squarespace, Webflow, Wix, WordPress and plain HTML.

Your spreadsheet

The first row holds the column names. Only Title and URL are required. Column names aren't case-sensitive, and common alternatives work, such as "Name", "Link", "Summary" or "Section".

Tips:

• Sorting. Rows show in spreadsheet order unless a visitor picks another sort, and featured rows always come first.
• Categories. Up to 12 categories appear as buttons. With more than that, a drop-down is used instead.
• Problem rows. A row without a title is skipped. A link that isn't a web address, such as javascript:, is removed for safety, and a note appears in the browser console.

Options

Add these as attributes on the <div data-resource-finder> line:

Example:

<div data-resource-finder
     data-src="https://docs.google.com/spreadsheets/d/e/…/pub?output=csv"
     data-accent="#1d5fa8" data-layout="list" data-page-size="20"></div>

Changing the words

Every label can be replaced with a data-text-… attribute. For example, to translate the search box:

<div data-resource-finder data-text-placeholder="Buscar recursos" data-text-more="Ver más"></div>

Available labels:

• Search and filters: search, placeholder, allCategories, category, allTypes, type
• Sort menu: sort, sortFeatured, sortNewest, sortOldest, sortTitle
• Result messages: showing, showingAll, one, empty, loading, error
• Buttons and badges: reset, more, featured, newTab, clear

Write them as data-text- plus the name with a capital first letter, such as data-text-allCategories or data-text-sortTitle. In showing and showingAll, keep {shown} and {total} where the numbers go.

Styling

The finder uses your page's font and text color. To fine-tune it, set these in your site's custom CSS:

[data-resource-finder] {
  --erf-accent: #1d5fa8;   /* brand color */
  --erf-radius: 6px;       /* corner roundness */
  --erf-gap: 20px;         /* space between cards */
}

Privacy and security

• The finder loads only the data link you give it, and sends no cookies with that request.
• It has no tracking or analytics and makes no other outside requests.
• All spreadsheet text is shown as plain text, so pasted HTML or scripts can't run.

Browser support

The finder supports current versions of Chrome, Edge, Safari and Firefox, including on phones.

Getting help

See INSTALL.md → Troubleshooting first. Your purchase includes 6 months of updates and email help with installation.

Version history is in CHANGELOG.md, and license terms are in LICENSE.txt.

Installation

Every install has the same two parts:

1. Your data: a published Google Sheet, rows pasted into the page, or an uploaded CSV file.
2. The snippet: one of the files in embed/, pasted where you want the library to appear.

Step 1: Set up a Google Sheet (recommended)

With a Google Sheet, anyone on your team can add or edit resources without touching the website.

1. Go to sheets.google.com, then File → Import → Upload and choose templates/resources-template.csv. Or just type the column names into row 1.
2. Replace the example rows with your documents. To link a file stored in Google Drive:
   1. Right-click the file and choose Share.
   2. Set access to Anyone with the link.
   3. Copy the link and paste it into the URL column.
3. Click File → Share → Publish to web.
4. Under Link, choose the sheet tab with your list, change "Web page" to Comma-separated values (.csv), and click Publish.
5. Copy the link it shows. It contains /pub? and ends in output=csv.

Use this link, not the address in your browser bar. A link ending in /edit will not work, and the finder will show a message if you paste one by mistake.

After publishing, changes in the sheet appear on your site within about 5 minutes. Google refreshes published sheets on its own schedule.

Step 2: Add it to your site

Resource Finder works on any website where you can paste HTML. The steps are the same everywhere:

1. Add an HTML / code / embed block where the library should appear.
2. Paste the contents of the embed file you chose.
3. Put in your data link, then publish.

The embed files use the compact script (dist/resource-finder.min.js, about 22 KB). That keeps them under the size limits some builders put on code blocks.

Most builders only run custom code on the published page, not inside the editor. If you see code or a blank box while editing, check the live page.

Any website (HTML)

Put the <div data-resource-finder …> line where the library should appear. Then load the script once anywhere on the page:

• Inline: paste the <script>…</script> part of embed file 1.
• From a file: upload dist/resource-finder.min.js and use <script src="resource-finder.min.js" defer></script>.

The CSV must be on the same website or a Google Sheets "Publish to web" link. A CSV on another website only loads if that site allows it (CORS).

Carrd

1. Add an Embed element and set Type to Code.
2. Paste the embed file and set your link.
3. Under Style, choose Inline.

Embeds need a Carrd plan that includes them.

Ghost

1. In the post or page editor, type /html to add an HTML card.
2. Paste the embed file and set your link.
3. Publish.

Shopify

1. Go to Online Store → Themes → Customize.
2. Open the page template where the library should go, for example a "Resources" page.
3. Click Add section and choose Custom Liquid.
4. Paste the embed file, set your link, and click Save.

This works with Shopify's Online Store 2.0 themes, such as Dawn and the other free themes Shopify has offered since 2021. If Custom Liquid isn't in the list, your theme is older and doesn't support this method. Email us and we'll help.

Shopify limits a Custom Liquid section to 50 KB. The Google Sheet snippet fits easily. If you paste a long list of rows straight into the snippet and Shopify won't save it, use the Google Sheet option instead.

Squarespace (7.0 and 7.1)

Squarespace runs scripts in Code Blocks only on plans that allow custom code. If your plan doesn't, the block will show the code instead of the library.

1. Open the page, click Edit, and add a Code block.
2. Paste the embed file, replacing what's there, and set your link.
3. Click Apply, then Save.

Webflow

1. Drag a Code Embed element onto the page.
2. Paste the embed file and set your link.
3. Click Save & Close, then Publish. The library only runs on the published site, not in the Designer.

Code Embed needs a Webflow site plan that allows custom code.

Wix

1. Add Embed Code → Embed HTML.
2. Choose Code, paste the embed file and set your link.
3. Resize the box so it's tall enough. Wix shows embeds in a fixed-height frame.

WordPress

Block editor:

1. Add a Custom HTML block.
2. Paste the embed file, set your link and click Update.

Uploading your own files:

1. Upload dist/resource-finder.min.js and your CSV through Media → Add New. If your site blocks .js uploads, use the Google Sheet option instead.
2. Copy each file's URL.
3. Put them into embed/3-hosted-file-embed.html, and paste that into a Custom HTML block.

Some security plugins strip scripts from posts. If the block shows nothing on the live page, use a "header and footer scripts" plugin to load the script.

Two libraries on one page

Add data-url-key with a different value to each one, for example data-url-key="forms" and data-url-key="reports", so their saved searches don't mix. Each can use its own data-src.

Troubleshooting

Changelog

1.0.0 (2026-10-15)

First release.

• Works on any website: install guides for Carrd, Ghost, Shopify, Squarespace, Webflow, Wix, WordPress and plain HTML, plus a compact 22 KB script for embed blocks.
• Data: Google Sheets ("Publish to web" CSV), CSV file, or rows pasted into the page.
• Search:
  • live search across title, description, category, type and tags
  • ignores accents, so "cafe" finds "Café"
  • highlights matches
• Filters and sort:
  • category buttons, or a drop-down when there are more than 12 categories
  • file-type filter
  • sort by recommended, newest, oldest or A–Z
  • featured items stay at the top
• Usability:
  • "Show more" paging
  • filtered views are saved in the page address
  • clear messages for empty results and loading problems
  • matches the site's font and colors, with one accent color and a grid or list layout
• Fits into any site: shielded from common site-wide styles (paragraph, heading, list and button rules) so it looks right everywhere.
• Accessibility and safety:
  • accessible labels, keyboard support and screen-reader announcements
  • all text is escaped and unsafe links are removed