Skip to content

Commit 427be3a

Browse files
ansidevansidev
authored
Merge pull request #18 from ansidev/feature/component-app-footer
Feature: Component AppFooter
2 parents 678bd5d + 49c9609 commit 427be3a

File tree

6 files changed

+92
-8
lines changed

6 files changed

+92
-8
lines changed

‎src/components/AppFooter.astro‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
import CounterAnalytics from '@/components/analytics/CounterAnalytics.astro'
3+
import GoogleAnalytics from '@/components/analytics/GoogleAnalytics.astro'
4+
import Swetrix from '@/components/analytics/Swetrix.astro'
5+
import Icon from '@/components/Icon.astro'
6+
import siteConfig from '@/configs/site'
7+
import { getPluginConfig, isPluginEnabled } from '@/utils/plugin'
8+
9+
const { author } = siteConfig
10+
const { name, nickname, email, homepage, github, twitter, telegram, reddit } =
11+
author
12+
const socialNetworks: Record<string, string> = {
13+
github,
14+
twitter,
15+
telegram,
16+
reddit,
17+
}
18+
---
19+
20+
<footer class="my-9 text-primary">
21+
<div class="flex justify-center items-center mb-3">
22+
<a href={`mailto:${email}`} class="footer-icon">
23+
<Icon name={'bi:envelope-fill'} size={32} />
24+
</a>
25+
{
26+
Object.keys(socialNetworks).map((network: string) => (
27+
<a href={socialNetworks[network]} class="footer-icon">
28+
<Icon name={`bi:${network}`} size={32} />
29+
</a>
30+
))
31+
}
32+
</div>
33+
<div class="flex justify-center items-center">
34+
Built with
35+
<span class="px-2">
36+
<Icon name="bi:suit-heart-fill" />
37+
</span>
38+
by
39+
<span class="px-2">
40+
<a href={homepage}>{nickname} ({name})</a>.
41+
</span>
42+
</div>
43+
</footer>
44+
{
45+
isPluginEnabled('googleAnalytics') ? (
46+
<GoogleAnalytics {...getPluginConfig('googleAnalytics')} />
47+
) : (
48+
''
49+
)
50+
}
51+
{isPluginEnabled('swetrix') ? <Swetrix {...getPluginConfig('swetrix')} /> : ''}
52+
{
53+
isPluginEnabled('counterAnalytics') ? (
54+
<CounterAnalytics {...getPluginConfig('counterAnalytics')} />
55+
) : (
56+
''
57+
)
58+
}
59+
60+
<style>
61+
a.footer-icon {
62+
@apply text-primary hover:text-secondary mx-1;
63+
}
64+
</style>

‎src/components/AppHeader.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Icon from './Icon.astro'
88
export interface Props extends HTMLAttributes<'svg'> {}
99
1010
const { ...props } = Astro.props
11-
const { title, description, authorAvatar } = siteConfig
11+
const { title, description, author } = siteConfig
1212
---
1313

1414
<div class="header-container">
@@ -22,7 +22,7 @@ const { title, description, authorAvatar } = siteConfig
2222
<div class="header-logo mr-3">
2323
<a href="/">
2424
<img
25-
src={authorAvatar}
25+
src={author.avatar}
2626
alt="Author's avatar"
2727
class="rounded-full"
2828
style="margin-bottom: 0 !important;"

‎src/configs/site.ts‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,29 @@ const env = process.env
33
export default {
44
title: 'LeetCode Blog',
55
description: 'Solutions for LeetCode problems - Written by ansidev',
6-
author: 'ansidev',
7-
authorAvatar: '/ansidev.png',
6+
author: {
7+
name: 'Le Minh Tri',
8+
nickname: 'ansidev',
9+
email: 'ansidev@gmail.com',
10+
avatar: '/ansidev.png',
11+
homepage: 'https://ansidev.xyz',
12+
github: 'https://github.com/ansidev',
13+
twitter: 'https://twitter.com/ansidev',
14+
telegram: 'https://t.me/ansidev',
15+
reddit: 'https://reddit.com/u/ansidev',
16+
},
817
favicon: '/favicon.ico',
918
faviconMimeType: 'image/x-icon',
1019
plugins: {
1120
counterAnalytics: {
12-
pid: env.COUNTER_ANALYTICS_ID,
21+
projectId: env.COUNTER_ANALYTICS_ID,
22+
utcOffset: 7,
1323
},
1424
googleAnalytics: {
15-
id: env.GA_ID,
25+
projectId: env.GA_ID,
1626
},
1727
swetrix: {
18-
pid: env.SWETRIX_ID,
28+
projectId: env.SWETRIX_ID,
1929
},
2030
}
2131
}

‎src/layouts/AppLayout.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import AppFooter from '@/components/AppFooter.astro'
23
import AppHeader from '@/components/AppHeader.astro'
34
import SEOMeta from '@/components/SEOMeta.astro'
45
import siteConfig from '@/configs/site'
@@ -30,5 +31,6 @@ const pageDescription =
3031
<body class="max-w-8xl mx-auto bg-site-bg">
3132
<AppHeader class={headerCssClasses} />
3233
<slot />
34+
<AppFooter />
3335
</body>
3436
</html>

‎src/pages/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const { title, description, author } = siteConfig
99
<AppLayout
1010
title={title}
1111
description={description}
12-
author={author}
12+
author={author.name}
1313
headerCssClasses="max-w-xl px-8"
1414
>
1515
<main class="mx-auto my-4 p-4 max-w-2xl text-site-header-text">

‎src/utils/plugin.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import _get from 'lodash.get'
2+
3+
import siteConfig from '@/configs/site'
4+
5+
const { plugins } = siteConfig
6+
7+
export const isPluginEnabled = (pluginName: string) => typeof _get(plugins, pluginName) === 'object'
8+
export const getPluginConfig = (key: string) => _get(plugins, key)

0 commit comments

Comments
 (0)