Skip to content

Commit fb96a38

Browse files
anitshanitsh
authored
Merge pull request #22 from codeanit-website/feat#17-design_system
Feat#17 design system
2 parents b7851d1 + bb15f9b commit fb96a38

File tree

19 files changed

+772
-193
lines changed

19 files changed

+772
-193
lines changed

‎content/WebsiteWithGatsbyJS.md renamed to ‎content/website-with-gatsbyjs.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ categories: ['general', 'framework', 'website']
77
keywords: ['website', 'blog', 'gatsby', 'javascript', 'typescript', 'jam-stack', 'static-wesite']
88
slug: website-with-gatsby
99
cover: './img/gatsbyjs-logo-banner.jpg'
10-
type: 'blogPost'
10+
type: 'BlogPost'
1111

1212
---
1313

‎gatsby-config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ module.exports = {
1919
siteLanguage: 'en', // Language Tag on <html> element
2020
logo: 'src/static/logo/logo.png',
2121
// banner: 'src/static/logo/banner.png',
22-
favicon: 'static/favicon.png', // Manifest favicon generation
22+
favicon: 'src/static/logo/logo.png', // Manifest favicon generation
2323
shortName: 'codeanit', // Shortname for manifest, must be shorter than 12 characters
2424
author: 'codeanit', // Author for schemaORGJSONLD
2525
themeColor: '#000000',

‎package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"author": "Anit Shrestha Manandhar <[email protected]>",
77
"scripts": {
88
"build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages",
9-
"dev": "rm -rf .cache && rm -rf public && gatsby develop",
9+
"dev": "gatsby clean && gatsby develop",
1010
"cy:open": "cypress open",
1111
"cy:run": "cypress run --browser chrome",
1212
"develop": "gatsby develop",
@@ -27,6 +27,8 @@
2727
"@emotion/styled": "^10.0.6",
2828
"@mdx-js/mdx": "^1.1.6",
2929
"@mdx-js/react": "^1.1.6",
30+
"@primer/components": "^19.1.1",
31+
"@primer/octicons-react": "^10.0.0",
3032
"@sindresorhus/slugify": "^0.9.1",
3133
"emotion-theming": "^10.0.6",
3234
"focus-trap-react": "^6.0.0",
@@ -55,14 +57,15 @@
5557
"gatsby-transformer-sharp": "^2.5.4",
5658
"mousetrap": "^1.6.5",
5759
"prop-types": "^15.7.2",
58-
"react": "16.13.0",
60+
"react": "^16.13.1",
5961
"react-anchor-link-smooth-scroll": "^1.0.12",
60-
"react-dom": "16.13.0",
62+
"react-dom": "^16.13.1",
6163
"react-helmet": "^6.0.0",
6264
"react-live": "^2.2.2",
6365
"react-scrollspy": "^3.4.2",
6466
"react-typography": "^0.16.18",
6567
"remark-toc": "^7.0.0",
68+
"styled-components": "^5.1.1",
6669
"typeface-fira-code": "^1.1.4",
6770
"typography": "^0.16.18",
6871
"webpack": "^4.43.0"

‎src/components/Footer/Footer.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Logo from '../Logo';
2+
// import Logo from '../Logo';
33
import styled from '../../utils/styled';
44

55
const HR = styled.hr``;
@@ -12,15 +12,14 @@ const FooterBlock = styled.div`
1212
`;
1313

1414
const FooterWrapper = styled.div`
15-
@media (max-width: 700px) {
15+
@media (max-width: 600px) {
1616
padding-left: 30px;
17-
padding-right: 30px;
1817
}
1918
2019
padding-top: 30px;
2120
padding-left: 70px;
2221
padding-right: 70px;
23-
max-width: 1020px;
22+
max-width: 900px;
2423
margin-top: 30px;
2524
color: ${(props) => props.theme.fontColor};
2625
margin: 0 auto;
@@ -41,9 +40,9 @@ const Footer: React.FC<{}> = () => (
4140
<HR />
4241
<FooterContent>
4342
<div>
44-
© {new Date().getFullYear()} Anit Shrestha Manandhar —— Made with love in Nepal.
43+
© {new Date().getFullYear()} Anit Shrestha Manandhar
4544
</div>
46-
<Logo alt="Logo of codeanit" inverted={true} size={50} />
45+
{/* <Logo alt="Logo of codeanit" size={50} /> */}
4746
</FooterContent>
4847
</FooterWrapper>
4948
</FooterBlock>

‎src/components/Header/Context.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ export interface HeaderContextValue {
77

88
export const HeaderContext = React.createContext<HeaderContextValue>({
99
collapsed: true,
10-
sticky: true,
10+
sticky: false,
1111
});

‎src/components/Header/Logo.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@ export const Logo: React.FC<HeaderLogoProps> = (props) => {
1717
['data-testid']: 'header-logo',
1818
['aria-label']: props['aria-label'],
1919
alt: props.alt,
20-
size: sticky && collapsed ? 40 : 60,
20+
size: sticky && collapsed ? 30 : 45,
2121
})
2222
: null;
2323

2424
return (
2525
<Link
2626
to="/"
27-
aria-label="Go back to article list"
28-
title="Go back to article list"
27+
aria-label="Go back to homepage"
28+
title="Go back to homepage"
2929
>
3030
{child}
3131
</Link>

‎src/components/Header/Navigation.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import styled from '../../utils/styled';
55
export interface HeaderNavigationProps {}
66

77
export const StyledHeaderNav = styled('div')<{ hide: boolean }>`
8-
@media (max-width: 700px) {
8+
@media (max-width: 600px) {
99
display: ${(p) => (p.hide ? 'none' : 'block')}!important;
1010
}
1111
12-
margin: 0 20px;
12+
margin: 0px;
1313
`;
1414

1515
export const Navigation: React.FC<HeaderNavigationProps> = (props) => {

‎src/components/Header/Title.tsx

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,16 @@ import styled from '../../utils/styled';
55
import { HeaderContext } from './Context';
66

77
export const TitleWrapper = styled.h3`
8-
@media (max-width: 900px) {
9-
max-width: 400px;
10-
}
8+
@media (max-width: 900px) {}
119
12-
@media (max-width: 800px) {
13-
max-width: 300px;
14-
margin-left: 20px;
15-
}
10+
@media (max-width: 600px) {}
1611
17-
@media (max-width: 400px) {
18-
display: none;
19-
}
12+
@media (max-width: 300px) {}
2013
2114
display: block;
22-
margin: 0;
23-
margin-left: 33px;
2415
overflow: hidden;
2516
white-space: nowrap;
26-
text-overflow: ellipsis;
2717
color: ${(props) => props.theme.fontColor};
28-
2918
a {
3019
color: ${(props) => props.theme.fontColor};
3120
text-decoration: none;

‎src/components/Header/Wrapper.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,15 @@ import styled from '../../utils/styled';
55
import { HeaderContext } from './Context';
66

77
const HeaderContent = styled.div`
8-
@media (max-width: 700px) {
8+
@media (max-width: 600px) {
99
padding-left: 30px;
1010
padding-right: 30px;
1111
}
1212
1313
padding-left: 70px;
14-
padding-right: 70px;
1514
margin: 0 auto;
1615
height: inherit;
17-
max-width: 1020px;
16+
max-width: 900px;
1817
display: flex;
1918
justify-content: space-between;
2019
align-items: center;
@@ -42,7 +41,7 @@ const HeaderWrapper = styled.div<StyledHeaderWrapperProps>`
4241
background: ${(props) => props.theme.backgroundColor};
4342
transition: ${(props) => props.theme.transitionTime}s;
4443
width: 100%;
45-
border-top: 6px solid ${(props) => props.theme.blue};
44+
// border-top: 6px solid ${(props) => props.theme.blue};
4645
position: ${(props) => (props.sticky ? 'fixed' : 'inherit')};
4746
z-index: 999;
4847
${(props) =>

‎src/components/Header/index.tsx

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
1-
import { OutboundLink } from 'gatsby-plugin-google-analytics';
1+
// import { OutboundLink } from 'gatsby-plugin-google-analytics';
22
import React from 'react';
33
import LightDarkSwitcher from '../LightDarkSwitcher';
44
import Flex from '../Flex';
5-
import styled from '../../utils/styled';
5+
// import styled from '../../utils/styled';
66
import { useTheme } from '../../context/ThemeContext';
77
import LogoImage from '../Logo';
88
import { Logo } from './Logo';
99
import { Navigation } from './Navigation';
1010
import { Title } from './Title';
1111
import { Wrapper } from './Wrapper';
1212
import { LinkButton } from '../Button/LinkButton';
13+
import { Heading } from '@primer/components'
1314

14-
const TwitterIcon = () => (
15-
<svg
16-
xmlns="http://www.w3.org/2000/svg"
17-
width="24"
18-
height="24"
19-
viewBox="0 0 24 24"
20-
>
21-
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
22-
</svg>
23-
);
2415

25-
const TwitterLinkWrapper = styled('div')`
26-
svg {
27-
margin-top: 4px;
28-
fill: ${(p) => p.theme.blue};
29-
}
30-
`;
16+
// const TwitterIcon = () => (
17+
// <svg
18+
// xmlns="http://www.w3.org/2000/svg"
19+
// width="24"
20+
// height="24"
21+
// viewBox="0 0 24 24"
22+
// >
23+
// <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
24+
// </svg>
25+
// );
26+
27+
// const TwitterLinkWrapper = styled('div')`
28+
// svg {
29+
// margin-top: 4px;
30+
// fill: ${(p) => p.theme.blue};
31+
// }
32+
// `;
3133

3234
const noop = () => {};
3335

@@ -75,13 +77,12 @@ const DefaultHeader: React.FC<MainHeaderProps> = (props) => {
7577
alt="codeanit.com logo"
7678
aria-label="codeanit.com blog"
7779
>
78-
<LogoImage inverted />
80+
<LogoImage />
7981
</Header.Logo>
80-
81-
<Header.Title>{props.title}</Header.Title>
82+
<Heading>anit</Heading>
8283
</Flex>
8384
<Flex>
84-
<TwitterLinkWrapper>
85+
{/* <TwitterLinkWrapper>
8586
<OutboundLink
8687
className="h-card"
8788
data-testid="twitter-link"
@@ -98,7 +99,7 @@ const DefaultHeader: React.FC<MainHeaderProps> = (props) => {
9899
<TwitterIcon />
99100
</LinkButton>
100101
</OutboundLink>
101-
</TwitterLinkWrapper>
102+
</TwitterLinkWrapper> */}
102103

103104
{props.themeSwitcher && Object.keys(theme).length > 0 ? (
104105
<LinkButton

0 commit comments

Comments
 (0)