Skip to content
This repository has been archived by the owner on Oct 16, 2024. It is now read-only.

Allow adding links to logos #278

Merged
merged 8 commits into from
Jan 11, 2023
Merged

Allow adding links to logos #278

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2b4fce2
allow link to logos
yathomasi Dec 27, 2022
139c7fa
add more links
aguschin Dec 29, 2022
e9a6bd9
border aorund boxes on hover
yathomasi Dec 30, 2022
f1e6faf
use css grid to have same box-height
yathomasi Dec 30, 2022
cca1cf7
remove white backgrounds
yathomasi Dec 30, 2022
ebe9985
fix format
yathomasi Dec 30, 2022
e319ed7
remove some links
aguschin Jan 10, 2023
96be5c9
remove link for rabbitmq
aguschin Jan 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/components/Home/Header/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,18 @@
}
}

&__list {
margin: 12px 16px 0 0;
@media (--md-scr) {
margin: 0 auto 10px;
}
}

&__logo {
width: var(--width-sm);
margin: 12px 16px 0 0;

@media (--md-scr) {
width: var(--width-md);
margin: 0 auto 10px;
}

@media (--lg-scr) {
Expand Down
138 changes: 93 additions & 45 deletions src/components/Home/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,22 @@ import scikitLearnLogo from '../../../images/logo/scikit-learn.png'
import streamlitLogo from '../../../images/logo/streamlit.png'
import tensorflowLogo from '../../../images/logo/tensorflow.png'
import * as styles from './index.module.css'
import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'

interface ITypedRef {
reset: () => void
destroy: () => void
}

interface ILogo {
src: string
widthSm: number
widthMd: number
widthLg: number
alt: string
link?: string
}

const cliCaptionData: Array<{ bold: string; text: string }> = [
{
bold: 'Save your ML model with a Python call.',
Expand All @@ -53,54 +63,54 @@ const cliCaptionData: Array<{ bold: string; text: string }> = [
}
]

const logosData: Array<{
src: string
widthSm: number
widthMd: number
widthLg: number
alt: string
}> = [
const logosData: Array<ILogo> = [
{
widthSm: 66,
widthMd: 88,
widthLg: 136,
widthSm: 74,
widthMd: 96,
widthLg: 144,
src: fastapiLogo,
alt: 'FastAPI logo'
alt: 'FastAPI logo',
link: '/doc/user-guide/serving/fastapi'
Copy link
Contributor

@aguschin aguschin Dec 29, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot @yathomasi! I see the border is around logos, can we make them around boxes for logos maybe? Otherwise it looks inconsistent somehow
image
and
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, great suggestion. I have updated it a bit. Let me how you think.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Looks much better! Could we also make them always the same height? Now this is how it looks for me:
image
and
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a ton! Works as expected now! Now I need to get feedback from @iterative/mlem and update "Working with models" page.

},
{
widthSm: 66,
widthMd: 88,
widthLg: 124,
src: dockerLogo,
alt: 'Docker logo'
alt: 'Docker logo',
link: '/doc/user-guide/building/docker'
},
{
widthSm: 66,
widthMd: 88,
widthLg: 124,
src: streamlitLogo,
alt: 'Streamlit logo'
alt: 'Streamlit logo',
link: '/doc/user-guide/serving/streamlit'
},
{
widthSm: 66,
widthMd: 88,
widthLg: 124,
src: herokuLogo,
alt: 'Heroku logo'
alt: 'Heroku logo',
link: '/doc/user-guide/deploying/heroku'
},
{
widthSm: 55,
widthMd: 75,
widthLg: 108,
src: kubernetesLogo,
alt: 'Kubernetes logo'
alt: 'Kubernetes logo',
link: '/doc/user-guide/deploying/kubernetes'
},
{
widthSm: 66,
widthMd: 88,
widthLg: 124,
src: sagemakerLogo,
alt: 'Sagemaker logo'
alt: 'Sagemaker logo',
link: '/doc/user-guide/deploying/sagemaker'
},
{
widthSm: 66,
Expand All @@ -114,94 +124,130 @@ const logosData: Array<{
widthMd: 88,
widthLg: 124,
src: rabbitmqLogo,
alt: 'RabbitMQ logo'
alt: 'RabbitMQ logo',
link: '/doc/user-guide/serving/rabbitmq'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This page is empty. Maybe not add a link at all? https://mlem.ai/doc/user-guide/serving/rabbitmq

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@omesser @mike0sv, WDYT about these questions?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would add a link once there is a bit more content (like linking to a working example and some explanations of how it works and how to build an app with it)

},
{
widthSm: 66,
widthMd: 88,
widthLg: 124,
src: pythonLogo,
alt: 'Python logo'
alt: 'Python logo',
link: '/doc/user-guide/building/pip'
aguschin marked this conversation as resolved.
Show resolved Hide resolved
},
{
widthSm: 66,
widthMd: 78,
widthLg: 110,
src: condaLogo,
alt: 'Conda logo'
alt: 'Conda logo',
link: '/doc/user-guide/building/conda'
},
{
widthSm: 66,
widthMd: 88,
widthLg: 124,
src: onnxLogo,
alt: 'ONNX logo'
alt: 'ONNX logo',
link: '/doc/user-guide/models'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need to add mentions of all ML frameworks to https://mlem.ai/doc/user-guide/models
So these links are meaningful.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree, the existing model object-references pages e.g. https://mlem.ai/doc/object-reference/model/onnx are pretty useless as far as user docs go and not worth linking to from the front page

},
{
widthSm: 66,
widthMd: 88,
widthLg: 124,
src: tensorflowLogo,
alt: 'Tensorflow logo'
alt: 'Tensorflow logo',
link: '/doc/user-guide/models'
},
{
widthSm: 60,
widthMd: 79,
widthLg: 112,
src: pytorchLogo,
alt: 'PyTorch logo'
alt: 'PyTorch logo',
link: '/doc/user-guide/models'
},
{
widthSm: 48,
widthMd: 64,
widthLg: 90,
src: dmlcXgboostLogo,
alt: 'dmlc xgboost logo'
alt: 'dmlc xgboost logo',
link: '/doc/user-guide/models'
},
{
widthSm: 38,
widthMd: 50,
widthLg: 71,
src: scikitLearnLogo,
alt: 'scikit learn logo'
alt: 'scikit learn logo',
link: '/doc/user-guide/models'
},
{
widthSm: 66,
widthMd: 78,
widthLg: 110,
src: lightGbmLogo,
alt: 'Light GBM logo'
alt: 'Light GBM logo',
link: '/doc/user-guide/models'
},
{
widthSm: 54,
widthMd: 64,
widthLg: 90,
src: kerasLogo,
alt: 'Keras logo'
alt: 'Keras logo',
link: '/doc/user-guide/models'
},
{
widthSm: 81,
widthMd: 96,
widthLg: 135,
src: catboostLogo,
alt: 'Catboost logo'
alt: 'Catboost logo',
link: '/doc/user-guide/models'
},
{
widthSm: 66,
widthMd: 78,
widthLg: 120,
src: numpyLogo,
alt: 'Numpy logo'
alt: 'Numpy logo',
link: '/doc/user-guide/data'
},
{
widthSm: 66,
widthMd: 78,
widthLg: 110,
src: pandasLogo,
alt: 'Pandas logo'
alt: 'Pandas logo',
link: '/doc/user-guide/data'
}
]

const LogoImage = ({
widthSm,
widthMd,
widthLg,
src,
alt,
className
}: ILogo & { className?: string }) => (
<img
alt={alt}
src={src}
className={cn(styles.header__logo, className)}
width={widthMd}
style={
{
'--width-sm': `${widthSm}px`,
'--width-md': `${widthMd}px`,
'--width-lg': `${widthLg}px`
} as React.CSSProperties
}
/>
)

interface ITerminalSlideData {
allTerminalSlide: {
nodes: [{ lines: [{ text: string; promptString: string }] }]
Expand Down Expand Up @@ -369,22 +415,24 @@ const Header: React.FC = () => {
</div>
</div>
<ul className={styles.header__logos}>
{logosData.map(({ widthSm, widthMd, widthLg, src, alt }, i) => (
<li key={i}>
<img
alt={alt}
src={src}
className={styles.header__logo}
width={widthMd}
height={35}
style={
{
'--width-sm': `${widthSm}px`,
'--width-md': `${widthMd}px`,
'--width-lg': `${widthLg}px`
} as React.CSSProperties
}
/>
{logosData.map((logoDetails, i) => (
<li
key={i}
className={cn(
styles.header__list,
'flex items-center justify-center'
)}
>
{logoDetails?.link ? (
<Link href={logoDetails.link} className="group">
<LogoImage
{...logoDetails}
className="p-1 inline-block rounded-4 md:rounded-6 lg:rounded-8 border border-solid border-transparent group-hover:border-purple-800 group-active:bg-gray-200 transition-colors "
/>
</Link>
) : (
<LogoImage {...logoDetails} />
)}
</li>
))}
</ul>
Expand Down