Merge pull request #18 from ubc-web-services/dev

Add Bluesy option to unit social footer links

Author: occupant

kraken.theme

@@ -378,6 +378,7 @@ function kraken_preprocess_page(&$variables)
     // Unit Social media options.
     $variables['unit_facebook_option'] = theme_get_setting('unit_social_facebook');
     $variables['unit_instagram_option'] = theme_get_setting('unit_social_instagram');
+    $variables['unit_bluesky_option'] = theme_get_setting('unit_social_bluesky');
     $variables['unit_linkedin_option'] = theme_get_setting('unit_social_linkedin');
     $variables['unit_spotify_option'] = theme_get_setting('unit_social_spotify');
     $variables['unit_twitter_option'] = theme_get_setting('unit_social_twitter');

templates/includes/footer.unit.html.twig

@@ -4,6 +4,7 @@
 {% set instagram_attributes = create_attribute() %}
 {% set youtube_attributes = create_attribute() %}
 {% set linkedin_attributes = create_attribute() %}
+{% set bluesky_attributes = create_attribute() %}
 
 {% if footer_color == "gold" %}
   {%
@@ -60,7 +61,7 @@
       </address>
     </div>
     <div class="col-span-12 md--text-right md--col-span-7 md--row-span-1">{{ page.unit_footer_menu }}</div>
-    {% if unit_facebook_option or unit_twitter_option or unit_youtube_option or unit_linkedin_option or unit_instagram_option %}
+    {% if unit_facebook_option or unit_twitter_option or unit_youtube_option or unit_linkedin_option or unit_instagram_option or unit_bluesky_option %}
     <nav class="col-span-12 md--col-span-7 md--row-span-1 md--text-right">
       <ul class="flex flex-wrap justify-start pl-0 my-0 list-none md--justify-end">
         {% if unit_facebook_option %}
@@ -93,6 +94,16 @@
           </a>
         </li>
         {% endif %}
+        {% if unit_bluesky_option %}
+        <li>
+          <a href="{{ unit_bluesky_option }}" class="block pr-3 text-xs no-underline">
+            <span class="sr-only">Bluesky</span>
+            <svg{{ bluesky_attributes.addClass(social_classes).setAttribute('role', 'presentation') }}>
+              <use xlink:href="#icon-bluesky"></use>
+            </svg>
+          </a>
+        </li>
+        {% endif %}
         {% if unit_spotify_option %}
         <li>
           <a href="{{ unit_spotify_option }}" class="block pr-3 text-xs no-underline">

templates/includes/svg.html.twig

@@ -26,6 +26,11 @@
     <path d="M16.7574 20.2426L21 16L16.7574 11.7574" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
     <path d="M11 16H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
   </symbol>
+  <symbol id="icon-bluesky" viewBox="0 0 600 530" aria-labelledby="title-icon-bluesky" aria-describedby="description-icon-bluesky" role="img">
+		<title id="title-icon-bluesky">Bluesky</title>
+		<desc id="description-icon-bluesky">The logo for the Bluesky social media service.</desc>
+		<path fill="currentColor" d="M135.72,44.03c66.496,49.921,138.02,151.14,164.28,205.46,26.262-54.316,97.782-155.54,164.28-205.46,47.98-36.021,125.72-63.892,125.72,24.795,0,17.712-10.155,148.79-16.111,170.07-20.703,73.984-96.144,92.854-163.25,81.433,117.3,19.964,147.14,86.092,82.697,152.22-122.39,125.59-175.91-31.511-189.63-71.766-2.514-7.38-3.69-10.832-3.708-7.896-.017-2.936-1.194.517-3.708,7.896-13.714,40.255-67.233,197.36-189.63,71.766-64.444-66.128-34.605-132.26,82.697-152.22-67.108,11.421-142.55-7.449-163.25-81.433-5.956-21.282-16.111-152.36-16.111-170.07,0-88.687,77.742-60.816,125.72-24.795h.003Z"></path>
+	</symbol>
   <symbol id="icon-bookmark" viewbox="0 0 32 32" aria-labelledby="title-icon-bookmark" aria-describedby="description-icon-bookmark" role="img">
     <title id="title-icon-bookmark">A bookmark</title>
     <desc id="description-icon-bookmark">An ribbon to indicate a special marker.</desc>

theme-settings.php

@@ -546,13 +546,22 @@ function kraken_form_system_theme_settings_alter(&$form, FormStateInterface &$fo
 
   $form['unitsocial']['unit_social_twitter'] = [
     '#type' => 'textfield',
-    '#title' => t('Twitter Account Link'),
+    '#title' => t('X (Twitter) Account Link'),
     '#default_value' => theme_get_setting('unit_social_twitter'),
     '#size' => 60,
     '#maxlength' => 128,
     '#description' => t('Format of https://www.xyz.com'),
   ];
 
+  $form['unitsocial']['unit_social_bluesky'] = [
+    '#type' => 'textfield',
+    '#title' => t('Bluesky Account Link'),
+    '#default_value' => theme_get_setting('unit_social_bluesky'),
+    '#size' => 60,
+    '#maxlength' => 128,
+    '#description' => t('Format of https://www.xyz.com'),
+  ];
+
   $form['unitsocial']['unit_social_instagram'] = [
     '#type' => 'textfield',
     '#title' => t('Instagram Account Link'),