How can I recreate the functions from ghost.org/explore/?

Themes
1

The page is so nice and simple! You can sort by a variety of fields (popular, highest revenue, trending, new, a-z, recently updated, members! It’s minimal and gorgeous! The search box isn’t a pop up modal!

But there doesn’t seem to be a Ghost theme available like this out there. Any tips on how to build something similar?

Just spitballing:

For the sorting: I assume ghost is adding custom fields here but I guess a theme could use any existing post fields and sort by them? Like, plug a number into the twitter_title field as if it was an audience count, say, and sort by that with a custom route that uses “dec”? Change the order of posts in Ghost

For adding a search box that filters the posts displayed as you type: I don’t want to use the pop up search helper, although it’s quite nice I find the idea of clicking a search bar to be prompted to go to another pop up search bar annoying. What could I do that would work similarly to this page? Ghost seems to be using a modified version and I wonder if there’s a code snippet out there somewhere.

Any advice appreciated. Thanks!

2

They’re using Algolia InstantSearch. They’re using facets for the filtering and some extra fields for sorting.

A little sniffing shows that yeah, they have extra fields in Algolia. Here’s what they have for my site:

                    "title": "Spectral Web Services",
                    "site_url": "https://www.spectralwebservices.com/",
                    "description": "Let our team handle the technology, while you focus on creating.  Certified Ghost Expert and full-stack developer.  Subscribe for Ghost-related content, including tips for beginner to advanced users",
                    "publication_icon": "https://supapjpiqdfzuaordcdx.supabase.co/storage/v1/render/image/public/images/1698089063043-witch-hat-icon_rev-1-01-3.png?width=75&height=75&resize=contain",
                    "nsfw": false,
                    "categories": [
                        "technology"
                    ],
                    "member_count": 108,
                    "show_member_count": true,
                    "mrr": null, // I have this turned off, or else there'd be a value here.
                    "show_mrr": false,
                    "ghost_rank": 17953251,
                    "featured": false,
                    "feature_image": null,
                    "text_color": null,
                    "bg_color": null,
                    "accent_color": "#66298e",
                    "lang": "en",
                    "created_at": 1698089063,
                    "mrr_members_rank": 108,
                    "mrr_members_diff_rank": 8,
                    "updated_at": 1704762835,
                    "showIframe": true,
                    "objectID": "7f8b7981-fbd7-4a77-9759-c00596f0b5a8"
1 Like
3

You /could/ build something similar all in Ghost, although I don’t think I’d try it for that many fields. (You’d run out of less-important fields to put the data into pretty quickly.) You’d need to use the Content API and javascript to accomplish the sorting/filtering.

1 Like