First draft Nebari landing page #207

gabalafou · 2022-11-01T23:06:01Z

This is my first draft at the Nebari landing page. I figured it would be better to get some code up now and then we can fix all of the outstanding issues in a subsequent PR.

Known issues:

Header is not the same as in the Figma file. Do we want to make the header for the landing page different than all of the other pages, and if so, how?
Ditto for the footer.
All of the background (and some foreground) decorations are missing. I will add them in a follow-up PR.
I'm not sure what the background color for the home page should be. Ditto for max width (I set it to 1440px, as in the Figma file).
The design is responsive, but there are still some tweaks needed.
There's something wrong with the SVGs for the integrations, which I exported from the Figma. Depending on which browser you use, you might see Grafana, Prefect, or VSCode logos all messed up. Not sure why. Those SVGs might need to be fixed in the Figma?
I assume there is no dark mode version of the home page since it alternates between light and dark sections. So I didn't make a dark mode version of the home page. However, the home page inherits the general site-wide styles, so when dark mode is turned on, it messes up some of the colors that I chose. So I need to fix that.

netlify · 2022-11-01T23:06:05Z

✅ Deploy Preview for nebari-docs ready!

Name	Link
🔨 Latest commit	`faf88ba`
🔍 Latest deploy log	https://app.netlify.com/sites/nebari-docs/deploys/636bbf198f6f1b00088e885c
😎 Deploy Preview	https://deploy-preview-207--nebari-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

gabalafou · 2022-11-01T23:07:25Z

Oh, also pre-commit was putting out some errors locally that made no sense, so I committed with --no-verify.

gabalafou · 2022-11-02T02:42:52Z

Hmm, how do we preview the landing page on Netlify with this redirect?

Would it be better if I park it at /home until we're ready to move it to /?

pavithraes · 2022-11-02T05:37:24Z

Thank you, @gabalafou! This is looking really good!

I'm not sure what the background color for the home page should be. Ditto for max width (I set it to 1440px, as in the Figma file).

I think we can have each section's background color be full-screen-width? @trallard can confirm :)

Right now, it looks perfect on my macbook-screen, but I see the following on my monitor:

Hmm, how do we preview the landing page on Netlify with this redirect?'

I clicked on the Nebari logo in the top left corner, and it took me to the landing page :)

gabalafou · 2022-11-02T12:11:00Z

Oh nice, thanks for looking at this @pavithraes! I went ahead and made each section's background span the full page width.

gabalafou · 2022-11-02T12:20:00Z

For the record, here's how the integration SVG logos look in Safari:

Here's how they look in Chrome:

Interestingly, all of the logos look fine under the files changed tab of this PR, using Chrome. So maybe I'm doing something wrong in the way I use the SVGs in the app code?

trallard · 2022-11-02T21:14:26Z

Hey @gabalafou, this looks great already 🎉 🙏🏽 thanks for working on this... now onto the known issues

Header is not the same as in the Figma file. Do we want to make the header for the landing page different than all of the other pages, and if so, how?

Let's leave the header we have, as we need the search function

Ditto for the footer.
The footer will need to change to the one in the Figma file. This can be done in a later PR if needed.

I'm not sure what the background color for the home page should be.
Background colours should be:

will get back to this tomorrow

I assume there is no dark mode version of the home page since it alternates between light and dark sections. So I didn't make a dark mode version of the home page. However, the home page inherits the general site-wide styles, so when dark mode is turned on, it messes up some of the colors that I chose. So I need to fix that.

Yeah there is no dark mode - I am not sure if we can remove the toggle on the home page only

Re icons: I see the same as you, @gabalafou - will inspect the code + svgs tomorrow as it is too late for me now 😴

docs/src/pages/homepage.module.css

docs/docusaurus.config.js

docs/src/pages/homepage.module.css

gabalafou · 2022-11-02T22:04:14Z

Oh, also pre-commit was putting out some errors locally that made no sense, so I committed with --no-verify.

Scratch that. I was using some older pre-commit hook or something.

For the record, when I first tried to run pre-commit install, I got the following error:

[ERROR] Cowardly refusing to install hooks with `core.hooksPath` set.
hint: `git config --unset-all core.hooksPath`

Not knowing what that was about, I skipped it. Then I got errors when I tried to commit. Then I went back and ran the suggested git config command. Then I made a change, committed it, and everything was fine.

trallard · 2022-11-03T10:20:50Z

Ah I have seen that pre-commit issue before. Root case suspicion: you might have run the pre-commit outside a project/directory with the pre-commit config file and applied global settings

trallard · 2022-11-03T10:22:55Z

@pavithraes or @kcpevey I cannot remember who was getting the screenshots for the main page - do we have this? we definitely need to replace the stock image in the landing page

trallard · 2022-11-03T10:24:15Z

Ok - I just opened the preview again and now I see a different thing regarding the integrations

🤔 I am unsure where this is coming from - asked for the updated svg files but might be at the website-logic level

docs/src/pages/homepage.module.css

trallard · 2022-11-03T10:33:21Z

docs/src/pages/homepage.module.css

+}
+.getStartedLink2:hover {
+  text-decoration: none;
+  color: #fff;


is there a particular reason why you swap colour from --ifm-color-white to #fff?
I think the colour difference is barely there 👀

For the underline you can use --nebari-links-dark

I'll look into it.

docs/src/pages/index.jsx

trallard · 2022-11-03T10:43:20Z

docs/src/pages/homepage.module.css

+  justify-items: center;
+}
+
+.integrationsItem {


I am not sure why logos are rendering funnily - I wonder if having a div for the logo and a div for the name would make a difference?

I'll give that a try.

pavithraes · 2022-11-03T10:56:57Z

Yeah there is no dark mode - I am not sure if we can remove the toggle on the home page only

I'm not sure, but maybe https://docusaurus.io/docs/next/api/themes/configuration#use-color-mode can help?

pavithraes · 2022-11-03T10:57:55Z

@pavithraes or @kcpevey I cannot remember who was getting the screenshots for the main page - do we have this? we definitely need to replace the stock image in the landing page

I'm happy to get this. We need to create the demo video for PyData NYC, we can have a trimmed-version of that as a GIF for the landing page.

Co-authored-by: Tania Allard <[email protected]>

gabalafou · 2022-11-07T19:29:53Z

@pavithraes thanks for the tip! But I think what I need to do is add some override styles to the CSS, as the Styling and Layout - Dark Mode section of the Docusaurus docs suggests.

trallard · 2022-11-07T20:37:28Z

@gabalafou you are correct there - e.g.

nebari-docs/docs/src/theme/components/navbar.scss

Line 41 in f55431b

.dropdown__menu,

is one such example

gabalafou · 2022-11-07T23:30:47Z

I went down a little rabbit hole. The reason the inline SVGs aren't working is because of the way Docusaurus has configured its SVG loader internally. Docusaurus uses the Webpack loader for SVGR. SVGR in turn uses SVGO. By default, SVGO minifies SVG ids. Some of these SVG logos uses internal identifiers. When those ids get minified to single characters (like "a", "b", "c"), they clash on the page. SVGO has an option to prefix ids, but Docusaurus has not turned that option on. I created a minimal reproduction of the bug. You can comment out one SVG at a time from the source code, and see that when only one SVG is on the page, it renders properly. But when both are on the page, one clashes with the other.

I'm not sure how to fix it. I tried adding a plugin to Docusaurus that overwrites the Webpack config, but my attempt didn't work.

I've opened an issue with Docusaurus:

Multiple inline SVGs on a page can clash facebook/docusaurus#8297

For now, I'm just going to replace the conflicting inline SVGs with img tags.

- rename file: index.module.css - some alt text fixes - fix clashing logos - fix styles changing when dark mode is toggled on

gabalafou · 2022-11-07T23:59:52Z

docs/docusaurus.config.js

+          {
+            label: "Home",
+            position: "right",
+            to: "/",
+          },


Maybe I should remove this until the home page is totally ready to deploy.

My original thinking was that I would build the Nebari landing page in two PRs. The first PR puts up a rough draft. The second PR polishes it. But it seems like we're going to fix everything in this PR before we merge it in? How would you prefer to go about this @trallard?

I thought we had agreed to fix the background images + footer + dark/light colour inconsistencies in subsequent PRs to get this merged ASAP.

The one outstanding item would be to replace the mock dashboard #212 has discussions about this, and @pavithraes and I can sync about this tomorrow morning.

Right now, the images for the integrations - which was the main blocking for me seem to be working somehow. (tested in Brave - private and not, Safari and Chrome or maybe I got lucky).

edit your img fix did the trick

trallard

Other than replacing the mock dashboard in the "Get started with nebari section" this can be merged and iterated over.

trallard · 2022-11-08T22:58:43Z

docs/src/pages/index.jsx

@@ -142,16 +145,16 @@ export default function HomePage() {
            <div className={styles.platformsRight}>
              <ul className={styles.platformsList}>
                <li className={styles.platformsItem}>
-                  <AwsSvg />


aha this seems to have made the trick!

trallard · 2022-11-08T22:59:54Z

docs/src/pages/index.jsx

@@ -166,8 +169,8 @@ export default function HomePage() {
                href="/docs/category/get-started"
                className={styles.getStartedLink2}
              >
-                Learn how to deploy a Nebari instance&nbsp;&nbsp;
-                <RightArrowSvg />
+                Learn how to deploy&nbsp;


Did the "a nebari instance" bit get dropped on purpose?

No, good catch!

trallard · 2022-11-08T23:01:25Z

docs/src/pages/index.module.css

@@ -2,18 +2,25 @@

 Styles for the Nebari home page

+Note: only use color variables like --ifm-color-white in this file and not


nifty ✨ - and this gives us the correct colours all the time

kcpevey

This looks amazing! Great work @gabalafou !

The only issue that jumped out at me was that the landing page was still redirecting to the old docs home page. I couldn't tell where the conversation left off on that and I know you're aware so I'll go ahead and approve.

First draft Nebari landing page

2a06391

gabalafou requested review from kcpevey and trallard and removed request for kcpevey November 2, 2022 02:43

Section background color 100% width

8a7fedf

Use @site in imports

0a7da2a

trallard added type: enhancement 💅🏼 New feature or request area: community 🪴 Nebari community matters labels Nov 2, 2022

gabalafou commented Nov 2, 2022

View reviewed changes

docs/src/pages/homepage.module.css Outdated Show resolved Hide resolved

gabalafou commented Nov 2, 2022

View reviewed changes

docs/docusaurus.config.js Show resolved Hide resolved

gabalafou commented Nov 2, 2022

View reviewed changes

docs/docusaurus.config.js Show resolved Hide resolved

gabalafou commented Nov 2, 2022

View reviewed changes

docs/src/pages/homepage.module.css Outdated Show resolved Hide resolved

trallard reviewed Nov 3, 2022

View reviewed changes

Update docs/src/pages/index.jsx

86a5c0d

Co-authored-by: Tania Allard <[email protected]>

gabalafou mentioned this pull request Nov 7, 2022

Multiple inline SVGs on a page can clash facebook/docusaurus#8297

Open

7 tasks

change per review

a262467

- rename file: index.module.css - some alt text fixes - fix clashing logos - fix styles changing when dark mode is toggled on

gabalafou commented Nov 7, 2022

View reviewed changes

pavithraes mentioned this pull request Nov 8, 2022

[ENH] - Nebari website OSS #182

Closed

4 tasks

trallard approved these changes Nov 8, 2022

View reviewed changes

kcpevey approved these changes Nov 9, 2022

View reviewed changes

prepare for merge

faf88ba

gabalafou merged commit 1fa2965 into main Nov 9, 2022

gabalafou deleted the homepage branch November 9, 2022 15:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

First draft Nebari landing page #207

First draft Nebari landing page #207

gabalafou commented Nov 1, 2022

netlify bot commented Nov 1, 2022 •

edited

Loading

gabalafou commented Nov 1, 2022

gabalafou commented Nov 2, 2022

pavithraes commented Nov 2, 2022

gabalafou commented Nov 2, 2022

gabalafou commented Nov 2, 2022

trallard commented Nov 2, 2022

gabalafou commented Nov 2, 2022

trallard commented Nov 3, 2022

trallard commented Nov 3, 2022

trallard commented Nov 3, 2022

trallard Nov 3, 2022

gabalafou Nov 7, 2022

trallard Nov 3, 2022

gabalafou Nov 7, 2022

pavithraes commented Nov 3, 2022 •

edited

Loading

pavithraes commented Nov 3, 2022

gabalafou commented Nov 7, 2022 •

edited

Loading

trallard commented Nov 7, 2022

gabalafou commented Nov 7, 2022

gabalafou Nov 7, 2022 •

edited

Loading

trallard Nov 8, 2022

trallard Nov 8, 2022

trallard left a comment

trallard Nov 8, 2022

trallard Nov 8, 2022

gabalafou Nov 9, 2022

trallard Nov 8, 2022

kcpevey left a comment

		@@ -2,18 +2,25 @@

		Styles for the Nebari home page

		Note: only use color variables like --ifm-color-white in this file and not

First draft Nebari landing page #207

First draft Nebari landing page #207

Conversation

gabalafou commented Nov 1, 2022

netlify bot commented Nov 1, 2022 • edited Loading

✅ Deploy Preview for nebari-docs ready!

gabalafou commented Nov 1, 2022

gabalafou commented Nov 2, 2022

pavithraes commented Nov 2, 2022

gabalafou commented Nov 2, 2022

gabalafou commented Nov 2, 2022

trallard commented Nov 2, 2022

gabalafou commented Nov 2, 2022

trallard commented Nov 3, 2022

trallard commented Nov 3, 2022

trallard commented Nov 3, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pavithraes commented Nov 3, 2022 • edited Loading

pavithraes commented Nov 3, 2022

gabalafou commented Nov 7, 2022 • edited Loading

trallard commented Nov 7, 2022

gabalafou commented Nov 7, 2022

gabalafou Nov 7, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

trallard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kcpevey left a comment

Choose a reason for hiding this comment

netlify bot commented Nov 1, 2022 •

edited

Loading

pavithraes commented Nov 3, 2022 •

edited

Loading

gabalafou commented Nov 7, 2022 •

edited

Loading

gabalafou Nov 7, 2022 •

edited

Loading