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

Align the CSS or style configuration so that all documentation components (Docs, plugin docs, blueprints) use the same markdown style #5629

Closed
anna-geller opened this issue Oct 23, 2024 · 19 comments · Fixed by #6818
Assignees
Labels
area/frontend Needs frontend code changes enhancement New feature or request good first issue Great issue for new contributors

Comments

@anna-geller
Copy link
Member

Feature description

Currently things like info blocks differ for Docs and markdown in plugin docs:

image

plugin docs:

image

We should use the same markdown style everywhere for consistency - ideally, let's follow the one used in Docs

@anna-geller anna-geller added enhancement New feature or request area/frontend Needs frontend code changes labels Oct 23, 2024
@kestrabot kestrabot bot added this to Issues Oct 23, 2024
@github-project-automation github-project-automation bot moved this to Backlog in Issues Oct 23, 2024
@Nico-Kestra
Copy link
Member

You can use this

Alert message

@MilosPaunovic MilosPaunovic added the good first issue Great issue for new contributors label Oct 23, 2024
@talamo13
Copy link

Can I please be assigned this issue? I am a beginner and very interested in contributing.

@MilosPaunovic
Copy link
Member

Go for it @talamo13! 🚀

@SarthakBorude
Copy link

this seems to be an interesting issue ! if it hasnt been resolved till now I'm interested to work on it.

@SarthakBorude
Copy link

I have started working on this issue but I'm little doubtful if I'm doing it right. if possible please provide me little more context about this issue. it would be really helpful.

@MilosPaunovic
Copy link
Member

What seems to be the issue you're having trouble with @SarthakBorude?

@SarthakBorude
Copy link

@MilosPaunovic actually I'm a little confused about which markdown style is mentioned in the issue.If possible please provide me more details. So I can work accordingly.

@anna-geller
Copy link
Member Author

the style used for markdown

@Piyush-r-bhaskar
Copy link
Contributor

Piyush-r-bhaskar commented Dec 15, 2024

Hi @anna-geller @MilosPaunovic ,

Sorry to jump in. I was just exploring this.

I believe plugin docs attached image text - This feature has been moved to a new location is from BE and icon used is just an emoji. that's why this is not inline with Docs markdown.

image

For icon to appear in Docs as per @Nico-Kestra design May be we need to make some changes in Alert.vue.

Just asking if there is need of icon for now or can this be only text ? Then, we can just remove the emoji for some of plugin docs alert.

image

@Piyush-r-bhaskar
Copy link
Contributor

Hi @anna-geller @MilosPaunovic ,

Sorry to jump in. I was just exploring this.

I believe plugin docs attached image text - This feature has been moved to a new location is from BE and icon used is just an emoji. that's why this is not inline with Docs markdown.

image

For icon to appear in Docs as per @Nico-Kestra design May be we can make changes here for svg. image

Just asking if there is need of icon for now or can this be only text ?

image

How this will look of course need some styling ?
image

@anna-geller
Copy link
Member Author

The icon in the blue info notice should also be blue ideally (not black). big thanks for picking up this topic @Piyush-r-bhaskar!

image

@Piyush-r-bhaskar
Copy link
Contributor

Piyush-r-bhaskar commented Dec 17, 2024

Hi @anna-geller & @MilosPaunovic,

How you liked it ?

docs.markdown.mp4
docs.markdown_2.mp4

As you know DOCs are using Bootstrap Alerts (not El-Alert like other places) defined in @kestra-io\ui-libs\src\components\content\Alert.vue. So I need to make the change for this in kestra UI libs (currently I was doing npm run dev so see the change at my side) So that DOCS markdown styling can be applied across platforms & also minor change in kestra\ui\src\components\docs\DocsLayout.vue.

image

Your suggestions please ?

Also, any ideas from current assignees most welcome. @SarthakBorude @talamo13

@MilosPaunovic
Copy link
Member

Heads up @Piyush-r-bhaskar, this will have to wait for @anna-geller's input, but as today is her last day before holidays, we might postpone it for a bit, as it's lower priority for now.

@Piyush-r-bhaskar
Copy link
Contributor

Heads up @Piyush-r-bhaskar, this will have to wait for @anna-geller's input, but as today is her last day before holidays, we might postpone it for a bit, as it's lower priority for now.

Sure @MilosPaunovic 😊

@MilosPaunovic
Copy link
Member

@anna-geller We might need you input here to proceed.

@MilosPaunovic MilosPaunovic moved this from Backlog to In progress in Issues Jan 16, 2025
@anna-geller
Copy link
Member Author

anna-geller commented Jan 16, 2025

what inputs do you need from my side?

seeing the video, the only suggestion for improvement I could offer would be to place the icon at the top instead of in the middle - perhaps this might feel a bit friendlier?

image

@MilosPaunovic
Copy link
Member

@Piyush-r-bhaskar Does that answer you questions or do you need something else to proceed?

@Piyush-r-bhaskar
Copy link
Contributor

Sure @anna-geller That would be great. Thank you.

Yes @MilosPaunovic Thank You.

So, I want to proceed like below:

  • DOCs are using Bootstrap Alerts defined in @kestra-io\ui-libs\src\components\content\Alert.vue. So I need to make little change for this in kestra UI libs to add icons and alignment with content.
  • Once this is merged, I will be working under the hood for colors for alert-level. I want DOCS markdown styling can be applied across platforms means the product and kestra website - So, I will try to handle the color styling with bootstrap class outside the library (because website will only need dark theme colors for now but product will need both light and dark).
  • I would first do the changes for website to be merged first and simultaneously for Product & merge after in few hrs after review.

Please I would love your suggestion for making it more perfect and clean. or Of course during review too 😃

Most probably I will open a PR for this before Friday because currently have a Major Release on Tuesday (Hopefully it will go as per Go/No Go Assessment 😁)

@MilosPaunovic
Copy link
Member

Pinging @elevatebart, as he might be better suited to review this once the PR is opened, as reccently he's been doing work around both ui-libs and coloring scheme.

Piyush-r-bhaskar added a commit to Piyush-r-bhaskar/ui-libs that referenced this issue Jan 18, 2025
elevatebart pushed a commit to kestra-io/ui-libs that referenced this issue Jan 20, 2025
…154)

* chore(ui): Add a new design of alerts according to alert level with icon.

This PR should be checked with 

Relates to kestra-io/kestra#5629

* fix : remove inline svg and use vue icons
@MilosPaunovic MilosPaunovic moved this from In progress to In review in Issues Jan 24, 2025
@github-project-automation github-project-automation bot moved this from In review to Done in Issues Feb 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend Needs frontend code changes enhancement New feature or request good first issue Great issue for new contributors
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

6 participants