The 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.
Microlink Cards © microlink.io, released under the MIT License.
Authored and maintained by Kiko Beats with help from contributors.
microlink.io · GitHub microlink.io · Twitter @microlinkhq
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
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
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:
It's hard to figure out this section is scrollable
style tagscurrent*
expected*
class for stylescurrent
expected
current
expected
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
based on https://jxnblk.com/ design
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
When you edit the query parameters and click to Download button, the screenshot URL generated is not reflecting the query parameters value filled.
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
When clicking on the "resize bar" for the query variable area it always jumps down by the same amount of pixels:
This doesn't happen with the main aside, there must be a bug in the height calculation.
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?
cmd+click makes possible edit query variables quickly.
However, you need to select value before overwritten it
current
expected
Essentially list the steps for creating your own preset
Add a custom 404 page, with:
This only happens if you do something funky in the code, but I think we should prevent overflow in the "shadow box":
Add some sort of a simple of instructions/guide modal, showing keyboard shortcuts. Could be hidden behind a ❓ icon.
Add a component for fetching external data
Related:
When you resize the aside or the query variables area, the code editor doesn't resize:
You have to resize the browser window to trigger a recalculation of the size in the editor (maybe it exposes a function we can fire after a resize occurs?)
Hey, this is cool. thanks.
I think there should be a backgroundSize: 'contain' for the Box component in the article preset:
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
Add the ability to switch between JSX and HTML/CSS.
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
just need to attach into URL the query variables that are different from the default preset query.
related:
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:
using https://github.com/lovasoa/react-contenteditable
The edit should be modify the original query
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
