Skip to content

Commit 813ff7a

Browse files
anitshanitsh
committed
Update UI
Implementation of completely new design system takes more time, and this will be a step wise integration process. Analysis of Primer is done in as a separate task at anitsh/til#198
1 parent b7851d1 commit 813ff7a

File tree

17 files changed

+771
-192
lines changed

17 files changed

+771
-192
lines changed

‎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

‎src/components/Logo/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ const LogoWrapper = styled('div') <LogoWrapperProps>`
3131
`;
3232

3333
const Logo: React.FC<ILogoProp> = ({ alt, inverted, size }) => (
34-
<LogoWrapper inverted={inverted || true} size={size || 50}>
35-
<svg aria-label={alt} enableBackground="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m63 41h-19.82l1.512-9.07c1.34-.188 2.504-.9 3.285-1.933.008 0 .015.003.023.003 6.065 0 11-4.935 11-11v-4.026c1.207-.914 2-2.348 2-3.974v-.162l-1.051-3.154-1.897.633.945 2.834c-.08 1.584-1.393 2.849-2.997 2.849s-2.917-1.265-2.996-2.849l.945-2.834-1.897-.633-1.052 3.154v.162c0 1.627.793 3.061 2 3.974v4.137c0 2.696-2.193 4.889-4.888 4.889-.043 0-.087.008-.13.009-.913-1.212-2.351-2.009-3.982-2.009-.526 0-1.044.096-1.549.268l-.308-.411c1.123-.918 1.857-2.296 1.857-3.857v-1h1c1.654 0 3-1.346 3-3v-4c0-1.654-1.346-3-3-3h-1v-1c0-2.757-2.243-5-5-5h-14c-2.757 0-5 2.243-5 5v1h-1c-1.654 0-3 1.346-3 3v4c0 1.654 1.346 3 3 3h1v1c0 1.561.734 2.939 1.858 3.857l-.308.411c-.506-.172-1.024-.268-1.55-.268-2.757 0-5 2.243-5 5 0 .036.01.07.011.105-1.426 1.95-3.011 4.802-3.011 7.895 0 1.774.714 3.913 1.695 6h-12.695v2h13.716c.384.694.783 1.368 1.181 2h-3.897v18h40v-18h-26.513c-.748-.173-1.522-.173-2.27.001-.166-.184-.344-.358-.553-.497-.332-.221-.772-.774-1.247-1.504h41.583zm-18-32c.551 0 1 .449 1 1v4c0 .551-.449 1-1 1h-1v-6zm-26 6c-.551 0-1-.449-1-1v-4c0-.551.449-1 1-1h1v6zm36 4.112v-3.213c.323.066.658.101 1 .101s.677-.035 1-.101v3.101c0 4.657-3.557 8.499-8.096 8.954.06-.309.096-.627.096-.954 0-.359-.042-.708-.114-1.046 3.435-.387 6.114-3.306 6.114-6.842zm-8 7.888c0 1.322-.864 2.433-2.026 2.833.012-.21.026-.419.026-.628 0-1.801-.477-3.587-1.348-5.159.116-.015.231-.046.348-.046 1.654 0 3 1.346 3 3zm-12-24-1.5 2h-3l-1.5-2zm-13 3c0-1.654 1.346-3 3-3h1.5l3 4h5l3-4h1.5c1.654 0 3 1.346 3 3v12c0 1.654-1.346 3-3 3h-14c-1.654 0-3-1.346-3-3zm17 17h1.5l.777 1.037c.012.016.022.033.033.049l.005.007c1.086 1.472 1.685 3.283 1.685 5.112 0 .472-.04.948-.117 1.416l-1.73 10.379h-18.306l-1.73-10.379c-.077-.468-.117-.944-.117-1.416 0-1.587.452-3.16 1.28-4.51l.451-.669.769-1.026h1.5zm-19 1c.117 0 .232.031.349.046-.872 1.572-1.349 3.357-1.349 5.159 0 .206.014.413.026.619-1.175-.407-2.026-1.513-2.026-2.824 0-1.654 1.346-3 3-3zm6.366 23.628 1.336 2.673 1.298-.649v1.348h2v-2h-1.712l-1-2h21.712v14h-36v-14h3.241c.622.87 1.172 1.558 1.577 2h-1.818v2h2v-1.806c.134.136.252.246.334.301.017.011.036.019.053.03-.091 1.388.372 2.806 1.43 3.865l.115.115 2.974 1.487.895-1.789-2.673-1.336c-1.064-1.176-1.03-3 .104-4.134 1.134-1.135 2.958-1.169 4.134-.105zm-5.548-1.31c-.318.318-.565.677-.78 1.05-1.578-1.904-6.038-8.426-6.038-12.368 0-1.958.811-3.855 1.748-5.403.371.606.855 1.134 1.441 1.534-.776 1.396-1.189 2.698-1.189 3.869 0 2.464 3.306 9.217 5.278 10.943-.156.122-.317.232-.46.375zm-2.818-11.318c0-.868.374-1.933 1.049-3.096.084.016.174.014.259.026l1.512 9.07h-.562c-1.181-2.244-2.258-4.903-2.258-6z" /><path d="m21 57h2v2h-2z" /><path d="m17 57h2v2h-2z" /><path d="m45 57h2v2h-2z" /><path d="m41 57h2v2h-2z" /><path d="m33 57h2v2h-2z" /><path d="m29 57h2v2h-2z" /><path d="m37 57h2v2h-2z" /><path d="m25 57h2v2h-2z" /><path d="m17 53h2v2h-2z" /><path d="m33 53h2v2h-2z" /><path d="m25 53h2v2h-2z" /><path d="m29 53h2v2h-2z" /><path d="m45 53h2v2h-2z" /><path d="m41 53h2v2h-2z" /><path d="m37 53h2v2h-2z" /><path d="m33 49h2v2h-2z" /><path d="m37 49h2v2h-2z" /><path d="m45 49h2v2h-2z" /><path d="m41 49h2v2h-2z" /><path d="m37 13c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3 1.346 3 3 3zm0-4c.551 0 1 .449 1 1s-.449 1-1 1-1-.449-1-1 .449-1 1-1z" /><path d="m27 13c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3 1.346 3 3 3zm0-4c.551 0 1 .449 1 1s-.449 1-1 1-1-.449-1-1 .449-1 1-1z" /><path d="m35.973 17-7.973-.027v-1.973h-2v1.973c0 1.117.91 2.027 2.027 2.027h7.945c1.118 0 2.028-.91 2.028-2.027v-1.973h-2z" /><path d="m23 32c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3v-4c0-1.654-1.346-3-3-3h-12c-1.654 0-3 1.346-3 3zm2-4c0-.551.449-1 1-1h12c.551 0 1 .449 1 1v4c0 .551-.449 1-1 1h-12c-.551 0-1-.449-1-1z" /><path d="m29 37h2v2h-2z" /><path d="m25 37h2v2h-2z" /><path d="m37 37h2v2h-2z" /><path d="m33 37h2v2h-2z" /></g></svg>
36-
</LogoWrapper>
34+
<LogoWrapper inverted={inverted || true} size={size || 50}>
35+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="8" height="8"><path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z"></path></svg>
36+
</LogoWrapper>
3737
);
3838

3939
export default Logo;

0 commit comments

Comments
 (0)