Skip to content

Commit e66974c

Browse files
unickhowunickhow
committed
💡 feat: add customization, rename colors
1 parent 16cfe2c commit e66974c

File tree

7 files changed

+107
-25
lines changed

7 files changed

+107
-25
lines changed

‎public/favicon.svg

+3-3
Loading

‎src/App.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<span
2424
v-for="tabName in tabs"
2525
class="py-2 px-4 bg-gray-300 opacity-30 rounded-t-md cursor-pointer"
26-
:class="{ 'bg-white !opacity-100 color-[#f19f19]': tab === tabName }"
26+
:class="{ 'bg-white !opacity-100 color-[#ff7a00]': tab === tabName }"
2727
@click="tab = tabName">{{ tabName }}</span>
2828
</div>
2929

@@ -72,7 +72,7 @@ provide('username', username)
7272
left: -.25rem;
7373
width: 80px;
7474
height: .8rem;
75-
background: #F19F19;
75+
background: #ff7a00;
7676
opacity: .6;
7777
z-index: -1;
7878
}
@@ -93,6 +93,6 @@ html, body {
9393
}
9494
9595
.is-btn:active svg {
96-
color: #F19F19;
96+
color: #ff70aa;
9797
}
9898
</style>

‎src/components/RepoCard/index.vue

+39-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="repo-card">
33
<CardBlock title="Repository name" class="field--username">
44
<template #icon>
5-
<octiconRepo class="mr-2 text-[#F19F19]" />
5+
<octiconRepo class="mr-2 text-[#ff7a00]" />
66
</template>
77
<div class="flex items-center text-gray-600">
88
<input type="text" autofocus v-model.trim="repoName" class="is-input w-[150px]" @keyup.enter="handleGenerate">
@@ -11,7 +11,7 @@
1111

1212
<CardBlock title="Others" class="field--others">
1313
<template #icon>
14-
<icRoundDashboardCustomize class="mr-2 text-[#F19F19]" />
14+
<icRoundDashboardCustomize class="mr-2 text-[#ff7a00]" />
1515
</template>
1616
<div>
1717
<label class="cursor-pointer text-gray-600">
@@ -25,6 +25,22 @@
2525
</div>
2626
</CardBlock>
2727

28+
<CardBlock title="Customization" class="field--customization">
29+
<template #icon>
30+
<gridiconsCustomize class="mr-2 text-[#ff7a00]" />
31+
</template>
32+
<div v-for="(prop, key) in customization" :key="key" class="mb-2">
33+
<label class="cursor-pointer text-gray-600 inline-flex items-center">
34+
<input
35+
type="checkbox"
36+
class="mr-2"
37+
v-model="prop.isChecked">
38+
<span>{{ caseConvert(key) }}</span>
39+
<input type="text" class="ml-2" v-model="prop.value">
40+
</label>
41+
</div>
42+
</CardBlock>
43+
2844
<ThemePreview v-model:theme="selectedTheme" category="repo" />
2945

3046
<MdPreview :apiUrl="assembledApi" />
@@ -50,23 +66,44 @@ import octiconRepo from '~icons/octicon/repo'
5066
import mdiCardAccountDetailsStarOutline from '~icons/mdi/card-account-details-star-outline';
5167
import fluentArrowReset24Filled from '~icons/fluent/arrow-reset-24-filled';
5268
import icRoundDashboardCustomize from '~icons/ic/round-dashboard-customize'
69+
import gridiconsCustomize from '~icons/gridicons/customize'
5370
import { useThrottleFn } from '@vueuse/core'
5471
import CardBlock from '../cardBlock.vue'
5572
import MdPreview from '../mdPreview.vue'
5673
import ThemePreview from '../themePreview.vue'
74+
import caseConvert from '../../utils/caseConvert'
5775
5876
const username = inject('username', '') as any
5977
const repoName = ref('')
6078
const shouldShowOwner = ref(false)
6179
const selectedTheme = ref('default_repocard')
6280
81+
const initCustomization = () => ({
82+
cache_seconds: {
83+
isChecked: false,
84+
value: 1800,
85+
},
86+
border_radius: {
87+
isChecked: false,
88+
value: 0
89+
}
90+
})
91+
const customization = ref(initCustomization())
92+
6393
const allQueries = computed(() => {
6494
let str: string[] = [`username=${username.value}`, `repo=${repoName.value}`]
6595
6696
if (shouldShowOwner.value) {
6797
str.push('show_owner=true')
6898
}
6999
100+
// customization
101+
for (const [key, prop] of Object.entries(customization.value)) {
102+
if (prop.isChecked) {
103+
str.push(`${key}=${prop.value}`)
104+
}
105+
}
106+
70107
if (selectedTheme.value !== 'default_repocard') str.push(`theme=${selectedTheme.value}`)
71108
72109
return str.join('&')

‎src/components/StatsCard/index.vue

+56-15
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="stats-card">
33
<CardBlock title="Hiding Stats" class="field--hiding-stats">
44
<template #icon>
5-
<bxHide class="mr-2 text-[#F19F19]" />
5+
<bxHide class="mr-2 text-[#ff7a00]" />
66
</template>
77
<div v-for="(value, key) in Stats" :key="key" class="mb-2">
88
<label class="cursor-pointer text-gray-600">
@@ -18,7 +18,7 @@
1818
</CardBlock>
1919
<CardBlock title="Others" class="field--others">
2020
<template #icon>
21-
<icRoundDashboardCustomize class="mr-2 text-[#F19F19]" />
21+
<icRoundDashboardCustomize class="mr-2 text-[#ff7a00]" />
2222
</template>
2323
<div v-for="(value, key) in boolFlags" :key="key" class="mb-2">
2424
<label class="cursor-pointer text-gray-600">
@@ -32,9 +32,25 @@
3232
</div>
3333
</CardBlock>
3434

35+
<CardBlock title="Colors" class="field--colors">
36+
<template #icon>
37+
<icBaselineStyle class="mr-2 text-[#ff7a00]" />
38+
</template>
39+
<div v-for="(prop, key) in colors" :key="key" class="mb-2">
40+
<label class="cursor-pointer text-gray-600 inline-flex items-center">
41+
<input
42+
type="checkbox"
43+
class="mr-2"
44+
v-model="prop.isChecked">
45+
<span>{{ caseConvert(key) }}</span>
46+
<input type="color" class="ml-2" v-model="prop.hex">
47+
</label>
48+
</div>
49+
</CardBlock>
50+
3551
<CardBlock title="Customization" class="field--customization">
3652
<template #icon>
37-
<icBaselineStyle class="mr-2 text-[#F19F19]" />
53+
<gridiconsCustomize class="mr-2 text-[#ff7a00]" />
3854
</template>
3955
<div v-for="(prop, key) in customization" :key="key" class="mb-2">
4056
<label class="cursor-pointer text-gray-600 inline-flex items-center">
@@ -43,7 +59,7 @@
4359
class="mr-2"
4460
v-model="prop.isChecked">
4561
<span>{{ caseConvert(key) }}</span>
46-
<input type="color" class="ml-2" v-model="prop.hex">
62+
<input type="text" class="ml-2" v-model="prop.value">
4763
</label>
4864
</div>
4965
</CardBlock>
@@ -74,10 +90,12 @@ import icBaselineStyle from '~icons/ic/baseline-style'
7490
import bxHide from '~icons/bx/hide'
7591
import icRoundDashboardCustomize from '~icons/ic/round-dashboard-customize'
7692
import fluentArrowReset24Filled from '~icons/fluent/arrow-reset-24-filled'
93+
import gridiconsCustomize from '~icons/gridicons/customize'
7794
import { useThrottleFn } from '@vueuse/core'
7895
import CardBlock from '../cardBlock.vue'
7996
import MdPreview from '../mdPreview.vue'
8097
import ThemePreview from '../themePreview.vue'
98+
import caseConvert from '../../utils/caseConvert'
8199
82100
const username = inject('username', '') as any
83101
@@ -96,11 +114,32 @@ const initFlags = () => ({
96114
hide_title: false,
97115
hide_rank: false,
98116
include_all_commits: false,
99-
disable_animations: false
117+
disable_animations: false,
118+
hide_border: false
100119
})
101120
const boolFlags = ref(initFlags())
102121
103-
const initCustomize = () => ({
122+
const initCustomization = () => ({
123+
cache_seconds: {
124+
isChecked: false,
125+
value: 1800,
126+
},
127+
border_radius: {
128+
isChecked: false,
129+
value: 0
130+
},
131+
line_height: {
132+
isChecked: false,
133+
value: 16
134+
},
135+
custom_title: {
136+
isChecked: false,
137+
value: ''
138+
}
139+
})
140+
const customization = ref(initCustomization())
141+
142+
const initColors = () => ({
104143
title_color: {
105144
isChecked: false,
106145
hex: '#000000'
@@ -122,7 +161,7 @@ const initCustomize = () => ({
122161
hex: '#000000'
123162
}
124163
})
125-
const customization = ref(initCustomize())
164+
const colors = ref(initColors())
126165
const selectedTheme = ref('default')
127166
128167
const allQueries = computed(() => {
@@ -141,10 +180,17 @@ const allQueries = computed(() => {
141180
}
142181
}
143182
183+
// colors
184+
for (const [key, prop] of Object.entries(colors.value)) {
185+
if (prop.isChecked) {
186+
str.push(`${key}=${prop.hex.substr(1)}`)
187+
}
188+
}
189+
144190
// customization
145191
for (const [key, prop] of Object.entries(customization.value)) {
146192
if (prop.isChecked) {
147-
str.push(`${key}=${prop.hex.substr(1)}`)
193+
str.push(`${key}=${prop.value}`)
148194
}
149195
}
150196
@@ -154,11 +200,6 @@ const allQueries = computed(() => {
154200
return str.join('&')
155201
})
156202
157-
const caseConvert = (str: string) => {
158-
const sentence = str.split('_')
159-
return sentence.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
160-
}
161-
162203
const assembledApi = computed(() => `https://github-readme-stats.vercel.app/api?${allQueries.value}`)
163204
164205
const imgSrc = ref('https://via.placeholder.com/495x195.png?text=check+your+username')
@@ -168,11 +209,11 @@ const handleGenerate = useThrottleFn(() => {
168209
}, 1000, false)
169210
170211
const emit = defineEmits(['resetUserName'])
171-
const handleReset = () => {
212+
const handleReset = () => {
172213
emit('resetUserName')
173214
hidingStats.value = []
174215
boolFlags.value = initFlags()
175-
customization.value = initCustomize()
216+
colors.value = initColors()
176217
}
177218
</script>
178219

‎src/components/mdPreview.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<code class="mr-4 leading-normal">{{ props.apiUrl }}</code>
66
<button class="border-none p-1 bg-transparent ml-auto text-gray-400 cursor-pointer hover:text-gray-600" @click="handleCopyMd">
77
<lucideCopy v-show="!copied" />
8-
<mdiClipboardCheckOutline v-show="copied" class="color-[#F19F19]" />
8+
<mdiClipboardCheckOutline v-show="copied" class="color-[#ff7a00]" />
99
</button>
1010
</div>
1111
</div>

‎src/components/themePreview.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<CardBlock title="Theme" class="field--theme">
33
<template #icon>
4-
<mdiThemeLightDark class="mr-2 text-[#F19F19]" />
4+
<mdiThemeLightDark class="mr-2 text-[#ff7a00]" />
55
</template>
66
<div class="mb-2">
77
<label class="cursor-pointer text-gray-600 inline-flex items-center">

‎src/utils/caseConvert.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default (str: string) => {
2+
const sentence = str.split('_')
3+
return sentence.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
4+
}

0 commit comments

Comments
 (0)