Skip to content

Commit ec9a925

Browse files
rogermparentrogermparent
authored
Updates for dvc.org integration (#130)
* Extract out HeaderBranding and add shadowable fonts.css * Make updates to work with dvc.org integration * Tweak alert to depend less on content * Bump version
1 parent 9c5b0ef commit ec9a925

File tree

13 files changed

+128
-103
lines changed

13 files changed

+128
-103
lines changed

‎packages/gatsby-theme-iterative/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@dvcorg/gatsby-theme-iterative",
3-
"version": "0.2.2",
3+
"version": "0.2.3",
44
"description": "",
55
"main": "index.js",
66
"types": "src/typings.d.ts",

‎packages/gatsby-theme-iterative/src/components/LayoutHeader/Alert/content.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
import Link from '../../Link'
3+
4+
export const AlertContent = () => (
5+
<>
6+
<span role="img" aria-label="rocket">
7+
🚀
8+
</span>{' '}
9+
New Release!{' '}
10+
<Link href="https://dvc.org/blog/iterative-studio-model-registry">
11+
Git-backed Machine Learning Model Registry
12+
</Link>{' '}
13+
for all your model management needs.
14+
</>
15+
)

‎packages/gatsby-theme-iterative/src/components/LayoutHeader/alert.tsx‎ renamed to ‎packages/gatsby-theme-iterative/src/components/LayoutHeader/Alert/index.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import cn from 'classnames'
22
import React from 'react'
33

4-
import Link from '../Link'
4+
import { AlertContent } from './content'
55

66
import * as styles from './styles.module.css'
77

@@ -11,17 +11,21 @@ const LayoutAlert: React.FC<{ collapsed: boolean }> | false = ({
1111
<div
1212
className={cn(
1313
styles.alert,
14+
'w-full',
1415
'transition-all',
1516
'ease-in-out',
1617
'delay-150',
17-
collapsed ? ['h-0'] : ['h-7']
18+
'whitespace-nowrap',
19+
'text-center',
20+
'truncate',
21+
'overflow-hidden',
22+
'px-2',
23+
collapsed ? 'h-0' : 'h-7'
1824
)}
1925
>
20-
<span role="img" aria-label="rocket">
21-
🚀
22-
</span>{' '}
23-
<Link href="https://studio.iterative.ai">DVC Studio</Link>, the online UI
24-
for DVC, is live!{' '}
26+
<span className="align-middle">
27+
<AlertContent />
28+
</span>
2529
</div>
2630
)
2731

‎packages/gatsby-theme-iterative/src/components/LayoutHeader/Alert/styles.module.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.alert {
2+
background-color: #dee;
3+
transition: 0.5s all;
4+
overflow: hidden;
5+
6+
&.collapsed {
7+
height: 0;
8+
transform: translateY(-100%);
9+
}
10+
}

‎packages/gatsby-theme-iterative/src/components/LayoutHeader/HeaderBranding/index.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
3+
import Link from '../../Link'
4+
import { ReactComponent as LogoSVG } from '../../../images/dvc_icon-color--square_vector.svg'
5+
import * as styles from './styles.module.css'
6+
7+
export const HeaderBranding = () => (
8+
<>
9+
<Link href="/" className={styles.logoLink} title="DVC" aria-label="DVC">
10+
<LogoSVG className={styles.logo} />
11+
</Link>
12+
<Link
13+
className={styles.company}
14+
href="https://iterative.ai/"
15+
target="_blank"
16+
>
17+
by <span className={styles.companyName}>iterative.ai</span>
18+
</Link>
19+
</>
20+
)

‎packages/gatsby-theme-iterative/src/components/LayoutHeader/HeaderBranding/styles.module.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.logoLink {
2+
@apply hover active;
3+
4+
height: 40px;
5+
width: 40px;
6+
7+
&:focus {
8+
opacity: 0.7;
9+
}
10+
11+
svg {
12+
width: inherit;
13+
height: inherit;
14+
}
15+
}
16+
17+
.logo {
18+
display: block;
19+
}
20+
21+
.company {
22+
@apply active hover;
23+
24+
font-size: 15px;
25+
line-height: 20px;
26+
font-weight: 500;
27+
text-decoration: none;
28+
white-space: nowrap;
29+
background: linear-gradient(
30+
270deg,
31+
var(--color-purple) 0%,
32+
var(--color-orange-bright) 100%
33+
);
34+
background-size: 100%;
35+
background-clip: text;
36+
-webkit-text-fill-color: transparent;
37+
-moz-text-fill-color: transparent;
38+
margin-left: 6px;
39+
margin-right: auto;
40+
padding: 10px;
41+
42+
&:focus {
43+
opacity: 0.7;
44+
}
45+
46+
@media screen(smMax) {
47+
margin-left: 2px;
48+
}
49+
50+
@media screen(xsMax) {
51+
padding: 10px 0;
52+
margin-left: 8px;
53+
}
54+
55+
.companyName {
56+
font-weight: 800;
57+
}
58+
}

‎packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { logEvent } from '../../../../utils/front/plausible'
1212
import * as styles from './styles.module.css'
1313
import { INavLinkData, INavLinkPopupData } from './types'
1414

15-
import navLinkItemsData from './data'
15+
import navLinkItemsData from '../../../../data/headerNav'
1616
import { getShowOnClass } from './getShowOnClass'
1717

1818
const LinkItems: React.FC = ({}) => {

‎packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/types.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1+
import { ReactNode } from 'react'
12
import { ScreenSize } from './getShowOnClass'
23

34
export type PopupName = 'CommunityPopup' | 'OtherToolsPopup'
45

56
interface INavLinkCommonData {
67
showOn?: ScreenSize
7-
text: string
88
}
99

1010
export interface INavLinkData extends INavLinkCommonData {
1111
href: string
1212
eventType: string
13+
text: string
1314
}
1415

1516
export interface INavLinkPopupData extends INavLinkCommonData {
1617
popup: PopupName
18+
text: string | ReactNode
1719
}

‎packages/gatsby-theme-iterative/src/components/LayoutHeader/index.tsx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,18 @@ import includes from 'lodash/includes'
44

55
import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
66
import LayoutWidthContainer from '../LayoutWidthContainer'
7-
import Link from '../Link'
87
import Nav from './Nav'
98
import {
109
HamburgerMenu,
1110
HamburgerButton,
1211
useHamburgerMenu
1312
} from '../HamburgerMenu'
1413

15-
import { ReactComponent as LogoSVG } from '../../images/dvc_icon-color--square_vector.svg'
1614
import * as styles from './styles.module.css'
1715

18-
import LayoutAlert from './alert'
16+
import LayoutAlert from './Alert'
1917
import { useInView } from 'react-intersection-observer'
18+
import { HeaderBranding } from './HeaderBranding'
2019

2120
const LayoutHeader: React.FC<ILayoutModifiable> = ({ modifiers }) => {
2221
const { ref, inView } = useInView({ rootMargin: '20px 0px 0px 0px' })
@@ -50,21 +49,7 @@ const LayoutHeader: React.FC<ILayoutModifiable> = ({ modifiers }) => {
5049
)}
5150
wide
5251
>
53-
<Link
54-
href="/"
55-
className={styles.logoLink}
56-
title="DVC"
57-
aria-label="DVC"
58-
>
59-
<LogoSVG className={styles.logo} />
60-
</Link>
61-
<Link
62-
className={styles.company}
63-
href="https://iterative.ai/"
64-
target="_blank"
65-
>
66-
by <span className={styles.companyName}>iterative.ai</span>
67-
</Link>
52+
<HeaderBranding />
6853
<Nav />
6954
<HamburgerButton
7055
opened={opened}

‎packages/gatsby-theme-iterative/src/components/LayoutHeader/styles.module.css‎

Lines changed: 0 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -22,79 +22,6 @@
2222
}
2323
}
2424

25-
.logoLink {
26-
@apply hover active;
27-
28-
height: 40px;
29-
width: 40px;
30-
31-
&:focus {
32-
opacity: 0.7;
33-
}
34-
35-
svg {
36-
width: inherit;
37-
height: inherit;
38-
}
39-
}
40-
41-
.logo {
42-
display: block;
43-
}
44-
45-
.company {
46-
@apply active hover;
47-
48-
font-size: 15px;
49-
line-height: 20px;
50-
font-weight: 500;
51-
text-decoration: none;
52-
white-space: nowrap;
53-
background: linear-gradient(
54-
270deg,
55-
var(--color-purple) 0%,
56-
var(--color-orange-bright) 100%
57-
);
58-
background-size: 100%;
59-
background-clip: text;
60-
-webkit-text-fill-color: transparent;
61-
-moz-text-fill-color: transparent;
62-
margin-left: 6px;
63-
margin-right: auto;
64-
padding: 10px;
65-
66-
&:focus {
67-
opacity: 0.7;
68-
}
69-
70-
@media screen(smMax) {
71-
margin-left: 2px;
72-
}
73-
74-
@media screen(xsMax) {
75-
padding: 10px 0;
76-
margin-left: 8px;
77-
}
78-
79-
.companyName {
80-
font-weight: 800;
81-
}
82-
}
83-
84-
.alert {
85-
font-size: 18px;
86-
text-align: center;
87-
width: 100%;
88-
background-color: #dee;
89-
transition: 0.5s all;
90-
overflow: hidden;
91-
92-
&.collapsed {
93-
height: 0;
94-
transform: translateY(-100%);
95-
}
96-
}
97-
9825
.gitHubAlertLink {
9926
vertical-align: middle;
10027
margin-left: 0.1em;

0 commit comments

Comments
 (0)