<p dir="auto">This PR addresses "Please make contact information fields, how to contact the user, email address, telegrams, various social networks <a href="https://www.openstreetmap.org" rel="nofollow">https://www.openstreetmap.org</a>" issue mentioned in the <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="451858598" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2245" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2245/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/2245">#2245</a></p>
<h3 dir="auto">Description</h3>
<p dir="auto">This PR adds:</p>
<ul dir="auto">
<li>DB: Social links table, which contains social links added by the user</li>
<li>Model: Parser to differentiate different kind of websites</li>
<li>Controller: Logic for CRUD operations for social links</li>
<li>View: Functionality to show, edit, add and delete social links</li>
<li>JS: Was only used for adding and removing fields on the user side when they interact to the social links fields</li>
</ul>
<p dir="auto">Currently parser parses these websites and adds their icons which are taken from Bootstrap-Icons:</p>
<ul dir="auto">
<li>Discord</li>
<li>Facebook</li>
<li>Github</li>
<li>Gitlab</li>
<li>Instagram</li>
<li>Linkedin</li>
<li>Line</li>
<li>Mastodon</li>
<li>Medium</li>
<li>Quora</li>
<li>Reddit</li>
<li>Skype</li>
<li>Slack</li>
<li>Snapchat</li>
<li>Stack Overflow</li>
<li>Strava</li>
<li>Substack</li>
<li>Telegram</li>
<li>Threads</li>
<li>Tik-Tok</li>
<li>Twitch</li>
<li>X (Twitter)</li>
<li>Vimeo</li>
<li>WhatsApp</li>
<li>YouTube</li>
</ul>
<p dir="auto">Discord, Line, Skype and Slack doesn't show username in the URL. To avoid showing some Id numbers on the profile page, for these cases instead of the Id only the name of the application is shown.<br>
Applications other than those mentioned in the list show their URL on the profile page and have general web icon (globe icon).<br>
If there is an idea that some of them should be removed or others should be added, feel free to share recommendations.</p>
<p dir="auto">Parser was done in the Ruby to avoid adding more JS client-side logic to the website. If it is preferable, it can be moved to JS.</p>
<h3 dir="auto">How has this been tested?</h3>
<p dir="auto">There are validation and functional tests written to test the functionality. In addition to this, different kind of manual testing was done to ensure that all the icons, errors, fields and etc. were displayed correctly.</p>
<h3 dir="auto">Screenshots</h3>
<p dir="auto">Logged out:<br>
<a href="https://github.com/user-attachments/assets/cbd7bb83-5363-463b-bbad-92695394fb77">image.png (view on web)</a><br>
<a href="https://github.com/user-attachments/assets/2254be01-be15-4c2a-a530-2e0617ad6638">image.png (view on web)</a></p>
<p dir="auto">Logged in:<br>
<a href="https://github.com/user-attachments/assets/c183b9b3-50e0-4ce7-888b-7a0228fc0547">image.png (view on web)</a></p>
<p dir="auto">Edit Profile page:<br>
<a href="https://github.com/user-attachments/assets/f7c14102-0d3f-4685-a243-1281ae9c8751">image.png (view on web)</a><br>
<a href="https://github.com/user-attachments/assets/aaf61af9-c3b2-4f7c-9118-3339dcbda6f3">image.png (view on web)</a></p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/5439'>https://github.com/openstreetmap/openstreetmap-website/pull/5439</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/commits/471cbf6462bf835a1a3e35dbd72862d4a6e75b3c" class="commit-link">471cbf6</a> Add social profile links</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files">39 files</a>)</p>
<ul>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-5dd37731936e0c6b56c8b0495a523cd5b1a690c33f49ccef31e06d1ffe9402a1">app/assets/images/social_icons/discord.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-c5c4e0bb0e27ef1a21729f6aec9b6249e78324764d2173d62509647650522ca3">app/assets/images/social_icons/facebook.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-fb214743c319d616a88360ff110324c80011411346cb7ea48e008cb8cb64d8be">app/assets/images/social_icons/github.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-197c483cc3046149ae5b145dc13c0df144677e18d431fc62e085fa320ca275e3">app/assets/images/social_icons/gitlab.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-9b71531fe2d2cd62f282ee21eb01a9d903a174efaaaf2dfd1e7c94a0bd29d2dd">app/assets/images/social_icons/instagram.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-9b543b65640dcef343280d02fea1f766f24992a8df0d374341b380974e558f99">app/assets/images/social_icons/line.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-c869fe797e05c3308cc1e38451313fe367e6c84b2d987763d95f03c59776604f">app/assets/images/social_icons/linkedin.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-f0801e7ab222e01caebb482583cb8c2e6086e335ec2bdd3c42ec1664d6551506">app/assets/images/social_icons/mastodon.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-814f761157e390deb1e0813cf3d9dd7b542fed53307d1a05037c9827fadeb487">app/assets/images/social_icons/medium.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-501648ebfe2eefa5b3794da435cffe4f120834d4e72954067dfbc35b532ad37f">app/assets/images/social_icons/other.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-0d8892fcb197f5fa7e6739eb89d014feaf9cebdea0fd58bdcb176397f3734264">app/assets/images/social_icons/quora.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-427bdbc3a6952ddcb656fd4117a378dbdaa31632eb0a07075e35ebbdd31c6721">app/assets/images/social_icons/reddit.svg</a>
(4)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-e42588f8d1a6a6c576b5a83be178155b21bf67e7b05dffb6be10dfe976e1cb1a">app/assets/images/social_icons/skype.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-6402bb2fe365feed15911b9743dbf83d4827dfeedc25470785cc00a438321a4b">app/assets/images/social_icons/slack.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-235f862feff93a3c97ba4a96fde191981e6109ffe4288b123dce73bebbbde834">app/assets/images/social_icons/snapchat.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-570d1515ba5d09aec2b40d915f03a5cd8a65021ccb8129a4175853cef33c6015">app/assets/images/social_icons/stackoverflow.svg</a>
(4)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-face1ef6ca24d479def864387563daf5a4bea01062febcdd4cb5ef8eb2730426">app/assets/images/social_icons/strava.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-4470f3f7ff26dec631089d129688ab60cada011c761d05348e08af70fcebc8e9">app/assets/images/social_icons/substack.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-d1f21be5850e950cfae9516b66d52e09c0933732aebabe15e8481ad058421d5e">app/assets/images/social_icons/telegram.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-dbd487a8aa75b198f03a722ecec56f6cca1f07f28aa9140f39a105ee65c07bf7">app/assets/images/social_icons/threads.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-93e3a7699067373501732b1ac2acd3fa1f7b328b424a9cdfa3da313a2a8591e0">app/assets/images/social_icons/tiktok.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-003a05ffe679393aac2cfc5b6cf92570465d1104954629eb7f8dad5b744f285e">app/assets/images/social_icons/twitch.svg</a>
(4)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-c331f87aad75877b05296b8bdede5a5046e5a28b4920460f3a158658022a6113">app/assets/images/social_icons/twitter_x.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-9a3c3693deb02f3b1747f6e1b1d7bacd3598b1b76e9f6d47ed5655fab27b3367">app/assets/images/social_icons/vimeo.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-cd92cbf9a362261a4afc48e5d1e6d3529e7fd9ba2445f6214cf50e5444dbe1ca">app/assets/images/social_icons/whatsapp.svg</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-4fdd9cca004f1e16b4e83b4fde35d061fa12c8026f6baaf34ec54bfe2dcf5744">app/assets/images/social_icons/youtube.svg</a>
(3)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-6bf5e2b503c6238cb80234a21524267bec1b1a820855412a5795c6296f11cb89">app/assets/javascripts/user.js</a>
(23)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-7a47d335107fc35c2e79cc9c2b0a195c863594dd2343bcd48a4c770ac4af673c">app/controllers/profiles_controller.rb</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-76ec56974a8430c13dfc6d82c2afb6024bc8814baead95dc20a764465d712764">app/models/social_link.rb</a>
(48)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-9802ca3c9c4cf89904fd44bc114e35ebdf2c5dd3d5b645491e2b253e1afef29b">app/models/user.rb</a>
(3)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-6091542e4570d68ca546a4a893b0d0202a75b9aa6fabf4e8aa0b4122ae6a3544">app/views/profiles/edit.html.erb</a>
(15)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-a528c5fa5a4cc4008f1d6c8f34ed8e7ea8c47e6e2acbfb7566de08942a17637f">app/views/social_links/_show.html.erb</a>
(8)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-78ff736409d758722403cce31873ba803b3fb526d37398ca21caa557b54dfd95">app/views/users/show.html.erb</a>
(17)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-44438ce218f5287c58d0017f965d888715635d94280669896f75841fbd7b4cd7">config/locales/en.yml</a>
(8)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-5da7ece65b8ebad5b204e90b756a722205ecaf8781e99c485c27a5c81d7757fd">db/migrate/20241128070750_create_social_links.rb</a>
(10)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-1dd5a8f580b9615769ddc19a64a98f455d9d20eb149c443f41d9d3c797d39b12">db/structure.sql</a>
(63)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-6ad6fcf04b256a25747cfe704f2e34405ccb340f00b049eb348ee02410d747c5">test/controllers/profiles_controller_test.rb</a>
(9)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-d832442c3c49bdf94ddc1e8a6daeefbfd35b2b2bbdc35ae42a5278d3864bd024">test/factories/social_link.rb</a>
(6)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439/files#diff-92c1cadd376f4df5cca3d30fce4f337ff5ff57bab847b6c57209a807a6df599d">test/models/social_link_test.rb</a>
(49)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5439.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/5439.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5439.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/5439.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5439">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLOFPHZ5EITEZAH3K432G7NPDAVCNFSM6AAAAABUCYTSJCVHI2DSMVQWIX3LMV43ASLTON2WKOZSG42TKNRWHA4DMMQ">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLJIHO77M432K2XIO2L2G7NPDA5CNFSM6AAAAABUCYTSJCWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHKIQBLPY.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/5439</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/5439",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5439",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>