Skip to content

Commit e4e2a61

Browse files
rishavanandrishavanand
committed
styling and bug fixes
1 parent 53d1c9b commit e4e2a61

6 files changed

Lines changed: 189 additions & 58 deletions

File tree

‎gatsby-config.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,28 @@ module.exports = {
5252
{
5353
resolve: `gatsby-plugin-google-analytics`,
5454
options: {
55-
trackingId: "UA-174597578-1",
55+
trackingId: 'UA-174597578-1',
5656
head: false,
5757
},
5858
},
59+
{
60+
resolve: 'gatsby-plugin-antd',
61+
options: {
62+
style: true,
63+
},
64+
},
65+
{
66+
resolve: `gatsby-plugin-less`,
67+
options: {
68+
lessOptions: {
69+
modifyVars: {
70+
'primary-color': '#1853db',
71+
'link-color': '#1853db',
72+
'border-radius-base': '4px',
73+
},
74+
javascriptEnabled: true,
75+
},
76+
},
77+
},
5978
],
6079
};

‎package-lock.json‎

Lines changed: 120 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
"emoji-mart": "^3.0.0",
1515
"gatsby": "^2.24.15",
1616
"gatsby-image": "^2.4.14",
17+
"gatsby-plugin-antd": "^2.2.0",
1718
"gatsby-plugin-google-analytics": "^2.3.13",
19+
"gatsby-plugin-less": "^5.0.0",
1820
"gatsby-plugin-manifest": "^2.4.21",
1921
"gatsby-plugin-offline": "^3.2.21",
2022
"gatsby-plugin-react-helmet": "^3.3.10",

‎src/components/Field/SkillsField.tsx‎

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ export const SkillsField = ({
6565
fieldProps: SkillsFieldProps;
6666
modifyField: (filedProps: SkillsFieldProps) => void;
6767
}) => {
68-
6968
const [searchValue, setSearchValue] = useState('');
7069

7170
const screens = useBreakpoint();
@@ -83,29 +82,26 @@ export const SkillsField = ({
8382
};
8483

8584
const onChange = event => {
86-
8785
const name = event.target.value;
8886
const isChecked = event.target.checked;
8987
let currentSkillsList = localSkillsFieldProps.data.list;
90-
91-
if(isChecked) {
92-
currentSkillsList.push(name);
93-
}
94-
else {
95-
currentSkillsList = currentSkillsList.filter(skill => skill !== name);
88+
89+
if (isChecked) {
90+
currentSkillsList.push(name);
91+
} else {
92+
currentSkillsList = currentSkillsList.filter(skill => skill !== name);
9693
}
9794

9895
localSkillsFieldProps.data.list = currentSkillsList as string[];
9996

10097
modifyField({
10198
...localSkillsFieldProps,
10299
});
103-
104100
};
105101

106102
const onSearch = value => {
107103
setSearchValue(value);
108-
}
104+
};
109105

110106
const changeSize = (size: typeof localSkillsFieldProps.options.size) => {
111107
const localProps = { ...localSkillsFieldProps };
@@ -132,12 +128,7 @@ export const SkillsField = ({
132128
<>
133129
<Row justify="space-between" style={{ marginBottom: 30 }}>
134130
<Col>
135-
<Search
136-
placeholder="Search Skills..."
137-
allowClear
138-
onSearch={onSearch}
139-
style={{ width: 180 }}
140-
/>
131+
<Search placeholder="Search Skills..." allowClear onSearch={onSearch} style={{ width: 180 }} />
141132
</Col>
142133
<Col>
143134
<Dropdown overlay={sizeMenu}>
@@ -154,23 +145,23 @@ export const SkillsField = ({
154145
</Dropdown>
155146
</Col>
156147
</Row>
157-
<Checkbox.Group
158-
defaultValue={localSkillsFieldProps.data.list}
159-
style={{ width: '100%' }}
160-
>
148+
<Checkbox.Group defaultValue={localSkillsFieldProps.data.list} style={{ width: '100%' }}>
161149
<Row>
162150
{Object.values(SKILLS)
163-
.filter(
164-
skill => searchValue !== '' && searchValue !== undefined ?
165-
skill.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1 : true
166-
)
167-
.map(skill => {
168-
return (
169-
<Col span={skillsColSpan} key={skill.value}>
170-
<Checkbox onChange={onChange} value={skill.value}>{skill.label}</Checkbox>
171-
</Col>
172-
);
173-
})}
151+
.filter(skill =>
152+
searchValue !== '' && searchValue !== undefined
153+
? skill.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1
154+
: true,
155+
)
156+
.map(skill => {
157+
return (
158+
<Col span={skillsColSpan} key={skill.value}>
159+
<Checkbox onChange={onChange} value={skill.value}>
160+
{skill.label}
161+
</Checkbox>
162+
</Col>
163+
);
164+
})}
174165
</Row>
175166
</Checkbox.Group>
176167
</>

‎src/components/Preview.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
import React, { useContext, useState } from 'react';
2-
import { Row, Col, Divider, Typography, Button, Modal, Input, Card, Grid, Tooltip } from 'antd';
31
import { FireOutlined } from '@ant-design/icons';
4-
import { globalContext } from '../context/GlobalContextProvider';
5-
import { FIELD_TYPES } from '../config/global';
6-
import { generateTextFieldMarkdown } from './Field/TextField';
2+
import { faStar } from '@fortawesome/free-solid-svg-icons';
3+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4+
import { Button, Col, Divider, Grid, Input, Modal, Row, Tooltip, Typography } from 'antd';
75
import marked from 'marked';
6+
import React, { MutableRefObject, useContext, useState } from 'react';
7+
import { generateSectionTitleMarkdown } from '../components/Section';
8+
import { FIELD_TYPES } from '../config/global';
9+
import { globalContext } from '../context/GlobalContextProvider';
810
import styles from '../styles/preview.module.scss';
9-
import { generateImageFieldMarkdown } from './Field/ImageField';
1011
import { FieldProps, generateFieldTitleMarkdown } from './Field';
11-
import {
12-
SectionProps,
13-
generateSectionMarkdown as generateSectionMarkdownExt,
14-
generateColumnMarkdown as generateColumnMarkdownExt,
15-
} from './Section';
12+
import { generateBlogPostMarkdown } from './Field/BlogPostField';
1613
import { generateGithubReadmeStatsMarkdown } from './Field/GithubReadmeStatsField';
14+
import { generateImageFieldMarkdown } from './Field/ImageField';
15+
import { generateProfileVisitorCounterMarkdown } from './Field/ProfileVisitorCounterField';
1716
import { generateSkillsFieldMarkdown } from './Field/SkillsField';
1817
import { generateSocialFieldMarkdown } from './Field/SocialField';
19-
import { generateSectionTitleMarkdown } from '../components/Section';
20-
import { generateProfileVisitorCounterMarkdown } from './Field/ProfileVisitorCounterField';
21-
import { generateBlogPostMarkdown } from './Field/BlogPostField';
22-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
23-
import { faStar } from '@fortawesome/free-solid-svg-icons';
2418
import { generateSpotifyListeningToMarkdown } from './Field/SpotifyListeningTo';
2519
import { generateSupportMeMarkdown } from './Field/SupportMeToField';
20+
import { generateTextFieldMarkdown } from './Field/TextField';
21+
import {
22+
generateColumnMarkdown as generateColumnMarkdownExt,
23+
generateSectionMarkdown as generateSectionMarkdownExt,
24+
SectionProps,
25+
} from './Section';
2626

2727
const { Title } = Typography;
2828
const { TextArea } = Input;
2929
const { useBreakpoint } = Grid;
3030

31-
export const Preview = ({ scrollRef }: { scrollRef: string }) => {
31+
export const Preview = ({ scrollRef }: { scrollRef: MutableRefObject<any> }) => {
3232
const context = useContext(globalContext);
3333
const [showMarkdown, setShowMarkdown] = useState(false);
3434
const screens = useBreakpoint();

0 commit comments

Comments
 (0)