Skip to content

[to test AI review bots] Add editor app for editing blogs and job posts (#880)#1

Open
brendanator wants to merge 1 commit into
base-sha/15b5a8b86277dc9a917eaa6e3728dd79130e956bfrom
head-sha/f7c59e67c9a589a39c480bf5eb2fab4d6e793245/2025-05-11T16-27-13/f6eebb
Open

[to test AI review bots] Add editor app for editing blogs and job posts (#880)#1
brendanator wants to merge 1 commit into
base-sha/15b5a8b86277dc9a917eaa6e3728dd79130e956bfrom
head-sha/f7c59e67c9a589a39c480bf5eb2fab4d6e793245/2025-05-11T16-27-13/f6eebb

Conversation

@brendanator

@brendanator brendanator commented May 11, 2025

Copy link
Copy Markdown

User description


Important

Add new editor app for managing blogs and job posts with Markdown editing, file uploads, and Airtable integration.

  • New Features:
    • Introduced editor app for managing blogs and job posts with Markdown editing and image upload.
    • Added BodyEditor and MarkdownEditor components for content editing.
    • Implemented API routes in index.ts and [slug]/index.ts for blogs and jobs with CRUD operations.
    • Added presigned S3 upload functionality in presigned-upload.ts.
  • Infrastructure:
    • Added Dockerfile and Kubernetes service definition for deployment.
    • Configured environment variables in .env.local.template and .env.test.
  • Styling:
    • Moved prose utility styles to libraries/ui/src/default-config/tailwind.css.
  • Testing:
    • Added unit tests for MarkdownEditor in MarkdownEditor.test.tsx.
    • Added Storybook stories for MarkdownEditor in MarkdownEditor.stories.tsx.
  • Documentation:
    • Added README.md with setup and deployment instructions.

This description was created by Ellipsis for f7c59e6. You can customize this summary. It will automatically update as commits are pushed.



CodeAnt-AI Description

  • Introduced a new editor app for managing and editing blogs and job postings, including all core pages, API routes, and components.
  • Added a robust Markdown editor with image upload support, Storybook stories, and comprehensive unit tests.
  • Implemented Airtable integration for blogs and jobs, including schema definitions and API endpoints for CRUD operations.
  • Added file upload support via presigned S3 URLs and integrated environment variable validation.
  • Provided Kubernetes service definition, Dockerfile, and configuration files for deployment and local development.
  • Moved prose utility styles to the shared UI library for consistent styling and removed redundant styles from the website app.
  • Updated documentation with setup and deployment instructions.

This PR introduces a full-featured editor app for BlueDot staff to manage content, including a custom Markdown editor with image upload, Airtable integration, and all necessary infrastructure for deployment and testing. It also improves code sharing and styling consistency across the codebase.


Changes walkthrough

Relevant files
Enhancement
23 files
MarkdownEditor.tsx
Add image upload and embed support to MarkdownEditor component 

apps/editor/src/components/MarkdownEditor.tsx

  • Added support for image uploads via a new toolbar button and
    uploadFile prop.
  • Enhanced Markdown serialization/deserialization for embedded images.
  • Improved toolbar and editor styling.
  • Exported MarkdownEditorProps type.
  • +52/-11 
    BodyEditor.tsx
    Add BodyEditor component with file upload and save logic             

    apps/editor/src/components/BodyEditor.tsx

  • Introduced a new BodyEditor component for editing and saving markdown
    content.
  • Integrated file upload functionality using presigned S3 uploads.
  • Added unsaved changes warning and save button with loading state.
  • +105/-0 
    BaseLayout.tsx
    Add BaseLayout component with navigation                                             

    apps/editor/src/components/BaseLayout.tsx

  • Added a BaseLayout component with navigation for blogs and job
    postings.
  • Used BlueDot UI components for layout and navigation.
  • +21/-0   
    index.ts
    Add API route for listing blog posts                                                     

    apps/editor/src/pages/api/blogs/index.ts

  • Added API route to fetch all blogs, sorted by publish date.
  • Excluded blog body from summary responses.
  • +32/-0   
    index.ts
    Add API route for fetching and updating single blog post             

    apps/editor/src/pages/api/blogs/[slug]/index.ts

  • Added API route to fetch and update a single blog post by slug.
  • Supported GET and PUT methods with validation.
  • +63/-0   
    index.ts
    Add API route for listing job postings                                                 

    apps/editor/src/pages/api/jobs/index.ts

  • Added API route to fetch all job postings, sorted alphabetically.
  • Excluded job body from summary responses.
  • +30/-0   
    index.ts
    Add API route for fetching and updating single job posting         

    apps/editor/src/pages/api/jobs/[slug]/index.ts

  • Added API route to fetch and update a single job posting by slug.
  • Supported GET and PUT methods with validation.
  • +63/-0   
    presigned-upload.ts
    Add presigned S3 upload API route for file uploads                         

    apps/editor/src/pages/api/presigned-upload.ts

  • Added API route for generating S3 presigned upload URLs for file
    uploads.
  • Integrated AWS S3 client and presigned post logic.
  • +58/-0   
    status.ts
    Add status API endpoint                                                                               

    apps/editor/src/pages/api/status.ts

    • Added a status API endpoint returning online status.
    +11/-0   
    index.tsx
    Add blog posts listing page with edit links                                       

    apps/editor/src/pages/blogs/index.tsx

  • Added page to list all blog posts with edit links.
  • Integrated API call and error/loading handling.
  • +49/-0   
    [slug].tsx
    Add blog post editor page                                                                           

    apps/editor/src/pages/blogs/[slug].tsx

  • Added page to edit a single blog post using BodyEditor.
  • Integrated API calls for fetching and saving blog content.
  • +62/-0   
    index.tsx
    Add job postings listing page with edit links                                   

    apps/editor/src/pages/jobs/index.tsx

  • Added page to list all job postings with edit links.
  • Integrated API call and error/loading handling.
  • +49/-0   
    [slug].tsx
    Add job posting editor page                                                                       

    apps/editor/src/pages/jobs/[slug].tsx

  • Added page to edit a single job posting using BodyEditor.
  • Integrated API calls for fetching and saving job content.
  • +62/-0   
    index.tsx
    Add home page redirect to blogs                                                               

    apps/editor/src/pages/index.tsx

    • Added redirect from home page to blogs listing.
    +12/-0   
    index.tsx
    Add login redirect page                                                                               

    apps/editor/src/pages/login/index.tsx

    • Added login redirect page using BlueDot UI login preset.
    +3/-0     
    oauth-callback.tsx
    Add OAuth callback page for login                                                           

    apps/editor/src/pages/login/oauth-callback.tsx

    • Added OAuth callback page for login flow.
    +3/-0     
    index.ts
    Add AirtableTs database instance                                                             

    apps/editor/src/lib/api/db/index.ts

    • Added AirtableTs database instance with environment configuration.
    +6/-0     
    tables.ts
    Define Airtable schemas for blogs and job postings                         

    apps/editor/src/lib/api/db/tables.ts

    • Defined Airtable table schemas for blogs and job postings.
    +68/-0   
    env.ts
    Add environment variable validation for API                                       

    apps/editor/src/lib/api/env.ts

  • Added environment variable validation for required API keys and
    secrets.
  • +12/-0   
    makeApiRoute.ts
    Add helper for authenticated API routes                                               

    apps/editor/src/lib/api/makeApiRoute.ts

  • Added helper to create authenticated API routes with environment and
    token verification.
  • +8/-0     
    _app.tsx
    Add custom App component with layout and SSR config                       

    apps/editor/src/pages/_app.tsx

  • Added custom App component with BaseLayout and dynamic SSR disabling.
  • Set up global styles and page title.
  • +27/-0   
    tailwind.css
    Move prose utility styles to shared UI library                                 

    libraries/ui/src/default-config/tailwind.css

  • Moved prose utility styles from website to shared UI library.
  • Ensured consistent prose styling across apps.
  • +46/-0   
    globals.css
    Remove prose utility styles from website globals                             

    apps/website/src/globals.css

    • Removed prose utility styles (now moved to shared UI library).
    +0/-45   
    Tests
    3 files
    MarkdownEditor.test.tsx
    Add unit tests for MarkdownEditor component                                       

    apps/editor/src/components/MarkdownEditor.test.tsx

  • Added comprehensive tests for the MarkdownEditor component.
  • Tested rendering, content updates, toolbar buttons, and formatting
    actions.
  • +124/-1 
    MarkdownEditor.stories.tsx
    Add Storybook stories for MarkdownEditor component                         

    apps/editor/src/components/MarkdownEditor.stories.tsx

  • Added Storybook stories for MarkdownEditor with sample markdown
    content.
  • Demonstrated formatting, code blocks, and list support.
  • +69/-1   
    status.test.ts
    Add test for status API endpoint                                                             

    apps/editor/src/pages/api/status.test.ts

    • Added test for the status API endpoint to verify online response.
    +21/-0   
    Configuration changes
    12 files
    next.config.js
    Add Next.js configuration file                                                                 

    apps/editor/next.config.js

    • Added Next.js configuration using BlueDot UI default config.
    +3/-0     
    postcss.config.js
    Add PostCSS configuration for Tailwind CSS                                         

    apps/editor/postcss.config.js

    • Added PostCSS configuration with Tailwind CSS plugin.
    +5/-0     
    globals.css
    Add global CSS imports for Tailwind and typography                         

    apps/editor/src/globals.css

    • Added global CSS imports for Tailwind and typography.
    +6/-0     
    package.json
    Add package.json for editor app dependencies and scripts             

    apps/editor/package.json

  • Added package.json with dependencies, scripts, and devDependencies for
    the editor app.
  • +57/-0   
    tsconfig.json
    Add TypeScript configuration for editor app                                       

    apps/editor/tsconfig.json

    • Added TypeScript configuration extending BlueDot's Next.js config.
    +8/-0     
    vitest.config.mjs
    Add Vitest configuration for editor app                                               

    apps/editor/vitest.config.mjs

  • Added Vitest configuration with inline dependency for
    tiptap-starter-kit.
  • +12/-0   
    Dockerfile
    Add Dockerfile for editor app deployment                                             

    apps/editor/Dockerfile

  • Added Dockerfile for building and running the editor app in
    production.
  • +31/-0   
    .env.local.template
    Add .env.local.template for environment variables                           

    apps/editor/.env.local.template

    • Added environment variable template for local development.
    +14/-0   
    .env.test
    Add .env.test for test environment variables                                     

    apps/editor/.env.test

    • Added test environment variable file for testing.
    +11/-0   
    next-env.d.ts
    Add Next.js type definitions                                                                     

    apps/editor/next-env.d.ts

    • Added Next.js type definitions file.
    +5/-0     
    serviceDefinitions.ts
    Add Kubernetes service definition for bluedot-editor app             

    apps/infra/src/k8s/serviceDefinitions.ts

  • Added service definition for bluedot-editor app in Kubernetes.
  • Configured environment variables and host for deployment.
  • +18/-0   
    vitest.config.mjs
    Simplify Vitest config for website app                                                 

    apps/website/vitest.config.mjs

  • Simplified Vitest config by removing inline dependency for
    tiptap-starter-kit.
  • +1/-10   
    Documentation
    1 files
    README.md
    Add README for editor app setup and deployment                                 

    apps/editor/README.md

  • Added README with setup and deployment instructions for the editor
    app.
  • +13/-0   
    Dependencies
    1 files
    package.json
    Remove markdown editor dependencies from website package.json   

    apps/website/package.json

  • Removed tiptap and react-markdown dependencies from website
    package.json.
  • +0/-5     
    💡 Usage Guide

    Checking Your Pull Request

    Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

    Talking to CodeAnt AI

    Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

    @codeant-ai ask: Your question here
    

    This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

    Retrigger review

    Ask CodeAnt AI to review the PR again, by typing:

    @codeant-ai: review
    

    Check Your Repository Health

    To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

    Summary by Sourcery

    Create a new editor app for managing blogs and job posts, providing a comprehensive content management interface with Markdown editing, file uploads, and Airtable integration

    New Features:

    • Introduced a new editor app for managing and editing blogs and job postings
    • Added a robust Markdown editor with image upload support
    • Implemented API routes for blogs and job posts with CRUD operations
    • Created presigned S3 upload functionality for file handling

    Enhancements:

    • Moved prose utility styles to shared UI library for consistent styling
    • Added comprehensive authentication and authorization mechanisms
    • Implemented dynamic file upload and content management

    Deployment:

    • Added Dockerfile for containerized deployment
    • Configured Kubernetes service definition for editor app
    • Added environment variable templates for local and test environments

    Documentation:

    • Created README with setup and deployment instructions

    Tests:

    • Added unit tests for MarkdownEditor component
    • Created Storybook stories for MarkdownEditor
    • Implemented status API endpoint test

    Summary by CodeRabbit

    • New Features

      • Introduced a new content editor app for managing blogs and job postings, featuring authenticated access, markdown editing with image upload, and integration with Airtable and AWS S3.
      • Added dedicated pages for listing and editing blogs and jobs, including save functionality and navigation.
      • Implemented API endpoints for fetching and updating blog and job data, as well as generating presigned upload URLs for assets.
      • Provided login and OAuth callback pages with Google authentication.
    • Bug Fixes

      • None.
    • Documentation

      • Added comprehensive README and environment variable templates for setup and deployment guidance.
    • Style

      • Applied new global and prose-specific styling for consistent typography and UI appearance.
    • Chores

      • Added Docker, TypeScript, PostCSS, and Vitest configurations for streamlined development, testing, and deployment.
      • Updated infrastructure to deploy the editor app with required environment variables and service definitions.
    • Refactor

      • Removed unused Tiptap and markdown-related dependencies and styles from the website app to streamline codebase.

    @brendanator

    Copy link
    Copy Markdown
    Author

    This pull request was cloned from https://github.com/bluedotimpact/bluedot/pull/909. (Note: the URL is not a link to avoid triggering a notification on the original pull request.)

    @brendanator

    Copy link
    Copy Markdown
    Author

    @sourcery-ai review

    @ellipsis-dev ellipsis-dev Bot left a comment

    Copy link
    Copy Markdown

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Caution

    Changes requested ❌

    Reviewed everything up to f7c59e6 in 2 minutes and 57 seconds. Click for details.
    • Reviewed 1450 lines of code in 40 files
    • Skipped 2 files when reviewing.
    • Skipped posting 6 draft comments. View those below.
    • Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
    1. apps/editor/src/pages/api/jobs/[slug]/index.ts:54
    • Draft comment:
      In the PUT case, the response property is incorrectly named 'blog' instead of 'job'.
    • Reason this comment was not posted:
      Marked as duplicate.
    2. apps/editor/README.md:11
    • Draft comment:
      Consider capitalizing 'docker' to 'Docker' on line 11, as it is a proper noun referring to the Docker platform.
    • Reason this comment was not posted:
      Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% While technically correct that Docker is often capitalized as a proper noun, this is a minor stylistic issue in documentation. The meaning is perfectly clear either way. The rules state not to make comments that are obvious or unimportant, and to only comment if there's clearly a code change required. Documentation consistency could be important for professionalism. Some might argue that proper capitalization of product names shows attention to detail. While proper capitalization is nice, this is too minor of an issue to warrant a PR comment. It doesn't affect functionality or understanding. Delete this comment as it's too minor and purely stylistic, not meeting the threshold for "clearly a code change required."
    3. apps/editor/src/components/BodyEditor.tsx:94
    • Draft comment:
      The class name 'text-size-sm' on line 94 seems unusual. If you intended to use a Tailwind CSS class for small text, it should likely be 'text-sm'. Please verify if this is intentional or a typo.
    • Reason this comment was not posted:
      Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% The rules explicitly state "Do NOT comment on any pure frontend UI or styling changes, only logic. Assume that if the author changed the UI, they did it correctly." This is purely about CSS class naming for text size styling, which falls under UI changes. Even if the class name is non-standard, we should trust that the author has their reasons (maybe a custom Tailwind configuration or CSS utility class). The class name does look non-standard for Tailwind, and fixing it could prevent confusion for other developers. Maybe this is worth keeping for code consistency? No - the rules are very clear about not commenting on UI and styling changes. We must trust the author's UI decisions, including their choice of CSS class names. Delete this comment as it violates the rule about not commenting on UI and styling changes.
    4. apps/editor/src/components/MarkdownEditor.tsx:106
    • Draft comment:
      Minor typographical error: The className 'text-size-xs' (line 106) might be a typo. If you're using Tailwind CSS, it is likely intended to be 'text-xs'. Please confirm and update accordingly.
    • Reason this comment was not posted:
      Comment was not on a location in the diff, so it can't be submitted as a review comment.
    5. apps/editor/src/pages/api/jobs/[slug]/index.ts:56
    • Draft comment:
      Typo Alert: In the PUT branch, the returned object uses the key 'blog' (line 56) for the updated job posting. For consistency with the rest of the file and the response schema, it should be renamed to 'job'.
    • Reason this comment was not posted:
      Marked as duplicate.
    6. libraries/ui/src/default-config/tailwind.css:139
    • Draft comment:
      Typographical error: 'psuedoelement' should be spelled 'pseudoelement' for clarity.
    • Reason this comment was not posted:
      Comment was not on a location in the diff, so it can't be submitted as a review comment.

    Workflow ID: wflow_K7hFnCiZ68RvA5aU

    You can customize Ellipsis by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.

    });
    return {
    type: 'success' as const,
    blog: updatedJob,

    Copy link
    Copy Markdown

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Return property should be 'job' not 'blog'.

    Suggested change
    blog: updatedJob,
    job: updatedJob,

    useEffect(() => {
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
    if (hasUnsavedChanges) {
    e.preventDefault();

    Copy link
    Copy Markdown

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Consider setting e.returnValue (e.g. e.returnValue = '') in the beforeunload handler to reliably trigger the unsaved changes confirmation.

    Suggested change
    e.preventDefault();
    e.returnValue = '';

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Labels

    None yet

    Projects

    None yet

    Development

    Successfully merging this pull request may close these issues.

    2 participants