Use rich text html for jobs listing

Author: marcoacierno

backend/api/job_board/schema.py

@@ -11,7 +11,9 @@ class JobBoardQuery:
     def job_listings(self, conference: str) -> list[JobListingType]:
         return [
             JobListingType.from_django_model(listing)
-            for listing in JobListing.objects.filter(conference__code=conference).all()
+            for listing in JobListing.objects.filter(conference__code=conference)
+            .order_by("order")
+            .all()
         ]
 
     @strawberry.field

backend/api/job_board/types.py

@@ -2,15 +2,13 @@
 
 import strawberry
 
-from ..helpers.i18n import make_localized_resolver
-
 
 @strawberry.type
 class JobListing:
     id: strawberry.ID
-    title: str = strawberry.field(resolver=make_localized_resolver("title"))
-    slug: str = strawberry.field(resolver=make_localized_resolver("slug"))
-    description: str = strawberry.field(resolver=make_localized_resolver("description"))
+    title: str
+    slug: str
+    description: str
     company: str
     company_logo_url: strawberry.Private[Optional[str]]
     apply_url: str

backend/job_board/admin.py

@@ -1,5 +1,6 @@
 from django.contrib import admin
 from ordered_model.admin import OrderedModelAdmin
+from custom_admin.widgets import RichEditorWidget
 
 from .models import JobListing
 
@@ -9,3 +10,9 @@ class JobListingAdmin(OrderedModelAdmin):
     model = JobListing
     list_display = ("title", "company", "conference", "move_up_down_links")
     list_filter = ("conference",)
+
+    def formfield_for_dbfield(self, db_field, **kwargs):
+        if db_field.name == "description":
+            kwargs["widget"] = RichEditorWidget()
+
+        return super().formfield_for_dbfield(db_field, **kwargs)

backend/job_board/migrations/0006_alter_joblisting_apply_url_and_more.py

@@ -0,0 +1,51 @@
+# Generated by Django 5.1.4 on 2025-04-13 16:00
+
+from django.db import migrations, models
+
+
+def fix_data(apps, schema_editor):
+    JobListing = apps.get_model('job_board', 'JobListing')
+    for job_listing in JobListing.objects.all():
+        if job_listing.slug:
+            slug = job_listing.slug.localize('en')
+            assert slug
+            job_listing.slug = slug
+        if job_listing.title:
+            title = job_listing.title.localize('en')
+            assert title
+            job_listing.title = title
+        if job_listing.description:
+            description = job_listing.description.localize('en')
+            assert description
+            job_listing.description = description
+        job_listing.save()
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('job_board', '0005_connect_job_listings_to_a_conf'),
+    ]
+
+    operations = [
+        migrations.RunPython(fix_data, migrations.RunPython.noop),
+        migrations.AlterField(
+            model_name='joblisting',
+            name='apply_url',
+            field=models.TextField(blank=True, verbose_name='Where you can apply'),
+        ),
+        migrations.AlterField(
+            model_name='joblisting',
+            name='description',
+            field=models.TextField(blank=True, verbose_name='description'),
+        ),
+        migrations.AlterField(
+            model_name='joblisting',
+            name='slug',
+            field=models.SlugField(blank=True, max_length=200, verbose_name='slug'),
+        ),
+        migrations.AlterField(
+            model_name='joblisting',
+            name='title',
+            field=models.TextField(max_length=200, verbose_name='title'),
+        ),
+    ]

backend/job_board/migrations/0007_auto_20250413_1608.py

@@ -0,0 +1,30 @@
+# Generated by Django 5.1.4 on 2025-04-13 16:08
+
+from django.db import migrations
+
+def fix_quotes(apps, schema_editor):
+    JobListing = apps.get_model('job_board', 'JobListing')
+    for job_listing in JobListing.objects.all():
+        if job_listing.title:
+            title = job_listing.title.replace('"', "")
+            assert title
+            job_listing.title = title
+        if job_listing.description:
+            description = job_listing.description.replace('"', "")
+            assert description
+            job_listing.description = description
+        if job_listing.slug:
+            slug = job_listing.slug.replace('"', "")
+            assert slug
+            job_listing.slug = slug
+        job_listing.save()
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('job_board', '0006_alter_joblisting_apply_url_and_more'),
+    ]
+
+    operations = [
+        migrations.RunPython(fix_quotes, migrations.RunPython.noop),
+    ]

backend/job_board/models.py

@@ -8,8 +8,6 @@
 from model_utils.models import TimeStampedModel
 from ordered_model.models import OrderedModel, OrderedModelManager
 
-from i18n.fields import I18nCharField, I18nTextField
-
 
 class JobListingManager(OrderedModelManager):
     def by_slug(self, slug):
@@ -22,14 +20,14 @@ def by_slug(self, slug):
 
 
 class JobListing(TimeStampedModel, OrderedModel):
-    title = I18nCharField(_("title"), max_length=200)
-    slug = I18nCharField(_("slug"), max_length=200, blank=True)
+    title = models.TextField(_("title"), max_length=200)
+    slug = models.SlugField(_("slug"), max_length=200, blank=True)
     company = models.CharField(_("company"), max_length=100)
     company_logo = models.ImageField(
         _("company logo"), null=True, blank=True, upload_to="job-listings"
     )
-    description = I18nTextField(_("description"), blank=True)
-    apply_url = models.TextField(_("URL where you can apply"), blank=True)
+    description = models.TextField(_("description"), blank=True)
+    apply_url = models.TextField(_("Where you can apply"), blank=True)
     conference = models.ForeignKey(
         "conferences.Conference",
         on_delete=models.CASCADE,

frontend/src/components/job-board-layout/index.tsx

@@ -7,13 +7,13 @@ import {
   Page,
   Section,
   Spacer,
+  StyledHTMLText,
   Text,
 } from "@python-italia/pycon-styleguide";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { JobListingAccordion } from "~/components/job-listing-accordion";
-import { compile } from "~/helpers/markdown";
 import type { AllJobListingsQueryResult } from "~/types";
 
 import { Article } from "../article";
@@ -63,22 +63,27 @@ export const JobBoardLayout = ({
                 onMobileShowOnly === "jobListings" ? "desktop" : "mobile"
               }
               fullScreenHeight
-              overflow="scroll"
             >
               <Heading size={2}>{jobListing.title}</Heading>
               <Spacer size="small" />
               <Text size={2} color="grey-500">
                 {jobListing.company}
               </Text>
               <Spacer size="large" />
-              <Article>{compile(jobListing.description).tree}</Article>
+              <Article>
+                <StyledHTMLText
+                  baseTextSize={2}
+                  text={jobListing.description}
+                />
+              </Article>
               <Spacer size="xl" />
               {jobListing.applyUrl && (
                 <Button href={jobListing.applyUrl} variant="secondary">
                   <FormattedMessage id="jobboard.applyNow" />
                 </Button>
               )}
             </LayoutContent>
+            <Spacer size="medium" />
           </GridColumn>
         </Grid>
       </Section>

frontend/src/components/job-detail-page-handler/index.tsx

@@ -11,12 +11,10 @@ export const JobDetailPageHandler = () => {
   const {
     query: { id },
   } = useRouter();
-  const language = useCurrentLanguage();
   const {
     data: { jobListings },
   } = useAllJobListingsQuery({
     variables: {
-      language,
       conference: process.env.conferenceCode,
     },
   });

frontend/src/components/job-page-handler/jobs-page.graphql

@@ -1,9 +1,9 @@
-query AllJobListings($language: String!, $conference: String!) {
+query AllJobListings($conference: String!) {
   jobListings(conference: $conference) {
     id
-    slug(language: $language)
-    title(language: $language)
-    description(language: $language)
+    slug
+    title
+    description
     applyUrl
     company
     companyLogo

frontend/src/pages/jobs/index.tsx

@@ -10,7 +10,6 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
   await Promise.all([
     prefetchSharedQueries(client, locale),
     queryAllJobListings(client, {
-      language: locale,
       conference: process.env.conferenceCode,
     }),
   ]);