Refactor sponsor data and introduce small logo sponsors on homepage

_data/others.json

@@ -30,5 +30,14 @@
     "last_payment": 0,
     "all_time": 425,
     "since": "Apr 14, 2019"
+  },
+  {
+    "name": "Works on Arm",
+    "url": "https://developer.arm.com/solutions/infrastructure/works-on-arm",
+    "logo": "sponsors/woa.png",
+    "last_payment": 500,
+    "all_time": 0,
+    "since": "Jul 22, 2021",
+    "listed": false
   }
 ]

_data/sponsor_logos_l.csv

@@ -0,0 +1,3 @@
+logo,name,url,last_payment,all_time,since,level
+sponsors/84.png,84 codes,https://www.84codes.com/,"€22,000","€369,000","Apr 1, 2018",5000
+manas-orange.svg,Manas.Tech,https://manas.tech/,"$5,000","$1,300,000","Jun 19, 2009",5000

_data/sponsor_logos_s.csv

@@ -0,0 +1,2 @@
+logo,name,url,last_payment,all_time,since,level
+sponsors/woa.png,Works on Arm,https://developer.arm.com/solutions/infrastructure/works-on-arm,$500,$0,"Jul 22, 2021",500

_includes/components/top-sponsors-icons.html

@@ -1,5 +1,13 @@
-<div class="top-sponsors">
-  {%- for sponsor in site.data.top_sponsors %}
+<div class="top-sponsors top-sponsors--l">
+  {%- for sponsor in site.data.sponsor_logos_l %}
+    <a href="{{ sponsor.url }}" rel="nofollow sponsored">
+      <img src="/assets/{{ sponsor.logo }}" alt="">
+      {{- sponsor.name }}
+    </a>
+  {%- endfor %}
+</div>
+<div class="top-sponsors top-sponsors--s">
+  {%- for sponsor in site.data.sponsor_logos_s %}
     <a href="{{ sponsor.url }}" rel="nofollow sponsored">
       <img src="/assets/{{ sponsor.logo }}" alt="">
       {{- sponsor.name }}

_includes/pages/sponsors/top_sponsors.html → _includes/pages/sponsors/sponsor-cards.html

@@ -1,9 +1,5 @@
 <ul class="cards-list">
-  {%- assign sponsors_5000 = site.data.sponsors | where: "level", 5000 %}
-  {%- assign sponsors_2000 = site.data.sponsors | where: "level", 2000 %}
-  {%- assign sponsors_1000 = site.data.sponsors | where: "level", 1000 %}
-  {%- assign enterprise_sponsors = sponsors_5000 | concat: sponsors_2000 | concat: sponsors_1000 %}
-  {%- for sp in enterprise_sponsors %}
+  {%- for sp in site.data.sponsor_logos_l %}
     <li class="sponsor-card">
       <a href="{{ sp.url }}" class="name" rel="sponsored nofollow">{{ sp.name }}</a>
       <img src="/assets/{{ sp.logo }}" alt="Logo of {{sp.name}}">

_pages/sponsors.md

@@ -21,7 +21,7 @@ and below is a list of all the humans and organizations that have made it possib
   <p>Our Corporate Sponsorship tiers start at $5,000/month, but let’s talk and find a partnership model that suits you.</p>
   <a href="mailto:crystal@manas.tech" class="hex">Contact Us</a>
   </aside>
-  {%- include pages/sponsors/top_sponsors.html %}
+  {%- include pages/sponsors/sponsor-cards.html %}
 </section>
 
 <hr />

_sass/components/_top-sponsors.scss

@@ -5,40 +5,48 @@
   justify-content: center;
   margin-top: var(--block-flow-md);
 
-  > a {
-    --link-color: var(--primary-text);
-    --link-hover-color: var(--light-text);
+  &--l {
+    > a {
+      --link-color: var(--primary-text);
+      --link-hover-color: var(--light-text);
 
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--padding-sm);
-    align-items: center;
-    text-align: center;
-    line-height: var(--line-height-sm);
-    width: 11ch;
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--padding-sm);
+      align-items: center;
+      text-align: center;
+      line-height: var(--line-height-sm);
+      width: 11ch;
 
-    > img {
-      width: 80%;
-      aspect-ratio: 1;
-      object-fit: contain;
-      transition: all 200ms;
+      > img {
+        width: 80%;
+        aspect-ratio: 1;
+        object-fit: contain;
+        transition: all 200ms;
 
-      @media (prefers-color-scheme: dark) {
-        &[src="/assets/m.svg"] {
-          filter: #{"contrast(0.7)"};
+        @media (prefers-color-scheme: dark) {
+          &[src="/assets/m.svg"] {
+            filter: #{"contrast(0.7)"};
+          }
         }
       }
-    }
 
-    &:not(:hover) > img {
-      filter: #{"grayscale()"};
-      transform: scale(0.97);
+      &:not(:hover) > img {
+        filter: #{"grayscale()"};
+        transform: scale(0.97);
 
-      @media (prefers-color-scheme: dark) {
-        &[src="/assets/m.svg"] {
-          filter: #{"grayscale() contrast(0.7)"};
+        @media (prefers-color-scheme: dark) {
+          &[src="/assets/m.svg"] {
+            filter: #{"grayscale() contrast(0.7)"};
+          }
         }
       }
     }
   }
+
+  &--s {
+    > a {
+      @include link-with-icon-base;
+    }
+  }
 }

_style_guide/components/cards-list.html

@@ -4,4 +4,4 @@
 module: _includes/pages/sponsors/top_sponors.html
 ---
 
-{% include pages/sponsors/top_sponsors.html %}
+{% include pages/sponsors/sponsor-cards.html %}

scripts/merge.cr

@@ -64,11 +64,15 @@ end
 
 all_sponsors.sort_by! { |s| {-s.last_payment, -s.all_time, s.since, s.name} }
 
-File.open("#{__DIR__}/../_data/sponsors.csv", "w") do |file|
-  CSV.build(file) do |csv|
+write_csv("sponsors.csv", all_sponsors.select(&.listed?))
+write_csv("sponsor_logos_l.csv", all_sponsors.select { |sponsor| sponsor.last_payment.to_i > 1000 })
+write_csv("sponsor_logos_s.csv", all_sponsors.select { |sponsor| sponsor.last_payment.to_i.in?(350...1000) })
+
+def write_csv(filename, sponsors)
+  open_csv(filename) do |csv|
     csv.row "logo", "name", "url", "last_payment", "all_time", "since", "level"
 
-    all_sponsors.each do |sponsor|
+    sponsors.each do |sponsor|
       currency = sponsor.currency || "$"
 
       csv.row sponsor.logo,
@@ -81,3 +85,11 @@ File.open("#{__DIR__}/../_data/sponsors.csv", "w") do |file|
     end
   end
 end
+
+def open_csv(filename, datadir = Path[__DIR__, "..", "_data"])
+  File.open(datadir.join(filename), "w") do |file|
+    CSV.build(file) do |csv|
+      yield csv
+    end
+  end
+end

scripts/sponsors.cr

@@ -15,6 +15,7 @@ record Sponsor, name : String, url : String?, logo : String?, last_payment : Flo
   property overrides : String?
   @[JSON::Field(converter: Time::Format.new("%b %-d, %Y"))]
   property time_last_payment : Time?
+  property? listed : Bool = true
 
   def id : UInt64
     self.class.id(name, url)