fix: line clamping, infinite scroll block & visual upgrades

2026-07-05 17:31:21 +02:00 · 2020-12-29 17:34:52 +00:00
parent 64e2d7ea55
commit 40e157f061
15 changed files with 117 additions and 36 deletions
@@ -17276,6 +17276,15 @@
        "resolve": "^1.14.2"
      }
    },
+    "tailwindcss-line-clamp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tailwindcss-line-clamp/-/tailwindcss-line-clamp-1.0.5.tgz",
+      "integrity": "sha512-tLqJAarIrz9Hgs3P3d98i329PN3vEYADabONPUJ1lccoJz/47Z8Vfhol9XfgjB1sQRZ+A4kdWIfwNJDHdnN1DQ==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
    "tailwindcss-touch": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/tailwindcss-touch/-/tailwindcss-touch-1.0.1.tgz",
@@ -48,6 +48,7 @@
    "svgo": "^1.3.2",
    "svgo-loader": "^2.2.1",
    "tailwindcss": "^1.9.6",
+    "tailwindcss-line-clamp": "^1.0.5",
    "tailwindcss-touch": "^1.0.1",
    "vue": "^2.6.12",
    "vuepress": "^1.7.1",
@@ -22,6 +22,7 @@
      <a
        class="text-blueGreen hover:underline ml-1 inline-block"
        href="#newsletter-form"
+        @click="blockLazyLoad()"
        >weekly newsletter</a
      >,
      <a
@@ -45,7 +46,12 @@ export default {
  components: {
    RSSSubscription,
  },
-  props: {},
+  props: {
+    blockLazyLoad: {
+      type: Function,
+      default: null,
+    },
+  },
  computed: {},
  methods: {},
 }
@@ -6,10 +6,10 @@
    <div class="flex-shrink max-w-xl mb-4 md:mb-0">
      <h2 class="type-h2">Stay informed</h2>
      <p class="mt-2">
-        Sign up for the IPFS Weekly newsletter (<a
+        Sign up for the IPFS Weekly newsletter (<router-link
+          :to="latestWeeklyPost ? latestWeeklyPost.path : ''"
          class="text-blueGreen hover:underline"
-          href="/weekly-110"
-          >example</a
+          >example</router-link
        >) for the latest on releases, upcoming developments, community events,
        and more.
      </p>
@@ -22,8 +22,8 @@
      method="post"
      target="_blank"
    >
-      <div id="mc_embed_signup_scroll" class="flex">
-        <div class="fields flex flex-col">
+      <div id="mc_embed_signup_scroll" class="grid gric-col-2">
+        <div class="fields flex col-start-1 col-span-2">
          <input
            id="mce-EMAIL"
            v-model="email"
@@ -34,26 +34,26 @@
            placeholder="email@your.domain"
            name="EMAIL"
          />
-          <label class="pt-2 italic" for="gdpr_28879">
+          <div class="ml-4">
            <input
-              id="gdpr_28879"
-              type="checkbox"
-              class=""
-              required
-              name="gdpr[28879]"
-              value="Y"
-            /><span class="pl-2">Please send me the newsletter</span>
-          </label>
+              id="mc-embedded-subscribe"
+              type="submit"
+              value="Subscribe"
+              name="subscribe"
+              class="p-2 text-white bg-blueGreen rounded cursor-pointer"
+            />
+          </div>
        </div>
-        <div class="ml-4">
+        <label class="pt-2 italic col-start-1 col-span-2" for="gdpr_28879">
          <input
-            id="mc-embedded-subscribe"
-            type="submit"
-            value="Subscribe"
-            name="subscribe"
-            class="p-2 text-white bg-blueGreen rounded"
-          />
-        </div>
+            id="gdpr_28879"
+            type="checkbox"
+            class=""
+            required
+            name="gdpr[28879]"
+            value="Y"
+          /><span class="pl-2">Please send me the newsletter</span>
+        </label>
      </div>
      <div id="mergeRow-gdpr">
        <div>
@@ -74,13 +74,17 @@
 </template>

 <script>
+import { mapState } from 'vuex'
+
 export default {
  name: 'NewsletterForm',
  props: {},
  data: () => ({
    email: null,
  }),
-  computed: {},
+  computed: {
+    ...mapState('appState', ['latestWeeklyPost']),
+  },
  methods: {},
 }
 </script>
@@ -8,9 +8,24 @@
      itemscope
      itemtype="https://schema.org/BlogPosting"
    >
+      <div class="cover embed-responsive embed-responsive-og">
+        <UnstyledLink :to="path" external class="embed-responsive-item">
+          <LazyImage
+            class="h-full p-2"
+            img-class="h-full"
+            itemprop="image"
+            :alt="title"
+            :src="`/header_images/${
+              frontmatter.header_image
+                ? frontmatter.header_image
+                : 'blog-placeholder.png'
+            }`"
+          />
+        </UnstyledLink>
+      </div>
      <div class="pt-1 pb-4 px-4 flex flex-grow flex-col">
        <UnstyledLink :to="path" external>
-          <h1 class="type-h5 font-bold text-primary hover:underline">
+          <h1 class="type-h5 font-bold text-primary hover:underline clamp-3">
            {{ title }}
          </h1>
        </UnstyledLink>
@@ -22,18 +37,29 @@
            class="type-p4 text-primary"
          />
        </div>
+        <footer class="flex-grow">
+          <p
+            v-if="frontmatter.description || frontmatter.description"
+            class="type-p1-serif text-primary clamp-5"
+            itemprop="description"
+          >
+            {{ frontmatter.description || frontmatter.description }}
+          </p>
+        </footer>
      </div>
    </article>
  </div>
 </template>

 <script>
+import LazyImage from '@theme/components/base/LazyImage'
 import UnstyledLink from '@theme/components/UnstyledLink'
 import PostMeta from '@theme/components/blog/PostMeta'

 export default {
  name: 'BlogNewslinkCard',
  components: {
+    LazyImage,
    UnstyledLink,
    PostMeta,
  },
@@ -34,11 +34,11 @@
    </div>
    <div class="grid-margins pt-8 flex justify-between items-center">
      <ul v-if="resolvedTags.length" class="tags flex mt-1" itemprop="keywords">
-        <PostTag v-for="tag in resolvedTags" :key="tag" :tag="tag" link />
+        <PostTag v-for="tag in resolvedTags" :key="tag" :tag="tag" link dark />
      </ul>
      <div class="flex">
        Share this item:
-        <PostSocials class="flex max-w-3xl" />
+        <PostSocials class="flex max-w-3xl ml-2" />
      </div>
    </div>
  </div>
@@ -11,7 +11,7 @@
      hashtags=""
    >
      <SVGIcon
-        class="w-6 h-6 opacity-50 hover:opacity-100 transition transition-opacity duration-300 ease-in-out"
+        class="w-6 h-6 opacity-50 fill-current text-blueGreen hover:opacity-100 transition transition-opacity duration-300 ease-in-out"
        :name="social.icon"
        :title="social.text"
      />
@@ -1,6 +1,9 @@
 <template>
  <li
-    class="post-tag p-1 mr-1 bg-white text-blueGreen hover:underline rounded cursor-pointer"
+    :class="[
+      'post-tag p-1 mr-1  hover:underline rounded cursor-pointer',
+      dark ? 'bg-blueGreen text-white' : 'bg-white text-blueGreen',
+    ]"
  >
    <router-link v-if="link" :to="{ path: '/', query: { tags: tag } }">
      #{{ tag }}
@@ -21,6 +24,10 @@ export default {
      type: String,
      required: true,
    },
+    dark: {
+      type: Boolean,
+      default: null,
+    },
  },
  methods: {
    handleTagClick() {
@@ -27,9 +27,7 @@
      </div>
      <div class="pt-1 pb-4 px-4 flex flex-grow flex-col">
        <router-link :to="path">
-          <h1
-            class="type-h5 font-bold text-primary hover:underline overflow-ellipsis overflow-hidden"
-          >
+          <h1 class="type-h5 font-bold text-primary hover:underline clamp-3">
            {{ title }}
          </h1>
        </router-link>
@@ -45,7 +43,7 @@
        <footer class="flex-grow">
          <p
            v-if="frontmatter.description || frontmatter.description"
-            class="type-p1-serif text-primary"
+            class="type-p1-serif text-primary clamp-5"
            itemprop="description"
          >
            {{ frontmatter.description || frontmatter.description }}
@@ -1,6 +1,6 @@
 <template>
  <div class="grid-margins opacity-85">
-    <LinksAndSocial />
+    <LinksAndSocial :block-lazy-load="blockLazyLoad" />
    <SearchCategoriesAndTags
      class="mt-2"
      :tags="tags"
@@ -35,6 +35,10 @@ export default {
      type: Number,
      required: true,
    },
+    blockLazyLoad: {
+      type: Function,
+      default: null,
+    },
  },
 }
 </script>
@@ -17,6 +17,7 @@
        :number-of-posts="pagesToShow.length"
        :tags="tags"
        :categories="categories"
+        :block-lazy-load="blockLazyLoad"
      />
      <div
        class="grid-margins pt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
@@ -172,6 +173,15 @@ export default {
    if (queryAuthor) {
      this.$store.commit('appState/setActiveAuthor', queryAuthor)
    }
+
+    const latestWeeklyPost = this.publicPages.find(
+      (item) =>
+        item.frontmatter &&
+        item.frontmatter.tags &&
+        item.frontmatter.tags.includes('weekly')
+    )
+
+    this.$store.commit('appState/setLatestWeeklyPost', latestWeeklyPost)
  },
  methods: {
    updateQuery() {
@@ -184,6 +194,9 @@ export default {
      }
      this.$router.replace({ query: newQuery }).catch(() => {})
    },
+    blockLazyLoad() {
+      this.infiniteScroll = false
+    },
    showMorePages() {
      this.numberOfPagesToShow = this.numberOfPagesToShow + 21
    },
@@ -10,6 +10,7 @@ const appState = {
    searchedText: [],
    activeCategory: null,
    activeAuthor: null,
+    latestWeeklyPost: null,
  },
  mutations: {
    toggleMobileNav: (state, data) => {
@@ -33,6 +34,9 @@ const appState = {
    setActiveAuthor: (state, data) => {
      Vue.set(state, 'activeAuthor', data)
    },
+    setLatestWeeklyPost: (state, data) => {
+      Vue.set(state, 'latestWeeklyPost', data)
+    },
    clearFilters: (state) => {
      Vue.set(state, 'activeTags', [])
      Vue.set(state, 'searchedText', [])
@@ -41,6 +41,7 @@
  }
  a {
    @apply transition duration-200;
+    @apply text-blueGreen;
  }
  a.header-anchor {
    font-size: 0.85em;
@@ -1 +1 @@
-<svg height="34" viewBox="4 4 24 24" width="34" xmlns="http://www.w3.org/2000/svg"><path d="m13.0553 25.6358c8.0155 0 12.4015-6.647 12.4015-12.4015 0-.187 0-.374-.0085-.561.85-.612 1.5895-1.3855 2.176-2.261-.782.3485-1.6235.578-2.5075.6885.901-.5355 1.5895-1.39403 1.921-2.41403-.8415.5015-1.7765.8585-2.771 1.054-.799-.85-1.9295-1.377-3.179-1.377-2.4055 0-4.3605 1.95503-4.3605 4.36053 0 .34.0425.6715.1105.9945-3.621-.1785-6.834-1.921-8.98449-4.55603-.374.646-.5865 1.39403-.5865 2.19303 0 1.513.7735 2.8475 1.938 3.6295-.714-.0255-1.3855-.221-1.972-.544v.0595c0 2.108 1.5045 3.876 3.49349 4.2755-.3655.102-.74799.153-1.14749.153-.2805 0-.5525-.0255-.816-.0765.5525 1.734 2.16749 2.992 4.07149 3.026-1.496 1.173-3.37449 1.87-5.41449 1.87-.3485 0-.697-.017-1.037-.0595 1.921 1.224 4.21599 1.9465 6.67249 1.9465z"/></svg>
+<svg height="34" viewBox="4 3 24 24" width="34" xmlns="http://www.w3.org/2000/svg"><path d="m13.0553 25.6358c8.0155 0 12.4015-6.647 12.4015-12.4015 0-.187 0-.374-.0085-.561.85-.612 1.5895-1.3855 2.176-2.261-.782.3485-1.6235.578-2.5075.6885.901-.5355 1.5895-1.39403 1.921-2.41403-.8415.5015-1.7765.8585-2.771 1.054-.799-.85-1.9295-1.377-3.179-1.377-2.4055 0-4.3605 1.95503-4.3605 4.36053 0 .34.0425.6715.1105.9945-3.621-.1785-6.834-1.921-8.98449-4.55603-.374.646-.5865 1.39403-.5865 2.19303 0 1.513.7735 2.8475 1.938 3.6295-.714-.0255-1.3855-.221-1.972-.544v.0595c0 2.108 1.5045 3.876 3.49349 4.2755-.3655.102-.74799.153-1.14749.153-.2805 0-.5525-.0255-.816-.0765.5525 1.734 2.16749 2.992 4.07149 3.026-1.496 1.173-3.37449 1.87-5.41449 1.87-.3485 0-.697-.017-1.037-.0595 1.921 1.224 4.21599 1.9465 6.67249 1.9465z"/></svg>
@@ -23,6 +23,13 @@ const theme = {
      140: '1.4',
      150: '1.5',
    },
+    lineClamp: {
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+    },
    maxWidth: {
      '1/6': '16.666667%',
      '1/5': '20%',
@@ -194,7 +201,7 @@ const theme = {
    },
    link: {
      fontWeight: theme('fontWeight.bold'),
-      color: theme('colors.webBlue'),
+      color: theme('colors.blueGreen'),
      '&:hover': {
        textDecoration: 'underline',
      },
@@ -241,5 +248,6 @@ module.exports = {
  plugins: [
    require('tailwindcss-typography')({ componentPrefix: 'type-' }),
    require('./tailwind.gradients'),
+    require('tailwindcss-line-clamp'),
  ],
 }