How to use the @emotion/core.jsx function in @emotion/core
To help you get started, we’ve selected a few @emotion/core examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
contentz-tech / contentz / src / components / archive.js View on Github 
null,
jsx(Header, { ...config, messages }),
jsx(
"section",
{
css: {
margin: "0 auto",
maxWidth: "50em",
"@media (max-width: 50em)": {
boxSizing: "border-box",
padding: "0 1.5em"
}
}
},
jsx(Title, null, messages.archive.title),
jsx(
Description,
null,
messages.archive.description.replace("${config.title}", config.title)
),
jsx(
"ul",
{
css: {
listStyleType: "none",
paddingLeft: 0
}
},
articles
.filter(article => article.published)
.sort((a, b) => b.date - a.date)
.map(article =>code: props => {
switch (props.className) {
case "language-file-tree": {
return jsx(FileTree, props);
}
default: {
return jsx(Code, props);
}
}
},
pre: props => {href: config.icon || "/static/favicon.png"
}),
jsx("meta", {
name: "viewport",
content: "width=device-width, initial-scale=1.0"
}),
jsx("meta", {
name: "description",
content: data.description || config.description
}),
jsx("meta", {
name: "language",
content: data.lang || config.language || "en"
}),
jsx("meta", { name: "author", content: config.title }),
jsx("meta", { name: "subject", content: config.description }),
jsx("meta", { name: "pagename", content: config.title }),
jsx("meta", { name: "HandheldFriendly", content: "True" }),
jsx("meta", { name: "MobileOptimized", content: "320" }),
data.published === true &&
jsx("meta", { name: "robots", content: "index, follow" }),
jsx("meta", { name: "theme-color", content: "black" }),
jsx("meta", {
name: "apple-mobile-web-app-title",
content: config.title
}),
jsx("meta", {
httpEquiv: "X-UA-Compatible",
content: "IE=edge,chrome=1"
}),
jsx("meta", {
href: "/atom.xml",}
},
...props
})
}
})
),
jsx(Title, null, data.title),
data.date && jsx(Date, { date: data.date }),
data.description && jsx(Description, null, data.description),
data.canonical_url && jsx(CanonicalURL, { value: data.canonical_url }),
data.translated_from && jsx(Translated.From, data.translated_from),
data.translated_to &&
jsx(Translated.To, { translations: data.translated_to }),
jsx(Component, { components: ui }),
data.next && jsx(ReadNext, data.next)
),
jsx(Footer, {
patreon: config.patreon,
repository: config.repository,
file: path || null
})
);
}gridTemplateRows: "2",
gridTemplateAreas: '"date title" ". description"',
"@media (max-width: 50em) and (orientation: landscape)": {
gridTemplateColumns: "1fr auto",
gridTemplateRows: "auto auto",
gridTemplateAreas: '"title date" "description description"'
},
"@media (max-width: 50em) and (orientation: portrait)": {
gridTemplateColumns: "auto",
gridTemplateRows: "auto auto auto",
gridTemplateAreas: '"title" "date" "description"'
}
}
},
link.date &&
jsx(
"time",
{
dateTime: link.date.toJSON(),
css: {
fontWeight: "200",
marginRight: "1em",
gridArea: "date",
textAlign: "right",
"@media (max-width: 50em) and (orientation: landscape)": {
fontSize: "0.9em",
marginRight: "0",
marginLeft: "1em"
},
"@media (max-width: 50em) and (orientation: portrait)": {
display: "none",
marginRight: "0",listStyleType: "square"
}
}
},
...props
})
}
})
),
jsx(Title, null, data.title),
data.date && jsx(Date, { date: data.date }),
data.description && jsx(Description, null, data.description),
data.canonical_url && jsx(CanonicalURL, { value: data.canonical_url }),
data.translated_from && jsx(Translated.From, data.translated_from),
data.translated_to &&
jsx(Translated.To, { translations: data.translated_to }),
jsx(Component, { components: ui }),
data.next && jsx(ReadNext, data.next)
),
jsx(Footer, {
patreon: config.patreon,
repository: config.repository,
file: path || null
})
);
}content: data.title || config.title
}),
jsx("meta", {
name: "twitter:description",
value: data.description || config.description,
content: data.description || config.description
}),
jsx("meta", {
name: "twitter:image",
value: data.social || formatOGURL(path, config.domain),
content: data.social || formatOGURL(path, config.domain)
}),
jsx("meta", { name: "twitter:summary", content: config.description }),
jsx("link", { rel: "prefetch", href: "/" }),
config.hasArticles && jsx("link", { rel: "prefetch", href: "/articles/" }),
config.hasLinks && jsx("link", { rel: "prefetch", href: "/links/" }),
config.hasSlides && jsx("link", { rel: "prefetch", href: "/slides/" }),
links
.concat(
(config.navigation || [])
.map(({ path }) => (path.endsWith("/") ? path : `${path}/`))
.filter(path => path.startsWith("/"))
)
.map(link => jsx("link", { rel: "prefetch", href: link, key: link }))
),
jsx(
"body",
{
css: {
background: "white",
color: "black",
margin: 0,title: name,
css: {
display: "inline-flex",
color: "black",
textDecoration: "none",
margin: "0 .5em",
":first-of-type": {
marginLeft: 0
},
":last-of-type": {
marginRight: 0
},
"@media (prefers-color-scheme: dark)": { color: "white" }
}
},
jsx(Icon, null, jsx(formatURL({ name, value }).icon))
)
),jsx("meta", { name: "subject", content: config.description }),
jsx("meta", { name: "pagename", content: config.title }),
jsx("meta", { name: "HandheldFriendly", content: "True" }),
jsx("meta", { name: "MobileOptimized", content: "320" }),
data.published === true &&
jsx("meta", { name: "robots", content: "index, follow" }),
jsx("meta", { name: "theme-color", content: "black" }),
jsx("meta", {
name: "apple-mobile-web-app-title",
content: config.title
}),
jsx("meta", {
httpEquiv: "X-UA-Compatible",
content: "IE=edge,chrome=1"
}),
jsx("meta", {
href: "/atom.xml",
type: "application/atom+xml",
rel: "alternate",
title: config.title
}),
data.canonical_url &&
jsx("meta", { rel: "canonical", href: data.canonical_url }),
jsx("meta", {
property: "og:type",
content: "website"
}),
jsx("meta", {
property: "og:title",
content: data.title || config.title
}),
jsx("meta", {color: "black",
textDecoration: "none",
margin: "0 .5em",
":first-of-type": {
marginLeft: 0
},
":last-of-type": {
marginRight: 0
},
"@media (prefers-color-scheme: dark)": { color: "white" }
}
},
jsx(Icon, null, jsx(Email))
)
),
config.patreon && jsx("br"),
config.patreon && jsx(Patreon, { name: config.patreon })
)
);
}
