Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c988e5a

Browse files
committed
feat: add default values for all settings
1 parent a212a05 commit c988e5a

File tree

13 files changed

+97
-118
lines changed

13 files changed

+97
-118
lines changed

‎blog.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const BLOG = {
44
title: 'Witt - unix.bio',
55
description: 'Hi, I\'m Witt. A JavaScript full stack engineer, I\'m creating apps and libs to help improve the developer experience.',
66
summary: 'JavaScript 工程师,对开发者体验感兴趣。',
7-
language: 'en-us',
7+
language: 'zh-cn',
88
latestLimit: 5,
99

1010
labels: {
@@ -21,6 +21,11 @@ const BLOG = {
2121
googleAnalytics: 'UA-110371817-3',
2222
cn: true,
2323
enableViews: true,
24+
25+
layouts: {
26+
pageWidth: '750px',
27+
pageWidthMobile: '88vw',
28+
},
2429
}
2530

2631
export default BLOG

‎lib/components/contacts.jsx‎

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,17 @@
11
import React, { useMemo } from 'react'
2-
import { useTheme, Spacer, Link } from '@zeit-ui/react'
3-
import BLOG from '../../blog.config'
4-
import useConfigs from '../states/config-context'
5-
import Github from './icons/github'
6-
import Twitter from './icons/twitter'
7-
import Mail from './icons/mail'
2+
import { useTheme, Spacer, Link, Divider } from '@zeit-ui/react'
3+
import useConfigs from '../config-context'
84
import Sun from './icons/sun'
95
import Moon from './icons/moon'
6+
import { Configs } from '../utils'
107

11-
const Contacts = () => {
8+
const Contacts = ({ isDetailPage =false}) => {
129
const theme = useTheme()
1310
const configs = useConfigs()
1411
const isDark = useMemo(() => theme.type === 'dark', [theme.type])
15-
const email = BLOG.email ? `mailto:${BLOG.email}` : null
16-
const github = BLOG.github ? `https://github.com/${BLOG.github}` : null
17-
const twitter = BLOG.twitter ? `https://twitter.com/${BLOG.twitter}` : null
1812
const switchTheme = () => configs.onChange(theme.type === 'dark')
1913

20-
const themeTitle = BLOG.cn ? '切换主题' : 'Switch themes'
21-
const emailTitle = BLOG.cn ? '邮件' : 'Email me'
22-
const githubTitle = `GitHub: ${BLOG.github}`
23-
const twitterTitle = BLOG.cn ? `推特: ${BLOG.twitter}` : `Twitter: ${BLOG.twitter}`
14+
const themeTitle = Configs.isCN() ? '切换主题' : 'Switch themes'
2415
const linkProps = {
2516
rel: 'noreferrer',
2617
pure: true,
@@ -30,25 +21,34 @@ const Contacts = () => {
3021
return (
3122
<>
3223
<div className="contacts">
33-
{isDark && <span title={themeTitle}><Sun onClick={switchTheme} /></span>}
34-
{!isDark && <span title={themeTitle}><Moon onClick={switchTheme} /></span>}
35-
{email && <Link aria-label="email" title={emailTitle} href={email} {...linkProps}><Mail /></Link> }
36-
{github && <Link aria-label="github" title={githubTitle} href={github} {...linkProps}><Github /></Link>}
37-
{twitter && <Link aria-label="twitter" title={twitterTitle} href={twitter} {...linkProps}><Twitter /></Link>}
38-
<div className="line">
39-
<Spacer y={.5} />
24+
{isDetailPage && <Divider y={.5} />}
25+
<div className="between">
26+
<div className="socials">
27+
{Configs.email && <Link aria-label="email" href={Configs.email} {...linkProps}>Email</Link> }
28+
{Configs.github && <Link aria-label="github" href={Configs.github} {...linkProps}>Github</Link>}
29+
{Configs.twitter && <Link aria-label="twitter" href={Configs.twitter} {...linkProps}>Twitter</Link>}
30+
</div>
31+
<div>
32+
{isDark && <span title={themeTitle}><Sun onClick={switchTheme} /></span>}
33+
{!isDark && <span title={themeTitle}><Moon onClick={switchTheme} /></span>}
34+
</div>
4035
</div>
41-
36+
4237
<style jsx>{`
4338
.contacts {
44-
width: fit-content;
45-
display: flex;
46-
justify-content: center;
47-
align-items: center;
39+
width: ${Configs.layouts.pageWidth};
4840
padding: 0 ${theme.layout.gapQuarter};
4941
position: absolute;
50-
bottom: 2.5rem;
51-
color: ${theme.palette.accents_4};
42+
bottom: 3.5rem;
43+
left: 50%;
44+
transform: translateX(-50%);
45+
color: ${theme.palette.accents_6};
46+
}
47+
48+
.between {
49+
display: flex;
50+
justify-content: space-between;
51+
align-items: center;
5252
}
5353
5454
.contacts :global(svg) {
@@ -63,6 +63,12 @@ const Contacts = () => {
6363
color: inherit;
6464
}
6565
66+
.socials :global(a) {
67+
margin-right: .5rem;
68+
font-size: .75rem;
69+
text-transform: uppercase;
70+
}
71+
6672
.contacts span {
6773
color: inherit;
6874
display: inline-flex;
@@ -71,33 +77,25 @@ const Contacts = () => {
7177
}
7278
7379
.contacts span:hover {
74-
color: ${theme.palette.accents_6};
80+
color: ${theme.palette.accents_4};
7581
}
7682
7783
.contacts :global(a:hover) {
78-
color: ${theme.palette.accents_6};
79-
}
80-
81-
.line {
82-
background-color: ${theme.palette.accents_1};
83-
position: absolute;
84-
bottom: 4px;
85-
top: 4px;
86-
left: -8px;
87-
width: 8px;
88-
z-index: 1;
84+
color: ${theme.palette.accents_4};
85+
text-decoration: underline dashed;
86+
cursor: ne-resize;
87+
transition: all 150ms ease;
8988
}
9089
91-
@media only screen and (max-width: 767px) {
90+
@media only screen and (max-width: ${theme.layout.breakpointMobile}) {
9291
.contacts {
9392
position: absolute;
94-
bottom: 2.5rem;
95-
left: 1rem;
93+
width: ${Configs.layouts.pageWidthMobile};
9694
}
9795
}
9896
`}</style>
9997
</div>
100-
<Spacer y={2.5} />
98+
<Spacer y={3.5} />
10199
</>
102100
)
103101
}

‎lib/components/icons/github.jsx‎

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

‎lib/components/icons/mail.jsx‎

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

‎lib/components/icons/twitter.jsx‎

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

‎lib/components/layout.jsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Profile from './profile'
44
import Contacts from './contacts'
55
import Title from './title'
66
import { Spacer } from '@zeit-ui/react'
7-
import BLOGfrom '../../blog.config'
7+
import {Configs}from '../utils'
88

99
const Layout = ({ children, meta = {} }) => {
1010
const [showAfterRender, setShowAfterRender] = useState(false)
@@ -15,7 +15,7 @@ const Layout = ({ children, meta = {} }) => {
1515
return (
1616
<section>
1717
<Head>
18-
{meta.title && <title>{meta.title} - {BLOG.title}</title>}
18+
{meta.title && <title>{meta.title} - {Configs.title}</title>}
1919
{meta.description && <meta name="description" content={meta.description} />}
2020
{meta.description && <meta property="og:description" content={meta.description} />}
2121
{meta.title && <meta property="og:title" content={meta.title} />}
@@ -28,7 +28,7 @@ const Layout = ({ children, meta = {} }) => {
2828
{inDetailPage && <Title title={meta.title} date={meta.date} />}
2929
{children}
3030
<Spacer y={5} />
31-
<Contacts />
31+
<Contacts isDetailPage={inDetailPage}/>
3232
</div>
3333

3434
<style jsx>{`
@@ -42,11 +42,10 @@ const Layout = ({ children, meta = {} }) => {
4242
4343
.container {
4444
width: 100%;
45-
max-width: 750px;
45+
max-width: ${Configs.layouts.pageWidth};
4646
display: flex;
4747
flex-direction: column;
4848
justify-content: flex-start;
49-
text-spacing: none;
5049
}
5150
5251
.container :global(h1) {
@@ -67,7 +66,7 @@ const Layout = ({ children, meta = {} }) => {
6766
6867
@media only screen and (max-width: 767px) {
6968
.container {
70-
max-width: 88vw;
69+
max-width: ${Configs.layouts.pageWidthMobile};
7170
min-height: 100vh;
7271
}
7372
}

‎lib/components/posts/posts.jsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@ import Head from 'next/head'
22
import React, { useMemo } from 'react'
33
import PostItem from './post-item'
44
import { useTheme, Link } from '@zeit-ui/react'
5-
import BLOGfrom '../../../blog.config'
5+
import {Configs}from '../../utils'
66
import NextLink from 'next/link'
77
import metadata from 'lib/data/metadata'
8-
const latestLimit = BLOG.latestLimit || 5
98

109
const getMoreLink = len => {
11-
if (len < latestLimit) return null
10+
if (len < Configs.latestLimit) return null
1211
return (
1312
<NextLink href="/blog" passHref>
1413
<Link pure title="More">...</Link>
@@ -20,12 +19,12 @@ const getLatest = (data, isLatest) => {
2019
const postNode = data.find(item => item.name === 'posts')
2120
const posts = (postNode || {}).children || []
2221
if (!isLatest) return posts
23-
return posts.slice(0, latestLimit)
22+
return posts.slice(0, Configs.latestLimit)
2423
}
2524

2625
const getTitle = (isLatest) => {
27-
if (!isLatest) return BLOG.labels.list||'all Posts'
28-
return BLOG.labels.latest||'latest'
26+
if (!isLatest) return Configs.labels.list
27+
return Configs.labels.latest
2928
}
3029

3130
const Posts = ({
@@ -38,7 +37,7 @@ const Posts = ({
3837
return (
3938
<section>
4039
<Head>
41-
{!isLatest && <title>{getTitle(false)} - {BLOG.title}</title>}
40+
{!isLatest && <title>{getTitle(false)} - {Configs.title}</title>}
4241
</Head>
4342
<h2>{title}</h2>
4443
<div className="content">

‎lib/components/profile-links.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
22
import NextLink from 'next/link'
33
import { useTheme, Link } from '@zeit-ui/react'
44
import metadata from '../data/metadata'
5-
import BLOGfrom '../../blog.config'
5+
import {Configs}from '../utils'
66

77
const getFixes = metas => {
88
const data = metas.find(item => item.name === 'fixed')
@@ -26,7 +26,7 @@ const ProfileLinks = () => {
2626
const links = useMemo(() => getFixes(metadata), [])
2727
return (
2828
<div className="link">
29-
{makeLink({ url: '/blog', name: BLOG.labels.default||'posts' })}
29+
{makeLink({ url: '/blog', name: Configs.labels.default })}
3030
{links.map(link => makeLink(link))}
3131

3232
<style jsx>{`

‎lib/components/profile.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
22
import { Row, useTheme, User, Link } from '@zeit-ui/react'
33
import NextLink from 'next/link'
44
import ProfileLinks from './profile-links'
5-
import BLOGfrom '../../blog.config'
5+
import {Configs}from '../utils'
66

77
const Profile = React.memo(({
88
}) => {
@@ -20,9 +20,7 @@ const Profile = React.memo(({
2020
<Row align="bottom" className="user">
2121
<NextLink href="/" passHref>
2222
<Link pure>
23-
<User src="/assets/avatar.png" name={BLOG.author || ''}>
24-
{BLOG.summary || ''}
25-
</User>
23+
<User src="/assets/avatar.png" name={Configs.author}>{Configs.summary}</User>
2624
</Link>
2725
</NextLink>
2826
</Row>

‎lib/components/title.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React, { useMemo } from 'react'
22
import { msToString } from '../data-transform'
33
import { Image, useTheme } from '@zeit-ui/react'
4-
import BLOG from '../../blog.config'
54
import { useRouter } from 'next/router'
5+
import { Configs } from '../utils'
66

77
const DateDisplay = ({ date }) => {
88
const theme = useTheme()
99
const d = useMemo(() => new Date(date), [])
1010
if (`${d}` === 'Invalid Date') return null
1111
const time = Date.now() - d.getTime()
12-
const locale = BLOG.cn ? 'zh-cn' : 'en-us'
12+
const locale = Configs.isCN() ? 'zh-cn' : 'en-us'
1313

1414
return (
1515
<p>
@@ -61,9 +61,9 @@ const Title = ({
6161
}) => {
6262
const theme = useTheme()
6363
const { asPath } = useRouter()
64-
const showViews = useMemo(() => BLOG.enableViews, [])
64+
const showViews = useMemo(() => Configs.enableViews, [])
6565
const url = useMemo(() => {
66-
const suffix = BLOG.cn ? '%20阅读' : '%20views'
66+
const suffix = Configs.isCN() ? '%20阅读' : '%20views'
6767
const params = 'size=12&fill=999999&family=Menlo,%20Monaco,%20Lucida%20Console,%20Liberation%20Mono'
6868
return `https://views.show/svg?key=${asPath}&suffix=${suffix}&${params}`
6969
}, [asPath])

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /