Skip to content
This repository was archived by the owner on Nov 1, 2021. It is now read-only.

Commit e9557ec

Browse files
mydearxymmydearxym
committed
refactor(up-to-date): server & theme wrapper
1 parent ddfc81a commit e9557ec

File tree

8 files changed

+484
-287
lines changed

8 files changed

+484
-287
lines changed

‎containers/ThemeWrapper/AntOverWrite.js

Lines changed: 138 additions & 138 deletions
Large diffs are not rendered by default.

‎containers/ThemeWrapper/CodeHighlight.js

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from 'styled-components'
1+
import { createGlobalStyle } from 'styled-components'
22
import { theme } from '../../utils'
33

44
/*
@@ -30,75 +30,75 @@ import { theme } from '../../utils'
3030
cyan #2aa198
3131
green #859900
3232
*/
33-
const CodeHighlight = styled.div`
33+
const CodeHighlight = createGlobalStyle`
3434
code[class*='language-'],
3535
pre[class*='language-'] {
36-
color: #657b83; /* base00 */
37-
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
38-
text-align: left;
39-
white-space: pre;
40-
word-spacing: normal;
41-
word-break: normal;
42-
word-wrap: normal;
36+
color: #657b83; /* base00 */
37+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
38+
text-align: left;
39+
white-space: pre;
40+
word-spacing: normal;
41+
word-break: normal;
42+
word-wrap: normal;
4343
44-
line-height: 1.5;
44+
line-height: 1.5;
4545
46-
-moz-tab-size: 4;
47-
-o-tab-size: 4;
48-
tab-size: 4;
46+
-moz-tab-size: 4;
47+
-o-tab-size: 4;
48+
tab-size: 4;
4949
50-
-webkit-hyphens: none;
51-
-moz-hyphens: none;
52-
-ms-hyphens: none;
53-
hyphens: none;
50+
-webkit-hyphens: none;
51+
-moz-hyphens: none;
52+
-ms-hyphens: none;
53+
hyphens: none;
5454
}
5555
5656
pre[class*='language-']::-moz-selection,
5757
pre[class*='language-'] ::-moz-selection,
5858
code[class*='language-']::-moz-selection,
5959
code[class*='language-'] ::-moz-selection {
60-
background: #073642; /* base02 */
60+
background: #073642; /* base02 */
6161
}
6262
6363
pre[class*='language-']::selection,
6464
pre[class*='language-'] ::selection,
6565
code[class*='language-']::selection,
6666
code[class*='language-'] ::selection {
67-
background: #073642; /* base02 */
67+
background: #073642; /* base02 */
6868
}
6969
7070
/* Code blocks */
7171
pre[class*='language-'] {
72-
padding: 1em;
73-
margin: 0.5em 0;
74-
overflow: auto;
75-
border-radius: 0.3em;
72+
padding: 1em;
73+
margin: 0.5em 0;
74+
overflow: auto;
75+
border-radius: 0.3em;
7676
}
7777
7878
:not(pre) > code[class*='language-'],
7979
pre[class*='language-'] {
80-
background-color: ${theme('code.bg')}; /* #fdf6e3;*/
80+
background-color: ${theme('code.bg')}; /* #fdf6e3;*/
8181
}
8282
8383
/* Inline code */
8484
:not(pre) > code[class*='language-'] {
85-
padding: 0.1em;
86-
border-radius: 0.3em;
85+
padding: 0.1em;
86+
border-radius: 0.3em;
8787
}
8888
8989
.token.comment,
9090
.token.prolog,
9191
.token.doctype,
9292
.token.cdata {
93-
color: #93a1a1; /* base1 */
93+
color: #93a1a1; /* base1 */
9494
}
9595
9696
.token.punctuation {
97-
color: #586e75; /* base01 */
97+
color: #586e75; /* base01 */
9898
}
9999
100100
.namespace {
101-
opacity: 0.7;
101+
opacity: 0.7;
102102
}
103103
104104
.token.property,
@@ -108,7 +108,7 @@ const CodeHighlight = styled.div`
108108
.token.constant,
109109
.token.symbol,
110110
.token.deleted {
111-
color: #268bd2; /* blue */
111+
color: #268bd2; /* blue */
112112
}
113113
114114
.token.selector,
@@ -118,40 +118,40 @@ const CodeHighlight = styled.div`
118118
.token.builtin,
119119
.token.url,
120120
.token.inserted {
121-
color: #2aa198; /* cyan */
121+
color: #2aa198; /* cyan */
122122
}
123123
124124
.token.entity {
125-
color: #657b83; /* base00 */
126-
background: #eee8d5; /* base2 */
125+
color: #657b83; /* base00 */
126+
background: #eee8d5; /* base2 */
127127
}
128128
129129
.token.atrule,
130130
.token.attr-value,
131131
.token.keyword {
132-
color: #859900; /* green */
132+
color: #859900; /* green */
133133
}
134134
135135
.token.function {
136-
color: #b58900; /* yellow */
136+
color: #b58900; /* yellow */
137137
}
138138
139139
.token.regex,
140140
.token.important,
141141
.token.variable {
142-
color: #cb4b16; /* orange */
142+
color: #cb4b16; /* orange */
143143
}
144144
145145
.token.important,
146146
.token.bold {
147-
font-weight: bold;
147+
font-weight: bold;
148148
}
149149
.token.italic {
150-
font-style: italic;
150+
font-style: italic;
151151
}
152152
153153
.token.entity {
154-
cursor: help;
154+
cursor: help;
155155
}
156156
`
157157

‎containers/ThemeWrapper/GlobalStyle.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import { createGlobalStyle } from 'styled-components'
2+
import normalize from './normalize'
3+
import { theme, cs } from '../../utils'
4+
5+
const GlobalStyle = createGlobalStyle`
6+
${normalize};
7+
html {
8+
background-color: ${theme('htmlBg')};
9+
}
10+
*::-moz-selection {
11+
background-color: ${theme('selectionBg')} !important;
12+
}
13+
14+
*::selection {
15+
background-color: ${theme('selectionBg')} !important;
16+
}
17+
a:hover {
18+
color: ${theme('a.hover')};
19+
}
20+
a:active {
21+
color: ${theme('a.active')};
22+
}
23+
24+
.iziToast {
25+
border: 1px solid !important;
26+
border-color: ${theme('toast.border')} !important;
27+
background-color: ${theme('toast.bg')} !important;
28+
min-height: 36px !important;
29+
padding: 2px 45px 0px 0 !important;
30+
}
31+
.iziToast > .iziToast-body .iziToast-title {
32+
color: ${theme('toast.title')} !important;
33+
}
34+
.iziToast-wrapper-topRight {
35+
top: 25px !important;
36+
}
37+
.iziToast > .iziToast-body .iziToast-message {
38+
color: ${theme('toast.message')} !important;
39+
}
40+
41+
// mentions
42+
.typewriter-mention {
43+
color: ${theme('comment.mentionText')};
44+
background: ${theme('comment.mentionTextBg')};
45+
cursor: pointer;
46+
display: inline-block;
47+
padding-left: 4px;
48+
padding-right: 4px;
49+
margin-bottom: 4px;
50+
border-radius: 3px;
51+
text-decoration: none;
52+
}
53+
.typewriter-mention:hover,
54+
.typewriter-mention:focus {
55+
color: ${theme('comment.mentionText')};
56+
background: ${theme('comment.mentionTextBg')};
57+
outline: 0; /* reset for :focus */
58+
}
59+
60+
.typewriter-suggestions {
61+
border: 1px solid;
62+
border-color: ${theme('comment.mentionBorder')};
63+
background: ${theme('comment.mentionBg')};
64+
box-shadow: ${theme('comment.mentionShadow')};
65+
margin-top: 10px;
66+
position: absolute;
67+
min-width: 160px;
68+
max-width: 300px;
69+
70+
border-radius: 2px;
71+
cursor: pointer;
72+
z-index: 2;
73+
display: flex;
74+
-webkit-box-orient: vertical;
75+
-webkit-box-direction: normal;
76+
flex-direction: column;
77+
box-sizing: border-box;
78+
-webkit-transform: scale(0);
79+
transform: scale(0);
80+
}
81+
.typewriter-mentionSuggestionsEntry {
82+
transition: background-color 0.4s cubic-bezier(0.27, 1.27, 0.48, 0.56);
83+
padding: 7px 10px 3px 10px;
84+
padding-left: 10px;
85+
display: flex;
86+
}
87+
.typewriter-mentionSuggestionsEntry:active {
88+
background-color: ${theme('baseColor.error')};
89+
}
90+
.typewriter-mentionSuggestionsEntryFocused {
91+
background-color: ${theme('comment.mentionActiveBg')};
92+
padding: 7px 10px 3px 10px;
93+
display: flex;
94+
}
95+
96+
.typewriter-mentionSuggestionsEntryText {
97+
display: inline-block;
98+
margin-left: 8px;
99+
100+
${cs.truncate('200px')};
101+
max-width: 368px;
102+
font-size: 1rem;
103+
margin-bottom: 0.2em;
104+
color: ${theme('thread.articleTitle')};
105+
}
106+
107+
.typewriter-mentionSuggestionsEntryAvatar {
108+
display: inline-block;
109+
width: 24px;
110+
height: 24px;
111+
border-radius: 12px;
112+
}
113+
114+
.typewriter-link {
115+
color: ${theme('markdown.link')};
116+
117+
&:hover {
118+
color: ${theme('markdown.link')};
119+
text-decoration: underline;
120+
}
121+
}
122+
`
123+
124+
export default GlobalStyle

‎containers/ThemeWrapper/index.js

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,20 @@ import { ThemeProvider } from 'styled-components'
1111
import { storePlug } from '../../utils'
1212

1313
import AntOverWrite from './AntOverWrite'
14-
import NormalizeStyle from './NormalizeStyle'
1514
// import MarkDownStyle from './MarkDownStyle'
1615
import CodeHighlight from './CodeHighlight'
16+
import GlobalStyle from './GlobalStyle'
1717

1818
// TODO: mv MarkDownStyle && CodeHighlight to it's own container
1919

2020
const ThemeObserver = ({ children, theme }) => (
2121
<ThemeProvider theme={theme.themeData}>
22-
<AntOverWrite>
23-
<CodeHighlight>
24-
<style global jsx>
25-
{NormalizeStyle}
26-
</style>
27-
<style global jsx>{`
28-
html {
29-
background-color: ${theme.themeData.htmlBg};
30-
}
31-
*::-moz-selection {
32-
background-color: ${theme.themeData.selection_bg} !important;
33-
}
34-
35-
*::selection {
36-
background-color: ${theme.themeData.selection_bg} !important;
37-
}
38-
39-
a:hover {
40-
color: ${theme.themeData.a.hover};
41-
}
42-
a:active {
43-
color: ${theme.themeData.a.active};
44-
}
45-
`}</style>
46-
<div>{children}</div>
47-
</CodeHighlight>
48-
</AntOverWrite>
22+
<React.Fragment>
23+
<div>{children}</div>
24+
<AntOverWrite />
25+
<CodeHighlight />
26+
<GlobalStyle />
27+
</React.Fragment>
4928
</ThemeProvider>
5029
)
5130

0 commit comments

Comments
 (0)