Make job board embeddable (#227)

Signed-off-by: Sergio Castaño Arteaga <[email protected]>
Signed-off-by: Cintia Sánchez García <[email protected]>
Co-authored-by: Cintia Sánchez García <[email protected]>

Author: tegioz

gitjobs-server/src/auth.rs

@@ -369,7 +369,6 @@ pub(crate) struct PasswordCredentials {
 
 /// User information.
 #[derive(Clone, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names, dead_code)]
 pub(crate) struct User {
     pub user_id: Uuid,
     pub auth_hash: Vec<u8>,
@@ -407,7 +406,6 @@ impl std::fmt::Debug for User {
 /// User information summary.
 #[skip_serializing_none]
 #[derive(Clone, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct UserSummary {
     pub email: String,
     pub name: String,

gitjobs-server/src/db/dashboard/employer.rs

@@ -9,7 +9,6 @@ use uuid::Uuid;
 
 use crate::{
     PgDB,
-    db::misc::Total,
     templates::{
         dashboard::employer::{
             applications::{self, Application},
@@ -808,5 +807,5 @@ impl DBDashBoardEmployer for PgDB {
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub(crate) struct ApplicationsSearchOutput {
     pub applications: Vec<Application>,
-    pub total: Total,
+    pub total: usize,
 }

gitjobs-server/src/db/jobboard.rs

@@ -11,7 +11,6 @@ use uuid::Uuid;
 
 use crate::{
     PgDB,
-    db::misc::Total,
     templates::jobboard::jobs::{Filters, FiltersOptions, Job, JobSummary},
 };
 
@@ -262,5 +261,5 @@ impl DBJobBoard for PgDB {
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub(crate) struct JobsSearchOutput {
     pub jobs: Vec<JobSummary>,
-    pub total: Total,
+    pub total: usize,
 }

gitjobs-server/src/db/misc.rs

@@ -122,6 +122,3 @@ impl DBMisc for PgDB {
         Ok(projects)
     }
 }
-
-/// Type alias to represent the total count.
-pub(crate) type Total = usize;

gitjobs-server/src/handlers/jobboard/embed.rs

@@ -0,0 +1,40 @@
+//! This module defines the HTTP handlers for the embed page.
+
+use anyhow::Result;
+use askama::Template;
+use axum::{
+    extract::State,
+    response::{Html, IntoResponse},
+};
+use chrono::Duration;
+use serde_qs::axum::QsQuery;
+use tracing::instrument;
+
+use crate::{
+    config::HttpServerConfig,
+    db::{DynDB, jobboard::JobsSearchOutput},
+    handlers::{error::HandlerError, prepare_headers},
+    templates::jobboard::{embed::Page, jobs::Filters},
+};
+
+/// Handler that returns the embed page.
+#[instrument(skip_all, err)]
+pub(crate) async fn page(
+    State(cfg): State<HttpServerConfig>,
+    State(db): State<DynDB>,
+    QsQuery(filters): QsQuery<Filters>,
+) -> Result<impl IntoResponse, HandlerError> {
+    // Get jobs that match the query
+    let JobsSearchOutput { jobs, total: _ } = db.search_jobs(&filters).await?;
+
+    // Prepare template
+    let template = Page {
+        base_url: cfg.base_url.strip_suffix('/').unwrap_or(&cfg.base_url).to_string(),
+        jobs,
+    };
+
+    // Prepare response headers
+    let headers = prepare_headers(Duration::minutes(10), &[])?;
+
+    Ok((headers, Html(template.render()?)))
+}

gitjobs-server/src/handlers/jobboard/mod.rs

@@ -1,5 +1,6 @@
 //! This module defines the HTTP handlers for the job board.
 
 pub(crate) mod about;
+pub(crate) mod embed;
 pub(crate) mod home;
 pub(crate) mod jobs;

gitjobs-server/src/main.rs

@@ -1,4 +1,5 @@
 #![warn(clippy::all, clippy::pedantic)]
+#![allow(clippy::struct_field_names)]
 
 use std::{path::PathBuf, sync::Arc};
 

gitjobs-server/src/notifications.rs

@@ -239,7 +239,6 @@ pub(crate) struct NewNotification {
 
 /// Information required to deliver a notification.
 #[derive(Debug, Clone)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Notification {
     pub notification_id: Uuid,
     pub email: String,

gitjobs-server/src/router.rs

@@ -100,6 +100,7 @@ pub(crate) async fn setup(
         ))
         .route("/", get(jobboard::jobs::jobs_page))
         .route("/about", get(jobboard::about::page))
+        .route("/embed", get(jobboard::embed::page))
         .route("/health-check", get(health_check))
         .nest("/jobboard/images", jobboard_images_router)
         .route("/locations/search", get(search_locations))

gitjobs-server/src/templates/dashboard/employer/applications.rs

@@ -40,7 +40,6 @@ impl ApplicationsPage {
 
 /// Application information.
 #[derive(Debug, Clone, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Application {
     application_id: Uuid,
     name: String,

gitjobs-server/src/templates/dashboard/employer/home.rs

@@ -19,7 +19,6 @@ use crate::templates::{
 /// Home page template.
 #[derive(Debug, Clone, Template)]
 #[template(path = "dashboard/employer/home.html")]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Page {
     pub content: Content,
     pub employers: Vec<employer::employers::EmployerSummary>,

gitjobs-server/src/templates/dashboard/employer/jobs.rs

@@ -65,7 +65,6 @@ pub(crate) struct JobSummary {
 /// Job details.
 #[skip_serializing_none]
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Job {
     pub description: String,
     pub status: JobStatus,

gitjobs-server/src/templates/dashboard/job_seeker/applications.rs

@@ -20,7 +20,6 @@ pub(crate) struct ApplicationsPage {
 
 /// Application information.
 #[derive(Debug, Clone, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Application {
     pub application_id: Uuid,
     pub applied_at: DateTime<Utc>,

gitjobs-server/src/templates/dashboard/job_seeker/home.rs

@@ -17,7 +17,6 @@ use crate::templates::{
 /// Home page template.
 #[derive(Debug, Clone, Template)]
 #[template(path = "dashboard/job_seeker/home.html")]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Page {
     pub content: Content,
     pub page_id: PageId,

gitjobs-server/src/templates/helpers.rs

@@ -66,7 +66,6 @@ pub(crate) fn format_location(
 
 /// Check if the value provided is none or some and default.
 #[allow(clippy::ref_option)]
-#[allow(dead_code)]
 pub(crate) fn option_is_none_or_default<T: Default + PartialEq>(v: &Option<T>) -> bool {
     if let Some(value) = v {
         return *value == T::default();

gitjobs-server/src/templates/jobboard/about.rs

@@ -10,7 +10,6 @@ use crate::templates::{PageId, auth::User, filters};
 /// About page template.
 #[derive(Debug, Clone, Template, Serialize, Deserialize)]
 #[template(path = "jobboard/about/page.html")]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Page {
     pub content: String,
     pub page_id: PageId,

gitjobs-server/src/templates/jobboard/embed.rs

@@ -0,0 +1,19 @@
+//! This module defines some templates and types used in the embed page.
+
+use askama::Template;
+use serde::{Deserialize, Serialize};
+
+use crate::templates::{
+    dashboard::employer::jobs::{JobKind, Workplace},
+    filters,
+    helpers::{DATE_FORMAT_3, build_jobboard_image_url},
+    jobboard::jobs::JobSummary,
+};
+
+/// Embed page template.
+#[derive(Debug, Clone, Template, Serialize, Deserialize)]
+#[template(path = "jobboard/embed/page.html")]
+pub(crate) struct Page {
+    pub base_url: String,
+    pub jobs: Vec<JobSummary>,
+}

gitjobs-server/src/templates/jobboard/home.rs

@@ -10,7 +10,6 @@ use crate::templates::{PageId, auth::User, filters};
 /// Home page template.
 #[derive(Debug, Clone, Template, Serialize, Deserialize)]
 #[template(path = "jobboard/home.html")]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Page {
     pub page_id: PageId,
     pub user: User,

gitjobs-server/src/templates/jobboard/jobs.rs

@@ -182,7 +182,6 @@ pub(crate) struct JobSummary {
 /// Employer details.
 #[skip_serializing_none]
 #[derive(Debug, Clone, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Employer {
     pub company: String,
     pub employer_id: Uuid,
@@ -196,7 +195,6 @@ pub(crate) struct Employer {
 /// Job details.
 #[skip_serializing_none]
 #[derive(Debug, Clone, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Job {
     pub description: String,
     pub employer: Employer,

gitjobs-server/src/templates/jobboard/mod.rs

@@ -1,5 +1,6 @@
 //! This module defines the templates for the job board pages.
 
 pub(crate) mod about;
+pub(crate) mod embed;
 pub(crate) mod home;
 pub(crate) mod jobs;

gitjobs-server/src/templates/misc.rs

@@ -41,15 +41,13 @@ pub(crate) struct UserMenuSection {
 
 /// Foundation information.
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Foundation {
     pub foundation_id: Uuid,
     pub name: String,
 }
 
 /// Location information.
 #[derive(Debug, Clone, Default, PartialEq, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Location {
     pub location_id: Uuid,
     pub city: String,
@@ -71,7 +69,6 @@ impl std::fmt::Display for Location {
 
 /// Member information.
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Member {
     pub member_id: Uuid,
     pub foundation: String,
@@ -82,7 +79,6 @@ pub(crate) struct Member {
 
 /// Project information.
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-#[allow(clippy::struct_field_names)]
 pub(crate) struct Project {
     pub project_id: Uuid,
     pub foundation: String,

gitjobs-server/static/css/styles.src.css

@@ -364,6 +364,11 @@ select.aligned-right option {
   -webkit-mask-image: url("/static/images/icons/company.svg");
 }
 
+.icon-copy {
+  mask-image: url("/static/images/icons/copy.svg");
+  -webkit-mask-image: url("/static/images/icons/copy.svg");
+}
+
 .icon-draft {
   mask-image: url("/static/images/icons/draft.svg");
   -webkit-mask-image: url("/static/images/icons/draft.svg");

gitjobs-server/static/images/icons/copy.svg

@@ -57,3 +57,26 @@ export const applyButton = () => {
     }
   }
 };
+
+export const renderEmbedCode = () => {
+  const embedCode = document.getElementById("embed-code");
+  const params = new URLSearchParams(window.location.search);
+  params.append("limit", "10");
+  embedCode.textContent = `
+<iframe id="gitjobs" src="${window.location.origin}/embed?${params.toString()}" style="width:100%;max-width:870px;height:100%;display:block;border:none;"></iframe>
+
+<!-- Uncomment the following lines for resizing iframes dynamically using open-iframe-resizer
+<script type="module">
+  import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.js";
+  initialize({}, "#gitjobs");
+</script> -->`;
+};
+
+export const copyEmbedCodeToClipboard = (elId) => {
+  const embedCode = document.getElementById(elId);
+
+  // Copy the text inside the text field
+  navigator.clipboard.writeText(embedCode.textContent);
+
+  showSuccessAlert("Embed code copied to clipboard!");
+};

gitjobs-server/static/js/jobboard/job_section.js

@@ -108,7 +108,7 @@
         {% call title(content = "Skills") -%}
         <div class="text-stone-600 text-xs/6 flex flex-wrap pt-2">
           {% for skill in skills -%}
-            <div class="bg-stone-100 px-4 rounded-full inline-block capitalize mb-2 me-2">{{ skill|unnormalize }}</div>
+            <div class="bg-stone-100 px-4 rounded-full inline-block uppercase mb-2 me-2">{{ skill|unnormalize }}</div>
           {% endfor -%}
         </div>
       </div>

gitjobs-server/static/vendor/js/open-iframe-resizer.v1.3.1.min.js

@@ -0,0 +1,59 @@
+{% import "jobboard/jobs/results_section.html" as macros -%}
+<!DOCTYPE html>
+{# djlint:off H030 H031 #}
+<html lang="en">
+  <head>
+    <title>GitJobs</title>
+    <link rel="stylesheet" href="{{ base_url }}/static/css/styles.css" />
+  </head>
+  <body class="font-inter">
+    <div class="relative flex flex-col bg-white border border-stone-200 rounded-lg py-5 md:py-7">
+      {# GitJobs logo -#}
+      <div class="px-5 md:px-7">
+        <a href="{{ base_url }}"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="inline-flex items-top gap-x-2">
+          <div class="h-[28px] w-[138px] md:h-[33px] md:w-[162px] ms-[2px]">
+            <img src="{{ base_url }}/static/images/gitjobs.png"
+                 height="auto"
+                 width="auto"
+                 class="h-full w-full"
+                 alt="GitJobs Logo">
+          </div>
+          <div>
+            <div class="relative text-[0.7rem]/5 md:text-xs/6 tracking-widest rounded-full bg-stone-400/20 px-2 font-semibold">
+              BETA
+            </div>
+          </div>
+        </a>
+      </div>
+      {# End GitJobs logo -#}
+
+      <div class="flex flex-col mt-5 md:mt-7 space-y-4">
+        {# When jobs is empty -#}
+        {% if jobs.len() == 0 -%}
+          <div class="border border-stone-300 p-5 lg:p-10 text-sm text-stone-800 rounded-lg bg-stone-50/50 text-center mx-5 md:mx-7"
+               role="alert">
+            <div class="text-md lg:text-lg py-6 md:py-12">
+              At the moment there are no jobs that match your filtering criteria.
+            </div>
+          </div>
+        {% else -%}
+          {% for job in jobs -%}
+            {% let open_source = job.open_source.unwrap_or_default() -%}
+            {% let upstream_commitment = job.upstream_commitment.unwrap_or_default() -%}
+
+            <a href="{{ base_url }}/?job_id={{ job.job_id }}"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="relative mx-4 md:mx-7 text-start enabled:cursor-pointer border-2 rounded-lg enabled:hover:outline enabled:hover:outline-1 p-5 md:p-7 {%- if upstream_commitment > 0 %} border-lime-500 bg-lime-50/20 enabled:hover:outline-lime-500{%- else if open_source > 0 %} border-lime-300 bg-lime-50/20 enabled:hover:outline-lime-300{%- else %} border-stone-200 enabled:hover:outline-stone-200{%- endif -%}">{% call macros::job_card(job = job) -%}</a>
+          {% endfor -%}
+        {% endif -%}
+      </div>
+    </div>
+    <script type="module"
+            src="{{base_url}}/static/vendor/js/open-iframe-resizer.v1.3.1.min.js"></script>
+  </body>
+</html>
+{# djlint:on #}