microlinkhq / cards Goto Github PK
View Code? Open in Web Editor NEWThe easiest way to create and share dynamic images at scale.
Home Page: https://cards.microlink.io
License: MIT License
The easiest way to create and share dynamic images at scale.
Home Page: https://cards.microlink.io
License: MIT License
Essentially list the steps for creating your own preset
When entering the editor and clicking "Download" without modifying the code it downloads a screenshot of the whole page instead of just the actual card.
Get this image
You get this image
Add a custom 404 page, with:
Hi,
First of all, great product!
Having issue with a logo not appearing, it works fine in the editor, but the embed code supplied doesn't show the same results.
https://www.treaclewp.com/blog/who-what-where-when-why/
Thanks,
Tom
This template explores how powerful a preset can be!
Define a new kind the preset called dashboard
, where query variables could be:
{
"api": "https://analytics.microlink.io",
"boxes": 4
}
Then, create the template layout using the number of boxes
defined and feed them with data fetched from api
.
Inspiration
Related
Add a component for fetching external data
Related:
Cards templates use theme-ui but it's not described anywhere: nor the app, nor the docs. I assume most of the users won't be familiar with this.
I think it's worth it to add a note explaining this and a link to theme-ui docs. Maybe good to add which version of them-ui is being used too.
edit: I see now that this is mentioned ๐ https://microlink.io/docs/cards/getting-started/editor, maybe a little bit hidden?
using https://github.com/lovasoa/react-contenteditable
The edit should be modify the original query
just need to attach into URL the query variables that are different from the default preset query.
related:
Add some sort of a simple of instructions/guide modal, showing keyboard shortcuts. Could be hidden behind a โ icon.
by default, api.microlink.io
is used as the endpoint for creating the screenshot.
That's the Microlink API free endpoint, with some limitations (such as daily rate limit).
Under the hood, if you specify the endpoint
query variable you can define a custom Microlink API to use.
That's the way you should to do in order to run your own Microlink API endpoint and protect your pro plan credentials
style
tagscurrent*
expected*
class
for stylescurrent
expected
current
expected
based on https://jxnblk.com/ design
The micro card displays the title, subtitle and the custom image:
The micro card displays the title and subtitle but does not display the custom or default image:
Makes easy to share GitHub stats associated with a repo.
Inspiration
Related
https://twitter.com/joshpitzalis/status/1465673218702909446
https://twitter.com/jlacort/status/1453828900379926528
https://twitter.com/Netlify/status/1460684203184558080
package.json
.I love this, but it doesnt seem to be responsive or follow the sizing for a twitter card:
check the image above.
Also, this is how im using it:
const headline =
"This is my blog where I write about stuff im working on and things i find interesting";
const caption = "My articles, tutorials and thoughts. Under one roof";
const domain = "richardhaines.dev";
const backgroundImage = "/diamonds.png";
const api = "https://i.microlink.io/";
const cardUrl = `https://cards.microlink.io/?preset=richhaines&headline=${headline}&caption=${caption}&domain=${domain}&backgroundImage=${backgroundImage}`;
const image = `${api}${encodeURIComponent(cardUrl)}`;
Id expect it to be responsive and fit the twitter cards
It seems to be zoomed in
Hello ๐,
If you're reading this, you've been invited to use Microlink Cards,a new way to create and share dynamic images at scale.
Microlink Cards takes Microlink API advantages for creating SEO friendly images on the fly.
It's shipped as an interactive editor, where you can see and create your previews using code and get a reusable URL you can feed with data.
You can read all the details at Microlink Cards documentation.
If you have any question or suggestion, you can use this issue for it ๐
Current stage is public beta.
Everyone that enters cards.microlink.io can try the product with all the functionalities.
Internally, users are classified into waves in order to listen to feedback and act consecutively, being the waves:
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.