subgin / tonic Goto Github PK

Click to enable/disable each tag and make the search work with multiple tags 👌🏼

Description

We need to find a good way to initialize the ranges.

First of all, we should adapt the sliders to be a unique one with two pins.

Then coordinate middleman generation with front interaction.

Dependencies

• noUiSlider: http://refreshless.com/nouislider/

Description

So if we have items with the same name in our data collection the front interaction does not work properly. We need to prevent this allowing duplicated names by providing unique id's for each item.

Requirements

• Generate ID's inside items: [{ id: 'duplied2', name: 'duplied' },...]
• Detail urls has to follow this id: /duplied2
• JavaScript has follow the id's instead of sluggifying them again

So it will be easy to share 🌐 specific filtering by just copying the current URL:

https://my-collection.com?price_max=40&category=music

It should be quite feasible to implement with: getParam and setParam from Ralix.

High level:

• once a filter is applied, use setParam(attribute, value)
• on page load, use getParam to set currentFilters and apply filtering

Let's expose a new flag to make the "detail" pages generation configurable.

We already have these couple of flags hide_filters and hide_sorting, so maybe hide_detail_pages?

💡Another idea: a flag to configure detail page link? It will be more flexible:

• internal (default, like now, no need to set the flag)
• external link (read some attribute for each item, like: detail_page_link, external_link, ...)
• null (disable detail pages and hide button in item card)

Custom GitHub Actions Workflows for deploys in GitHub Pages 🚀

https://github.blog/changelog/2022-07-27-github-pages-custom-github-actions-workflows-beta/

It should detect urls without protocol, like: example.com

Instead of a sorted array we need a collection itself.
Then remove all data-attr and index by id.

Once we can match markup with data by id we'll have front-side state 🎯

Basically, make it really usable on mobile devices 📱

GOAL Include share buttons in "index" (share current filtering) and "detail" (share specific resource) pages to facilitate sharing.

💭 To be defined:

1. copy current url to clipboard is enough?
2. if no, which platforms should be included by default? allow to customize platforms? maybe a plugin/package like https://github.com/ellisonleao/sharer.js or https://github.com/wcoder/share-buttons?

Toggle elements visibility by single selected tag.

Description

So we want to share our collection to someone else with the filters applied.
We don't have a server, neither SEO so url will have #/filter/ to init them.
While user is filtering the content the url must change to perform the change of state.

Requirements

• Manage search: #/search/term
• Concatenate tags: */tags/foo,...,bar
• Concatenate custom: */price/20/category/js

Warn or raise:

• if there are "invalid" items (no name)
• if there are items with same name

Like we do for links, we should autodetect emails and:

• force text for filters as the default
• in detail page, render with "mailto"

Example of item (address -> geo):

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "[email protected]",
  "website": "hildegard.org",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  }
}

We should provide better support for:

• filtering: join values + text
• sorting: probably just skip
• rendering: print all attributes iterating nested hashes

Make collections with images to display the first image (images[0]) in the _item_card partial.

Probably introduce a config flag to enable/disable this 🤔? For large collections this could be a bit slow.

Allow to pull the collection YAML/JSON from a remote resource:

# data/config.yaml

remote_collection: https://jsonplaceholder.typicode.com/users

This will also allow to create Tonic collections for example from your remote APIs 🙌🏼

Allow to use more HTML tags (like links) in:

• items text attributes
• site description.

Only one search input, front may want to know which attributes are text?