Skip to content

Commit c5b8f2c

Browse files
satya164satya164
authored
docs: update page title when route changes (callstack#84)
1 parent b13159a commit c5b8f2c

File tree

4 files changed

+55
-63
lines changed

4 files changed

+55
-63
lines changed

‎docs/app.src.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import RedBox from 'redbox-react';
4+
import { rehydrate } from 'glamor';
5+
import App from './templates/App';
6+
import pages from './dist/app.data.json'; // eslint-disable-line import/no-unresolved
7+
8+
rehydrate(window.__GLAMOR__);
9+
10+
const root = document.getElementById('root');
11+
const render = () => {
12+
try {
13+
ReactDOM.render(
14+
<App
15+
pages={pages}
16+
name={window.__INITIAL_PATH__}
17+
/>,
18+
root
19+
);
20+
} catch (e) {
21+
ReactDOM.render(
22+
<RedBox error={e} />,
23+
root
24+
);
25+
}
26+
};
27+
28+
if (module.hot) {
29+
module.hot.accept(() => {
30+
setTimeout(render);
31+
});
32+
}
33+
34+
render();

‎docs/index.js

+9-59
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import React from 'react';
99
import ReactDOMServer from 'react-dom/server';
1010
import { renderStatic } from 'glamor/server';
1111
import HTML from './templates/HTML';
12-
import App from './templates/App';
12+
import App, { buildRoutes } from './templates/App';
1313

1414
const PORT = 3031;
1515

@@ -62,52 +62,12 @@ function collectInfo() {
6262

6363
collectInfo();
6464

65-
fs.writeFileSync(
66-
path.join(dist, 'app.src.js'),
67-
`
68-
import React from 'react';
69-
import ReactDOM from 'react-dom';
70-
import RedBox from 'redbox-react';
71-
import { rehydrate } from 'glamor';
72-
import App from '../templates/App';
73-
import pages from './app.data.json';
74-
75-
rehydrate(window.__GLAMOR__);
76-
77-
const root = document.getElementById('root')
78-
const render = () => {
79-
try {
80-
ReactDOM.render(
81-
<App
82-
pages={pages}
83-
name={window.__INITIAL_PATH__}
84-
/>,
85-
root
86-
);
87-
} catch (e) {
88-
ReactDOM.render(
89-
<RedBox error={ error } />,
90-
root
91-
)
92-
}
93-
}
94-
95-
if (module.hot) {
96-
module.hot.accept(() => {
97-
setTimeout(render)
98-
})
99-
}
100-
101-
render()
102-
`,
103-
);
104-
105-
function buildHTML({ title, description, filename }: any) {
65+
function buildHTML({ title, description, name }: any) {
10666
const { html, css, ids } = renderStatic(
10767
() => ReactDOMServer.renderToString(
10868
<App
10969
pages={items}
110-
name={filename}
70+
name={name}
11171
/>
11272
)
11373
);
@@ -116,19 +76,19 @@ function buildHTML({ title, description, filename }: any) {
11676

11777
body += `
11878
<script>
119-
window.__INITIAL_PATH__ = '${filename}'
79+
window.__INITIAL_PATH__ = '${name}'
12080
window.__GLAMOR__ = ${JSON.stringify(ids)}
12181
</script>
12282
`;
12383

12484
if (task === 'build') {
125-
body += '<script src=\'app.bundle.js?transpile=false\'></script>';
85+
body += '<script src="./app.bundle.js?transpile=false"></script>';
12686
} else {
127-
body += '<script src=\'app.src.js\'></script>';
87+
body += '<script src="../app.src.js"></script>';
12888
}
12989

13090
fs.writeFileSync(
131-
path.join(dist, `${filename}.html`),
91+
path.join(dist, `${name}.html`),
13292
ReactDOMServer.renderToString(
13393
// eslint-disable-next-line react/jsx-pascal-case
13494
<HTML
@@ -141,19 +101,9 @@ function buildHTML({ title, description, filename }: any) {
141101
);
142102
}
143103

144-
items.forEach(it => buildHTML({
145-
title: it.name,
146-
description: it.info.description,
147-
filename: it.name.toLowerCase(),
148-
}));
149-
150-
buildHTML({
151-
title: 'Home',
152-
description: '',
153-
filename: 'index',
154-
});
104+
buildRoutes(items).forEach(buildHTML);
155105

156-
const entry = [ 'dist/app.src.js' ];
106+
const entry = [ 'app.src.js' ];
157107

158108
if (task !== 'build') {
159109
watch(path.join(__dirname, '../src'), () => {

‎docs/templates/App.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,29 @@ import Page from './Page';
66
import Home from './Home';
77
import ComponentDocs from './ComponentDocs';
88

9-
export default function App({ pages, name }: any) {
10-
const routes = pages.map(it => ({
9+
export const buildRoutes = (pages: Array<*>) =>
10+
pages.map(it => ({
11+
title: it.name,
1112
name: it.name.toLowerCase(),
13+
description: it.info.description,
1214
component: props => (
1315
<Page {...props} pages={pages}>
1416
<ComponentDocs {...it} />
1517
</Page>
1618
),
1719
})).concat({
20+
title: 'Home',
1821
name: 'index',
22+
description: '',
1923
component: props => (
2024
<Page {...props} pages={pages}>
2125
<Home />
2226
</Page>
2327
),
2428
});
2529

30+
export default function App({ pages, name }: any) {
31+
const routes = buildRoutes(pages);
2632
return (
2733
<Router
2834
name={name}

‎docs/templates/Router.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
import React, { Component } from 'react';
44
import createHistory from 'history/createBrowserHistory';
55

6-
type Route = {
6+
export type Route = {
7+
title: string;
8+
description: string;
79
name: string;
810
component: any;
9-
props: Object;
11+
props?: Object;
1012
}
1113

1214
type Props = {

0 commit comments

Comments
 (0)