{"id":16701089,"url":"https://github.com/scriptex/socials","last_synced_at":"2025-04-10T04:05:39.753Z","repository":{"id":41519628,"uuid":"282802340","full_name":"scriptex/socials","owner":"scriptex","description":"A native web component: links to various social media with SVG icons support","archived":false,"fork":false,"pushed_at":"2025-04-10T00:56:15.000Z","size":680,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T04:05:30.112Z","etag":null,"topics":["social-links","svg-icons","web-component"],"latest_commit_sha":null,"homepage":"https://socials.atanas.info/","language":"TypeScript","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/scriptex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"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},"funding":{"github":["scriptex"],"patreon":"atanas","open_collective":null,"ko_fi":"scriptex","tidelift":null,"community_bridge":null,"liberapay":"scriptex","issuehunt":"scriptex","otechie":null,"custom":["paypal.me/scriptex","revolut.me/scriptex"]}},"created_at":"2020-07-27T05:28:22.000Z","updated_at":"2025-03-24T18:23:06.000Z","dependencies_parsed_at":"2023-12-30T07:41:25.468Z","dependency_job_id":"ffe5e921-f9db-43e9-872d-e48774a247c8","html_url":"https://github.com/scriptex/socials","commit_stats":{"total_commits":252,"total_committers":4,"mean_commits":63.0,"dds":0.4365079365079365,"last_synced_commit":"6ae8f7f3b7ac0996b76dc042af7a4cd17eaae435"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fsocials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fsocials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fsocials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fsocials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scriptex","download_url":"https://codeload.github.com/scriptex/socials/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154981,"owners_count":21056543,"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":["social-links","svg-icons","web-component"],"created_at":"2024-10-12T18:28:35.055Z","updated_at":"2025-04-10T04:05:39.727Z","avatar_url":"https://github.com/scriptex.png","language":"TypeScript","readme":"\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n  \t\u003cbase href=\"https://raw-dot-custom-elements.appspot.com/scriptex/socials/1.7.0/socials/\"\u003e\n\t\u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"https://unpkg.com/scriptex-socials\"\u003e\u003c/script\u003e\n\t\u003csocial-links\u003e\u003c/social-links\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n\n[![Travis CI](https://travis-ci.com/scriptex/socials.svg?branch=master)](https://travis-ci.com/scriptex/socials)\n[![Github Build](https://github.com/scriptex/socials/workflows/Build/badge.svg)](https://github.com/scriptex/socials/actions?query=workflow%3ABuild)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/socials/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=scriptex/socials\u0026utm_campaign=Badge_Grade)\n[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-socials-master)\n[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/socials/badge)](https://www.codefactor.io/repository/github/scriptex/socials)\n[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=3574\u0026pid=5257\u0026bid=40799)\n[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/socials/README.md?pixel)](https://github.com/scriptex/socials/)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/scriptex-socials)\n\n# Atanas Atanasov's Socials\n\n\u003e Links to various social media\n\nThis is a native web component built with TypeScript, with no dependencies, which lists links to various social medias.\n\n## Install\n\n```sh\nnpm i scriptex-socials\n\n# or\n\nyarn add scriptex-socials\n```\n\n## Usage\n\nIn your JavaScript/TypeScript entry point:\n\n```javascript\nimport 'scriptex-socials';\n```\n\nYou can also include the web component directly from **unpkg.com**:\n\n```javascript\nimport('https://unpkg.com/scriptex-socials');\n```\n\nor\n\n```html\n\u003cscript async src=\"https://unpkg.com/scriptex-socials\"\u003e\u003c/script\u003e\n```\n\nThen add the component in your HTML/JSX markup:\n\n```html\n\u003csocial-links\u003e\u003c/social-links\u003e\n\n\u003c!-- or with custom color --\u003e\n\n\u003csocial-links style=\"color: red;\"\u003e\u003c/social-links\u003e\n\n\u003cdiv style=\"background: black;\"\u003e\n\t\u003csocial-links style=\"color: white;\"\u003e\u003c/social-links\u003e\n\u003c/div\u003e\n```\n\n## React with TypeScript\n\nIf you're using React with TypeScript, you need to extends the JSX `IntrinsicElements` interface so TypeScript knows that the `social-links` element exists.\n\nYou can do so in a `custom.d.ts` file in your project's root folder. Don't forget to add that file in your `tsconfig.json`!\n\n```typescript\ndeclare namespace JSX {\n\tinterface IntrinsicElements {\n\t\t'social-links': any;\n\t}\n}\n```\n\n## Contents\n\nCurrently it includes the following:\n\n\u003cdiv\u003e\n\u003ca href=\"https://atanas.info\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg\" alt=\"Go to my website\" width=\"24\" align=\"top\"\u003e Go to my website\u003c/a\u003e\n\n\u003ca href=\"mailto:hi@atanas.info\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg\" alt=\"Send me an email\" width=\"24\" align=\"top\"\u003e Send me an email\u003c/a\u003e\n\n\u003ca href=\"https://www.linkedin.com/in/scriptex/\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg\" alt=\"Find me on LinkedIn\" width=\"24\" align=\"top\"\u003e Find me on LinkedIn\u003c/a\u003e\n\n\u003ca href=\"https://github.com/scriptex\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg\" alt=\"See my projects on Github\" width=\"24\" align=\"top\"\u003e See my projects on Github\u003c/a\u003e\n\n\u003ca href=\"https://gitlab.com/scriptex\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg\" alt=\"See my projects on Gitlab\" width=\"24\" align=\"top\"\u003e See my projects on Gitlab\u003c/a\u003e\n\n\u003ca href=\"https://twitter.com/scriptexbg\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg\" alt=\"Follow me on Twitter\" width=\"24\" align=\"top\"\u003e Follow me on Twitter\u003c/a\u003e\n\n\u003ca href=\"https://www.npmjs.com/~scriptex\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg\" alt=\"See my packages on NPM\" width=\"24\" align=\"top\"\u003e See my packages on NPM\u003c/a\u003e\n\n\u003ca href=\"https://www.youtube.com/user/scriptex\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg\" alt=\"See my videos on YouTube\" width=\"24\" align=\"top\"\u003e See my videos on YouTube\u003c/a\u003e\n\n\u003ca href=\"https://stackoverflow.com/users/4140082/atanas-atanasov\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg\" alt=\"See my profile on StackOverflow\" width=\"24\" align=\"top\"\u003e See my profile on StackOverflow\u003c/a\u003e\n\n\u003ca href=\"https://codepen.io/scriptex/\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg\" alt=\"See my work on Codepen\" width=\"24\" align=\"top\"\u003e See my work on Codepen\u003c/a\u003e\n\n\u003ca href=\"https://profile.codersrank.io/user/scriptex\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg\" alt=\"See my profile on Codersrank\" width=\"24\" align=\"top\"\u003e See my profile on Codersrank\u003c/a\u003e\n\n\u003ca href=\"https://linktr.ee/scriptex\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg\" alt=\"See the rest of my links on Linktree\" width=\"24\" align=\"top\"\u003e See the rest of my links on Linktree\u003c/a\u003e\n\u003c/div\u003e\n\n## LICENSE\n\nMIT\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    Connect with me:\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"mailto:hi@atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.linkedin.com/in/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://github.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://gitlab.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://twitter.com/scriptexbg\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.npmjs.com/~scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.youtube.com/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://stackoverflow.com/users/4140082/atanas-atanasov\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://codepen.io/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg\" width=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://profile.codersrank.io/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://linktr.ee/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg\" height=\"20\" alt=\"\" /\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\nSupport and sponsor my work:\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A\u0026url=https%3A%2F%2Fgithub.com%2Fscriptex\u0026via=scriptexbg\u0026hashtags=software%2Cgithub%2Ccode%2Cawesome\" title=\"Tweet\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter\u0026color=38A1F3\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://paypal.me/scriptex\" title=\"Donate on Paypal\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal\u0026color=222d65\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://revolut.me/scriptex\" title=\"Donate on Revolut\"\u003e\n \u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://patreon.com/atanas\" title=\"Become a Patron\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon\u0026color=e64413\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://ko-fi.com/scriptex\" title=\"Buy Me A Coffee\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://liberapay.com/scriptex/donate\" title=\"Donate on Liberapay\"\u003e\n \u003cimg src=\"https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay\u0026logo=liberapay\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" title=\"Donate Bitcoin\"\u003e\n \u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" title=\"Donate Etherium\"\u003e\n \u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" title=\"Donate Shiba Inu\"\u003e\n \u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":["https://github.com/sponsors/scriptex","https://patreon.com/atanas","https://ko-fi.com/scriptex","https://liberapay.com/scriptex","https://issuehunt.io/r/scriptex","paypal.me/scriptex","revolut.me/scriptex","https://paypal.me/scriptex","https://liberapay.com/scriptex/donate"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fsocials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscriptex%2Fsocials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fsocials/lists"}