fix: responsiveness, favicons & query filters

2026-07-30 21:43:06 +02:00 · 2020-12-28 17:18:07 +00:00
parent b85a7c546d
commit 92ba12ed40
29 changed files with 152 additions and 24 deletions
@@ -6,7 +6,7 @@ const CANONICAL_BASE = process.env.CANONICAL_BASE || ''
 const IPFS_DEPLOY = process.env.IPFS_DEPLOY === 'true' || false

 module.exports = {
-  title: 'IPFS Blog',
+  title: 'IPFS Blog & News',
  description:
    'This is the IPFS Starlog, a series of communications about the IPFS Project.',
  domain: CANONICAL_BASE,
@@ -14,7 +14,7 @@ module.exports = {
  locales: {
    '/': {
      lang: 'en-US',
-      title: 'IPFS Blog',
+      title: 'IPFS Blog & News',
      description:
        'This is the IPFS Starlog, a series of communications about the IPFS Project.',
    },
@@ -143,7 +143,7 @@ module.exports = {
            layout: 'Blog',
            itemLayout: 'BlogPost',
            frontmatter: {
-              title: 'Blog',
+              title: 'Home',
              description:
                'This is the IPFS Starlog, a series of communications about the IPFS Project.',
            },
@@ -1 +1,78 @@
-<svg height="700pt" preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 700" width="700pt" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.1 0 0 -.1 0 700)"><path d="m1635 6980c-16-11-37-23-45-27-15-7-478-274-541-312-19-12-41-24-49-28s-80-45-160-91c-80-47-165-96-190-110-25-13-70-39-100-57s-89-52-130-76c-85-50-120-70-142-84-26-16-32-58-11-82 18-21 727-443 744-443 5 0 9-4 9-9s8-11 18-15c9-3 24-10 32-15 24-15 223-132 655-387 55-32 108-63 117-69 9-5 29-17 45-26 15-9 152-89 303-179 151-89 291-171 310-182 19-10 58-33 85-50 28-17 64-38 80-48 17-9 120-70 230-135 543-321 602-354 636-356 27-2 73 20 229 111 107 62 211 122 230 132 19 11 76 44 125 73 78 45 347 201 455 263 276 158 388 225 402 242 24 30 7 71-40 97-20 11-122 71-227 133-104 62-320 189-480 283-159 93-348 204-420 247-71 43-245 145-385 227-140 83-536 316-880 518-344 203-663 390-709 417-98 57-151 68-196 38z"/><path d="m5317 6982c-10-2-132-69-270-149-139-80-270-155-292-168-61-35-633-364-669-385-17-10-64-37-104-60-78-44-102-75-86-111 12-25 1405-848 1449-855 34-6 67 10 268 127 70 41 142 82 160 93 18 10 169 97 337 194 168 96 364 209 435 250 72 41 152 87 178 102 86 48 106 80 74 120-7 9-93 63-192 122-99 58-405 238-680 400s-509 300-521 306c-26 14-63 20-87 14z"/><path d="m36 5785c-21-16-18 201-30-2569-6-1356-8-1296 47-1324 12-7 40-23 62-36 22-14 51-31 65-39 30-17 102-60 690-407 611-360 557-330 587-330 53 0 52-4 54 634 3 1475 0 1396 49 1409 26 7 26 7 720-403 338-199 633-373 655-385 22-13 109-64 193-114 153-90 174-99 201-82 17 11 17 30 25 1065l5 649-32 32c-18 17-140 94-272 172-132 77-463 272-735 433s-511 301-530 312c-50 29-355 209-482 285-59 35-117 69-130 76-25 14-123 72-148 87-28 18-366 216-380 224-8 4-24 12-35 19s-96 58-190 113c-352 209-350 208-389 179z"/><path d="m6895 5729c-22-12-53-29-70-39-16-10-50-29-75-42-25-14-101-58-170-98-68-40-138-81-155-90-16-10-46-26-65-38-19-11-197-113-395-227-451-259-442-254-460-291-12-26-14-180-16-1051-1-897-3-1024-17-1052-11-23-40-46-101-82-47-27-93-53-101-58-14-9-581-335-645-371-16-10-160-93-320-185-159-92-306-176-325-187-201-113-287-168-303-195-16-28-18-88-21-848-3-450-1-828 4-840s20-25 35-29c22-6 91 31 428 225 221 128 413 239 427 246 14 8 43 25 65 39s51 30 65 37 68 37 120 68 111 65 130 76c54 31 423 243 535 308 55 32 130 75 167 96s82 47 100 58c18 10 105 60 193 111 141 82 192 112 327 189 544 311 694 402 712 431 21 36 18-235 30 2588 6 1218 5 1233-14 1252-25 25-36 25-85-1z"/><path d="m5065 4673c-28-14-178-100-335-191s-303-175-325-187c-22-13-139-80-260-150s-268-155-326-188c-167-96-148 18-153-948-5-894-6-869 48-869 19 0 615 335 916 514 30 18 156 91 280 161s232 136 242 146c14 17 16 77 18 631 1 337 2 716 3 842l2 228-24 19c-29 24-27 24-86-8z"/><path d="m1850 2570c-19-19-20-34-21-217 0-109-1-487-2-840l-2-643 30-29c24-23 292-187 520-317 22-12 231-135 464-273 234-138 432-251 441-251s25 6 35 14c23 16 22-12 26 1017 3 624 2 678-14 702-10 15-107 80-234 155-669 397-1194 702-1207 702-9 0-25-9-36-20z"/></g></svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="928.000000pt" height="928.000000pt" viewBox="0 0 928.000000 928.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,928.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4604 8459 c-38 -22 -81 -45 -96 -51 -16 -7 -28 -16 -28 -20 0 -4 -4
+-8 -9 -8 -5 0 -44 -20 -85 -45 -42 -25 -80 -45 -85 -45 -5 0 -14 -7 -21 -15
+-7 -8 -16 -13 -20 -10 -4 3 -10 -2 -14 -10 -3 -8 -10 -15 -16 -15 -7 0 -44
+-19 -83 -42 -40 -23 -75 -41 -79 -40 -5 1 -8 -2 -8 -8 0 -5 -15 -16 -32 -24
+-18 -8 -55 -29 -83 -45 -114 -68 -200 -115 -207 -113 -5 1 -8 -1 -8 -6 0 -4
+-21 -19 -47 -32 -27 -14 -50 -28 -53 -31 -5 -5 -59 -36 -150 -85 -19 -11 -37
+-21 -40 -24 -3 -3 -26 -17 -52 -30 -27 -14 -48 -29 -48 -33 0 -5 -4 -5 -10 -2
+-5 3 -10 2 -10 -3 0 -5 -8 -12 -17 -15 -10 -3 -40 -20 -68 -36 -27 -17 -62
+-36 -77 -42 -16 -6 -28 -14 -28 -18 0 -4 -16 -13 -35 -21 -19 -8 -35 -17 -35
+-21 0 -4 -8 -9 -17 -13 -10 -3 -43 -20 -74 -38 -58 -35 -203 -118 -254 -146
+-16 -9 -32 -19 -35 -22 -3 -3 -14 -10 -25 -16 -103 -56 -144 -80 -167 -95 -14
+-11 -29 -19 -33 -19 -4 0 -27 -13 -52 -30 -24 -16 -46 -30 -49 -30 -3 0 -43
+-22 -90 -50 -47 -27 -89 -50 -94 -50 -6 0 -10 -4 -10 -8 0 -4 -12 -13 -27 -20
+-16 -7 -46 -23 -68 -36 -137 -80 -219 -126 -223 -126 -3 0 -13 -6 -21 -14 -9
+-7 -36 -24 -61 -37 -24 -13 -52 -30 -62 -38 -9 -8 -25 -16 -35 -17 -10 -2 -19
+-8 -21 -13 -2 -6 -7 -11 -11 -11 -5 0 -46 -22 -92 -48 -46 -27 -95 -55 -109
+-63 -14 -8 -27 -16 -30 -19 -3 -3 -23 -15 -45 -26 l-40 -22 0 -1948 0 -1949
+27 -13 c16 -7 28 -18 28 -23 0 -6 4 -8 9 -4 5 3 16 -1 24 -9 8 -8 17 -12 21
+-9 3 4 6 1 6 -6 0 -7 4 -9 10 -6 5 3 10 2 10 -2 0 -8 4 -11 77 -47 21 -11 40
+-23 43 -26 3 -4 30 -20 60 -36 30 -16 61 -35 68 -42 8 -7 18 -10 23 -7 5 4 9
+2 9 -2 0 -5 25 -22 55 -37 32 -17 52 -34 48 -40 -3 -6 -3 -8 2 -4 9 9 145 -61
+145 -74 0 -5 4 -7 8 -4 5 3 25 -6 45 -19 20 -14 41 -25 47 -25 6 0 8 -5 4 -12
+-4 -7 -3 -8 5 -4 6 4 18 0 27 -8 8 -9 22 -16 30 -16 9 0 12 -5 8 -12 -4 -7 -4
+-10 1 -6 7 6 60 -16 75 -32 3 -3 22 -14 43 -25 20 -11 37 -23 37 -27 0 -5 3
+-8 8 -7 13 2 52 -13 52 -21 0 -4 12 -12 28 -19 15 -7 38 -20 52 -29 14 -9 29
+-17 33 -17 4 0 12 -7 17 -15 5 -8 10 -11 10 -6 0 4 11 1 24 -8 48 -31 111 -67
+129 -73 9 -3 17 -9 17 -13 0 -5 16 -14 35 -20 19 -6 33 -16 29 -21 -3 -5 -2
+-9 3 -8 15 4 83 -31 83 -42 0 -5 5 -7 10 -4 6 3 10 1 10 -5 0 -6 4 -8 10 -5 6
+3 10 2 10 -3 0 -5 8 -12 18 -16 9 -3 24 -10 32 -15 8 -6 49 -29 90 -53 41 -23
+78 -46 81 -51 3 -5 10 -8 14 -6 8 3 119 -63 123 -73 2 -5 8 -6 13 -2 5 3 12
+-2 15 -10 3 -9 10 -14 14 -11 5 3 16 -3 26 -12 10 -10 18 -16 18 -15 2 8 56
+-22 56 -30 0 -5 5 -6 10 -3 6 3 10 1 10 -5 0 -6 5 -8 10 -5 6 3 10 1 10 -4 0
+-6 5 -11 10 -11 6 0 29 -12 53 -27 23 -15 63 -38 90 -51 26 -13 47 -28 47 -33
+0 -6 5 -7 10 -4 6 3 10 1 10 -6 0 -7 3 -9 6 -6 4 3 18 -3 32 -13 13 -11 31
+-20 38 -20 8 0 14 -4 14 -10 0 -5 7 -10 15 -10 8 0 15 -5 15 -11 0 -5 5 -7 10
+-4 6 3 10 1 10 -5 0 -6 5 -8 10 -5 6 3 10 2 10 -3 0 -4 16 -14 35 -22 19 -8
+35 -17 35 -22 0 -4 6 -8 14 -8 7 0 19 -7 26 -15 7 -8 16 -12 21 -9 5 3 9 0 9
+-5 0 -6 7 -11 15 -11 8 0 15 -4 15 -8 0 -5 16 -14 35 -22 19 -8 35 -18 35 -22
+0 -5 4 -7 9 -3 6 3 13 -1 18 -8 4 -7 23 -19 40 -26 18 -7 30 -17 27 -22 -3 -5
+-2 -8 3 -7 13 4 83 -33 83 -44 0 -5 4 -7 9 -4 5 3 19 -2 32 -12 13 -10 36 -24
+51 -31 15 -8 25 -19 21 -24 -3 -6 -1 -7 5 -3 12 7 74 -21 80 -37 2 -4 8 -5 13
+-1 5 3 9 1 9 -4 0 -5 18 -17 40 -27 22 -10 40 -22 40 -27 0 -4 6 -7 13 -6 6 2
+11 -4 9 -12 -2 -8 -1 -12 3 -8 10 9 66 -12 59 -23 -3 -5 -2 -8 3 -7 4 1 22 -5
+39 -14 29 -16 34 -16 67 0 21 9 37 20 37 24 0 4 5 8 11 8 6 0 23 9 37 19 15
+10 29 18 32 18 3 0 16 6 30 15 20 13 240 140 377 219 40 23 103 60 128 77 11
+6 29 16 40 22 11 5 38 21 60 35 22 13 56 33 75 43 19 11 91 52 160 92 69 40
+145 84 170 97 25 14 65 38 90 53 45 28 225 131 290 166 19 10 37 21 40 24 4 4
+39 24 95 54 11 6 22 13 25 16 3 3 20 13 38 22 17 10 47 26 65 35 17 10 36 24
+40 31 4 6 14 12 21 12 12 0 114 56 141 77 10 8 55 33 140 79 28 15 52 30 55
+33 3 4 21 15 40 25 19 9 62 33 95 53 33 19 78 45 100 57 102 58 355 202 398
+228 27 15 53 28 58 28 5 0 9 5 9 12 0 6 3 8 7 5 3 -4 13 -1 22 6 9 8 70 44
+136 82 66 37 128 75 138 83 9 8 17 12 17 8 0 -4 12 2 26 13 15 12 32 21 38 21
+6 1 20 8 31 18 20 17 20 27 20 1952 0 1064 -4 1940 -8 1947 -4 6 -26 22 -50
+35 -23 14 -118 69 -212 123 -93 54 -185 106 -202 116 -78 45 -101 58 -151 88
+-29 17 -57 31 -62 31 -6 0 -10 5 -10 10 0 6 -6 10 -13 10 -7 0 -28 11 -47 23
+-19 13 -55 35 -80 49 -103 58 -125 71 -135 78 -5 4 -41 25 -80 45 -38 21 -72
+41 -75 44 -3 3 -30 19 -60 35 -30 16 -57 32 -60 35 -3 3 -27 17 -55 31 -27 14
+-51 28 -53 33 -2 4 -8 7 -13 7 -5 0 -26 11 -47 23 -33 21 -79 48 -162 94 -14
+8 -38 23 -55 33 -16 10 -52 31 -80 46 -27 14 -62 35 -77 45 -14 11 -28 19 -31
+19 -4 0 -166 92 -227 130 -58 35 -195 110 -202 110 -4 0 -8 5 -8 10 0 6 -6 10
+-14 10 -7 0 -19 7 -26 15 -7 8 -16 12 -21 9 -5 -3 -9 -1 -9 4 0 5 -8 12 -17
+15 -10 4 -38 18 -63 33 -51 30 -103 61 -140 81 -14 8 -38 23 -55 33 -16 11
+-37 23 -45 27 -8 4 -48 26 -88 50 -40 24 -77 43 -82 43 -6 0 -10 4 -10 8 0 5
+-19 17 -42 28 -24 10 -49 24 -56 31 -7 7 -19 13 -27 13 -7 0 -15 3 -17 8 -3 8
+-163 102 -173 102 -4 0 -25 13 -48 28 -23 16 -72 44 -108 64 l-65 36 -70 -39z"/>
+</g>
+</svg>
@@ -1,8 +1,8 @@
 <template>
  <footer class="footer bg-gradient-6 text-white py-8 md:py-16">
    <div class="grid grid-cols-12 grid-margins">
-      <NewsletterForm class="col-start-1 col-span-12 pb-20" />
-      <div class="col-start-2 md:col-start-1 col-span-10 md:col-span-12">
+      <NewsletterForm class="col-start-1 col-span-12 pb-4 md:pb-20" />
+      <div class="col-start-0 md:col-start-1 col-span-12 md:col-span-12">
        <div class="flex flex-col md:flex-row md:items-top md:justify-between">
          <div class="flex flex-col md:flex-row md:items-center mb-8 md:mb-0">
            <ul class="flex flex-col md:flex-row mt-8 md:mt-0">
@@ -1,7 +1,7 @@
 <template>
  <div>
-    <RegularCard v-if="!card.type" v-bind="card" />
-    <component :is="computedCard" v-bind="card" />
+    <RegularCard v-if="!card.type" v-bind="card" class="card-post h-full" />
+    <component :is="computedCard" v-bind="card" class="card-post h-full" />
  </div>
 </template>

@@ -37,3 +37,11 @@ export default {
  },
 }
 </script>
+
+<style lang="postcss" scoped>
+@screen md {
+  .card-post {
+    max-height: 29rem;
+  }
+}
+</style>
@@ -1,21 +1,36 @@
 <template>
  <div>
-    <h2>
-      Event organizer, content creator, or journalist? Submit an item or view
-      the IPFS press kit.
+    <h2 class="inline-block">
+      Event organizer, content creator, or journalist?
+      <a
+        class="text-blueGreen hover:underline ml-1 inline-block"
+        href="https://protocol.ai/join"
+        rel="noopener noreferrer"
+      >
+        Submit</a
+      >
+      an item or view the
+      <a
+        class="text-blueGreen hover:underline ml-1 inline-block"
+        href="https://ipfs.io/media/"
+        rel="noopener noreferrer"
+        >IPFS press kit.</a
+      >
    </h2>
-    <div class="flex">
+    <div class="inline-block md:flex">
      Prefer your news a different way? Try our
-      <a class="text-blueGreen hover:underline ml-1" href="#newsletter-form"
+      <a
+        class="text-blueGreen hover:underline ml-1 inline-block"
+        href="#newsletter-form"
        >weekly newsletter</a
      >,
      <a
-        class="text-blueGreen hover:underline ml-1"
+        class="text-blueGreen hover:underline ml-1 inline-block"
        href="/index.xml"
        rel="noopener noreferrer"
        >RSS</a
      >, or social media.
-      <div class="flex ml-2">
+      <div class="flex ml-2 inline-block">
        <RSSSubscription class="flex justify-end" />
      </div>
    </div>
@@ -1,6 +1,9 @@
 <template>
-  <div id="newsletter-form" class="flex justify-between items-center">
-    <div class="flex-shrink max-w-xl">
+  <div
+    id="newsletter-form"
+    class="flex flex-col md:flex-row md:justify-between md:items-center"
+  >
+    <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
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="card-post group bg-gray-pale rounded overflow-hidden flex flex-col transform hover:scale-105 duration-300 ease-in-out"
+    class="group bg-gray-pale rounded overflow-hidden flex flex-col transform hover:scale-105 duration-300 ease-in-out"
    itemprop="mainEntityOfPage"
  >
    <article
@@ -3,7 +3,7 @@
    <div class="bg-gradient-6 text-white">
      <div class="pt-20 pb-10 grid-margins">
        <Breadcrumbs :crumbs="breadcrumbs" class="mt-8" />
-        <div class="grid grid-cols-2 pt-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 pt-4">
          <div class="flex flex-col">
            <h1 class="type-h1">{{ title }}</h1>
            <PostAuthor v-if="author && author.name" v-bind="author" />
@@ -16,8 +16,9 @@
              {{ resolvedDate }}
            </time>
          </div>
-          <div v-if="image" class="">
+          <div v-if="image" class="mt-4 md:mt-0 h-full">
            <LazyImage
+              img-class="h-full object-cover"
              :alt="$page.title"
              src-placeholder="/images/blog/og/default.png"
              :src="`/header_images/${image ? image : 'blog-placeholder.png'}`"
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="card-post group bg-gray-pale rounded overflow-hidden flex flex-col transform hover:scale-105 duration-300 ease-in-out"
+    class="group bg-gray-pale rounded overflow-hidden flex flex-col transform hover:scale-105 duration-300 ease-in-out"
    itemprop="mainEntityOfPage"
    :to="path"
  >
@@ -6,6 +6,8 @@
      class="flex-grow mx-2"
      :options="categories"
      :searchable="false"
+      :allow-empty="false"
+      deselect-label=""
    />
    <span>and/or</span>
    <multiselect
@@ -19,7 +19,7 @@
        :categories="categories"
      />
      <div
-        class="grid-margins pt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8"
+        class="grid-margins pt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
        itemscope
        itemtype="http://schema.org/Blog"
      >
@@ -128,7 +128,9 @@ export default {
        }
      })

-      return result
+      return result.sort((a, b) =>
+        a.frontmatter.date > b.frontmatter.date ? -1 : 1
+      )
    },
    pagesToShow() {
      return this.numberOfPagesToShow > this.publicPages.length
@@ -136,6 +138,17 @@ export default {
        : this.publicPages.slice(0, this.numberOfPagesToShow)
    },
  },
+  watch: {
+    activeCategory() {
+      this.updateQuery()
+    },
+    activeTags() {
+      this.updateQuery()
+    },
+    searchedText() {
+      this.updateQuery()
+    },
+  },
  mounted() {
    const queryTags = this.$route.query.tags
    const queryCategory = this.$route.query.category
@@ -152,6 +165,15 @@ export default {
    }
  },
  methods: {
+    updateQuery() {
+      const newQuery = {
+        ...this.$route.query,
+        tags: this.activeTags.join(','),
+        search: this.searchedText.join(','),
+        category: this.activeCategory,
+      }
+      this.$router.replace({ query: newQuery }).catch(() => {})
+    },
    showMorePages() {
      this.numberOfPagesToShow = this.numberOfPagesToShow + 21
    },
@@ -5,7 +5,7 @@ data:
  - name: test
    title: newslink to ipfs.io
    path: https://ipfs.io/
-    date: 2020-10-22
+    date: 2020-10-15
    tags: weekly
  - name: link 2
    title: title 2