Add blur for assets with nsfw=true (#2210)

Author: rparrett

generate-assets/src/bin/generate.rs

@@ -127,6 +127,7 @@ struct FrontMatterAssetExtra {
     image: Option<String>,
     licenses: Option<Vec<String>>,
     bevy_versions: Option<Vec<String>>,
+    nsfw: Option<bool>,
 }
 
 impl From<&Asset> for FrontMatterAsset {
@@ -140,6 +141,7 @@ impl From<&Asset> for FrontMatterAsset {
                 image: asset.image.clone(),
                 licenses: asset.licenses.clone(),
                 bevy_versions: asset.bevy_versions.clone(),
+                nsfw: asset.nsfw,
             },
         }
     }

generate-assets/src/lib.rs

@@ -28,6 +28,7 @@ pub struct Asset {
     pub crate_name: Option<String>,
     pub licenses: Option<Vec<String>>,
     pub bevy_versions: Option<Vec<String>>,
+    pub nsfw: Option<bool>,
 
     // this field is not read from the toml file
     #[serde(skip)]

sass/components/_asset-card.scss

@@ -34,6 +34,14 @@ $asset-card-padding: 0.4rem;
     }
   }
 
+  &__blur-overlay {
+    backdrop-filter: blur(16px);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+  }
+
   &__title {
     position: absolute;
     width: 100%;

templates/macros/assets.html

@@ -14,6 +14,7 @@
   <div id="{{ post.title | slugify }}">
     <a class="asset-card" href="{{ post.extra.link }}">
       <div class="asset-card__banner">
+        {% if post.extra.nsfw %}<div class="asset-card__blur-overlay"></div>{% endif %}
         <div class="asset-card__title">{{ post.title }}</div>
         {% if post.extra.image %}
           <img src="{{ image_macros::resize_image(path=post.extra.image, width=370, height=370) }}"