daviddarnes / mastodon-post Goto Github PK
View Code? Open in Web Editor NEWA Web Component to display Mastodon posts and their metadata
Home Page: https://daviddarnes.github.io/mastodon-post/demo.html
License: MIT License
A Web Component to display Mastodon posts and their metadata
Home Page: https://daviddarnes.github.io/mastodon-post/demo.html
License: MIT License
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:
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));
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.