Skip to content

Commit 64d6d61

Browse files
ndthanhdevndthanhdev
authored
add build number (#29)
1 parent b44c2be commit 64d6d61

16 files changed

Lines changed: 110 additions & 71 deletions

File tree

‎.yarn/cache/@types-luxon-npm-3.4.2-092583f006-fd89566e30.zip‎

28.8 KB
Binary file not shown.

‎.yarn/install-state.gz‎

2.75 KB
Binary file not shown.

‎app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
},
5252
"devDependencies": {
5353
"@sindresorhus/slugify": "^2.2.1",
54+
"@types/luxon": "^3.4.2",
5455
"@types/node": "^20.11.25",
5556
"@types/ramda": "^0.29.11",
5657
"@types/react": "^18.2.64",

‎app/src/components/organisms/app-footer/index.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
import { Box, Divider, Link } from "@mui/material";
22
import GitHubIcon from "@mui/icons-material/GitHub";
3+
import Typography from "@mui/material/Typography";
34
import { styles } from "./styles";
45

5-
export type AppFooterProps = React.PropsWithChildren<{}>;
6+
export type AppFooterProps = React.PropsWithChildren<{
7+
year: string;
8+
buildNumber: string;
9+
rev: string;
10+
}>;
611

7-
export const AppFooter = ({}: AppFooterProps) => {
12+
export const AppFooter = ({ year, buildNumber, rev }: AppFooterProps) => {
813
return (
914
<Box css={styles.root}>
1015
<Divider />
1116
<Box css={styles.contentContainer}>
12-
<Box css={styles.contentWrapper}>
13-
<Box css={styles.leftWrapper}>{"Made with ❤️ by me"}</Box>
14-
<Box css={styles.centerWrapper}></Box>
17+
<Box css={styles.topWrapper}>
18+
<Box css={styles.leftWrapper}>
19+
<Typography variant="caption">{`Copyright © ${year}`}</Typography>
20+
<Typography variant="caption">{`Build: ${buildNumber}`}</Typography>
21+
<Typography variant="caption">{`Rev: ${rev}`}</Typography>
22+
</Box>
1523
<Box css={styles.rightWrapper}>
1624
<Link
1725
target="_blank"

‎app/src/components/organisms/app-footer/styles.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,26 +15,26 @@ export const styles = {
1515
justifyContent: "center",
1616
}),
1717

18-
contentWrapper: (theme: AppTheme) =>
18+
topWrapper: (theme: AppTheme) =>
1919
css({
20-
backgroundColor: theme.palette.background.paper,
2120
display: "flex",
2221
justifyContent: "space-between",
23-
alignItems: "center",
24-
marginInline: theme.spacing(8),
25-
marginBlockStart: theme.spacing(4),
26-
marginBlockEnd: theme.spacing(6),
27-
width: "100%",
22+
alignItems: "flex-start",
23+
paddingInline: theme.spacing(4),
24+
paddingBlockStart: theme.spacing(2),
25+
paddingBlockEnd: theme.spacing(8),
2826
maxWidth: theme.breakpoints.values.lg,
27+
width: "100%",
2928
}),
3029

3130
leftWrapper: (theme: AppTheme) =>
3231
css({
3332
display: "flex",
34-
justifyContent: "flex-start",
33+
flexDirection: "column",
34+
alignItems: "flex-start",
35+
color: theme.palette.text.secondary,
3536
}),
36-
centerWrapper: (theme: AppTheme) =>
37-
css({ display: "flex", justifyContent: "center" }),
37+
3838
rightWrapper: (theme: AppTheme) =>
3939
css({
4040
display: "flex",

‎app/src/hooks/use-main-template-props.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { MainTemplateProps } from "@/components/templates/main";
2+
import { useAppDrawerStore } from "@/stores/use-app-drawer-store";
3+
import { useThemeModeStore } from "@/stores/use-theme-mode-store";
4+
import { envs } from "@/utils/envs";
5+
import { DateTime } from "luxon";
6+
import * as React from "react";
7+
8+
export const useMainTemplateProps = (): MainTemplateProps => {
9+
const drawer = useAppDrawerStore();
10+
const theme = useThemeModeStore();
11+
12+
const year = React.useMemo(() => DateTime.now().year.toString(), []);
13+
14+
return {
15+
appDrawerProps: {
16+
onClose: drawer.closeDrawer,
17+
open: drawer.open,
18+
themeMode: theme.themeMode,
19+
onThemeModeChange: (_, mode) => theme.setThemeMode(mode),
20+
},
21+
appHeaderProps: {
22+
onOpenSettings: drawer.openDrawer,
23+
themeMode: theme.themeMode,
24+
onToggleThemeMode: theme.toggleThemeMode,
25+
},
26+
appFooterProps: {
27+
year,
28+
buildNumber: envs.buildNumber,
29+
rev: envs.rev,
30+
},
31+
};
32+
};

‎app/src/pages/about.tsx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import Typography from "@mui/material/Typography";
55
import Container from "@mui/material/Container";
66
import { AppTheme } from "@/theme";
77
import { MainTemplate } from "@/components/templates/main";
8-
import { useAppDrawerStore } from "@/stores/use-app-drawer-store";
9-
import { useThemeModeStore } from "@/stores/use-theme-mode-store";
8+
import { useMainTemplateProps } from "@/hooks/use-main-template-props";
109

1110
const styles = {
1211
mainWrapper: (theme: AppTheme) =>
@@ -21,24 +20,10 @@ const styles = {
2120
};
2221

2322
function Index() {
24-
const drawer = useAppDrawerStore();
25-
const theme = useThemeModeStore();
23+
const mainTemplateProps = useMainTemplateProps();
2624

2725
return (
28-
<MainTemplate
29-
appDrawerProps={{
30-
onClose: drawer.closeDrawer,
31-
open: drawer.open,
32-
themeMode: theme.themeMode,
33-
onThemeModeChange: (_, mode) => theme.setThemeMode(mode),
34-
}}
35-
appHeaderProps={{
36-
onOpenSettings: drawer.openDrawer,
37-
themeMode: theme.themeMode,
38-
onToggleThemeMode: theme.toggleThemeMode,
39-
}}
40-
appFooterProps={{}}
41-
>
26+
<MainTemplate {...mainTemplateProps}>
4227
<Container maxWidth="lg">
4328
<Stack
4429
css={styles.mainWrapper}

‎app/src/pages/index.tsx‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,13 @@
11
import * as React from "react";
2-
import Stack from "@mui/material/Stack";
32
import { Wip } from "@/components/organisms/wip";
4-
import { useAppDrawerStore } from "@/stores/use-app-drawer-store";
5-
import { useThemeModeStore } from "@/stores/use-theme-mode-store";
63
import { MainTemplate } from "@/components/templates/main";
4+
import { useMainTemplateProps } from "@/hooks/use-main-template-props";
75

86
function Index() {
9-
const drawer = useAppDrawerStore();
10-
const theme = useThemeModeStore();
7+
const mainTemplateProps = useMainTemplateProps();
118

129
return (
13-
<MainTemplate
14-
appDrawerProps={{
15-
onClose: drawer.closeDrawer,
16-
open: drawer.open,
17-
themeMode: theme.themeMode,
18-
onThemeModeChange: (_, mode) => theme.setThemeMode(mode),
19-
}}
20-
appHeaderProps={{
21-
onOpenSettings: drawer.openDrawer,
22-
themeMode: theme.themeMode,
23-
onToggleThemeMode: theme.toggleThemeMode,
24-
}}
25-
appFooterProps={{}}
26-
>
10+
<MainTemplate {...mainTemplateProps}>
2711
<Wip />
2812
</MainTemplate>
2913
);

‎app/src/pages/projects.tsx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,13 @@
11
import * as React from "react";
22
import { Wip } from "@/components/organisms/wip";
3-
import { useAppDrawerStore } from "@/stores/use-app-drawer-store";
43
import { MainTemplate } from "@/components/templates/main";
5-
import { useThemeModeStore } from "@/stores/use-theme-mode-store";
4+
import { useMainTemplateProps } from "@/hooks/use-main-template-props";
65

76
function Projects() {
8-
const drawer = useAppDrawerStore();
9-
const theme = useThemeModeStore();
7+
const mainTemplateProps = useMainTemplateProps();
108

119
return (
12-
<MainTemplate
13-
appDrawerProps={{
14-
onClose: drawer.closeDrawer,
15-
open: drawer.open,
16-
themeMode: theme.themeMode,
17-
onThemeModeChange: (_, mode) => theme.setThemeMode(mode),
18-
}}
19-
appHeaderProps={{
20-
onOpenSettings: drawer.openDrawer,
21-
themeMode: theme.themeMode,
22-
onToggleThemeMode: theme.toggleThemeMode,
23-
}}
24-
appFooterProps={{}}
25-
>
10+
<MainTemplate {...mainTemplateProps}>
2611
<Wip />
2712
</MainTemplate>
2813
);

‎app/src/utils/envs.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const buildNumber = process.env.GATSBY_BUILD_NUMBER || "local";
2+
const rev = process.env.GATSBY_REV || "local";
3+
4+
export const envs = { buildNumber, rev };

0 commit comments

Comments
 (0)