{"id":15283955,"url":"https://github.com/aloskutov/eleventy-plugin-link-preview","last_synced_at":"2025-04-12T23:20:31.564Z","repository":{"id":37263262,"uuid":"450376378","full_name":"aloskutov/eleventy-plugin-link-preview","owner":"aloskutov","description":"Eleventy link preview plugin. Creates an responsive link block and, if necessary, inline css code.","archived":false,"fork":false,"pushed_at":"2025-04-12T03:03:37.000Z","size":1809,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T04:21:00.655Z","etag":null,"topics":["11ty","eleventy","link-preview","plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aloskutov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-01-21T06:17:19.000Z","updated_at":"2025-04-12T03:03:35.000Z","dependencies_parsed_at":"2023-12-19T05:24:25.538Z","dependency_job_id":"6a2c6d2f-91ed-47d2-b911-ba3f2de07296","html_url":"https://github.com/aloskutov/eleventy-plugin-link-preview","commit_stats":{"total_commits":136,"total_committers":3,"mean_commits":"45.333333333333336","dds":"0.38235294117647056","last_synced_commit":"48488caf95da0c93f3183cab384a563330a5a648"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloskutov%2Feleventy-plugin-link-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloskutov%2Feleventy-plugin-link-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloskutov%2Feleventy-plugin-link-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloskutov%2Feleventy-plugin-link-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aloskutov","download_url":"https://codeload.github.com/aloskutov/eleventy-plugin-link-preview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643922,"owners_count":21138526,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","eleventy","link-preview","plugin"],"created_at":"2024-09-30T14:48:24.747Z","updated_at":"2025-04-12T23:20:31.540Z","avatar_url":"https://github.com/aloskutov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# eleventy-plugin-link-preview\n\n![npm (scoped)](https://img.shields.io/npm/v/@aloskutov/eleventy-plugin-link-preview)\n[![DeepSource](https://deepsource.io/gh/aloskutov/eleventy-plugin-link-preview.svg/?label=active+issues\u0026show_trend=true\u0026token=MiKmciFiZJm1PqDB7dEmhZP3)](https://deepsource.io/gh/aloskutov/eleventy-plugin-link-preview/?ref=repository-badge)\n[![DeepSource](https://deepsource.io/gh/aloskutov/eleventy-plugin-link-preview.svg/?label=resolved+issues\u0026show_trend=true\u0026token=MiKmciFiZJm1PqDB7dEmhZP3)](https://deepsource.io/gh/aloskutov/eleventy-plugin-link-preview/?ref=repository-badge)\n[![DeepScan grade](https://deepscan.io/api/teams/16410/projects/20009/branches/531306/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=16410\u0026pid=20009\u0026bid=531306)\n![npms.io (quality)](https://img.shields.io/npms-io/quality-score/@aloskutov/eleventy-plugin-link-preview)\n\nEleventy link preview plugin. Creates an responsive link block and, if necessary, inline css code.\n\n[Codepen preview](https://codepen.io/aloskutov/pen/GROKobB)\n\n## Usage\n\nSupport for Nunjucks and Liquid templates only.\n\n### Install via npm\n\n```shell\nnpm install -D @aloskutov/eleventy-plugin-link-preview\n```\n\n### Load plugin in .eleventy.js\n\n```javascript\nconst linkPreview = require('@aloskutov/eleventy-plugin-link-preview');\n\nmodule.exports = (eleventyConfig) =\u003e {\n    eleventyConfig.addPlugin(linkPreview);\n};\n```\n\n### Insert inline css\n\nNunjucks\n\n```nunjucks\n{% linkPreviewCss %}\n```\n\nLiquid\n\n```liquid\n{% linkPreviewCss %}\n```\n\n### Insert link\n\nInsert link to 'https://dev.to'\n\nNunjucks\n\n```nunjucks\n{% linkPreview \"https://dev.to\" %}\n```\n\nLiquid\n\n```liquid\n{% linkPreview \"https://dev.to\" %}\n```\n\nYou will get the following HTML code\n\n```html\n\u003cdiv class=\"link-preview\"\u003e\n  \u003ca class=\"link-preview__link\" href='https://dev.to/'\u003e\n    \u003cdiv class=\"link-preview__wrapper\"\u003e\n      \u003cdiv class=\"link-preview__content\"\u003e\n        \u003cdiv class=\"link-preview__title\"\u003eDEV Community\u003c/div\u003e\n        \u003cdiv class=\"link-preview__description\"\u003eA constructive and inclusive social network for software developers. With you every step of your journey.\u003c/div\u003e\n        \u003cdiv class=\"link-preview__domain\"\u003edev.to\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"link-preview__image\" style='background-image: url(https://thepracticaldev.s3.amazonaws.com/i/6hqmcjaxbgbon8ydw93z.png);'\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n```\n\n## Custom css\n\nYou can use your css based on below code.\n\n```css\n.link-preview {\n  margin: 0 auto;\n  max-width: 1200px;\n  padding: 0;\n  box-shadow: inset 0 0 0 1px rgb(230 230 230);\n}\n.link-preview__link {\n  text-decoration: none;\n}\n.link-preview__wrapper {\n  display: flex;\n  flex-wrap: wrap;\n}\n.link-preview__content {\n  box-sizing: border-box;\n  padding: 8px;\n  flex: 1 1 270px;\n  min-width: 270px;\n  height: 168px;\n  display: flex;\n  align-content: flex-end;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: flex-start;\n}\n.link-preview__title {\n  font-weight: 600;\n  line-height: 24px;\n  max-height: 50px;\n  font-size: 20px;\n  color: hsl(219, 25%, 25%);\n  font-family: \"PT Serif\", serif;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.link-preview__description {\n  margin-top: 8px;\n  color: hsl(220, 15%, 30%);\n  line-height: 20px;\n  font-weight: 400;\n  min-width: 240px;\n  max-height: 40px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  font-size: 16px;\n  font-family: \"Open Sans\", sans-serif;\n}\n.link-preview__domain {\n  margin-top: 12px;\n  font-family: monospace;\n  color: hsl(221, 10%, 40%);\n}\n.link-preview__image {\n  display: block;\n  padding: 0;\n  margin: 0;\n  flex: 0 0 clamp(260px, (606px - 100%) * 1000, 100%);\n  height: auto;\n  background-position: 50% 50%;\n  background-size: cover;\n  background-origin: border-box;\n  aspect-ratio: 2;\n  box-shadow: inset 0 0 0 1px rgb(230 230 230);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloskutov%2Feleventy-plugin-link-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faloskutov%2Feleventy-plugin-link-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloskutov%2Feleventy-plugin-link-preview/lists"}