Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WiP: Integrate docusaurus 2 #247

Merged
merged 27 commits into from
Nov 19, 2019
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
160be2b
Migrate Docs to Docusaurus 2 Alpha (#226)
aswathkk Nov 6, 2019
905a26d
update doc site .gitignore for Docusaurus 2
wgao19 Nov 9, 2019
e5b0001
update dependencies for Docusaurus 2
wgao19 Nov 9, 2019
6aecd8d
remove lightBackground class that breaks dark mode
wgao19 Nov 9, 2019
ff52570
inline svgs to pick up colors by dark theme
wgao19 Nov 9, 2019
4ab00c9
make font size align with current RSK site
wgao19 Nov 9, 2019
a2790b8
use monokai css for code block
wgao19 Nov 9, 2019
ddf04c5
remove unused files
wgao19 Nov 9, 2019
4c691a5
add netlify.toml
wgao19 Nov 9, 2019
4d737e7
remove unused 404 file
wgao19 Nov 10, 2019
6edc792
move monokai into custom.css
wgao19 Nov 12, 2019
b4a1847
Update docusaurus, rm -rf useless file & use correct monokai prism t…
endiliey Nov 13, 2019
02e0101
tweak css
endiliey Nov 13, 2019
ac8dfeb
tweak codeblock, use line highlighting
endiliey Nov 13, 2019
d14c4c3
line highlight docs
endiliey Nov 13, 2019
e467852
readme
endiliey Nov 13, 2019
8116b71
Merge branch 'master' into integrate-docusaurus-2
endiliey Nov 13, 2019
20f5e72
tweaks
yangshun Nov 14, 2019
68299ce
tweak monokai
endiliey Nov 14, 2019
6fa587e
larger code font
endiliey Nov 14, 2019
3909c17
Merge branch 'master' of https://github.com/reduxjs/redux-toolkit int…
endiliey Nov 17, 2019
bf944fd
workaround for highlighting toc
endiliey Nov 17, 2019
2ff0153
bold right toc
endiliey Nov 17, 2019
85f3329
align inline code snippet style with current rsk site
wgao19 Nov 19, 2019
574edd4
align anchor color with current rsk site
wgao19 Nov 19, 2019
035360f
align pagination pill styles with current rsk site
wgao19 Nov 19, 2019
56bba80
disable dark mode
wgao19 Nov 19, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/tutorials/advanced-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ The starting commit for this application is a plain React implementation that us
Let's start by viewing the original plain React app in action:

<iframe src="https://codesandbox.io/embed/rsk-github-issues-example-01-plain-react-nvmdy?fontsize=14&view=preview"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
title="rsk-github-issues-example-01-plain-react"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
Expand Down Expand Up @@ -381,7 +381,7 @@ Unlike typical `connect` + `mapDispatch` usage, here we call `dispatch()` direct
Let's see if this works!

<iframe src="https://codesandbox.io/embed/rsk-github-issues-example-8kex1?fontsize=14&module=%2Fsrc%2Fapp%2FApp.tsx&view=preview"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
title="rsk-github-issues-example-02-issues-display"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
Expand Down Expand Up @@ -1219,7 +1219,7 @@ Hopefully you now have a solid understand of how Redux Starter Kit looks in a re
Let's wrap this up with one more look at the complete source code and the running app:

<iframe src="https://codesandbox.io/embed/rsk-github-issues-example-8i4jn?fontsize=14&module=%2Fsrc%2Ffeatures%2FissueDetails%2FcommentsSlice.ts&view=editor"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
title="rsk-github-issues-example-03-final"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
Expand Down
2 changes: 1 addition & 1 deletion docs/tutorials/basic-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,6 @@ You can see that we're keeping the async handling separate from the reducer logi

Here's the complete example in a sandbox:

<iframe src="https://codesandbox.io/embed/counter-vanilla-redux-starter-kit-6gkxx?fontsize=14&view=editor" title="counter-vanilla createSlice - Redux Starter Kit" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe src="https://codesandbox.io/embed/counter-vanilla-redux-starter-kit-6gkxx?fontsize=14&view=editor" title="counter-vanilla createSlice - Redux Starter Kit" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }} sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

Now that you know the basics of each function, the next step is to try using them in a _slightly_ larger example to see more of how they work. We'll cover that in the [Intermediate Tutorial](./intermediate-tutorial.md).
2 changes: 1 addition & 1 deletion docs/tutorials/intermediate-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -672,7 +672,7 @@ Everyone has different preferences on what makes a "maintainable" folder structu
Now, let's see the final version of the code in action!

<iframe src="https://codesandbox.io/embed/rsk-convert-todos-example-l0h14?fontsize=14&module=%2Fsrc%2Ffeatures%2Ftodos%2FtodosSlice.js&view=editor"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
title="rsk-convert-todos-example"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
Expand Down
2 changes: 1 addition & 1 deletion docs/usage/usage-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -523,6 +523,6 @@ Second, **JS modules can have "circular reference" problems if two modules try t

This CodeSandbox example demonstrates the problem:

<iframe src="https://codesandbox.io/embed/rw7ppj4z0m" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden; margin-bottom: 20px" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe src="https://codesandbox.io/embed/rw7ppj4z0m" style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }} sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

If you encounter this, you may need to restructure your code in a way that avoids the circular references.
20 changes: 20 additions & 0 deletions website/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# dependencies
node_modules/

# production
/build

# generated files
.docusaurus/
.cache-loader

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
*.log
105 changes: 105 additions & 0 deletions website/docusaurus.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
// site configuration options.

module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: '../docs',
sidebarPath: require.resolve('./sidebars.json'),
routeBasePath: ''
},
theme: {
customCss: [
require.resolve('./src/css/custom.css'),
require.resolve('./src/css/monokai.css')
Copy link

@endiliey endiliey Nov 10, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this not a good idea to do this since this means this css will be bundled into main bundle, not when its needed. It will also conflict with the default inline style theme by docusaurus.

The css need to be converted like this https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js

and set through “themeConfig.prism.theme”

Copy link
Contributor Author

@wgao19 wgao19 Nov 10, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i am aware of the converted method although i feel its not completely necessary for the extra work because

  • most if not all pages need this
  • if theres a specificity conflict this theme css should have the lowest specificity to be overwritten by higher specificity selector

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well I guess its OK because its roughly ~2kb. And the only page that doesn't need it is custom pages.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the cause of build error >.<

It does not accept array.
https://github.com/facebook/docusaurus/blob/72792a1e5ce19626a591794dc02446749b0193fe/packages/docusaurus-theme-classic/src/index.js#L20

I spent 1 hr + to debug :(

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • how come the css works then?
  • how to fix this?

Copy link

@endiliey endiliey Nov 11, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. how come the css works then?

It doesn't work perfectly. Its probably some weird and unwanted behavior of webpack or some caching. At least in my side the TOC couldnt appear, and refresh sometimes cause blank page
I've mentioned on Discord that its generating require([])

export default [
  require("infima/dist/css/default/default.css"),
  require(["/mnt/c/Users/endij/Desktop/Linux/redux-starter-kit/my-website/src/css/custom.css","/mnt/c/Users/endij/Desktop/Linux/redux-starter-kit/my-website/src/css/monokai.css"]),
];
  1. HOW TO FIX
    Don't use array. Choose any of this
  • Either convert the css to theme (recommended since 2kbs on home page although small is still unused css)
  • From custom.css import the monokai css
  • Copy monokai css to custom css
  • Put it in static folder, and use stylesheets field in siteconfig
  • Patch docusaurus to support array in theme-classic customCss options
  • Many more ....

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol forgive me, updated

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anyway i fixed it :( its very easy to generate the prism theme.js

Thanks for the hard work

]
}
}
]
],
projectName: 'redux-starter-kit',
baseUrl: '/',
favicon: 'img/favicon/favicon.ico',
tagline: 'A simple batteries-included toolset to make using Redux easier',
title: 'Redux Starter Kit',
url: 'https://redux-starter-kit.js.org',
themeConfig: {
footer: {
style: 'dark',
logo: {
alt: 'Redux Logo',
src: 'img/redux_white.svg'
},
links: [
{
title: 'Docs',
items: [
{
label: 'Quick Start',
to: 'introduction/quick-start'
},
{
label: 'API Reference',
to: 'api/configureStore'
}
]
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'http://stackoverflow.com/questions/tagged/redux'
},
{
label: 'Discord',
href: 'https://discord.gg/0ZcbPKXt5bZ6au5t'
}
]
},
{
title: 'Social',
items: [
{
label: 'GitHub',
href: 'https://www.github.com/reduxjs/redux/'
}
]
}
],
copyright: `Copyright (c) 2015-present Dan Abramov and the Redux documentation authors.`
},
image: 'img/redux-logo-landscape.png',
twitterImage: 'img/redux-logo-twitter.png',
navbar: {
title: 'Redux Starter Kit',
logo: {
alt: 'Redux Logo',
src: 'img/redux.svg'
},
links: [
{
to: 'introduction/quick-start',
label: 'Quick Start',
position: 'right'
},
{ to: 'api/configureStore', label: 'API', position: 'right' },
{
href: 'https://www.github.com/reduxjs/redux-starter-kit',
label: 'GitHub',
position: 'right'
}
]
},
algolia: {
apiKey: '82d838443b672336bf63cab4772d9eb4',
indexName: 'redux-starter-kit',
algoliaOptions: {}
},
googleAnalytics: {
trackingID: 'UA-130598673-3'
}
}
}
4 changes: 4 additions & 0 deletions website/netlify.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[build]
base = "website"
publish = "website/build"
command = "yarn build"
Loading