search

intelops / website

This is the repo to manage all the website work, which is being developed using hugo framework.
https://intelops.ai
6 stars 20 forks source link

need to develop roadmap functionality within our website and docs site similar to the website roadmap.sh and markmap.js.org #105

Open devopstoday11 opened 1 year ago

devopstoday11 commented 1 year ago

This task is for later, not now. @tfsojon

Here is the reference for the roadmap.sh site's code base - https://github.com/kamranahmedse/developer-roadmap , and the markmap reference - https://markmap.js.org/ , https://github.com/markmap/markmap The above two are for reference only to take a look. Strictly do not use them in our site code since licensing issues will occur.

This task can be achieved by using Javascript, Typescript, CSS, HTML, and adding the functionality in our Hugo theme. Do this after returning from vacation the following week, please (1st week of May).

Purpose of this is to be able to write mindmaps in markdown using markdown syntax and have those rendered into beautiful mindmaps on our website. This attracts more visitors, especially tech people.

We can discuss how to combine the above two reference ideas and make them into one for our site.

tfsojon commented 1 year ago

@devopstoday11 please create a video in details about this task.

devopstoday11 commented 1 year ago

@tfsojon explained requirements here - https://www.loom.com/share/b1ca6faa2a914efc8156be987abad17f?sid=db3b673c-c801-41a1-a6bf-4eb21b628fe2

tfsojon commented 1 year ago

@devopstoday11 you there?

devopstoday11 commented 1 year ago

@tfsojon Hi, what's up?

tfsojon commented 1 year ago

please check discord.

tfsojon commented 1 year ago

@devopstoday11 Roadmap added. Check and left me know.

image

tfsojon commented 1 year ago

@devopstoday11 Check the code form here - https://github.com/tfsojon/intelops-website/tree/chandu pull request not created because of the current PR not marged.

devopstoday11 commented 1 year ago

@tfsojon , just saw this message. roadmap feature changes are already available in the PR since you committed to same branch. I will merge and test in my local and let you know.

devopstoday11 commented 1 year ago

@tfsojon , so far the roadmaps feature looks fine. I changed the name from roadmaps to mindmaps / mindmap , except I couldn't figure how to change in the URL too. When I changed in the URL as well, the page is not loading correctly. Please check. I merged my updates in my chandu branch. You can take the updated branch and then fix the URL name change issue - "roadmaps to mindmaps , and test it".

devopstoday11 commented 1 year ago

@tfsojon , BTW, what all the types of mermaidjs diagrams can I use to make the diagrams interactive (clickable) ? @tfsojon

devopstoday11 commented 1 year ago

@tfsojon , so far the roadmaps feature looks fine. I changed the name from roadmaps to mindmaps / mindmap , except I couldn't figure how to change in the URL too. When I changed in the URL as well, the page is not loading correctly. Please check. I merged my updates in my chandu branch. You can take the updated branch and then fix the URL name change issue - "roadmaps to mindmaps , and test it".

I figured the issue and fixed it and pushed it to chandu branch. @tfsojon

tfsojon commented 1 year ago

@tfsojon , BTW, what all the types of mermaidjs diagrams can I use to make the diagrams interactive (clickable) ? @tfsojon

Currently supports mindmap diagram only.

Since they doesn't have the click support, I have to write custom code separately for different diagram. Let me know which possible diagram's you want to use. @devopstoday11 I think If you need to use all of them in your mindmap, then we should invest time on it. otherwise doesn't need to. what do you think?

tfsojon commented 1 year ago

@devopstoday11 please check the last comment.

devopstoday11 commented 1 year ago

@tfsojon , BTW, what all the types of mermaidjs diagrams can I use to make the diagrams interactive (clickable) ? @tfsojon

Currently supports mindmap diagram only.

Since they doesn't have the click support, I have to write custom code separately for different diagram. Let me know which possible diagram's you want to use. @devopstoday11 I think If you need to use all of them in your mindmap, then we should invest time on it. otherwise doesn't need to. what do you think?

Yes, we would need these diagram types support as well to make them clickable, @tfsojon :- Flowchart C4 Diagram ZenUML Graph Note:- Same diagram types to be clickable are enough for Docs site as well.

Also, I want to be able to use custom colors for the nodes/shapes (alias Objects) and edges (relationship lines) in the diagrams. How to do that? Is it something part of those diagrams syntax OR , does our website need to have that feature available explicitly? My guess is colors and shapes are part of syntax. Am I right?

And, how can I add any type of mermaid diagram which is interactive (clickable) in a blog in the blogs area and an article in the learning-center? @tfsojon

tfsojon commented 1 year ago
devopstoday11 commented 1 year ago
  • Colors are comes from mermaidjs. no option for change this on specific way. we can change the theme btw.
  • need to add the script on the blog and learning-center. will add.

@tfsojon How to change the theme? If I change the theme, does it impact only the mermaidjs diagram or the entire page on the site?

tfsojon commented 1 year ago

only impact on diagram image

tfsojon commented 1 year ago

@devopstoday11 check the PR https://github.com/intelops/website/pull/223 the click option is working on the Mindmap, Flowchart and C4Context. check - http://localhost:1313/mindmaps/devops/ page on local

but I need few possible examples to test the process are working or not in every way. @devopstoday11 could you please add some example diagram on the devops page?

devopstoday11 commented 1 year ago

@devopstoday11 check the PR #223 the click option is working on the Mindmap, Flowchart and C4Context. check - http://localhost:1313/mindmaps/devops/ page on local

but I need few possible examples to test the process are working or not in every way. @devopstoday11 could you please add some example diagram on the devops page?

@tfsojon , I checked the changes. The clickable option looks good. But I didn't see any sample clickable option you added for ZenUML example. Mindmap, Flowchart, and C4 Diagram clickable are fine ; by following your examples we can write our mindmaps in those 3. Please show some examples on how to do the same for ZenUML & Graph as well.
Note:- I think Graph and Flowchart diagrams are not just Flowchart. Please check and confirm that.

Any update on adding the mindmap clickable feature script to learning-center & blogs?

tfsojon commented 1 year ago

@devopstoday11 There are no Graph. are you talking about gitGraph?

tfsojon commented 1 year ago

@devopstoday11 added click option for mermaid-zenuml added marmaid.js in learning-center and blog

devopstoday11 commented 1 year ago

@tfsojon , I am unsure how to test mermaidjs clickable feature in learning-center and blogs. Can you show me 1 example in each area how to use the feature in those 2 areas please.

And, I do see that the example you have in the mindmaps in devops for ZenUML diagram. When I click on the elements nothing is opening like you showed for Flowchart, Mindmap, C4 diagrams. How to get a document opening similarly for zenUML diagram also when I click on some item in the zenUML diagram? @tfsojon

tfsojon commented 1 year ago

Hello @devopstoday11 , Just add it like the way I added in content/english/mindmaps/devops/_index.md page

Make sure the page-title and the code-block-text is same.

image image image

tfsojon commented 1 year ago

If this is ready to go, then I will add this into doc site too. let me know if it's need any improvement or not @devopstoday11

devopstoday11 commented 1 year ago

@tfsojon I am still testing on the website. But, yes please proceed to add this feature to docs site. Usage of mermaid diagrams to make the diagrams interactive on docs site is easy compared to the main website. Hence, the main website needs more testing.

devopstoday11 commented 1 year ago

@tfsojon @tfsumon

Just like how mermaidjs functionality support was added into both website and docs site, we want python diagraming library support as well.

This is the library I mentioned - https://github.com/mingrammer/diagrams

devopstoday11 commented 1 year ago

Also need to develop feature similar to gitpitch within our website and docs site, for hosting slides within our sites. The slides are similar to slides.com which uses markdown & the above mentioned python diagram library.

https://github.com/gitpitch/gitpitch

@tfsojon @tfsumon gitpitch was old project. This might need to be used as reference and develop similar feature in our sites instead of using it directly since that project is not active and have many security vulnerabilities.

Also, want similar functionality like pintora -

https://github.com/hikerpig/pintora Pintora project is also old, so it will only help as reference instead of using directly. @tfsojon you might have already followed what pintora project was doing, when you added mermaid support to our sites. So before jumping in, please compare.

tfsumon commented 1 year ago

Alright! I'll keep you updated.

devopstoday11 commented 1 year ago

@tfsojon @tfsumon

Just like how mermaidjs functionality support was added into both website and docs site, we want python diagraming library support as well.

This is the library I mentioned - https://github.com/mingrammer/diagrams

After mingrammer diagrams support is added, need to work on the below diagram libs support as well -

geoJSON and topoJSON, and ASCII STL

@tfsojon @tfsumon

devopstoday11 commented 1 year ago

@tfsumon , any updates?

tfsumon commented 1 year ago

Hello @devopstoday11,

Hugo offers built-in support for Goat ASCII diagrams and any diagrams that can be created using Mermaid JS. However, it does not provide support for Mingrammer, geoJSON, topoJSON, or ASCII STL. Consequently, this means it's not currently feasible to incorporate these libraries into our websites.

I have been actively researching ways to integrate these libraries or similar functionalities into our website for quite a few days now. Unfortunately, I have yet to discover a suitable approach, but my research is ongoing.

Rest assured, I will keep you updated as soon as I find a viable method to incorporate them into our websites.

https://gohugo.io/content-management/diagrams/

devopstoday11 commented 1 year ago

Hello @devopstoday11,

Hugo offers built-in support for Goat ASCII diagrams and any diagrams that can be created using Mermaid JS. However, it does not provide support for Mingrammer, geoJSON, topoJSON, or ASCII STL. Consequently, this means it's not currently feasible to incorporate these libraries into our websites.

I have been actively researching ways to integrate these libraries or similar functionalities into our website for quite a few days now. Unfortunately, I have yet to discover a suitable approach, but my research is ongoing.

Rest assured, I will keep you updated as soon as I find a viable method to incorporate them into our websites.

https://gohugo.io/content-management/diagrams/

@tfsumon , Got it. No problem. Don't spend too much time on those libraries. You can look into mingrammer later. There is an approach. We can discuss it when we have free time to work on it. For now, Please look into how to build same features as in this gitpitch project (without using this project) -> https://github.com/gitpitch/gitpitch