Migration docusaurus 2 #429

ThakurKarthik · 2019-10-16T07:08:05Z

Hello @yangshun , @endiliey review this pr when you got time.

I was working on migrating docusaurus of this repo to new V2 version

Deployed at https://thakurkarthik.github.io/redex/ for testing.

This pr on successful merge takes the docusaurus version to new v2 alpha for fbredex

This PR belongs to #426 and facebook/docusaurus#1834

Here are some screenshots of the new site.

Landing Page

Docs Page

FAQ Page

endiliey · 2019-10-16T08:29:44Z

website/package.json

-    "write-translations": "docusaurus-write-translations",
-    "version": "docusaurus-version",
-    "rename-version": "docusaurus-rename-version"
+    "examples": "docusaurus examples",


Suggested change

"examples": "docusaurus examples",

endiliey · 2019-10-16T08:29:58Z

website/package.json

+    "examples": "docusaurus examples",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "publish-gh-pages": "docusaurus publish",


Suggested change

"publish-gh-pages": "docusaurus publish",

endiliey · 2019-10-16T08:30:08Z

website/package.json

+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "publish-gh-pages": "docusaurus publish",
+    "write-translations": "docusaurus write-translations",


Suggested change

"write-translations": "docusaurus write-translations",

endiliey · 2019-10-16T08:30:17Z

website/package.json

+    "build": "docusaurus build",
+    "publish-gh-pages": "docusaurus publish",
+    "write-translations": "docusaurus write-translations",
+    "version": "docusaurus version",


Suggested change

"version": "docusaurus version",

endiliey · 2019-10-16T08:30:26Z

website/package.json

+    "publish-gh-pages": "docusaurus publish",
+    "write-translations": "docusaurus write-translations",
+    "version": "docusaurus version",
+    "rename-version": "docusaurus rename-version",


Suggested change

"rename-version": "docusaurus rename-version",

endiliey · 2019-10-16T08:31:23Z

website/docusaurus.config.js

+
+	/* Custom fonts for website */
+	/*
+  fonts: {


delete it. why make it commented when its unused

endiliey · 2019-10-16T08:31:42Z

website/docusaurus.config.js

+ * LICENSE file in the root directory of this source tree.
+ */
+
+// See https://docusaurus.io/docs/site-config for all the possible


Suggested change

// See https://docusaurus.io/docs/site-config for all the possible

endiliey · 2019-10-16T08:32:02Z

website/docusaurus.config.js

+	// },
+
+	// Add custom scripts here that would be placed in <script> tags.
+	scripts: ["https://buttons.github.io/buttons.js"],


i dont think its needed now

So github stars won't be coming,in v1 it was present in footer https://fbredex.com/

Yep we don't plan to show it in the footer anymore. You may ignore that.

yangshun

The website looks great @ThakurKarthik! Thanks for deploying on your gh-pages so we can check it out. The only comments I have are regarding the Index page and CSS. Otherwise looks great!

yangshun · 2019-10-16T16:11:14Z

website/docusaurus.config.js

@@ -0,0 +1,129 @@
+/**


Please use 2 spaces (at the most, 4) for indentation. Recommend you install the Prettier plugin for your editor.

yangshun · 2019-10-16T16:12:58Z

website/src/css/custom.css

@@ -59,13 +66,17 @@
 .button {


Remove these .button styles. Use the default by Docusaurus CSS. Refer to https://github.com/facebook/create-react-app/blob/master/docusaurus/website/src/pages/index.js as an example of the CSS classes available.

website/src/pages/faq.js

@@ -0,0 +1,72 @@
+/**


yangshun · 2019-10-16T16:14:23Z

website/src/pages/faq.js

+			<div className="docMainWrapper wrapper">
+				<div className="container padding-vert--lg padding-top--xl">
+					<div className="post">
+						<header className="postHeader">


Use CSS modules approach. Refer to https://github.com/facebook/create-react-app/blob/master/docusaurus/website/src/pages/index.js

yangshun · 2019-10-16T16:15:23Z

website/src/theme/Footer/index.js

@@ -0,0 +1,110 @@
+/**


Just use the default Footer, don't need to swizzle.

unswizzling here just means to delete the Footer file right?

Yep you're right!

yangshun · 2019-10-16T16:17:51Z

website/src/pages/index.js

+	}
+];
+
+class Button extends React.Component {


Don't need a Button component. Just do

import Link from '@docusaurus/Link`; ... <Link className="button button--outline" href={withBaseUrl('...')} />

Using our <Link> component will cause it to do a front end redirect instead of full-page redirect.

yangshun · 2019-10-16T16:18:19Z

website/src/css/custom.css

+    --ifm-color-primary-lightest: rgb(186, 224, 210);
+  }
+
+  /* your custom css */

 @font-face {
  font-family: 'Lato';


I don't think the Lato Google font is loaded at all...

should i remove it?

Yes I'd lean towards that. We won't need to write too much in custom.css as they apply globally. Page-specific CSS should be written in CSS modules.

@yangshun please check for the updated build here https://thakurkarthik.github.io/redex/ .In my latest commit i have moved styles to local module.In the custom.css only some colors and fonts are present,for the fonts i am not that much aware if they are working or not.Can you please check for that and signal me accordingly.Thanks for the reviews !

The fonts look different from those on the current fbredex.com...

ThakurKarthik · 2019-10-18T16:41:01Z

@yangshun @endiliey i have pushed my code,can you make some time and review it Thanks !

yangshun · 2019-10-28T05:54:36Z

@ThakurKarthik I think there are conflicts now. Could you resolve them?

From Redex site could @int3 help? Or I can do the reviewing instead and preserve as much of v1 design and functionality as possible.

ThakurKarthik · 2019-10-28T18:07:54Z

@yangshun i haved merged with latest master now there should be no conflicts.

int3 · 2019-10-30T11:30:22Z

I'm not too picky... would be nice to keep some of the old button/grey background styling, but I don't think it matters too much. I'm not a designer anyway :p

If you can fix the fonts I'm happy to merge this

yangshun · 2019-10-30T11:39:13Z

Hey Jez, the font is not displaying correctly now because the font files weren't loaded. As a side note, as part of our standardizing our open source documentation designs, we'd like to encourage projects to stick with the default theme font, which is this case is the system font. Examples of Docusaurus 2 sites with a consistent font: https://v2.docusaurus.io https://create-react-app.dev https://cli.dev https://hermesengine.dev Are you agreeable with that? If so, we could remove the Lato font styles from the CSS.

…

On Wed, Oct 30, 2019, 7:30 PM Jez Ng ***@***.***> wrote: I'm not too picky... would be nice to keep some of the old button/grey background styling, but I don't think it matters too much. I'm not a designer anyway :p If you can fix the fonts I'm happy to merge this — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#429?email_source=notifications&email_token=AAKBCHMAC2TQDKTSKYBQSNDQRFV53A5CNFSM4JBHFTG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECT2IGQ#issuecomment-547857434>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKBCHMZHHGCO4NOROFBJR3QRFV53ANCNFSM4JBHFTGQ> .

int3 · 2019-10-31T11:28:05Z

Ah alright then. Standardizing the font makes sense. Thanks!

yangshun · 2019-11-03T15:02:15Z

Ref: facebook/docusaurus#1834

yangshun · 2019-11-03T15:02:45Z

@ThakurKarthik could you remove the font styling in the CSS file? Then I think it should be good.

yangshun · 2019-11-03T15:03:39Z

website/src/css/custom.css

+  --ifm-color-primary-lightest: rgb(248, 248, 248);
+}
+
+body {


Remove this whole class

yangshun · 2019-11-03T15:03:56Z

website/src/css/custom.css

+  --ifm-color-primary-lighter: rgb(158, 211, 191);
+  --ifm-color-primary-lightest: rgb(186, 224, 210);
+  --ifm-color-secondary: #f9f9f9;
+  --ifm-color-primary-dark: rgb(216, 216, 216);


Please just leave what's necessary.

ThakurKarthik · 2019-11-03T18:52:57Z

website/src/css/custom.css

@@ -40,14 +55,6 @@
  font-style: normal;
 }


@yangshun should i remove fonts from website/static/css/custom.css too?

@yangshun I have removed the fonts.

lex111 · 2019-11-10T18:21:57Z

website/package.json

  },
  "devDependencies": {
-    "docusaurus": "^1.7.2"
+    "@docusaurus/core": "^2.0.0-alpha.27",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.27",


@ThakurKarthik can you please update Docusaurus to the latest version?

I have updated them to newer 2.0.0-alpha.34 version

justinjhendrick · 2020-02-11T01:31:50Z

Is this pull request ready to merge now? Has all the feedback been incorporated? Are all the reviewers happy?

ThakurKarthik · 2020-11-07T12:52:37Z

Hey @justinjhendrick not sure if it the code is working anymore as docusaurus has gone through major changes i guess !

ThakurKarthik added 3 commits October 15, 2019 00:03

install docusaurus v2 and edited docusaurus.config.js

c8522f4

fix index page and faq page

43d7991

corrected markdown parsing with <Link>

0566d2b

facebook-github-bot added the CLA Signed label Oct 16, 2019

endiliey suggested changes Oct 16, 2019

View reviewed changes

yangshun suggested changes Oct 16, 2019

View reviewed changes

ThakurKarthik added 2 commits October 17, 2019 13:58

review changes

ee05638

removed fonts

3cf0dad

resolve conflicts by merging master

7faa889

yangshun suggested changes Nov 3, 2019

View reviewed changes

removed font from website/src/css/custom.css

2953d1e

ThakurKarthik commented Nov 3, 2019

View reviewed changes

removed fonts from static/css/custom.css file

2215469

lex111 reviewed Nov 10, 2019

View reviewed changes

updated docusaurus to 2.0.0-alpha.34

42ef9a7

Migration docusaurus 2 #429

Are you sure you want to change the base?

Migration docusaurus 2 #429

Conversation

ThakurKarthik commented Oct 16, 2019

Landing Page

Docs Page

FAQ Page

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

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

yangshun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as resolved.

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

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

ThakurKarthik commented Oct 18, 2019

yangshun commented Oct 28, 2019

ThakurKarthik commented Oct 28, 2019

int3 commented Oct 30, 2019

yangshun commented Oct 30, 2019 via email

int3 commented Oct 31, 2019

yangshun commented Nov 3, 2019

yangshun commented Nov 3, 2019

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justinjhendrick commented Feb 11, 2020

ThakurKarthik commented Nov 7, 2020