[Website] Fix Twitter button and add LinkedIn button (#570)

This fixes the broken Twitter follow button at the top of the Arrow
homepage, replacing it with an X follow button. This also adds a
LinkedIn follow button.

Author: ianmcook

NOTICE.txt

@@ -4,6 +4,10 @@ Copyright 2017-2022 The Apache Software Foundation
 This product includes software developed at
 The Apache Software Foundation (http://www.apache.org/).
 
+This product includes software from https://github.com/buttons/github-buttons (BSD 2-Clause)
+ * Copyright (c) 2025, なつき
+ * All rights reserved.
+
 The deployed version of the website includes files generated by Jekyll (MIT)
  * Copyright (c) 2008-2022 Tom Preston-Werner and Jekyll contributors
  * https://github.com/jekyll/jekyll

_includes/socials.html

@@ -0,0 +1,47 @@
+{% comment %}
+Unofficial github:buttons
+
+Copyright (c) 2025, なつき
+All rights reserved.
+
+BSD 2-Clause License
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+{% endcomment %}
+<div class="social-badges">
+  <div class="social-badge"> <!-- GitHub -->
+    <a class="github-button" href="https://github.com/apache/arrow" data-size="large" data-show-count="true" aria-label="Star apache/arrow on GitHub">Star</a>
+  </div>
+  <style type="text/css">
+    .custom-social-badge{display:inline;padding:4px}.custom-social-badge a{text-decoration:none;outline:0}.custom-social-badge .widget{display:inline-block;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:0;line-height:0;white-space:nowrap}.custom-social-badge .btn:not(:last-child){border-radius:.25em 0 0 .25em}.custom-social-badge .widget-lg .btn{height:28px;padding:5px 10px;font-size:12px;line-height:16px}.custom-social-badge .btn{border-radius:.25em;color:#25292e;background-color:#ebf0f4;border-color:#d1d9e0;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f6f8fa'/%3e%3cstop offset='90%25' stop-color='%23ebf0f4'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");background-image:-moz-linear-gradient(top,#f6f8fa,#ebf0f4 90%);background-image:linear-gradient(180deg,#f6f8fa,#ebf0f4 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF6F8FA',endColorstr='#FFEAEFF3');filter:none;position:relative;display:inline-block;display:inline-flex;height:14px;padding:2px 5px;font-size:11px;font-weight:600;line-height:14px;vertical-align:bottom;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-repeat:repeat-x;background-position:-1px -1px;background-size:110% 110%;border:1px solid}.custom-social-badge .btn:hover,.custom-social-badge .btn:focus{background-color:#e5eaee;background-position:0 -.5em;border-color:#d1d9e0;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23eff2f5'/%3e%3cstop offset='90%25' stop-color='%23e5eaee'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");background-image:-moz-linear-gradient(top,#eff2f5,#e5eaee 90%);background-image:linear-gradient(180deg,#eff2f5,#e5eaee 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFEFF2F5',endColorstr='#FFE4E9ED')}.custom-social-badge .btn:hover,.custom-social-badge .btn:focus{filter:none}.custom-social-badge .btn:active{background-color:#e6eaef;border-color:#d1d9e0;background-image:none;filter:none}
+  </style>
+  <div class="custom-social-badge"> <!-- LinkedIn -->
+    <span>
+      <div class="widget widget-lg"><a class="btn" href="https://www.linkedin.com/company/apache-arrow/" rel="noopener" target="_blank" aria-label="Follow Apache Arrow on LinkedIn"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" aria-hidden="true"><path d="M14.5455 0H1.45455C0.650909 0 0 0.650909 0 1.45455V14.5455C0 15.3491 0.650909 16 1.45455 16H14.5455C15.3491 16 16 15.3491 16 14.5455V1.45455C16 0.650909 15.3491 0 14.5455 0ZM5.05746 13.0909H2.912V6.18764H5.05746V13.0909ZM3.96291 5.20073C3.27127 5.20073 2.712 4.64 2.712 3.94982C2.712 3.25964 3.272 2.69964 3.96291 2.69964C4.65236 2.69964 5.21309 3.26036 5.21309 3.94982C5.21309 4.64 4.65236 5.20073 3.96291 5.20073ZM13.0938 13.0909H10.9498V9.73382C10.9498 8.93309 10.9353 7.90327 9.83491 7.90327C8.71855 7.90327 8.54691 8.77527 8.54691 9.67564V13.0909H6.40291V6.18764H8.46109V7.13091H8.49018C8.77673 6.58836 9.47636 6.016 10.52 6.016C12.6924 6.016 13.0938 7.44582 13.0938 9.30473V13.0909V13.0909Z" fill="#000"></path></svg>&nbsp;<span>Follow</span></a></div>
+    </span>
+  </div>
+  <div class="custom-social-badge"> <!-- X -->
+    <span>
+      <div class="widget widget-lg"><a class="btn" href="https://x.com/ApacheArrow" rel="noopener" target="_blank" aria-label="Follow Apache Arrow on X"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="16" height="16" role="img" aria-hidden="true"><path fill="#000" d="M9.332 6.925 14.544 1h-1.235L8.783 6.145 5.17 1H1l5.466 7.78L1 14.993h1.235l4.78-5.433 3.816 5.433H15L9.332 6.925ZM7.64 8.848l-.554-.775L2.68 1.91h1.897l3.556 4.975.554.775 4.622 6.466h-1.897L7.64 8.848Z"></path></svg>&nbsp;<span>Follow</span></a></div>
+    </span>
+  </div>
+</div>

_layouts/home.html

@@ -9,14 +9,7 @@
       <img src="{{ site.baseurl }}/img/arrow-inverse.png" style="max-width: 70%;"/>
       <p class="lead">The universal columnar format and multi-language toolbox for fast data interchange and in-memory analytics</p>
 
-      <div class="social-badges">
-        <div class="social-badge">
-          <a class="github-button" href="https://github.com/apache/arrow" data-size="large" data-show-count="true" aria-label="Star apache/arrow on GitHub">Star</a>
-        </div>
-        <div class="social-badge">
-          <a href="https://twitter.com/ApacheArrow?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Follow @ApacheArrow</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-        </div>
-      </div>
+      {% include socials.html %}
     </div>
   </div>
   <div class="container p-4 pt-5">
@@ -26,7 +19,7 @@
 
     {% include footer.html %}
   </div>
-<!-- Place this tag in your head or just before your close body tag. -->
+
 <script async defer src="https://buttons.github.io/buttons.js"></script>
 </body>
 </html>

css/main.scss

@@ -117,5 +117,5 @@ figure {
 
 .social-badge {
   display: inline;
-  padding: 12px;
+  padding: 4px;
 }