Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Remove default Docusaurus preview image #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
3 tasks
bhouston opened this issue Mar 7, 2025 · 1 comment · Fixed by #41
Closed
3 tasks

Remove default Docusaurus preview image #40

bhouston opened this issue Mar 7, 2025 · 1 comment · Fixed by #41

Comments

@bhouston
Copy link
Member

bhouston commented Mar 7, 2025

Remove Default Docusaurus Preview Image

Description

The current preview image (social card) that appears when sharing links to our documentation in Discord and other platforms is the default Docusaurus promotional image. This image is not relevant to the current content of our website and should be removed or replaced.

Current Implementation

  • The image is configured in docusaurus.config.ts on line 103: image: 'img/docusaurus-social-card.jpg'
  • The image file is located at static/img/docusaurus-social-card.jpg

Proposed Solution

We have two options:

  1. Remove the image reference from the configuration (though this may result in platforms choosing random content from the page as preview)
  2. Replace it with a custom image that better represents MyCoder

Technical Details

  • This image is used for Open Graph metadata which provides rich previews when sharing links
  • If we create a custom image, it should maintain the 1200x675 pixel dimensions for optimal display

Acceptance Criteria

  • The default Docusaurus image no longer appears when sharing links
  • If replacing with a custom image, it should properly represent MyCoder
  • Preview works correctly in social platforms like Discord

Priority

Medium - This is a branding/visual issue, not a functional one

@bhouston
Copy link
Member Author

bhouston commented Mar 7, 2025

I've analyzed the options for addressing this issue and recommend the following approach:

Recommended Solution

Rather than removing the image entirely (which could lead to unpredictable previews), I suggest replacing it with a custom MyCoder-branded image:

  1. Create a custom social card image that:

    • Has dimensions of 1200x675 pixels
    • Includes the MyCoder logo and name
    • Has a clean, simple design with good contrast
    • Possibly includes a tagline like "AI-powered coding assistant"
  2. Implementation steps:

    // In docusaurus.config.ts
    themeConfig: {
      // Update to point to the new image
      image: 'img/mycoder-social-card.jpg',
      // rest of config...
    }
  3. Then add the new image file to static/img/mycoder-social-card.jpg

This approach ensures consistent branding while providing attractive previews when links are shared.

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 a pull request may close this issue.

1 participant