Skip to content

Move featured content from hardcoded to database API #377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rasca wants to merge 1 commit into
base: dev
Choose a base branch
from
+105 −81
Open

Move featured content from hardcoded to database API #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions backend/contributions/migrations/0037_seed_featured_content.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
from django.db import migrations


def seed_featured_content(apps, schema_editor):
User = apps.get_model('users', 'User')
FeaturedContent = apps.get_model('contributions', 'FeaturedContent')

albert = User.objects.get(email='albert@genlayer.foundation') # cognocracy
ivan = User.objects.get(email='ivan@genlayer.foundation') # raskovsky

FeaturedContent.objects.create(
content_type='hero',
title='Argue.fun Launch',
description='Deploy intelligent contracts, run validators, and earn GenLayer Points on the latest testnet.',
subtitle='cognocracy',
user=albert,
hero_image_url='https://res.cloudinary.com/dfqmoeawa/image/upload/v1772117991/tally/featured_1_hero_1772117989.png',
hero_image_public_id='tally/featured_1_hero_1772117989',
url='',
is_active=True,
order=0,
)

FeaturedContent.objects.create(
content_type='build',
title='Argue.fun',
description='',
subtitle='',
user=albert,
hero_image_url='https://res.cloudinary.com/dfqmoeawa/image/upload/v1772117992/tally/featured_2_hero_1772117992.png',
hero_image_public_id='tally/featured_2_hero_1772117992',
user_profile_image_url='https://res.cloudinary.com/dfqmoeawa/image/upload/v1772117994/tally/featured_2_avatar_1772117993.png',
user_profile_image_public_id='tally/featured_2_avatar_1772117993',
url='',
is_active=True,
order=0,
)

FeaturedContent.objects.create(
content_type='build',
title='Internet Court',
description='',
subtitle='',
user=ivan,
hero_image_url='https://res.cloudinary.com/dfqmoeawa/image/upload/v1772117994/tally/featured_3_hero_1772117994.png',
hero_image_public_id='tally/featured_3_hero_1772117994',
user_profile_image_url='https://res.cloudinary.com/dfqmoeawa/image/upload/v1772117995/tally/featured_3_avatar_1772117995.png',
user_profile_image_public_id='tally/featured_3_avatar_1772117995',
url='',
is_active=True,
order=1,
)

FeaturedContent.objects.create(
content_type='build',
title='Rally',
description='',
subtitle='',
user=ivan,
hero_image_url='https://res.cloudinary.com/dfqmoeawa/image/upload/v1772117996/tally/featured_4_hero_1772117995.png',
hero_image_public_id='tally/featured_4_hero_1772117995',
user_profile_image_url='https://res.cloudinary.com/dfqmoeawa/image/upload/v1772117996/tally/featured_4_avatar_1772117996.png',
user_profile_image_public_id='tally/featured_4_avatar_1772117996',
url='',
is_active=True,
order=2,
)


def reverse_featured_content(apps, schema_editor):
FeaturedContent = apps.get_model('contributions', 'FeaturedContent')
FeaturedContent.objects.filter(
title='Argue.fun Launch', content_type='hero'
).delete()
FeaturedContent.objects.filter(
title='Argue.fun', content_type='build'
).delete()
FeaturedContent.objects.filter(
title='Internet Court', content_type='build'
).delete()
FeaturedContent.objects.filter(
title='Rally', content_type='build'
).delete()


class Migration(migrations.Migration):

dependencies = [
('contributions', '0036_alert'),
]

operations = [
migrations.RunPython(seed_featured_content, reverse_featured_content),
]
67 changes: 4 additions & 63 deletions frontend/src/components/portal/FeaturedBuilds.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,82 +4,22 @@

let builds = $state([]);
let loading = $state(true);
let error = $state(null);

// Static fallback builds matching the Figma design
const fallbackBuilds = [
{
id: 1,
title: 'Argue.fun',
subtitle: 'by cognocracy',
user_name: 'cognocracy',
hero_image_url: '/assets/featured-builds/argue-fun-bg.jpg',
user_profile_image_url: '/assets/featured-builds/cognocracy-avatar.png',
url: '#',
link: '#',
},
{
id: 2,
title: 'Internet Court',
subtitle: 'by raskovsky',
user_name: 'raskovsky',
hero_image_url: '/assets/featured-builds/internet-court-bg.jpg',
user_profile_image_url: '/assets/featured-builds/raskovsky-avatar.png',
url: '#',
link: '#',
},
{
id: 3,
title: 'Rally',
subtitle: 'by GenLayer',
user_name: 'GenLayer',
hero_image_url: '/assets/featured-builds/rally-bg.jpg',
user_profile_image_url: '/assets/featured-builds/genlayer-avatar.png',
url: '#',
link: '#',
},
];

// Map of fallback images keyed by build title, used when API returns empty image URLs
const fallbackImages = {};
for (const fb of fallbackBuilds) {
fallbackImages[fb.title] = {
hero_image_url: fb.hero_image_url,
user_profile_image_url: fb.user_profile_image_url,
};
}

/**
* Merge API data with local fallback images.
* If the API returns empty hero_image_url or user_profile_image_url,
* use the matching fallback asset by title.
*/
function mergeWithFallbackImages(apiBuild) {
const fb = fallbackImages[apiBuild.title] || {};
return {
...apiBuild,
hero_image_url: apiBuild.hero_image_url || fb.hero_image_url || '',
user_profile_image_url: apiBuild.user_profile_image_url || fb.user_profile_image_url || '',
};
}

onMount(async () => {
try {
const response = await featuredAPI.getBuilds();
if (response.data && response.data.length > 0) {
builds = response.data.map(mergeWithFallbackImages);
} else {
builds = fallbackBuilds;
builds = response.data;
}
} catch (err) {
error = err.message;
builds = fallbackBuilds;
// API failed, builds stays empty
} finally {
loading = false;
}
});
</script>

{#if loading || builds.length > 0}
<div>
<div class="flex items-end justify-between mb-3">
<div class="flex flex-col gap-1">
Expand Down Expand Up @@ -146,3 +86,4 @@
</div>
{/if}
</div>
{/if}
25 changes: 7 additions & 18 deletions frontend/src/components/portal/HeroBanner.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,6 @@

let hero = $state(null);
let loading = $state(true);
let error = $state(null);

// Static fallback values matching the original design
const fallback = {
title: 'Argue.fun Launch',
subtitle: 'cognocracy',
description: 'Deploy intelligent contracts, run validators, and earn GenLayer Points on the latest testnet.',
hero_image_url: null,
link: '#',
};

onMount(async () => {
try {
Expand All @@ -22,15 +12,14 @@
hero = response.data[0];
}
} catch (err) {
error = err.message;
// API failed, hero stays null
} finally {
loading = false;
}
});

let displayData = $derived(hero || fallback);
let bgImage = $derived(displayData.hero_image_url || '/assets/hero-bg.png');
let projectLink = $derived(displayData.link || displayData.url || '#');
let bgImage = $derived(hero?.hero_image_url || '/assets/hero-bg.png');
let projectLink = $derived(hero?.link || hero?.url || '#');
</script>

{#if loading}
Expand All @@ -45,7 +34,7 @@
<div class="h-10 w-32 bg-white/20 rounded-[20px]"></div>
</div>
</div>
{:else}
{:else if hero}
<div class="relative overflow-hidden rounded-[8px] p-5 flex items-end" style="min-height: 300px; background: linear-gradient(to right, #8d81e1, #eae9f3);">
<!-- Background image -->
<div class="absolute inset-0">
Expand All @@ -57,14 +46,14 @@
<div class="relative z-10 rounded-[24px] p-4 flex flex-col gap-4 w-full md:w-[386px] backdrop-blur-[10px]" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 0 20px rgba(255,255,255,0.05);">
<div class="flex flex-col">
<div class="flex items-center gap-1">
<span class="text-white/60 text-xs font-medium leading-none" style="letter-spacing: 0.24px;">By {displayData.subtitle || displayData.user_name || 'Unknown'}</span>
<span class="text-white/60 text-xs font-medium leading-none" style="letter-spacing: 0.24px;">By {hero.subtitle || hero.user_name || 'Unknown'}</span>
<img src="/assets/icons/verified-badge-fill.svg" alt="Verified" class="w-4 h-4 flex-shrink-0">
</div>
<h2 class="font-display text-[32px] font-medium text-white leading-[38px]" style="letter-spacing: -1.28px;">
{displayData.title}
{hero.title}
</h2>
<p class="text-white/80 text-sm max-w-[280px]" style="letter-spacing: 0.28px;">
{displayData.description}
{hero.description}
</p>
</div>

Expand Down