Skip to content

Commit 7d4e261

Browse files
naoidonaoido
authored
Merge pull request #85 from object-t/release/1.0.0
Release/1.0.0
2 parents fdaaf8e + 35436a7 commit 7d4e261

File tree

10 files changed

+237
-74
lines changed

10 files changed

+237
-74
lines changed

‎app/components/Drawer/Drawer.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
44
import { LanguageButton } from '../LanguageButton/LanguageButton';
55
import styles from './drawer.module.css';
66
import { useTranslation } from 'react-i18next';
7+
import { useLocation } from 'react-router';
78

89
export interface DrawerProps {
910
links: Record<'label' | 'to', string>[];
@@ -26,20 +27,29 @@ export const Drawer = ({
2627
}: DrawerProps) => {
2728
const [open, setOpen] = useState(false);
2829
const { t } = useTranslation();
30+
31+
const location = useLocation();
32+
const isHome = location.pathname === '/';
2933

3034
useEffect(() => {
3135
document.documentElement.style.overflow = open ? 'hidden' : '';
3236
}, [open]);
3337

3438
return (
3539
<div>
36-
<div {...props} onClick={() => setOpen(true)} className={[open ? styles.hidden : '', styles.trigger].join(" ")}>
40+
<div
41+
{...props}
42+
onClick={() => setOpen(true)}
43+
className={[open ? styles.hidden : '', styles.trigger, isHome ? styles.isHome : styles.isOther].join(" ")}
44+
>
3745
{children}
3846
</div>
3947
<div className={[styles.drawer, open ? styles['drawer-opened']: ''].join(" ")}>
4048
<div className={styles['button-container']}>
4149
<FontAwesomeIcon icon={faXmark} className={`${styles.close}`} onClick={() => setOpen(false)}/>
42-
<LanguageButton className={styles.lang}/>
50+
{
51+
isHome && <LanguageButton className={styles.lang}/>
52+
}
4353
</div>
4454
<div className={styles['link-container']}>
4555
<h2>{t("header.links")}</h2>

‎app/components/Drawer/drawer.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@
2121
opacity: 0;
2222
}
2323

24+
.isHome {
25+
color: var(--accent-color);
26+
}
27+
28+
.isOther {
29+
color: var(--grey-text-color);
30+
}
31+
2432
.button-container {
2533
width: auto;
2634
height: max-content;

‎app/components/Header/Header.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
33
import { Header } from './Header';
44

55
const meta = {
6-
title: 'Example/Header',
6+
title: 'Common/Header',
77
component: Header,
88
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
99
tags: ['autodocs'],

‎app/components/Header/Header.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { faBars } from '@fortawesome/free-solid-svg-icons';
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
44
import { useCallback, useEffect, useRef, useState } from 'react';
5-
import { useNavigate } from 'react-router';
5+
import { useLocation, useNavigate } from 'react-router';
66
import { useIsMobile } from '~/hooks/useIsMobile';
77
import { Drawer } from '../Drawer/Drawer';
88
import { HeaderLink } from '../HeaderLink/HeaderLink';
@@ -42,6 +42,9 @@ export const Header = () => {
4242
const ignoreScroll = useRef<boolean>(false);
4343
const ignoreTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
4444

45+
const location = useLocation();
46+
const isHome = location.pathname === '/';
47+
4548
const navigate = useNavigate();
4649

4750
const handleScroll = useCallback(() => {
@@ -129,7 +132,9 @@ export const Header = () => {
129132
to={header.to}/>
130133
))
131134
}
132-
<LanguageButton className={styles['language-button']}/>
135+
{
136+
isHome && <LanguageButton className={styles['language-button']}/>
137+
}
133138
</header>
134139
)
135140
}

‎app/components/Header/header.module.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,5 +36,4 @@ header {
3636
.bars {
3737
font-size: 42px;
3838
transition: opacity 0.5s ease, transform 0.5s ease;
39-
color: var(--accent-color);
4039
}

‎app/components/LinkedButton/LinkedButton.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@ import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
33
import { useTranslation } from "react-i18next";
44
import './LinkedButton.css';
5+
import type { ReactNode } from "react";
56

67
export interface LinkedButtonProps {
78
url: string;
89
label: TemplateLabel | string;
910
backgroundColor?: string;
1011
color?: string;
1112
style?: "default" | "outlined";
13+
children?: ReactNode;
14+
buttonLocation?: "left" | "right";
15+
isNewTab?: boolean;
1216
}
1317

1418
export type TemplateLabel = 'detail' | 'list';
@@ -24,11 +28,16 @@ export const LinkedButton = ({
2428
backgroundColor = "var(--primery-color)",
2529
color = "var(--accent-color)",
2630
style = "default",
31+
children,
32+
buttonLocation,
33+
isNewTab = true,
2734
...props
2835
}: LinkedButtonProps) => {
2936
const { t } = useTranslation();
3037
const displayLabel = label in templateLabel ? t(templateLabel[label as TemplateLabel]) : label
3138

39+
const targetProps = isNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
40+
3241
const linkStyle = {
3342
backgroundColor: style === "default" ? backgroundColor : "transparent",
3443
color: backgroundColor,
@@ -46,9 +55,14 @@ export const LinkedButton = ({
4655
};
4756

4857
return (
49-
<a href={url} className="Button-link" style={linkStyle} target="_blank" rel="noopener noreferrer" {...props}>
58+
<a href={url} className="Button-link" style={linkStyle} {...targetProps} {...props}>
59+
{
60+
(buttonLocation === "left" && children) ?? <FontAwesomeIcon icon={faArrowUpRightFromSquare} style={{ color: wordStyle.color, fontSize: 22.33 }} />
61+
}
5062
<span className="Button-label" style={wordStyle}>{displayLabel}</span>
51-
<FontAwesomeIcon icon={faArrowUpRightFromSquare} style={{ color: wordStyle.color, fontSize: 22.33 }} />
63+
{
64+
((buttonLocation ?? "right") === "right" && children) ?? <FontAwesomeIcon icon={faArrowUpRightFromSquare} style={{ color: wordStyle.color, fontSize: 22.33 }} />
65+
}
5266
</a>
5367
);
5468
}

‎app/routes/blog/$id.module.scss‎

Lines changed: 138 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,147 @@
77
justify-content: center;
88
background-color: #F5F5F5;
99

10-
.article {
11-
padding-top: 64px;
12-
width: 100%;
13-
max-width: 1200px;
14-
}
15-
1610
.side {
1711
padding-top: 200px;
1812
width: 20%;
13+
14+
&.mobile {
15+
border-radius: 4px;
16+
margin-top: 64px;
17+
padding-top: 20px;
18+
width: 100%;
19+
20+
.h1-table {
21+
color: #616161;
22+
}
23+
.h2-table {
24+
color: #8a8a8a;
25+
26+
& > li {
27+
padding-left: 24px;
28+
border-left: solid 1px #8a8a8a;
29+
}
30+
31+
&::before {
32+
content: "";
33+
display: block;
34+
position: absolute;
35+
height: 50%;
36+
width: 12px;
37+
border-bottom: solid 1px #8a8a8a;
38+
}
39+
40+
&:not(:has(+ .h2-table)) {
41+
42+
&::before {
43+
border-left: solid 1px #8a8a8a;
44+
}
45+
46+
& li {
47+
border-left: none;
48+
}
49+
}
50+
}
51+
}
52+
53+
ul {
54+
top: 200px;
55+
list-style: none;
56+
position: sticky;
57+
58+
a {
59+
position: relative;
60+
61+
li {
62+
margin: 0;
63+
padding-top: 4px;
64+
padding-bottom: 4px;
65+
font-size: 16px;
66+
}
67+
}
68+
}
1969
}
20-
21-
ul {
22-
top: 200px;
23-
list-style: none;
24-
position: sticky;
25-
}
26-
27-
li {
28-
font-size: 16px;
29-
}
30-
70+
3171
.h1-table {
3272
color: #616161;
3373
}
3474
.h2-table {
3575
color: #8a8a8a;
36-
li {
76+
77+
& > li {
3778
padding-left: 24px;
79+
border-left: solid 1px #8a8a8a;
80+
}
81+
82+
&::before {
83+
content: "";
84+
display: block;
85+
position: absolute;
86+
height: 50%;
87+
width: 12px;
88+
border-bottom: solid 1px #8a8a8a;
89+
}
90+
91+
&:not(:has(+ .h2-table)) {
92+
93+
&::before {
94+
border-left: solid 1px #8a8a8a;
95+
}
96+
97+
& li {
98+
border-left: none;
99+
}
100+
}
101+
}
102+
103+
.article {
104+
padding-top: 64px;
105+
width: 100%;
106+
max-width: 1200px;
107+
108+
h1 {
109+
color: var(--main-text-color);
110+
font-weight: 900;
111+
font-size: 52px;
112+
}
113+
114+
h2 {
115+
color: var(--main-text-color);
116+
font-weight: 700;
117+
font-size: 32px;
118+
}
119+
120+
h3 {
121+
color: var(--main-text-color);
122+
font-weight: 600;
123+
font-size: 24px;
124+
}
125+
126+
h1, h2, h3, h4, h5, h6 {
127+
padding-left: 8px;
128+
padding-bottom: 4px;
129+
margin-bottom: 24px;
130+
margin-top: 24px;
131+
position: relative;
132+
color: var(--main-text-color);
133+
text-box-edge: cap alphabetic;
134+
}
135+
136+
h1::before, h2::before {
137+
content: "";
138+
position: absolute;
139+
display: block;
140+
left: -24px;
141+
width: 12px;
142+
height: 100%;
143+
background-color: var(--primery-color);
144+
}
145+
146+
p {
147+
color: var(--main-text-color);
148+
letter-spacing: 2px;
149+
font-size: 20px;
150+
margin: 20px 0;
38151
}
39152
}
40153

@@ -47,6 +160,13 @@
47160
justify-content: center;
48161
align-items: center;
49162
flex-direction: column;
163+
164+
.backButton {
165+
width: 100%;
166+
display: flex;
167+
justify-content: start;
168+
margin-bottom: 24px;
169+
}
50170
}
51171

52172
.header-img {
@@ -56,51 +176,6 @@
56176
border-radius: 12px;
57177
box-shadow: 0 10px 10px #20202011;
58178
}
59-
60-
h1 {
61-
color: var(--main-text-color);
62-
font-weight: 900;
63-
font-size: 52px;
64-
}
65-
66-
h2 {
67-
color: var(--main-text-color);
68-
font-weight: 700;
69-
font-size: 32px;
70-
}
71-
72-
h3 {
73-
color: var(--main-text-color);
74-
font-weight: 600;
75-
font-size: 24px;
76-
}
77-
78-
h1, h2, h3, h4, h5, h6 {
79-
padding-left: 8px;
80-
padding-bottom: 4px;
81-
margin-bottom: 24px;
82-
margin-top: 24px;
83-
position: relative;
84-
color: var(--main-text-color);
85-
text-box-edge: cap alphabetic;
86-
}
87-
88-
h1::before, h2::before {
89-
content: "";
90-
position: absolute;
91-
display: block;
92-
left: -24px;
93-
width: 12px;
94-
height: 100%;
95-
background-color: var(--primery-color);
96-
}
97-
98-
p {
99-
color: var(--main-text-color);
100-
letter-spacing: 2px;
101-
font-size: 20px;
102-
margin: 20px 0;
103-
}
104179
}
105180

106181
@media screen and (max-width: 700px) {

0 commit comments

Comments
 (0)