Port Polykey.io Theme to Docs

[developerdesigner18]

Description

Create-Custom-Navbar-Component For Document-site

Fixes #6

Tasks

• 1. Create NavBar Component
• 2. Style it the same as polykey.io
• 3. Create the Navbar links that needs to derive its configuration from docusaurus.config.js in the config.themeConfig.navbar.items array.

Final checklist

• Domain specific tests
• Full tests
• Updated inline-comment documentation
• Lint fixed
• Squash and rebased
• Sanity check the final build

[CMCDragonkai]

There was all these subcomponents that are available for the NavBar, is overwriting the entire NavBar the right idea?

[CMCDragonkai]

In the future, please indicate the PR fixes the issue. But I've already done it above.

[CMCDragonkai]

Hi @developerdesigner18 in the future, please write your commit as feat: ... or fix: ....

[CMCDragonkai]

hey @developerdesigner18 the navbar does not look exactly the same. It is not seamless.

Do you see not only are the colours different, but the sizing is different. The entire thing is not seamless.

[CMCDragonkai]

Hey @developerdesigner18 I think there was some misunderstanding on the navbar menu for mobile view. I want to keep the docusaurus menu. Do not change it to the menu in polykey.io. Keep it the same.

ONLY make it come out from the right instead of the left.

Right now the menu is incorrect. It must be the same as it was before with docusaurus.

[CMCDragonkai]

We must be able to navigate the documentation like before.

[CMCDragonkai]

Also can you not just override the entire navbar component. Use the existing components here: #12 (comment)

And override only the ones necessary for the minimal template changes.

[CMCDragonkai]

Note to self, to push to the remote PR:

git fetch origin pull/12/head:feature-navbar
git checkout feature-navbar
git remote add developerdesigner [email protected]:developerdesigner18/Polykey-Docs.git
git push developerdesigner HEAD:Create-New-Navbar-Component

[CMCDragonkai]

In total these are the problems:

1. Components being imported not being used.
2. NavBar items should be derived from the docusaurus configuration rather than being hardcoded.
3. NavBar does not look seamless from polykey.io
4. The email form is not working, and doesn't have the action set.
5. Rather than overriding the entire component in src/theme/Navbar, you should be overriding the smaller components and allowing the theme to put it together (this might help with problem 2., so you can derive the content more easily)
6. The mobile menu is incorrect. It should be how docusaurus does it, because we must have the docusaurus navigation working. We only want it to come out from the right.

[CMCDragonkai]

Can you combine your other PR into this? Don't create 2 PRs for these things. Let's see it all together...

[CMCDragonkai]

The navbar background colour is #0e0e0e. How did you end up choosing #242526 as the bg colour for the navbar?

[CMCDragonkai]

BTW we use conventional commits. Please follow the same style in the future.

[CMCDragonkai]

Hey @developerdesigner18 I want all the fonts in the static/fonts. Don't just put 1 font. Put all of them. The entire directories from https://github.com/MatrixAI/Polykey-Desktop/tree/staging/src/renderer/fonts.

[CMCDragonkai]

Hey @developerdesigner18 why did you delete the index.tsx again? We are meant to be using index.tsx... not index.js.

I already changed this last time, why did you end up deleting mine again?

[developerdesigner18]

Hey @developerdesigner18 I want all the fonts in the static/fonts. Don't just put 1 font. Put all of them. The entire directories from https://github.com/MatrixAI/Polykey-Desktop/tree/staging/src/renderer/fonts.

I have put all the fonts from the location that you have attached here.

[developerdesigner18]

The navbar background colour is #0e0e0e. How did you end up choosing #242526 as the bg colour for the navbar?

This things is done

[developerdesigner18]

In total these are the problems:

1. Components being imported not being used.
2. NavBar items should be derived from the docusaurus configuration rather than being hardcoded.
3. NavBar does not look seamless from polykey.io
4. The email form is not working, and doesn't have the action set.
5. Rather than overriding the entire component in src/theme/Navbar, you should be overriding the smaller components and allowing the theme to put it together (this might help with problem 2., so you can derive the content more easily)
6. The mobile menu is incorrect. It should be how docusaurus does it, because we must have the docusaurus navigation working. We only want it to come out from the right.

Issue That is fixed
1.All the component is imported.
2. Navbar Items is derived from the docusaurus_config_file.
3. Now Navbar looks like the main site.
4. Email is also working.
5. I'm trying to override the smaller component instead of overriding whole the component.

[CMCDragonkai]

Hey @developerdesigner18 I want all the fonts in the static/fonts. Don't just put 1 font. Put all of them. The entire directories from https://github.com/MatrixAI/Polykey-Desktop/tree/staging/src/renderer/fonts.

I have put all the fonts from the location that you have attached here.

No that's not what I see:

[CMCDragonkai]

And still no tsx..?

[developerdesigner18]

And still no tsx..?

I'm working on this.

[developerdesigner18]

Hey @developerdesigner18 I want all the fonts in the static/fonts. Don't just put 1 font. Put all of them. The entire directories from https://github.com/MatrixAI/Polykey-Desktop/tree/staging/src/renderer/fonts.

I have put all the fonts from the location that you have attached here.

No that's not what I see:

Please check this.

[CMCDragonkai]

We aren't using Nunito Sans, so you can remove that.

Open Sans should be used for the font of the content.

The roboto should be used for code. I already explained all this in the original issue #6.

[developerdesigner18]

We aren't using Nunito Sans, so you can remove that.

Open Sans should be used for the font of the content.

The roboto should be used for code. I already explained all this in the original issue #6.

Okay Got it!

[CMCDragonkai]

@developerdesigner18 there's an extra static directory inside Roboto_Mono directory. What's this extra directory for? I think you might have accidentally created it.

[CMCDragonkai]

The current branch cannot start.

[nix-shell:~/Projects/Polykey-Docs]$ npm run start

> start
> docusaurus start

[INFO] Starting the development server...
[ERROR] ValidationError: The footer must be either simple or multi-column, and not a mix of the two. See: https://docusaurus.io/docs/api/themes/configuration#footer-links
[INFO] Docusaurus version: 2.2.0
Node version: v16.15.0

[developerdesigner18]

The current branch cannot start.

[nix-shell:~/Projects/Polykey-Docs]$ npm run start

> start
> docusaurus start

[INFO] Starting the development server...
[ERROR] ValidationError: The footer must be either simple or multi-column, and not a mix of the two. See: https://docusaurus.io/docs/api/themes/configuration#footer-links
[INFO] Docusaurus version: 2.2.0
Node version: v16.15.0

This Error comes because I have made some changes in the config file. I have updated the code now once the code run then please uncomment the items from the config file.
Becasue we are showing different footer for Mobile And Desktop view. And I'm not able to add more components in the footer items in the config file.

[CMCDragonkai]

@bmamouri please work off this PR first when you start on Polykey-Docs. There's already pre-existing changes that are worth keeping, but the components is likely to require some changes.

[CMCDragonkai]

@amydevs consider using GitLab LFS or GitHub LFS to store images and then reference them within the content as if they were normal images on the file system.

This avoids the complication of S3, while also potentially allows them to still be rendered in GitHub/GitLab markdown rendering.

Cloudflare won't care, as long as the when you clone/pull the repo, the LFS is activated to download those images.

[amydevs]

@bmamouri I've just merged a branch into main regarding fixing image urls, so I'm commenting here as a heads-up to rebase

[bmamouri]

Closing this PR because it is outdated and we have the new PR #17 includes the useful work of this PR. Thanks