daviddarnes / mastodon-post Goto Github PK

Is your feature request related to a problem? Please describe.
It would be great if more than one template could be used on a single page. Right now if you want to use a custom template all instances of mastodon-post will use the exact same template with the ID of `mastodon-post-template.

Describe the solution you'd like
Same behaviour as before but you could override the ID that the component looks for when using a custom template. Here's a sudo code example:

<template id="my-custom-template">
  <blockquote data-key="content"></blockquote>
</template>

<mastodon-post template="my-custom-template">
  <a href="https://mastodon.design/@DavidDarnes/109824258017750161">Discuss on Mastodon</a>
</mastodon-post>

Any instance without the template attribute would either use the default template within the component or, if there is one, the template with an ID of mastodon-post-template. This would mean there would be no breaking changes to peoples usage of the component.

Describe the bug
The README.md file references version 1.0.0 instead of the latest within the CDN usage examples.

To Reproduce
Steps to reproduce the behaviour:

1. Go to README.md
2. Copy the CDN usage example
3. Attempt to use a newer feature

Expected behaviour
Features from above 1.0.0 should work

Describe the bug
The methods for the component could be written more cleanly which would be more readable and therefore more extensible.

Is your feature request related to a problem? Please describe.
When using a custom template you can only access top level data points on the object of data that comes back from the public Mastodon API. This means things like attachments can't be accessed.

Describe the solution you'd like
Allow the use of nested data in data-key data attributes, e.g. data-key="account.display_name"

Additional context
Here's a snippet of code I rustled up which should parse strings into nested key references:

const data = {
  item: {
    nested: {
      key: "value",
      array: ["item 1", "item 2"]
    }
  }
};

const string1 = "item.nested.key";
const string2 = "item.nested.array[1]";

const handleKey = (object, key) => {
  const parsed = parseFloat(key);
  return Number.isNaN(parsed) ? object[key] : object[parsed];
};

const getValue = (string) => {
  let keys = string.split(/\.|\[|\]/g);
  keys = keys.filter((str) => str.length);
  const value = keys.reduce((object, key) => handleKey(object, key), data);
  return value;
};

console.log(getValue(string1), getValue(string2));