Merge branch 'pages' into dev

Author: mydearxym

components/ThemeSelector/index.js

@@ -6,6 +6,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
+import R from 'ramda'
 
 import { ICON_CMD } from '../../config'
 
@@ -22,14 +23,15 @@ import {
   AuthorName,
 } from './style'
 
-import { makeDebugger, themeKeys, themeMeta, uid } from '../../utils'
+import { makeDebugger, themeMeta, uid } from '../../utils'
+
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('c:ThemeSelector:index')
 /* eslint-enable no-unused-vars */
 
 const DotStyle = ({ curTheme, changeTheme }) => (
   <FlexWrapper>
-    {themeKeys.map(name => (
+    {R.keys(themeMeta).map(name => (
       <ThemeDot
         key={uid.gen()}
         active={curTheme === name}
@@ -42,7 +44,7 @@ const DotStyle = ({ curTheme, changeTheme }) => (
 
 const DetailStyle = ({ curTheme, changeTheme }) => (
   <DetailWrapper>
-    {themeKeys.map(name => (
+    {R.keys(themeMeta).map(name => (
       <IntroBox key={uid.gen()} active={curTheme === name}>
         <ThemeDot
           large

config/general.js

@@ -2,6 +2,8 @@
    general behavior of the site
  */
 
+export const DEFAULT_THEME = 'cyan'
+
 export const PAGE_SIZE = {
   S: 10,
   D: 20,

config/index.js

@@ -1,4 +1,4 @@
-export { PAGE_SIZE, WORD_LIMIT, TAG_COLORS } from './general'
+export { DEFAULT_THEME, PAGE_SIZE, WORD_LIMIT, TAG_COLORS } from './general'
 export {
   GRAPHQL_ENDPOINT,
   ISSUE_ADDR,

stores/RootStore/index.js

@@ -11,7 +11,7 @@ import {
   markStates,
   toast,
   toastBarColor,
-  themeDict,
+  themeSkins,
 } from '../../utils'
 
 import {
@@ -229,7 +229,7 @@ const rootStore = t
       self.footer.sponsorHepler()
     },
     toast(type, options = {}) {
-      const themeData = themeDict[self.theme.curTheme]
+      const themeData = themeSkins[self.theme.curTheme]
       const progressBarColor = toastBarColor(type, themeData)
 
       const toastOpt = R.merge(options, { progressBarColor })

stores/ThemeStore/index.js

@@ -6,32 +6,33 @@
 import { types as t, getParent } from 'mobx-state-tree'
 import R from 'ramda'
 
-import { makeDebugger, markStates, themeDict, defaultTheme } from '../../utils'
+import { DEFAULT_THEME } from '../../config'
+import { makeDebugger, markStates, themeSkins } from '../../utils'
 
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('S:ThemeStore')
 /* eslint-enable no-unused-vars */
 
 export const ThemeDefaults = {
-  curTheme: defaultTheme,
+  curTheme: DEFAULT_THEME,
 }
 
 export const ThemeStore = t
   .model('ThemeStore', {
     curTheme: t.optional(
-      t.enumeration('theme', R.keys(themeDict)),
-      defaultTheme
+      t.enumeration('theme', R.keys(themeSkins)),
+      DEFAULT_THEME
     ),
   })
   .views(self => ({
     get root() {
       return getParent(self)
     },
     get themeData() {
-      return themeDict[self.curTheme]
+      return themeSkins[self.curTheme]
     },
     get themeKeys() {
-      return R.keys(themeDict)
+      return R.keys(themeSkins)
     },
   }))
   .actions(self => ({

utils/index.js

@@ -89,10 +89,8 @@ export {
  */
 export {
   theme,
-  defaultTheme,
   themeMeta,
-  themeDict,
-  themeKeys,
+  themeSkins,
   themeCoverMap,
   themeCoverIndexMap,
 } from './themes'

utils/themes/index.js

@@ -12,34 +12,16 @@
  */
 
 import R from 'ramda'
+import skinsData from './skins'
 
-import Cyan from './Cyan'
-import Purple from './Purple'
-import SolarizedDark from './SolarizedDark'
-import Github from './Github'
-import Blue from './Blue'
-import Yellow from './Yellow'
-import Green from './Green'
-import IronGreen from './IronGreen'
+export const themeSkins = { ...skinsData }
 
-export const defaultTheme = 'cyan'
-export const themeDict = {
-  cyan: { ...Cyan },
-  solarized: { ...SolarizedDark },
-  purple: { ...Purple },
-  yellow: { ...Yellow },
-  github: { ...Github },
-  blue: { ...Blue },
-  green: { ...Green },
-  ironGreen: { ...IronGreen },
-}
+// cover color of a theme
+export const themeCoverMap = R.map(R.path(['cover']), themeSkins)
+// the "T" color in themeSelector
+export const themeCoverIndexMap = R.map(R.path(['coverIndex']), themeSkins)
 
-export const themeKeys = R.keys(themeDict)
-
-export const themeCoverMap = R.map(R.path(['cover']), themeDict)
-export const themeCoverIndexMap = R.map(R.path(['coverIndex']), themeDict)
-
-// shorthand for style-components
+// curried shorthand for style-components
 export const theme = themepath =>
   R.path(['theme', ...R.split('.', themepath)]) || 'wheat'