Skip to content

Commit

Permalink
chore: Add quickstart and search translations
Browse files Browse the repository at this point in the history
  • Loading branch information
@LizBaker
LizBaker committed Jun 1, 2022
1 parent f854c3f commit 4277a8f
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 153 deletions.
306 changes: 155 additions & 151 deletions src/components/FindYourQuickstart.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/react';
import { Surface, Icon } from '@newrelic/gatsby-theme-newrelic';
import { Surface, Icon, useTranslation } from '@newrelic/gatsby-theme-newrelic';
import SurfaceLink from './SurfaceLink';
import quickstartTilesBackground from '../images/quickstartTiles.svg';
import quickstartArrow from '../images/quickstartArrow.svg';
Expand Down Expand Up @@ -47,177 +47,181 @@ const QuickstartTile = ({ logo, size, to, title, className, children }) => (
</SurfaceLink>
);

const FindYourQuickStart = () => (
<div
css={css`
background: var(--system-text-primary-light);
background-image: url(${quickstartTilesBackground});
background-repeat: no-repeat;
background-position: left bottom -60%;
const FindYourQuickStart = () => {
const { t } = useTranslation();

border-radius: 4px;
min-height: 380px;
width: 100%;
position: relative;
padding: 2rem;
h2,
h3 {
color: var(--system-text-primary-dark);
font-weight: 400;
}
h2 {
font-size: 3rem;
}
return (
<div
css={css`
background: var(--system-text-primary-light);
background-image: url(${quickstartTilesBackground});
background-repeat: no-repeat;
background-position: left bottom -60%;
.dark-mode & {
background-color: var(--system-background-floating-dark);
}
@media screen and (max-width: 1050px) {
h2 {
font-size: 2rem;
}
}
@media screen and (max-width: 600px) {
h2 {
font-size: 2rem;
}
height: 100%;
}
@media screen and (max-width: ${mobileBreakpoint}) {
background-image: none;
padding: 1rem 1.5rem 1rem;
height: 100%;
border-radius: 4px;
min-height: 380px;
width: 100%;
position: relative;
padding: 2rem;
h2,
h3 {
display: none;
color: var(--system-text-primary-dark);
font-weight: 400;
}
h2 {
font-size: 1.5rem;
font-size: 3rem;
}
}
`}
>
<h3>Monitor everything in your stack with 470+ integrations.</h3>
<div
css={css`
display: flex;
@media screen and (max-width: ${mobileBreakpoint}) {
justify-content: center;
}
`}
>
<h2>Find your quickstart</h2>
<img
src={quickstartArrow}
alt="A green arrow pointing down"
css={css`
margin-left: 0.5rem;
@media screen and (max-width: 800px) {
display: none;
}
`}
/>
</div>
<div
css={css`
padding-top: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
grid-gap: 1rem;
justify-items: center;
flex: 2;
align-self: flex-start;
@media screen and (max-width: ${mobileBreakpoint}) {
padding: 0;
grid-template-columns: repeat(2, 1fr);
.dark-mode & {
background-color: var(--system-background-floating-dark);
}
`}
>
<QuickstartTile
logo="logo-apache"
title="Apache"
to="https://newrelic.com/instant-observability/apache/ad5affab-545a-4355-ad48-cfd66e2fbf00"
/>
<QuickstartTile
logo="logo-php"
title="PHP"
to="https://newrelic.com/instant-observability/php/475dec69-10c9-4bc6-8312-3caa266fb028"
/>
<QuickstartTile
logo="logo-java"
title="Java"
to="https://newrelic.com/instant-observability/java/3ebfb315-d0a6-4b27-9f89-b16a9a1ada5f"
/>
<QuickstartTile
logo="logo-kafka"
title="Kakfa"
to="https://newrelic.com/instant-observability/kafka/9c559112-90e1-4ff4-b38b-90c0ba3c56fe"
css={css`
@media screen and (min-width: 960px) and (max-width: 1100px) {
display: none;
@media screen and (max-width: 1050px) {
h2 {
font-size: 2rem;
}
@media screen and (min-width: 650px) and (max-width: 820px) {
display: none;
}
`}
/>
<QuickstartTile
logo="logo-mysql"
title="MySQL"
to="https://newrelic.com/instant-observability/mysql/ad9f635b-6496-48a8-b373-9fab81a7f719"
css={css`
@media screen and (min-width: 960px) and (max-width: 1240px) {
display: none;
}
@media screen and (max-width: 600px) {
h2 {
font-size: 2rem;
}
@media screen and (min-width: 650px) and (max-width: 820px) {
height: 100%;
}
@media screen and (max-width: ${mobileBreakpoint}) {
background-image: none;
padding: 1rem 1.5rem 1rem;
height: 100%;
h3 {
display: none;
}
`}
/>
<QuickstartTile
logo="logo-nodejs"
title="Node"
to="https://newrelic.com/instant-observability/node-js/01fdea36-5a15-44b4-a864-c4c99866735b"
css={css`
@media screen and (min-width: 750px) and (max-width: 1380px) {
display: none;
h2 {
font-size: 1.5rem;
}
@media screen and (max-width: 820px) {
display: none;
}
`}
/>
<QuickstartTile
logo="logo-dotnet"
title=".NET"
to="https://newrelic.com/instant-observability/dotnet/2dff13b6-0fac-43a6-abc6-57f0a3299639"
}
`}
>
<h3>{t('findYourQuickstart.subtext')}</h3>
<div
css={css`
@media screen and (max-width: 1530px) {
display: none;
display: flex;
@media screen and (max-width: ${mobileBreakpoint}) {
justify-content: center;
}
`}
/>
<QuickstartTile
to="https://newrelic.com/instant-observability"
>
<h2>{t('findYourQuickstart.cta')}</h2>
<img
src={quickstartArrow}
alt="A green arrow pointing down"
css={css`
margin-left: 0.5rem;
@media screen and (max-width: 800px) {
display: none;
}
`}
/>
</div>
<div
css={css`
font-weight: 400;
font-size: 18px;
background: var(--brand-button-primary-accent);
align-self: center;
color: var(--color-black);
&:hover {
color: var(--color-black);
}
.dark-mode & {
background: var(--brand-button-primary-accent);
padding-top: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
grid-gap: 1rem;
justify-items: center;
flex: 2;
align-self: flex-start;
@media screen and (max-width: ${mobileBreakpoint}) {
padding: 0;
grid-template-columns: repeat(2, 1fr);
}
`}
>
View all
</QuickstartTile>
<QuickstartTile
logo="logo-apache"
title="Apache"
to="https://newrelic.com/instant-observability/apache/ad5affab-545a-4355-ad48-cfd66e2fbf00"
/>
<QuickstartTile
logo="logo-php"
title="PHP"
to="https://newrelic.com/instant-observability/php/475dec69-10c9-4bc6-8312-3caa266fb028"
/>
<QuickstartTile
logo="logo-java"
title="Java"
to="https://newrelic.com/instant-observability/java/3ebfb315-d0a6-4b27-9f89-b16a9a1ada5f"
/>
<QuickstartTile
logo="logo-kafka"
title="Kakfa"
to="https://newrelic.com/instant-observability/kafka/9c559112-90e1-4ff4-b38b-90c0ba3c56fe"
css={css`
@media screen and (min-width: 960px) and (max-width: 1100px) {
display: none;
}
@media screen and (min-width: 650px) and (max-width: 820px) {
display: none;
}
`}
/>
<QuickstartTile
logo="logo-mysql"
title="MySQL"
to="https://newrelic.com/instant-observability/mysql/ad9f635b-6496-48a8-b373-9fab81a7f719"
css={css`
@media screen and (min-width: 960px) and (max-width: 1240px) {
display: none;
}
@media screen and (min-width: 650px) and (max-width: 820px) {
display: none;
}
`}
/>
<QuickstartTile
logo="logo-nodejs"
title="Node"
to="https://newrelic.com/instant-observability/node-js/01fdea36-5a15-44b4-a864-c4c99866735b"
css={css`
@media screen and (min-width: 750px) and (max-width: 1380px) {
display: none;
}
@media screen and (max-width: 820px) {
display: none;
}
`}
/>
<QuickstartTile
logo="logo-dotnet"
title=".NET"
to="https://newrelic.com/instant-observability/dotnet/2dff13b6-0fac-43a6-abc6-57f0a3299639"
css={css`
@media screen and (max-width: 1530px) {
display: none;
}
`}
/>
<QuickstartTile
to="https://newrelic.com/instant-observability"
css={css`
font-weight: 400;
font-size: 18px;
background: var(--brand-button-primary-accent);
align-self: center;
color: var(--color-black);
&:hover {
color: var(--color-black);
}
.dark-mode & {
background: var(--brand-button-primary-accent);
}
`}
>
{t('findYourQuickstart.button')}
</QuickstartTile>
</div>
</div>
</div>
);
);
};

QuickstartTile.propTypes = {
logo: PropTypes.string,
Expand Down
9 changes: 9 additions & 0 deletions src/i18n/translations/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
"statusCode": "404",
"errorMessage": "The URL you entered may be broken, or the page has been removed. <2>Go back to the home page</2>"
},
"findYourQuickstart": {
"subtext": "Monitor everything in your stack with 470+ integrations.",
"cta": "Find your quickstart",
"button": "View all"
},
"dataDictionary": {
"title": "New Relic data dictionary",
"intro": "This data dictionary defines some of our default-reported data stored in NRDB and queryable via NRQL. This includes events like Transaction, MobileRequest, and BrowserInteraction, and our Metric, Log, and Span data types. These definitions are also available from our query builder UI by mousing over applicable data type and attribute names.",
Expand All @@ -26,6 +31,10 @@
"button1": "Create a free account",
"button2": "Install New Relic"
},
"search": {
"popularSearches": { "title": "Popular searches" },
"placeholder": "What are you looking for?"
},
"popularDocs": {
"title": "Popular docs",
"t1": {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const HomePage = ({ data }) => {
{t('home.pageTitle')}
</h1>
<SearchInput
placeholder="What are you looking for?"
placeholder={t('home.search.placeholder')}
size={SearchInput.SIZE.LARGE}
ref={searchInputRef}
iconName={SearchInput.ICONS.SEARCH}
Expand Down Expand Up @@ -79,7 +79,7 @@ const HomePage = ({ data }) => {
}
`}
>
<p>Popular searches: </p>
<p>{t('home.search.popularSearches.title')}: </p>
<Link to="?q=nrql">NRQL</Link>
<Link to="?q=logs">logs</Link>
<Link to="?q=alert">alert</Link>
Expand Down

0 comments on commit 4277a8f

Please sign in to comment.