Docs : Add Home page for documentation

[AdarshRawat1]

Changes

View live demo

Home page

• Added Initial Home page Structure and content of the documentation website with Cards and Easter egg. [Click on the P4C logo area to activate]
• Created & uploaded P4 compiler Architecture Assets via Draw.io. [block in diagram contains links to respective backend documentation. ]

Demo of Easter egg and diagram -

Home.page.feat.mp4

New Sections included in documentation

• Included root README file into documentation. Having the following sections - [dependency, getting started section, P4 Compiler Onboarding, Contact etc]
  
• Added Contribution guides to documentation

Update in Website layout

• UI: Switch to sidebar only theme

Update in color scheme

• UI: P4 logo color scheme

Current Colors

Color Role	Light Mode	Dark Mode
Primary Color	#1779c4	#1982d2
Primary Dark Color	#335c80	#5ca8e2
Primary Light Color	#70b1e9	#4779ac

Updated Colors

Color Role	Light Mode	Dark Mode
Primary Color	#8cc63f	#8cc63f
Primary Dark Color	#4b6c21	#4b6c21
Primary Light Color	#c4f0a1	#c4f0a1

[jafingerhut]

The first diagram looks impressive. Should there be links in the figure to different parts of the docs?

The 3 big sub-figures at the bottom seem to take me back to the same page, rather than going to relevant sections of the documentation. Is this part of the work-in-progress for this PR?

Also many of the doxygen headings are back to README in that generated page. Perhaps this PR is based on an older version of the p4c repo that doesn't have some recent commits merged in?

[AdarshRawat1]

The first diagram looks impressive.

Thank you

Should there be links in the figure to different parts of the docs?

No, it is a static diagram

The 3 big sub-figures at the bottom seem to take me back to the same page, rather than going to relevant sections of the documentation. Is this part of the work-in-progress for this PR?

This is still a work in progress because, we haven't added those sections to our documentation yet. They will be added in this PR Check this commit.

Also many of the doxygen headings are back to README in that generated page. Perhaps this PR is based on an older version of the p4c repo that doesn't have some recent commits merged in?

Yes, you guessed it right !!
This is a demo only for the home page, rest of the configuration are not updated as per latest commits. I made this just to give an idea of how the final result will look after merging.

I'll update the PR soon .

[AdarshRawat1]

Should there be links in the figure to different parts of the docs?

This sounds interesting, I'll give it a try.

[jafingerhut]

There seem to be redundant copies of the same .svg figure in the docs/assets and docs/doxygen directories. Can that be removed?

[fruffy]

Ideally we should not rely on google drive here. Can we upload this to Github somehow?

[AdarshRawat1]

I tried but, couldn't find a way to embed it via GitHub without compromising on functionality. Draw.io supports sharing only from Google Drive.
I'll see if I can find a workaround.

[jafingerhut]

You should be able to save or export a .svg file from draw.io and save that anywhere you like, e.g. in this Github repo, yes?

[AdarshRawat1]

You should be able to save or export a .svg file from draw.io and save that anywhere you like, e.g. in this Github repo, yes?

Indeed, I have included the diagram SVG and Draw.io file in this Pull Request.

Context - We want the SVG to be embedded with all functionality[links and dynamic toggle] while making sure that it is compatible with Doxygen output.
Draw.io is supporting embedding option only with Google Drive.

[fruffy]

This is the only thing blocking us here right now. The problem is we do not have control over when draw.io goes down or things change there.

[jafingerhut]

What happens if you use an .svg file checked into Github as part of the page, instead of using draw.io? Does something go wrong?

[AdarshRawat1]

This is the only thing blocking us here right now. The problem is we do not have control over when draw.io goes down or things change there.

I'm looking into this and I think it will be possible after exporting the diagram as HTML and then keeping it in repo.(Still trying to implement the easter egg rest of the part is working)

I'll convert this PR to draft for the time!!

[AdarshRawat1]

Sorry that I didn't follow the design from the beginning so maybe this was already discussed. But I wonder whether https://github.com/mermaid-js/mermaid is an open-source alternative worth considering here?

Thanks for the suggestion, it seems like a good alternative. However, Draw.io was already finalized for diagrams.

• Mermaid also probably doesn't support animation.

This is the main concern here, as current GitHub Hosted SVG in this PR can be easily embedded. But they don't support animation toggle.

[AdarshRawat1]

What happens if you use an .svg file checked into Github as part of the page, instead of using draw.io? Does something go wrong?

The Easter egg toggle won't work!! Rest, there won't be any other change.

[jafingerhut]

Personally, I am fine giving up the Easter egg toggle if the docs page can rely only on files provided from one server, rather than requiring draw.io to be up and accessible as well.

[fruffy]

This is the only thing blocking us here right now. The problem is we do not have control over when draw.io goes down or things change there.

[AdarshRawat1]

Fix : Switched to HTML file stored in this PR [GitHub repo] for embedding Diagram SVG. Now we are not relying on Draw.io or Google Drive.

p.s. I have updated the Demo link also, do let me know if there is any modification you would like on the diagram.

[fruffy]

Fix : Switched to HTML file stored in this PR [GitHub repo] for embedding Diagram SVG. Now we are not relying on Draw.io or Google Drive.

p.s. I have updated the Demo link also, do let me know if there is any modification you would like on the diagram.

This is great, thanks! We can figure out the other issues in subsequent PRs.

[jafingerhut]

LGTM