WIP

src/assets/scripts/homepage.js

@@ -70,6 +70,10 @@ if (window.location.hash === '#tweets') {
   window.location.hash = '#tweetsAndToots';
 }
 
+if (window.location.hash === '#tweetsAndToots') {
+  window.location.hash = '#posts';
+}
+
 const clickableCards = ['.foursquare-card', '.card-blog', '.reading-list-link'];
 const clickableCardEls = document.querySelectorAll(clickableCards.join(','));
 if (clickableCardEls && clickableCardEls.length) {

src/data/headerLinks.json

@@ -5,7 +5,7 @@
     { "title": "Speaking", "href": "/#speaking" },
     { "title": "Music", "href": "/#music" },
     { "title": "Photos", "href": "/#photos" },
-    { "title": "Tweets & Toots", "href": "/#tweetsAndToots" },
+    { "title": "Posts", "href": "/#posts" },
     { "title": "Places", "href": "/#places" },
     { "title": "Work", "href": "/work" },
     { "title": "Contact", "href": "/contact" },

src/includes/pw-card-bluesky.vue

@@ -34,12 +34,9 @@ export default {
 </script>
 
 <template>
-  <article class="card-bluesky contain-content overflow-hidden rounded bg-blue-600 font-bold text-white shadow-hard">
+  <article class="card-bluesky contain-content overflow-hidden rounded bg-bluesky font-bold text-white shadow-hard">
     <!-- Media Gallery -->
-    <div
-      v-if="hasEmbeddedMedia"
-      class="card-bluesky__gallery grid overflow-hidden rounded-tl rounded-tr border border-b-0 border-gray-300 bg-black"
-    >
+    <div v-if="hasEmbeddedMedia" class="card-bluesky__gallery grid overflow-hidden rounded-tl rounded-tr bg-black">
       <a
         v-for="(media, index) in post.media_attachments"
         :key="index"
@@ -48,7 +45,7 @@ export default {
         :class="{
           'aspect-ratio aspect-w-4 aspect-h-3': post.media_attachments.length > 1,
         }"
-        data-lightbox-image="media.url"
+        :data-lightbox-image="media.url"
         x-data
         x-init="$root.setAttribute('role', 'button'); $root.firstChild.innerText = 'Open post media in modal'"
         @click.prevent="$root.dispatchEvent(new CustomEvent('pw-lightbox-open', { bubbles: true }))"
@@ -68,7 +65,7 @@ export default {
     </div>
 
     <!-- Link Card -->
-    <div v-if="hasCard && !hasEmbeddedMedia" class="border border-b-0 border-gray-300">
+    <div v-if="hasCard && !hasEmbeddedMedia">
       <a :href="post.card.url" class="block hover:bg-blue-700">
         <img
           v-if="post.card.image"
@@ -108,7 +105,7 @@ export default {
     ></div>
 
     <!-- Footer -->
-    <div class="flex justify-between space-x-3 bg-blue-700 px-4 py-3 text-sm">
+    <div class="flex justify-between space-x-3 bg-bluesky-dark px-4 py-3 text-sm">
       <div>
         <span v-if="post.repostCount">
           <sprite-icon hash="twitter-retweet"></sprite-icon>
@@ -142,23 +139,6 @@ export default {
   text-overflow: ellipsis;
 }
 
-.card-bluesky__text > a {
-  color: white;
-  text-decoration: none;
-  text-shadow: 1px 1px 0 #2563eb, -1px 1px 0 #2563eb, 2px 0 0 #2563eb, -2px 0 0 #2563eb;
-  box-shadow: inset 0 -1px 0 0 #fff, inset 0 -3px 0 0 #2563eb;
-}
-
-.card-bluesky__gallery {
-  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
-}
-
-.lists-decorated ul,
-.lists-decorated ol {
-  list-style-type: disc;
-  padding-left: 2em;
-}
-
 .card-bluesky .ellipsis::after {
   content: '…';
 }

src/includes/pw-reading.vue

@@ -86,7 +86,7 @@ export default {
         </button>
       </li>
       <li
-        class="reading-list__item flex min-w-0 min-w-0 transform transform transition-all duration-75 focus-within:scale-105 focus-within:shadow-lg hover:scale-105 hover:shadow-lg"
+        class="reading-list__item flex min-w-0 transform transition-all duration-75 focus-within:scale-105 focus-within:shadow-lg hover:scale-105 hover:shadow-lg"
         :style="getRandomRotationVar()"
         :class="{ relative: index === 4 }"
         v-for="(item, index) in reading.slice(5, reading.length + 1)"

src/includes/pw-tweets.vue

@@ -18,7 +18,7 @@ export default {
   data() {
     return {
       itemsBeforeScrollSaver: 5,
-      itemsToShow: 9,
+      itemsToShow: 14,
     };
   },
   computed: {
@@ -43,16 +43,16 @@ export default {
 
 <template>
   <pw-section
-    section-key="tweets"
+    section-key="posts"
     x-ignore
     ax-load="idle"
     x-data="PwTweets"
     x-init="colcade()"
     x-intersect.margin.200px.once="twitterIntents()"
     x-on:resize.window.debounce="colcade()"
   >
-    <pw-section-heading title="Tweets and toots*" icon="twitter" section="tweets" />
-    <pw-lede class="links-underline mt-3"> Tweets and toots by me</pw-lede>
+    <pw-section-heading title="'Posts' (RIP Twitter)" icon="twitter" section="tweets" />
+    <pw-lede class="links-underline mt-3">Bluesky and sometimes Mastodon posts by me</pw-lede>
     <div role="list" x-ref="container" class="tweets-grid mt-12 grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
       <div role="listitem" class="tweets-grid__item" v-for="(post, index) in postsToShow.slice(0, itemsBeforeScrollSaver)" :key="index">
         <pw-card-mastodon v-if="post.pw.source === 'mastodon'" :toot="post" />
@@ -72,8 +72,8 @@ export default {
         </button>
       </div>
       <div role="listitem" v-for="(post, index) in postsToShow.slice(itemsBeforeScrollSaver)" :key="index" class="tweets-grid__item">
-        <pw-card-twitter :tweet="post" v-if="post.pw.source === 'twitter'" />
         <pw-card-mastodon v-if="post.pw.source === 'mastodon'" :toot="post" />
+        <pw-card-bluesky v-if="post.pw.source === 'bluesky'" :post="post" />
       </div>
       <div class="tweets-grid__col space-y-5"></div>
       <div class="tweets-grid__col hidden space-y-5 md:block"></div>

tailwind.config.js

@@ -35,6 +35,11 @@ module.exports = {
           DEFAULT: '#563ACB',
           dark: '#2F0C79',
         },
+        bluesky: {
+          // not the brand colours but this one has better contrast
+          DEFAULT: '#1A73CA',
+          dark: '#1869b9',
+        },
         'oc-yellow': {
           0: '#fff9db',
           1: '#fff3bf',