Skip to content

Commit 2d105e8

Browse files
ahmetkuslularahmetkuslular
committed
New Welcome screen
1 parent a70e8d6 commit 2d105e8

File tree

5 files changed

+458
-214
lines changed

5 files changed

+458
-214
lines changed

‎src/universal/partials/Welcome/PartialCards.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import groupBy from 'lodash/groupBy';
3+
import ReactDOMServer from 'react-dom/server';
4+
import { ServerStyleSheet } from 'styled-components';
5+
6+
import partials from './partials';
7+
const STATUS_COLOR = {
8+
live: '#8dc63f',
9+
dev: '#FF6000',
10+
page: '#00abff',
11+
1: '#9b59b6',
12+
2: '#c0392b',
13+
3: '#16a085'
14+
};
15+
16+
const sheet = new ServerStyleSheet();
17+
18+
const Welcome = () => {
19+
const { live = [], dev = [], page = [], ...others } = groupBy(partials, item => item.status);
20+
21+
const renderItem = ({ item, status, title }) => (
22+
<a
23+
href={item.previewUrl ? item.previewUrl : `${item.url}?preview`}
24+
target="_blank"
25+
className="link"
26+
>
27+
<div className="card">
28+
<div className="card-header">
29+
<div className="badge" style={{ backgroundColor: STATUS_COLOR[status] }}>
30+
{title}
31+
</div>
32+
</div>
33+
<div className="card-title">{item.name}</div>
34+
<div className="card-subtitle">
35+
{status === 'page' ? 'Multiple partials' : 'Single partial'}
36+
</div>
37+
<button className="url-button detail-button">{item.previewUrl || item.url}</button>
38+
</div>
39+
</a>
40+
);
41+
42+
const renderGroup = ({ title, data, status }) => {
43+
return (
44+
<div className="group">
45+
<div className="group-content">
46+
<div className="group-title">
47+
{title.toUpperCase()} ({data.length})
48+
</div>
49+
</div>
50+
<div className="cards">{data.map(item => renderItem({ item, status, title }))}</div>
51+
</div>
52+
);
53+
};
54+
55+
return (
56+
<div>
57+
{page.length > 0 && renderGroup({ title: 'page', data: page, status: 'page' })}
58+
{live.length > 0 && renderGroup({ title: 'live', data: live, status: 'live' })}
59+
{dev.length > 0 && renderGroup({ title: 'dev', data: dev, status: 'dev' })}
60+
{Object.entries(others).map((entity, index) => {
61+
const [key, data] = entity;
62+
return renderGroup({ title: key, data, status: index + 1 });
63+
})}
64+
</div>
65+
);
66+
};
67+
export default ReactDOMServer.renderToString(sheet.collectStyles(<Welcome />));
68+
const styleTags = sheet.getStyleTags();
69+
70+
export { styleTags };

‎src/universal/partials/Welcome/PartialList.js‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎src/universal/partials/Welcome/Welcome.js‎

Lines changed: 66 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,77 @@
1-
import PartialList, { styleTags } from './PartialList';
1+
import PartialCards from './PartialCards';
2+
import welcomeStyle from './welcomeStyle';
3+
4+
import voltranConfig from '../../../../voltran.config';
25

36
export default () => {
47
return `
58
<!doctype html>
69
<head>
710
<title>Welcome</title>
811
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9-
<style>
10-
* {
11-
box-sizing: border-box;
12-
}
13-
body {
14-
background: #f5f5f5;
15-
margin: 0 auto;
16-
padding: 10px;
17-
font-family: 'Lato', sans-serif;
18-
text-shadow: 0 0 1px rgba(255, 255, 255, 0.004);
19-
font-size: 100%;
20-
font-weight: 400;
21-
}
22-
</style>
23-
${styleTags}
12+
${welcomeStyle()}
2413
</head>
25-
<body>${PartialList}</body>
14+
<body>
15+
<div class="container">
16+
<div class="header">
17+
<div class="logo">
18+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="transform: rotate(180deg);">
19+
<path
20+
xmlns="http://www.w3.org/2000/svg"
21+
d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z"
22+
fill="#0473ff"
23+
data-original="#28b446"
24+
/>
25+
<path
26+
xmlns="http://www.w3.org/2000/svg"
27+
fill="#0473ff"
28+
data-original="#219b38"
29+
d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z"
30+
/>
31+
<path
32+
xmlns="http://www.w3.org/2000/svg"
33+
d="M338.2 8.5l-82.2 234-80.4 228.9a48 48 0 01-45.3 32.1H0l173.8-495h164.4z"
34+
fill="#0473ff"
35+
data-original="#518ef8"
36+
/>
37+
</svg>
38+
${voltranConfig.prefix} MikroFrontend Interface
39+
<div class="settings">
40+
<div class="dark-light">
41+
<svg
42+
viewBox="0 0 24 24"
43+
stroke="currentColor"
44+
stroke-width="1.5"
45+
fill="none"
46+
stroke-linecap="round"
47+
stroke-linejoin="round"
48+
>
49+
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
50+
</svg>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
<div class="wrapper">
56+
<div class="main-container">
57+
${PartialCards}
58+
</div>
59+
</div>
60+
</div>
61+
<script>
62+
const toggleButton = document.querySelector(".dark-light");
63+
let theme = localStorage.getItem("voltran-welcome-theme");
64+
65+
if(theme === 'dark-mode'){
66+
document.body.classList.toggle("dark-mode");
67+
}
68+
69+
toggleButton.addEventListener("click", () => {
70+
document.body.classList.toggle("dark-mode");
71+
localStorage.setItem("voltran-welcome-theme", document.body.classList.value);
72+
});
73+
</script>
74+
</body>
2675
</html>
2776
`;
2877
};

‎src/universal/partials/Welcome/styled.js‎

Lines changed: 0 additions & 145 deletions
This file was deleted.

0 commit comments

Comments
 (0)