apisix-website
apisix-website copied to clipboard
apache
[Docs]: Need thumbnail pictures for the blogs
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
Please assign me this issue. What kind of picture would you like to add to other blogs?
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 .
@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.
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 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.
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.
@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!
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π
@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. πΈ
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. π
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?
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.
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! π
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
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
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 π
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?
@SkyeYoung After cloning the repo and setting up remotes, I ran the command yarn and faced the following error in the end.
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:
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. π
Then, I ran the command
yarn prepare-dataand it executed perfectly. When I runyarn start:docandyarn start:website, everything works. But, when I run the commandyarn 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:previewispreview=true yarn run build. However, when I manually type the scriptyarn run build preview=true, my build process starts without error. I'll let you know if everything works fine after runningyarn 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 π )
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.)
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 π
@BhavyaT-135 great! π We go with one of these. Can the background color of the picture be white?
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 ? π
The last picture is nice. Can you refer to these images too? The background color will add some other colors. @BhavyaT-135
Hey @hf400159, thanks for the advice. I came up with this design. How does it look? π
