Skip to content

Commit 5e3b17d

Browse files
goto-bus-stopgoto-bus-stop
committed
work on new docs
1 parent 66d291a commit 5e3b17d

File tree

9 files changed

+95
-52
lines changed

9 files changed

+95
-52
lines changed

‎global.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
font-family: Open Sans, sans-serif;
3+
}

‎layout/muiTheme.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { createMuiTheme } from '@material-ui/core/styles'
1+
import { adaptV4Theme, createTheme } from '@mui/material/styles'
22

3-
export default createMuiTheme({
3+
export default createTheme(adaptV4Theme({
44
palette: {
55
type: 'dark',
66
primary: {
@@ -14,6 +14,6 @@ export default createMuiTheme({
1414
}
1515
},
1616
typography: {
17-
fontFamily: '"Open Sans", Roboto, Arial, sans-serif'
17+
fontFamily: 'Open Sans, Roboto, Arial, sans-serif'
1818
}
19-
})
19+
}))

‎layout/withLayout.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
2-
import { ThemeProvider, makeStyles } from '@material-ui/styles';
3-
import AppBar from '@material-ui/core/AppBar';
4-
import Toolbar from '@material-ui/core/Toolbar';
5-
import Button from '@material-ui/core/Button';
6-
import CssBaseline from '@material-ui/core/CssBaseline';
2+
import { ThemeProvider, makeStyles } from '@mui/styles';
3+
import AppBar from '@mui/material/AppBar';
4+
import Toolbar from '@mui/material/Toolbar';
5+
import Button from '@mui/material/Button';
6+
import CssBaseline from '@mui/material/CssBaseline';
77
import theme from './muiTheme';
88

99
const LOGO_HEIGHT = 114

‎package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@
2222
"homepage": "https://github.com/u-wave/u-wave.github.io#readme",
2323
"dependencies": {
2424
"@emotion/react": "^11.1.5",
25+
"@emotion/server": "^11.4.0",
2526
"@emotion/styled": "^11.1.5",
26-
"@mapbox/rehype-prism": "^0.7.0",
27-
"@material-ui/core": "5.0.0-alpha.27",
28-
"@material-ui/styles": "5.0.0-alpha.27",
27+
"@mapbox/rehype-prism": "^0.8.0",
2928
"@mdx-js/loader": "^1.6.22",
3029
"@mdx-js/react": "^1.6.22",
31-
"@next/mdx": "^10.0.6",
32-
"cssnano": "^4.1.10",
33-
"next": "^10.0.6",
30+
"@mui/material": "^5.0.0",
31+
"@mui/styles": "^5.0.2",
32+
"@next/mdx": "^12.0.3",
33+
"next": "^12.0.3",
3434
"prismjs": "^1.23.0",
3535
"react": "^17.0.1",
3636
"react-dom": "^17.0.1"

‎pages/_app.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
1+
import PropTypes from 'prop-types';
2+
import { ThemeProvider } from '@mui/material/styles';
3+
import { CacheProvider } from '@emotion/react';
4+
import createCache from '@emotion/cache';
15
import 'prismjs/themes/prism.css';
6+
import '../global.css';
7+
import theme from '../layout/muiTheme';
8+
9+
export const cache = createCache({ key: 'css', prepend: true });
210

311
export default function App({ Component, pageProps }) {
4-
return <Component {...pageProps} />;
12+
return (
13+
<CacheProvider value={cache}>
14+
<ThemeProvider theme={theme}>
15+
<Component {...pageProps} />
16+
</ThemeProvider>
17+
</CacheProvider>
18+
);
519
}
20+
21+
App.propTypes = {
22+
Component: PropTypes.elementType.isRequired,
23+
pageProps: PropTypes.object.isRequired,
24+
};

‎pages/_document.js

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,41 @@
11
import React from 'react';
2-
import Document, { Head, Main, NextScript } from 'next/document';
3-
import { createGenerateClassName, ServerStyleSheets, StylesProvider } from '@material-ui/styles';
4-
import cssnano from 'cssnano';
2+
import Document, {
3+
Html, Head, Main, NextScript,
4+
} from 'next/document';
5+
import createEmotionServer from '@emotion/server/create-instance';
6+
import { cache } from './_app';
57

6-
const globalStyles = `
7-
body { font-family: "Open Sans", sans-serif; }
8-
`;
8+
const { extractCritical } = createEmotionServer(cache);
99

1010
export default class extends Document {
11-
static async getInitialProps({ renderPage }) {
12-
const sheets = new ServerStyleSheets();
13-
const generateClassName = createGenerateClassName();
14-
const page = renderPage(Page => props => sheets.collect(
15-
<StylesProvider generateClassName={generateClassName}>
16-
<Page {...props} />
17-
</StylesProvider>
18-
));
11+
static async getInitialProps(ctx) {
12+
const initialProps = await Document.getInitialProps(ctx);
1913

20-
const css = sheets.toString();
21-
const minifiedCss = await cssnano.process(css, { from: undefined });
14+
const emotionStyles = extractCritical(initialProps.html);
2215

2316
return {
24-
...page,
25-
styles: (
26-
<style id="jss" dangerouslySetInnerHTML={{ __html: minifiedCss }} />
27-
),
17+
...initialProps,
18+
// Styles fragment is rendered after the app and page rendering finish.
19+
styles: [
20+
<React.Fragment key="styles">
21+
{initialProps.styles}
22+
<style id="emotion-server-side">{emotionStyles.css}</style>
23+
</React.Fragment>,
24+
],
2825
};
2926
}
3027

3128
render() {
32-
const { styles } = this.props;
33-
3429
return (
35-
<html>
30+
<Html lang="en">
3631
<Head>
37-
<style dangerouslySetInnerHTML={{ __html: globalStyles }} />
3832
<meta name="description" content="üWave is a self-hosted collaborative listening platform." />
3933
</Head>
4034
<body>
4135
<Main />
4236
<NextScript />
4337
</body>
44-
</html>
38+
</Html>
4539
);
4640
}
4741
}

‎pages/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import Link from 'next/link';
33
import Head from 'next/head';
4-
import { makeStyles } from '@material-ui/styles';
5-
import Typography from '@material-ui/core/Typography';
4+
import { makeStyles } from '@mui/styles';
5+
import Typography from '@mui/material/Typography';
66
import { createLayout } from '../layout';
77

88
const useStyles = makeStyles(theme => ({
@@ -11,7 +11,7 @@ const useStyles = makeStyles(theme => ({
1111
paddingLeft: theme.spacing(2),
1212
paddingRight: theme.spacing(2),
1313
paddingBottom: theme.spacing(6),
14-
paddingTop: theme.spacing(6) + 56,
14+
paddingTop: (Number(theme.spacing(6)) + 56) + 'px',
1515
[theme.breakpoints.up('sm')]: {
1616
paddingLeft: theme.spacing(3),
1717
paddingRight: theme.spacing(3),

‎pages/install.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React from 'react';
22
import Link from 'next/link';
33
import Head from 'next/head';
44
import { MDXProvider } from '@mdx-js/react';
5-
import { makeStyles } from '@material-ui/styles';
6-
import Typography from '@material-ui/core/Typography';
7-
import { yellow } from '@material-ui/core/colors';
5+
import { makeStyles } from '@mui/styles';
6+
import Typography from '@mui/material/Typography';
7+
import { yellow } from '@mui/material/colors';
88
import { createLayout } from '../layout';
99
import Instructions from './install.mdx';
1010

‎pages/install.mdx

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
## Dependencies
55
To run üWave, you need a server with:
66

7-
* Node.js 12.x or up. The latest LTS release, 14.x, is ideal.
7+
* Node.js 12.x or up. The latest LTS release, 16.x, is ideal.
88
* MongoDB 4.2.x or up - [Install instructions](https://docs.mongodb.com/manual/administration/install-community/)
99
* Redis
1010

1111
### Ubuntu 20.04
1212
On Ubuntu 20.04, the following commands will install the dependencies we need:
1313

1414
```bash
15-
echo "deb http://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" \
16-
| sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list
17-
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
15+
echo "deb http://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" \
16+
| sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list
17+
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
1818

1919
sudo apt-get update
2020
sudo apt-get install -y build-essential mongodb-org nodejs redis-server
@@ -38,7 +38,34 @@ After=network.target
3838
[Service]
3939
User=u-wave
4040
Group=u-wave
41-
ExecStart=
41+
ExecStart=/home/u-wave/.npm/prefix/bin/u-wave-core
42+
WorkingDirectory=/home/u-wave/
43+
Environment=PORT=6042
44+
Environment=MONGODB_URL=mongodb://127.0.0.1:27017/uwave
45+
Environment=REDIS_URL=redis://127.0.0.1:6379
46+
# Your YouTube API key
47+
Environment=YOUTUBE_API_KEY=...
48+
49+
[Install]
50+
WantedBy=multi-user.target
51+
```
52+
53+
```ini
54+
[Unit]
55+
Description=üWave Web Client
56+
After=network.target
57+
58+
[Service]
59+
User=u-wave
60+
Group=u-wave
61+
ExecStart=/home/u-wave/.npm/prefix/bin/u-wave-web
62+
WorkingDirectory=/home/u-wave/
63+
Environment=PORT=6041
64+
Environment=CLIENT_TITLE="üWave"
65+
# URL to access the HTTP API. Must NOT have a trailing slash (/).
66+
Environment=API_URL=https://your-instance.app/api
67+
# URL to access the WebSocket API. Usually the same as above, but https → wss.
68+
Environment=SOCKET_URL=wss://your-instance.app/api/
4269

4370
[Install]
4471
WantedBy=multi-user.target

0 commit comments

Comments
 (0)