[Docs]: Need thumbnail pictures for the blogs

yzeng25 commented 2 years ago

Current State

Description of the current state/issue:

The default thumbnail picture for each blog is the same. I think this is an issue, since it just looks weird, and each blog should have a unique cover picture.

Link to the page:

https://apisix.apache.org/blog/

Screenshots (if relevant):

Desired State

Description of the change you are proposing:

Each blog should have a unique cover picture.

Would you like to fix this issue?

No. Please assign another contributor

adarrssh commented 2 years ago

Please assign me this issue. What kind of picture would you like to add to other blogs?

yzeng25 commented 2 years ago

Please assign me this issue. What kind of picture would you like to add to other blogs?

My first thought is:

Each blog post has at least one picture in its content.
Grab the most suitable picture from the content and make it the cover.
Or generate a cover picture on your own

Due to the recent refactorization, I am not sure how it works. You would need some consultations from @SkyeYoung .

SkyeYoung commented 2 years ago

@adarrssh @yzeng25

Before we can do that, we need to do a few more things. (This part of the work will be logged to https://github.com/apache/apisix-website/issues/1048#issuecomment-1195504988 when it is completed )

[x] update the project documentation https://github.com/apache/apisix-website/pull/1263
[x] test and adjust how the thumbnail pictures should appear in the blog
- The thumbnails will only be displayed on the list page, not in the blog post.

So, please wait a little bit, probably tomorrow we can start the work on replacing the images.

And about these images, it is very obvious that it should express the main idea of the article. We need @hf400159 @SylviaBABY @juzhiyuan 's help too.

If it needs to be described more explicitly, it's something like the images in https://blog.postman.com/. But please don't imitate it directly, maybe we can discuss and try to make some images first.

yzeng25 commented 2 years ago

Yeah indeed. The final result is upload the images, but before that, there are tons of other work to do. @adarrssh please wait for those work are ready. We can consider you call dibs on this issue. When everything is ready, and if you are still interested in solving it, then go ahead and do it.

adarrssh commented 2 years ago

Okay, I'll wait no problem 🙂

SkyeYoung commented 2 years ago

@adarrssh Hi, most of the preparation work has been done.

🔔 Could you please give us some sketches or full images to give us an idea of what you think of them?

Here are some of our current settings for the default image:

The original size of the image is 768x407.

It is important to note that the images in the first page of the blog list pages should perform as well as possible in the 601x232 style.

🌟 I think these settings may not be reasonable, you are welcome to suggest your ideas for images and styles.

adarrssh commented 2 years ago

Hey @SkyeYoung, My Univesity exam has started and I have a pretty busy schedule for the next 2 weeks, if you can complete this issue then you can do it, or we can wait for some time so that I can finish this issue later.

SkyeYoung commented 2 years ago

@adarrssh Good luck with your exams. We are working on some pictures to solve part of this issue. You are welcome to join us after the exam to solve this issue!

BhavyaT-135 commented 2 years ago

Hi @SkyeYoung, could I contribute to this issue if no one else is working on it at the moment? I plan to use Canva to create thumbnail images relevant to the topics and would like to discuss the images for each blog individually so that I can improve them according to feedback😊

SkyeYoung commented 2 years ago

@BhavyaT-135 You're more than welcome to contribute to this project! No one else is currently working on this issue, so I think you can be as creative as you want. If you have any questions or need help, please feel free to @ me, or anyone else. 😸

BhavyaT-135 commented 2 years ago

Hi @SkyeYoung, for starters, I created the thumbnail for Integrate API Gateway with Eureka blog. I kept the design minimalistic. Kindly take a look and suggest any changes that you would like to see. 😊

apisix-eureka

SkyeYoung commented 2 years ago

Hi @SkyeYoung, for starters, I created the thumbnail for Integrate API Gateway with Eureka blog. I kept the design minimalistic. Kindly take a look and suggest any changes that you would like to see. 😊

I think it's good enough design.

@juzhiyuan @hf400159 @yzeng25 Do you have any suggestion?

yzeng25 commented 2 years ago

Generally looks good to me. Just some thoughts:

Could you change the major background color to red/white/grey/blue/purple/orange-ish? The current dark green-ish background just does not match with the website's theme colors.
Move the "~~~" upward a bit, so that the APISIX logo and the lines are separated.
Eureka has its own logo, you can see this search result, so I suggest replace the current spring logo with it.

BhavyaT-135 commented 2 years ago

Hi @SkyeYoung @yzeng25, thanks for the review! I've made the changes and used an orange gradient background. Kindly take a look and let me know if this looks better! 😊

apisix-eureka-2

yzeng25 commented 2 years ago

LGTM. Any other thoughts @SkyeYoung @juzhiyuan ?

Zerozero-123 commented 2 years ago

I think the second picture background color with a similar color so that the logo is not very prominent, compared to the first color makes the content more prominent, green background and Eureka logo has echoes of green, you can change the two pictures on the article to see the preview, it is easier to see which is better. @yzeng25

SkyeYoung commented 2 years ago

I think the second picture background color with a similar color so that the logo is not very prominent, compared to the first color makes the content more prominent, green background and Eureka logo has echoes of green, you can change the two pictures on the article to see the preview, it is easier to see which is better. @yzeng25

@BhavyaT-135

BhavyaT-135 commented 2 years ago

Hi @SkyeYoung @yzeng25, I tried setting up the project on my local machine but am running into some issues. I have contributed to the project before and it was working fine back then. I don't understand what the problem is now. 😅

For the time being, I tried the preview of the two images on the official website using Google developer tools. Kindly take a look 😃

apisix-orange

apisix-green

SkyeYoung commented 2 years ago

I tried setting up the project on my local machine but am running into some issues.

@BhavyaT-135 Could you please upload the screenshots of the errors here so that I can assist you in solving these problems?

BhavyaT-135 commented 2 years ago

@SkyeYoung After cloning the repo and setting up remotes, I ran the command yarn and faced the following error in the end.

yarn error

Then, I ran the command yarn prepare-data and it executed perfectly. When I run yarn start:doc and yarn start:website, everything works. But, when I run the command yarn start:blog:en, I get this error:

start-blog-error

BhavyaT-135 commented 2 years ago

When I run the command yarn build:preview, the following error is shown.

I just figured that the script for yarn buld:preview is preview=true yarn run build. However, when I manually type the script yarn run build preview=true, my build process starts without error. I'll let you know if everything works fine after running yarn serve. 😊

SkyeYoung commented 2 years ago

Then, I ran the command yarn prepare-data and it executed perfectly. When I run yarn start:doc and yarn start:website, everything works. But, when I run the command yarn start:blog:en, I get this error:

Sorry to be late. I think I know what the cause of these problems is.

It's because I was using the command cp -r to copy some files, but this command doesn't exist in windows.

When I run the command yarn build:preview, the following error is shown.

I just figured that the script for yarn buld:preview is preview=true yarn run build. However, when I manually type the script yarn run build preview=true, my build process starts without error. I'll let you know if everything works fine after running yarn serve. 😊

The reason for this problem is similar. In Windows, the syntax of cmd or powershell is not the same as the shell in Linux.

I think this is due to the fact that most of the maintainers of this project are developing with Linux or MacOS, which causes these problems.

As a solution, maybe you can try the new development method I added https://github.com/apache/apisix-website#getting-started-in-a-dev-container so that you can use a Linux-like development experience.

Or, please wait a day or two, these two issues are not that hard to fix and I can submit a PR to fix the problems. (But I'm not sure if u'll encounter any other problems 😅)

BhavyaT-135 commented 2 years ago

Sure @SkyeYoung, I'll wait! 😊

SkyeYoung commented 2 years ago

Sure @SkyeYoung, I'll wait! 😊

Hi, I have tried to commit #1315 to fix the build issue in windows and it works fine in my windows 11 environment. (But with commands like yarn prepare-data, you still need to run them manually, and I haven't tried to get it to work automatically in windows for now.)

BhavyaT-135 commented 2 years ago

Hi @SkyeYoung @yzeng25 , sorry for the delay. Got busy with some work at the university. I'll create some more thumbnail images for the blog posts.

Meanwhile, should I create more thumbnails for this blog or should we go with one of these? 😊

Hi @SkyeYoung @yzeng25, I tried setting up the project on my local machine but am running into some issues. I have contributed to the project before and it was working fine back then. I don't understand what the problem is now. 😅

For the time being, I tried the preview of the two images on the official website using Google developer tools. Kindly take a look 😃

guitu168 commented 2 years ago

@BhavyaT-135 great! 👍 We go with one of these. Can the background color of the picture be white?

BhavyaT-135 commented 2 years ago

Hi I created a few designs, because the white background one looked a little too simple. Could you please let me know your thoughts on them, @hf400159 ? 😊

apisix-eureka-3

apisix-eureka-4

apisix-eureka-5

guitu168 commented 2 years ago

The last picture is nice. Can you refer to these images too? The background color will add some other colors. @BhavyaT-135

BhavyaT-135 commented 2 years ago

Hey @hf400159, thanks for the advice. I came up with this design. How does it look? 😄

apisix-eureka-6

guitu168 commented 2 years ago

@BhavyaT-135 Great！Welcome to submit PR.

BhavyaT-135 commented 2 years ago

Hi @hf400159, thanks for the approval! 😊

Could you kindly guide me as to where to insert the image in the code-base as I couldn't seem to find the specific location. Also, do I need to upload the image on a specific link like the rest of the thumbnails?

P.S., Sorry for bothering 😅

yzeng25 commented 2 years ago

Hi @BhavyaT-135, these images are great. Just a small piece of advice, would you be able to focus on the content on the first page of the blog section first?

IMO the first page serves as an entry, it has to look good. The other pages are less important, which gives you plenty of time to solve them in batches, i.e. submit a pull request with 1~5 images at a time.

For image insertions and conversions, you can seek help from @SkyeYoung and @hf400159.

guitu168 commented 2 years ago

Hi @hf400159, thanks for the approval! 😊

Could you kindly guide me as to where to insert the image in the code-base as I couldn't seem to find the specific location. Also, do I need to upload the image on a specific link like the rest of the thumbnails?

P.S., Sorry for bothering 😅

@BhavyaT-135 You can upload pictures to the comments. I will convert these image's links.

BhavyaT-135 commented 2 years ago

Sure @yzeng25 I'll start working on thumbnails of the first page!😊

Hi @hf400159, thanks for the approval! 😊 Could you kindly guide me as to where to insert the image in the code-base as I couldn't seem to find the specific location. Also, do I need to upload the image on a specific link like the rest of the thumbnails? P.S., Sorry for bothering 😅

@BhavyaT-135 You can upload pictures to the comments. I will convert these image's links. @hf400159 Great! I'll keep uploading them here!😊

BhavyaT-135 commented 2 years ago

Hi @yzeng25 @hf400159, I've created the following thumbnails for the blog titled "Why would you choose Apache APISIX instead of NGINX or Kong?"

Kindly take a look and let me know which one looks better. Open to changes😊

apache-apisix

apache-apisix1

guitu168 commented 2 years ago

@BhavyaT-135 Great! I like the style of the first one. > means a switch from APISIX to Kong and NGINX? Can you change the > symbol?

BhavyaT-135 commented 2 years ago

@hf400159 Actually the > symbol was just an arithmetic "greater than" sign. Sure, I'll update that ASAP. Should I change it to an arrow pointing towards apisix or a straight line like the previous designs. What do you suggest? 😃

yzeng25 commented 2 years ago

I suggest using the second one to avoid ambiguities.

guitu168 commented 2 years ago

@hf400159 Actually the > symbol was just an arithmetic "greater than" sign. Sure, I'll update that ASAP. Should I change it to an arrow pointing towards apisix or a straight line like the previous designs. What do you suggest? 😃

How about using arrows? @BhavyaT-135 Image two looks informal. cc @SylviaBABY What do you think?

BhavyaT-135 commented 2 years ago

@hf400159, I'm attaching the thumbnail with the arrow and the simple line in the middle one. Kindly take a look... 😊

apache-apisix2

apache-apisix3

BhavyaT-135 commented 2 years ago

Hi @yzeng25 @hf400159, I've created the following design for the article titled "Apache APISIX embraces the WASM ecosystem". Kindly take a look and suggest necessary changes. 😊

apisix-WASM

BhavyaT-135 commented 2 years ago

Hey @hf400159 @yzeng25, I came up with another design for the article titled "Apache APISIX loves Rust!". Kindly take a look. 😊

apisix-rust

guitu168 commented 2 years ago

https://static.apiseven.com/2022/10/08/634113b161cce.png https://static.apiseven.com/2022/10/08/634113b21a4aa.png https://static.apiseven.com/2022/10/08/634113b2e6978.png

@BhavyaT-135 This is the image link; you can change the blog cover image. great work! 👍

BhavyaT-135 commented 2 years ago

Hey @hf400159, I've created a PR addressing the above three blogs' cover images. Kindly take a look! 😊

BhavyaT-135 commented 2 years ago

Hi @yzeng25 @hf400159, hope you are in good health. I've created a design for the blog titled "GCP, AWS, and Azure ARM-based server performance comparison". Kindly take a look and let me know your thoughts. 😊

apache-apisix

guitu168 commented 2 years ago

@BhavyaT-135 Excellent! you can add Oracle Cloud Infrastructure. please refer to: https://github.com/apache/apisix-website/pull/1360/files
Currently, only Chinese blogs are submitted.

BhavyaT-135 commented 2 years ago

Sure @hf400159, does this look apt? 😊

apache-apisix2

guitu168 commented 2 years ago

Sure, @hf400159, does this look apt? 😊

@BhavyaT-135 LGTM! The new Blog has not been published yet, so we need to wait. In the meantime, you can continue to create cover images for other blogs.

BhavyaT-135 commented 2 years ago

Great! I'll get on with the other blogs! Thanks! 😊

BhavyaT-135 commented 2 years ago

Hey @hf400159, I created the design for the article titled "Fault Injection Testing with API Gateway". Kindly check and let me know if there are any changes to be made. 😊

apache-apisix

apache / apisix-website