DEV Partner Portal Refactoring - Phase 1

This document outlines the changes made in Phase 1 of the continue.html refactoring.

Phase 1: Component Structure Setup

Directory Structure

We've created a component-based architecture with the following structure:

/views
  /components
    /layout
      header.html
      footer.html
    /forms
      company-info-form.html
    /uploadcare
      uploader-config.html
      image-uploader.html
      image-gallery.html
    /ui
      section-card.html
      message-box.html
      account-info.html
    /ad-creation
      ad-preview.html
    README.md
  /templates
    continue-template.html

CSS Organization

We've extracted inline styles into dedicated CSS files:

/public/css
  /components
    section-cards.css
    uploadcare-custom.css
    forms.css
  continue-page.css

Template Service Enhancement

We've enhanced the template service (templateService.ts) to support:

Component Inclusion: Using {{> component/path param1="value1"}} syntax
Conditional Logic: Using {{#if condition}}...{{#else}}...{{/if}} syntax
Variable Replacement: Using {{variableName}} syntax
Parameter Passing: Passing data to components

Component Examples

Header Component

<h1 class="text-3xl font-bold text-center mb-2">{{title}}</h1>
{{#if subtitle}}
<h2 class="text-xl text-center text-gray-600 mb-8">{{subtitle}}</h2>
{{/if}}

Message Box Component

{{#if type == "success"}}
<div id="{{id}}" class="hidden mt-6 p-4 bg-green-50 text-green-700 rounded-md">
  {{message}}
</div>
{{else if type == "error"}}
<div id="{{id}}" class="hidden mt-6 p-4 bg-red-50 text-red-700 rounded-md">
  {{message}}
</div>
{{else}}
<div id="{{id}}" class="hidden mt-6 p-4 bg-blue-50 text-blue-700 rounded-md">
  {{message}}
</div>
{{/if}}

Main Template

We've created a new template (continue-template.html) that uses components:

<!DOCTYPE html>
<html lang="en">
<head>
  {{> components/meta-tags}}
  <title>Ad Portal - DEV Partner Portal</title>
  <link rel="stylesheet" href="/public/css/styles.css">
  <link rel="stylesheet" href="/public/css/continue-page.css">
  {{> components/uploadcare/uploader-config}}
</head>
<body>
  <!-- ... -->
  {{> components/layout/header title="DEV Partner Portal" subtitle="Ad Portal"}}
  
  <!-- Account Information Section -->
  <section class="section-card">
    <!-- ... -->
    {{> components/ui/account-info company=COMPANY_NAME email=EMAIL id=ID host=HOST}}
  </section>
  
  <!-- ... more components ... -->
  
  {{> components/layout/footer year="2023"}}
</body>
</html>

Controller Update

We've updated the submissionController.ts to use our new template:

export async function renderContinuationPage(c: Context): Promise<Response> {
  // ...
  const html = await renderTemplate("/views/templates/continue-template.html", {
    COMPANY_NAME: submission.companyName,
    EMAIL: submission.email,
    ID: id,
    HOST: host
  }, import.meta.url);
  
  return c.html(html);
}

Benefits of Phase 1

Improved Organization: Clear separation of concerns with components
Better Maintainability: Smaller, focused files are easier to understand and modify
Enhanced Reusability: Components can be reused across different pages
Cleaner Styling: Dedicated CSS files for components
Simplified Templates: Main template is now more readable and focused on structure

Next Steps

In Phase 2, we'll extract more components from the continue.html file, focusing on common UI patterns and further improving the organization of the code.

devto

adportal