Skip to content
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

feat: poc generated image #10432

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

feat: poc generated image #10432

wants to merge 5 commits into from

Conversation

OzakIOne
Copy link
Contributor

@OzakIOne OzakIOne commented Aug 20, 2024

Motivation

Idea in #10427

Test Plan

Deploy

Test links

Deploy preview: https://deploy-preview-10432--docusaurus-2.netlify.app/tests/blog/authors

image image

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Aug 20, 2024
Copy link

netlify bot commented Aug 20, 2024

[V2]

Name Link
🔨 Latest commit ee4a5f8
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/66cc7f8d40f8fa000884c37c
😎 Deploy Preview https://deploy-preview-10432--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

github-actions bot commented Aug 20, 2024

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO Report
/ 🟢 92 🟢 98 🟢 100 🟢 100 Report
/docs/installation 🟠 54 🟢 97 🟢 100 🟢 100 Report
/docs/category/getting-started 🟠 75 🟢 100 🟢 100 🟠 86 Report
/blog 🟠 68 🟢 96 🟢 100 🟠 86 Report
/blog/preparing-your-site-for-docusaurus-v3 🔴 48 🟢 92 🟢 100 🟢 100 Report
/blog/tags/release 🟠 71 🟢 96 🟢 100 🟠 86 Report
/blog/tags 🟠 75 🟢 100 🟢 100 🟠 86 Report

Copy link

github-actions bot commented Aug 20, 2024

Size Change: -8.67 kB (-0.07%)

Total Size: 11.6 MB

Filename Size Change
website/.docusaurus/docusaurus.config.mjs 27.9 kB +30 B (+0.11%)
website/.docusaurus/registry.js 156 kB +715 B (+0.46%)
website/.docusaurus/routes.js 74.6 kB +260 B (+0.35%)
website/.docusaurus/routesChunkNames.json 82.2 kB +499 B (+0.61%)
website/build/assets/css/styles.********.css 113 kB +399 B (+0.35%)
website/build/assets/js/main.********.js 667 kB -10.6 kB (-1.56%)
website/build/docs/api/docusaurus-config.html 202 kB +931 B (+0.46%)
ℹ️ View Unchanged
Filename Size Change
website/.docusaurus/codeTranslations.json 2 B 0 B
website/.docusaurus/globalData.json 30.2 kB 0 B
website/.docusaurus/i18n.json 930 B 0 B
website/.docusaurus/site-metadata.json 2.17 kB 0 B
website/build/blog.html 61.4 kB 0 B
website/build/blog/2017/12/14/introducing-docusaurus.html 74.8 kB -13 B (-0.02%)
website/build/blog/2018/04/30/How-I-Converted-Profilo-To-Docusaurus.html 47.3 kB 0 B
website/build/blog/2018/09/11/Towards-Docusaurus-2.html 51.7 kB 0 B
website/build/blog/2018/12/14/Happy-First-Birthday-Slash.html 33.3 kB -13 B (-0.04%)
website/build/blog/2019/12/30/docusaurus-2019-recap.html 39.6 kB -13 B (-0.03%)
website/build/blog/2020/01/07/tribute-to-endi.html 34 kB -13 B (-0.04%)
website/build/blog/2021/01/19/docusaurus-2020-recap.html 48.9 kB -13 B (-0.03%)
website/build/blog/2021/03/09/releasing-docusaurus-i18n.html 45.1 kB -13 B (-0.03%)
website/build/blog/2021/05/12/announcing-docusaurus-two-beta.html 51.9 kB -13 B (-0.03%)
website/build/blog/2021/11/21/algolia-docsearch-migration.html 52.9 kB 0 B
website/build/blog/2022/01/24/docusaurus-2021-recap.html 44.5 kB -13 B (-0.03%)
website/build/blog/2022/08/01/announcing-docusaurus-2.0.html 142 kB -13 B (-0.01%)
website/build/blog/2022/09/01/docusaurus-2.1.html 50.9 kB -13 B (-0.03%)
website/build/blog/archive.html 24.7 kB 0 B
website/build/blog/authors.html 46.5 kB 0 B
website/build/blog/authors/j-marcey.html 75 kB 0 B
website/build/blog/authors/josh-cena.html 45.9 kB 0 B
website/build/blog/authors/lex-111.html 57.4 kB 0 B
website/build/blog/authors/slorber.html 61.5 kB 0 B
website/build/blog/authors/slorber/authors/2.html 65.4 kB 0 B
website/build/blog/authors/slorber/authors/3.html 84.9 kB 0 B
website/build/blog/authors/slorber/authors/4.html 44.7 kB 0 B
website/build/blog/authors/yangshun.html 65 kB 0 B
website/build/blog/authors/zpao.html 46.3 kB 0 B
website/build/blog/page/2.html 66 kB 0 B
website/build/blog/page/3.html 74.6 kB 0 B
website/build/blog/page/4.html 68.6 kB 0 B
website/build/blog/page/5.html 44.7 kB 0 B
website/build/blog/preparing-your-site-for-docusaurus-v3.html 138 kB -13 B (-0.01%)
website/build/blog/releases/2.2.html 49.6 kB -12 B (-0.02%)
website/build/blog/releases/2.3.html 60.8 kB -12 B (-0.02%)
website/build/blog/releases/2.4.html 65.3 kB -12 B (-0.02%)
website/build/blog/releases/3.0.html 111 kB 0 B
website/build/blog/releases/3.1.html 52 kB -11 B (-0.02%)
website/build/blog/releases/3.2.html 48.8 kB -12 B (-0.02%)
website/build/blog/releases/3.3.html 55.5 kB -12 B (-0.02%)
website/build/blog/releases/3.4.html 55.8 kB -5 B (-0.01%)
website/build/blog/releases/3.5.html 58 kB -2 B (0%)
website/build/blog/tags.html 28.6 kB 0 B
website/build/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing.html 128 kB -12 B (-0.01%)
website/build/docs.html 49.4 kB -3 B (-0.01%)
website/build/docs/advanced.html 31.1 kB -12 B (-0.04%)
website/build/docs/advanced/architecture.html 30.7 kB -8 B (-0.03%)
website/build/docs/advanced/client.html 76 kB -12 B (-0.02%)
website/build/docs/advanced/plugins.html 58.6 kB -12 B (-0.02%)
website/build/docs/advanced/routing.html 73.9 kB -4 B (-0.01%)
website/build/docs/advanced/ssg.html 81.5 kB -12 B (-0.01%)
website/build/docs/api/misc/@docusaurus/eslint-plugin.html 48.3 kB -8 B (-0.02%)
website/build/docs/api/misc/@docusaurus/eslint-plugin/no-html-links.html 38.1 kB -12 B (-0.03%)
website/build/docs/api/misc/@docusaurus/eslint-plugin/no-untranslated-text.html 37 kB -12 B (-0.03%)
website/build/docs/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading.html 38.3 kB -8 B (-0.02%)
website/build/docs/api/misc/@docusaurus/eslint-plugin/string-literal-i18n-messages.html 41.9 kB -12 B (-0.03%)
website/build/docs/api/misc/@docusaurus/logger.html 39.8 kB -12 B (-0.03%)
website/build/docs/api/misc/create-docusaurus.html 34.9 kB -12 B (-0.03%)
website/build/docs/api/plugin-methods.html 67.4 kB -8 B (-0.01%)
website/build/docs/api/plugin-methods/extend-infrastructure.html 63 kB -8 B (-0.01%)
website/build/docs/api/plugin-methods/i18n-lifecycles.html 60.6 kB -8 B (-0.01%)
website/build/docs/api/plugin-methods/lifecycle-apis.html 170 kB -12 B (-0.01%)
website/build/docs/api/plugin-methods/static-methods.html 46.5 kB -8 B (-0.02%)
website/build/docs/api/plugins.html 31.6 kB -12 B (-0.04%)
website/build/docs/api/plugins/@docusaurus/plugin-client-redirects.html 62.6 kB +1 B (0%)
website/build/docs/api/plugins/@docusaurus/plugin-content-blog.html 198 kB +1 B (0%)
website/build/docs/api/plugins/@docusaurus/plugin-content-docs.html 202 kB -3 B (0%)
website/build/docs/api/plugins/@docusaurus/plugin-content-pages.html 78 kB -12 B (-0.02%)
website/build/docs/api/plugins/@docusaurus/plugin-debug.html 50.5 kB -12 B (-0.02%)
website/build/docs/api/plugins/@docusaurus/plugin-google-analytics.html 51.5 kB -12 B (-0.02%)
website/build/docs/api/plugins/@docusaurus/plugin-google-gtag.html 51 kB -16 B (-0.03%)
website/build/docs/api/plugins/@docusaurus/plugin-google-tag-manager.html 49.8 kB -12 B (-0.02%)
website/build/docs/api/plugins/@docusaurus/plugin-ideal-image.html 51.1 kB -8 B (-0.02%)
website/build/docs/api/plugins/@docusaurus/plugin-pwa.html 122 kB -8 B (-0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-sitemap.html 68.5 kB -6 B (-0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-vercel-analytics.html 42.2 kB 0 B
website/build/docs/api/themes.html 30.4 kB -12 B (-0.04%)
website/build/docs/api/themes/@docusaurus/theme-classic.html 46.4 kB -8 B (-0.02%)
website/build/docs/api/themes/@docusaurus/theme-live-codeblock.html 38.6 kB -8 B (-0.02%)
website/build/docs/api/themes/@docusaurus/theme-mermaid.html 37.5 kB -8 B (-0.02%)
website/build/docs/api/themes/@docusaurus/theme-search-algolia.html 34.7 kB -12 B (-0.03%)
website/build/docs/api/themes/configuration.html 256 kB -5 B (0%)
website/build/docs/blog.html 219 kB -6 B (0%)
website/build/docs/browser-support.html 51 kB -12 B (-0.02%)
website/build/docs/category/getting-started.html 28.3 kB 0 B
website/build/docs/category/guides.html 36.4 kB 0 B
website/build/docs/cli.html 63.8 kB -11 B (-0.02%)
website/build/docs/configuration.html 98.5 kB -8 B (-0.01%)
website/build/docs/create-doc.html 65.3 kB 0 B
website/build/docs/creating-pages.html 59.1 kB -11 B (-0.02%)
website/build/docs/deployment.html 211 kB -3 B (0%)
website/build/docs/docs-introduction.html 53.6 kB -12 B (-0.02%)
website/build/docs/docs-multi-instance.html 78.7 kB -8 B (-0.01%)
website/build/docs/docusaurus-core.html 245 kB -12 B (0%)
website/build/docs/guides/whats-next.html 32.8 kB -12 B (-0.04%)
website/build/docs/i18n/crowdin.html 151 kB 0 B
website/build/docs/i18n/git.html 82.6 kB -8 B (-0.01%)
website/build/docs/i18n/introduction.html 50.7 kB -12 B (-0.02%)
website/build/docs/i18n/tutorial.html 171 kB +1 B (0%)
website/build/docs/installation.html 73 kB 0 B
website/build/docs/introduction/index.html 280 B 0 B
website/build/docs/markdown-features.html 83.2 kB -11 B (-0.01%)
website/build/docs/markdown-features/admonitions.html 118 kB -8 B (-0.01%)
website/build/docs/markdown-features/assets.html 93.5 kB -10 B (-0.01%)
website/build/docs/markdown-features/code-blocks.html 245 kB -8 B (0%)
website/build/docs/markdown-features/diagrams.html 56 kB +2 B (0%)
website/build/docs/markdown-features/head-metadata.html 52.8 kB -12 B (-0.02%)
website/build/docs/markdown-features/links.html 43.1 kB -12 B (-0.03%)
website/build/docs/markdown-features/math-equations.html 95.4 kB -1 B (0%)
website/build/docs/markdown-features/plugins.html 101 kB -4 B (0%)
website/build/docs/markdown-features/react.html 144 kB -12 B (-0.01%)
website/build/docs/markdown-features/tabs.html 148 kB -12 B (-0.01%)
website/build/docs/markdown-features/toc.html 88.8 kB -8 B (-0.01%)
website/build/docs/migration.html 43 kB -13 B (-0.03%)
website/build/docs/migration/v2.html 41.2 kB -12 B (-0.03%)
website/build/docs/migration/v2/automated.html 42.6 kB -12 B (-0.03%)
website/build/docs/migration/v2/manual.html 207 kB -12 B (-0.01%)
website/build/docs/migration/v2/translated-sites.html 52.8 kB -12 B (-0.02%)
website/build/docs/migration/v2/versioned-sites.html 67.2 kB -12 B (-0.02%)
website/build/docs/migration/v3.html 218 kB -11 B (-0.01%)
website/build/docs/playground.html 32.5 kB -12 B (-0.04%)
website/build/docs/resources/index.html 325 B 0 B
website/build/docs/search.html 121 kB -11 B (-0.01%)
website/build/docs/seo.html 93 kB +1 B (0%)
website/build/docs/sidebar.html 136 kB -8 B (-0.01%)
website/build/docs/sidebar/autogenerated.html 156 kB +1 B (0%)
website/build/docs/sidebar/items.html 188 kB -12 B (-0.01%)
website/build/docs/sidebar/multiple-sidebars.html 67.1 kB -8 B (-0.01%)
website/build/docs/static-assets.html 56.2 kB -8 B (-0.01%)
website/build/docs/styling-layout.html 141 kB -12 B (-0.01%)
website/build/docs/support/index.html 319 B 0 B
website/build/docs/swizzling.html 120 kB +2 B (0%)
website/build/docs/team/index.html 310 B 0 B
website/build/docs/typescript-support.html 65.4 kB -12 B (-0.02%)
website/build/docs/using-plugins.html 115 kB +1 B (0%)
website/build/docs/versioning.html 87.1 kB +1 B (0%)
website/build/index.html 37.8 kB 0 B

compressed-size-action

@Josh-Cena
Copy link
Collaborator

I would prefer a more simplistic solution by default without the gradient background—what about just gray background and the initial letters?

@OzakIOne
Copy link
Contributor Author

OzakIOne commented Aug 21, 2024

Here is what grey images look like (also included the random gradiant with multiple authors)
image
image
image

@slorber
Copy link
Collaborator

slorber commented Aug 21, 2024

I find the grey variant better and sober, more in sync with our theme 👍

Maybe it could be interesting to add a small grey-only gradient?

Also could you add:

  • a dogfood example blog post with multiple authors, half of them not having avatars
  • a similar background color to the avatar image, so that when the image is loading slowly it displays a placeholder (see RN website example in the original issue)

@slorber slorber added pr: new feature This PR adds a new API or behavior. Argos Add this label to run UI visual regression tests. See argos.yml GH action. labels Aug 26, 2024
Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

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

That looks good enough to me, apart from a few details

Copy link

argos-ci bot commented Aug 26, 2024

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ No changes detected - Aug 26, 2024, 1:21 PM

@slorber
Copy link
Collaborator

slorber commented Aug 26, 2024

Wonder what a blog post with inline authors with no image should look like.

For example this case:

CleanShot 2024-08-26 at 11 49 58

CleanShot 2024-08-26 at 11 07 47 2@2x


IMHO it looks better after, but not sure it's what users expect us to do.

I think we should keep the ability to display authors' names without avatars? In particular for single author blogs that don't care about avatar or author layout alignment.

CleanShot 2024-08-26 at 11 51 58

At least, if none of the authors have any avatar, maybe we shouldn't add the extra avatar because all users would have generated avatars? Or maybe this should be an opt-in theme option?

What do you think @Josh-Cena @OzakIOne ?

@OzakIOne
Copy link
Contributor Author

Personally, I don't like the way it looks when there are no images, so I'm in favor of enabling this by default however users may not want this.
We can put this as opt in with a theme configuration and maybe if enough users gives us a feedback we could just enable it by default

@Josh-Cena
Copy link
Collaborator

I'm ambivalent. I find the current no-avatar rendering quite ugly, but maybe it's better if there's a subtitle line. I also think the current one is a good default and users can always either swizzle or use CSS to provide something better. After all, everything about rendering is up to Docusaurus to decide. If you really want to, we can make this opt-in and then remove the option in v4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Argos Add this label to run UI visual regression tests. See argos.yml GH action. CLA Signed Signed Facebook CLA pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants