Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 813ff7a

Browse files
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 <codeanit@gmail.com>",
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)

AltStyle によって変換されたページ (->オリジナル) /