Skip to content

Conversation

brendanator
Copy link

@brendanator brendanator commented May 11, 2025

User description


Important

Introduces a 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 in BodyEditor.tsx and MarkdownEditor.tsx.
    • Implemented API routes for blogs and jobs in api/blogs and api/jobs for CRUD operations.
    • Added presigned S3 upload functionality in presigned-upload.ts.
  • Infrastructure:
    • Added Dockerfile and Kubernetes service definition for deployment in Dockerfile and serviceDefinitions.ts.
    • Configured environment variables in .env.local.template and .env.test.
  • Styling:
    • Moved prose utility styles to shared UI library in tailwind.css.
  • Testing:
    • Added unit tests for MarkdownEditor in MarkdownEditor.test.tsx.
    • Added test for status API endpoint in status.test.ts.
  • Documentation:
    • Added README with setup and deployment instructions in README.md.

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
    Author

    This is a benchmark review for experiment bluedot.
    Run ID: bluedot/benchmark_2025-05-11T17-02-27_v1-36-0-13-gc38b234d7-dirty.

    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.)

    Experiment configuration
    review_config:
      # User configuration for the review
      # - benchmark - use the user config from the benchmark reviews
      # - <value> - use the value directly
      user_review_config:
        enable_ai_review: true
        enable_rule_comments: false
    
        enable_complexity_comments: benchmark
        enable_security_comments: benchmark
        enable_tests_comments: benchmark
        enable_comment_suggestions: benchmark
    
        enable_pull_request_summary: benchmark
        enable_review_guide: benchmark
    
        enable_approvals: true
    
      ai_review_config:
        # The model responses to use for the experiment
        # - benchmark - use the model responses from the benchmark reviews
        # - llm - call the language model to generate responses
        model_responses:
          comments_model: benchmark
          comment_validation_model: benchmark
          comment_suggestion_model: benchmark
          complexity_model: benchmark
          security_model: benchmark
          tests_model: benchmark
          pull_request_summary_model: benchmark
          review_guide_model: benchmark
          overall_comments_model: benchmark
    
    # The pull request dataset to run the experiment on
    pull_request_dataset:
    - https://github.com/bluedotimpact/bluedot/pull/909
    
    # Questions to ask to label the review comments
    review_comment_labels: []
    # - label: correct
    #   question: Is this comment correct?
    
    # Benchmark reviews generated by running
    #   python -m scripts.experiment benchmark <experiment_name>
    benchmark_reviews:
    - dataset_pull_request: https://github.com/bluedotimpact/bluedot/pull/909
      review_pull_request: https://github.com/sourcery-ai-experiments/bluedot/pull/5
    

    Copy link

    @ellipsis-dev ellipsis-dev bot left a comment

    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 3 minutes and 15 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:55
    • Draft comment:
      Response key is incorrect in PUT case; should use 'job' instead of 'blog'.
    • Reason this comment was not posted:
      Marked as duplicate.
    2. apps/editor/src/pages/api/jobs/[slug]/index.ts:56
    • Draft comment:
      In the PUT method, the response property is mistakenly named 'blog' instead of 'job'.
    • Reason this comment was not posted:
      Marked as duplicate.
    3. apps/editor/README.md:11
    • Draft comment:
      Minor cosmetic suggestion: consider capitalizing 'docker' to 'Docker' on line 11 for consistency with the standard naming conventions.
    • 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 state not to make purely informative comments or comments that are obvious/unimportant. This is a minor stylistic suggestion that doesn't affect functionality. It's not pointing out a bug or suggesting a meaningful code quality improvement. While Docker is officially capitalized as a proper noun, this kind of minor formatting suggestion creates noise in code reviews without adding value. The benefit of proper capitalization doesn't outweigh the cost of review noise, especially in a README file where the lowercase version is still perfectly understandable. Delete this comment as it's too minor and doesn't require a code change. It violates our rule about not making purely informative or unimportant comments.
    4. apps/editor/src/components/MarkdownEditor.stories.tsx:6
    • Draft comment:
      The meta title on line 6 still reads 'website/MarkdownEditor'. Since the file has been moved to the editor app, consider updating the title (e.g., to 'editor/MarkdownEditor') for consistency.
    • 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/components/MarkdownEditor.tsx:106
    • Draft comment:
      Typographical error: Consider replacing 'text-size-xs' with the standard Tailwind CSS class 'text-xs', unless 'text-size-xs' is defined elsewhere intentionally.
    • 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.
    6. apps/editor/vitest.config.mjs:7
    • Draft comment:
      There is a potential typographical inconsistency in the comment on line 7. The comment references 'tippy.js', but the inline dependency is '@syfxlin/tiptap-starter-kit'. Please verify if the comment is correct or if it should be updated to reflect the actual dependency to avoid confusion.
    • 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% The comment is nitpicking about documentation wording. The existing comment likely refers to tippy.js because tiptap-starter-kit probably includes or depends on tippy.js internally, and that's causing the import weirdness. The current comment actually provides more context about the underlying issue than the suggested change would. I could be wrong about the relationship between tippy.js and tiptap-starter-kit. Maybe there really is no connection and the comment is misleading. Even if I'm wrong about the exact relationship, this kind of minor documentation wording change doesn't meet our bar for necessary comments. The existing comment is good enough to explain why the configuration is needed. Delete this comment as it's suggesting an unnecessary documentation change that doesn't improve code quality or fix any real issues.

    Workflow ID: wflow_zlqKz5p3ktkUmC3a

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

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

    Choose a reason for hiding this comment

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

    Consider setting e.returnValue explicitly (e.g., e.returnValue = '') in the beforeunload handler to ensure browsers display the unsaved changes warning consistently.

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

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

    Choose a reason for hiding this comment

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

    Typographical error: The PUT response returns a property named 'blog' (line 56) but it should be 'job' to align with the response schema and GET response. Please update 'blog' to 'job'.

    Suggested change
    blog: updatedJob,
    job: updatedJob,

    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