summaryrefslogtreecommitdiff
path: root/@linaria/examples/gatsby/plugin/src
diff options
context:
space:
mode:
Diffstat (limited to '@linaria/examples/gatsby/plugin/src')
-rw-r--r--@linaria/examples/gatsby/plugin/src/components/header.js42
-rw-r--r--@linaria/examples/gatsby/plugin/src/components/image.js32
-rw-r--r--@linaria/examples/gatsby/plugin/src/components/layout.css622
-rw-r--r--@linaria/examples/gatsby/plugin/src/components/layout.js51
-rw-r--r--@linaria/examples/gatsby/plugin/src/components/seo.js88
-rw-r--r--@linaria/examples/gatsby/plugin/src/images/gatsby-astronaut.pngbin0 -> 167273 bytes
-rw-r--r--@linaria/examples/gatsby/plugin/src/images/gatsby-icon.pngbin0 -> 21212 bytes
-rw-r--r--@linaria/examples/gatsby/plugin/src/pages/404.js14
-rw-r--r--@linaria/examples/gatsby/plugin/src/pages/index.js28
-rw-r--r--@linaria/examples/gatsby/plugin/src/pages/page-2.js16
-rw-r--r--@linaria/examples/gatsby/plugin/src/pages/using-typescript.tsx34
11 files changed, 927 insertions, 0 deletions
diff --git a/@linaria/examples/gatsby/plugin/src/components/header.js b/@linaria/examples/gatsby/plugin/src/components/header.js
new file mode 100644
index 0000000..8990b7e
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/components/header.js
@@ -0,0 +1,42 @@
+import { Link } from "gatsby"
+import PropTypes from "prop-types"
+import React from "react"
+
+const Header = ({ siteTitle }) => (
+ <header
+ style={{
+ background: `rebeccapurple`,
+ marginBottom: `1.45rem`,
+ }}
+ >
+ <div
+ style={{
+ margin: `0 auto`,
+ maxWidth: 960,
+ padding: `1.45rem 1.0875rem`,
+ }}
+ >
+ <h1 style={{ margin: 0 }}>
+ <Link
+ to="/"
+ style={{
+ color: `white`,
+ textDecoration: `none`,
+ }}
+ >
+ {siteTitle}
+ </Link>
+ </h1>
+ </div>
+ </header>
+)
+
+Header.propTypes = {
+ siteTitle: PropTypes.string,
+}
+
+Header.defaultProps = {
+ siteTitle: ``,
+}
+
+export default Header
diff --git a/@linaria/examples/gatsby/plugin/src/components/image.js b/@linaria/examples/gatsby/plugin/src/components/image.js
new file mode 100644
index 0000000..e61edb6
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/components/image.js
@@ -0,0 +1,32 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Img from "gatsby-image"
+
+/*
+ * This component is built using `gatsby-image` to automatically serve optimized
+ * images with lazy loading and reduced file sizes. The image is loaded using a
+ * `useStaticQuery`, which allows us to load the image from directly within this
+ * component, rather than having to pass the image data down from pages.
+ *
+ * For more information, see the docs:
+ * - `gatsby-image`: https://gatsby.dev/gatsby-image
+ * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+const Image = () => {
+ const data = useStaticQuery(graphql`
+ query {
+ placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+ childImageSharp {
+ fluid(maxWidth: 300) {
+ ...GatsbyImageSharpFluid
+ }
+ }
+ }
+ }
+ `)
+
+ return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
+}
+
+export default Image
diff --git a/@linaria/examples/gatsby/plugin/src/components/layout.css b/@linaria/examples/gatsby/plugin/src/components/layout.css
new file mode 100644
index 0000000..b6f6332
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/components/layout.css
@@ -0,0 +1,622 @@
+html {
+ font-family: sans-serif;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+}
+body {
+ margin: 0;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+}
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+progress {
+ vertical-align: baseline;
+}
+[hidden],
+template {
+ display: none;
+}
+a {
+ background-color: transparent;
+ -webkit-text-decoration-skip: objects;
+}
+a:active,
+a:hover {
+ outline-width: 0;
+}
+abbr[title] {
+ border-bottom: none;
+ text-decoration: underline;
+ text-decoration: underline dotted;
+}
+b,
+strong {
+ font-weight: inherit;
+ font-weight: bolder;
+}
+dfn {
+ font-style: italic;
+}
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+mark {
+ background-color: #ff0;
+ color: #000;
+}
+small {
+ font-size: 80%;
+}
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
+img {
+ border-style: none;
+}
+svg:not(:root) {
+ overflow: hidden;
+}
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+figure {
+ margin: 1em 40px;
+}
+hr {
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+ font: inherit;
+ margin: 0;
+}
+optgroup {
+ font-weight: 700;
+}
+button,
+input {
+ overflow: visible;
+}
+button,
+select {
+ text-transform: none;
+}
+[type="reset"],
+[type="submit"],
+button,
+html [type="button"] {
+ -webkit-appearance: button;
+}
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner,
+button::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring,
+button:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+fieldset {
+ border: 1px solid silver;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+legend {
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal;
+}
+textarea {
+ overflow: auto;
+}
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+[type="search"] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px;
+}
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+::-webkit-input-placeholder {
+ color: inherit;
+ opacity: 0.54;
+}
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
+}
+html {
+ font: 112.5%/1.45em georgia, serif;
+ box-sizing: border-box;
+ overflow-y: scroll;
+}
+* {
+ box-sizing: inherit;
+}
+*:before {
+ box-sizing: inherit;
+}
+*:after {
+ box-sizing: inherit;
+}
+body {
+ color: hsla(0, 0%, 0%, 0.8);
+ font-family: georgia, serif;
+ font-weight: normal;
+ word-wrap: break-word;
+ font-kerning: normal;
+ -moz-font-feature-settings: "kern", "liga", "clig", "calt";
+ -ms-font-feature-settings: "kern", "liga", "clig", "calt";
+ -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
+ font-feature-settings: "kern", "liga", "clig", "calt";
+}
+img {
+ max-width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+h1 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 2.25rem;
+ line-height: 1.1;
+}
+h2 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 1.62671rem;
+ line-height: 1.1;
+}
+h3 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 1.38316rem;
+ line-height: 1.1;
+}
+h4 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 1rem;
+ line-height: 1.1;
+}
+h5 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 0.85028rem;
+ line-height: 1.1;
+}
+h6 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 0.78405rem;
+ line-height: 1.1;
+}
+hgroup {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+ul {
+ margin-left: 1.45rem;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ list-style-position: outside;
+ list-style-image: none;
+}
+ol {
+ margin-left: 1.45rem;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ list-style-position: outside;
+ list-style-image: none;
+}
+dl {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+dd {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+p {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+figure {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+pre {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ margin-bottom: 1.45rem;
+ font-size: 0.85rem;
+ line-height: 1.42;
+ background: hsla(0, 0%, 0%, 0.04);
+ border-radius: 3px;
+ overflow: auto;
+ word-wrap: normal;
+ padding: 1.45rem;
+}
+table {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ font-size: 1rem;
+ line-height: 1.45rem;
+ border-collapse: collapse;
+ width: 100%;
+}
+fieldset {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+blockquote {
+ margin-left: 1.45rem;
+ margin-right: 1.45rem;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+form {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+noscript {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+iframe {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+hr {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: calc(1.45rem - 1px);
+ background: hsla(0, 0%, 0%, 0.2);
+ border: none;
+ height: 1px;
+}
+address {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+b {
+ font-weight: bold;
+}
+strong {
+ font-weight: bold;
+}
+dt {
+ font-weight: bold;
+}
+th {
+ font-weight: bold;
+}
+li {
+ margin-bottom: calc(1.45rem / 2);
+}
+ol li {
+ padding-left: 0;
+}
+ul li {
+ padding-left: 0;
+}
+li > ol {
+ margin-left: 1.45rem;
+ margin-bottom: calc(1.45rem / 2);
+ margin-top: calc(1.45rem / 2);
+}
+li > ul {
+ margin-left: 1.45rem;
+ margin-bottom: calc(1.45rem / 2);
+ margin-top: calc(1.45rem / 2);
+}
+blockquote *:last-child {
+ margin-bottom: 0;
+}
+li *:last-child {
+ margin-bottom: 0;
+}
+p *:last-child {
+ margin-bottom: 0;
+}
+li > p {
+ margin-bottom: calc(1.45rem / 2);
+}
+code {
+ font-size: 0.85rem;
+ line-height: 1.45rem;
+}
+kbd {
+ font-size: 0.85rem;
+ line-height: 1.45rem;
+}
+samp {
+ font-size: 0.85rem;
+ line-height: 1.45rem;
+}
+abbr {
+ border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+ cursor: help;
+}
+acronym {
+ border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+ cursor: help;
+}
+abbr[title] {
+ border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+ cursor: help;
+ text-decoration: none;
+}
+thead {
+ text-align: left;
+}
+td,
+th {
+ text-align: left;
+ border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
+ font-feature-settings: "tnum";
+ -moz-font-feature-settings: "tnum";
+ -ms-font-feature-settings: "tnum";
+ -webkit-font-feature-settings: "tnum";
+ padding-left: 0.96667rem;
+ padding-right: 0.96667rem;
+ padding-top: 0.725rem;
+ padding-bottom: calc(0.725rem - 1px);
+}
+th:first-child,
+td:first-child {
+ padding-left: 0;
+}
+th:last-child,
+td:last-child {
+ padding-right: 0;
+}
+tt,
+code {
+ background-color: hsla(0, 0%, 0%, 0.04);
+ border-radius: 3px;
+ font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
+ "Liberation Mono", Menlo, Courier, monospace;
+ padding: 0;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+}
+pre code {
+ background: none;
+ line-height: 1.42;
+}
+code:before,
+code:after,
+tt:before,
+tt:after {
+ letter-spacing: -0.2em;
+ content: " ";
+}
+pre code:before,
+pre code:after,
+pre tt:before,
+pre tt:after {
+ content: "";
+}
+@media only screen and (max-width: 480px) {
+ html {
+ font-size: 100%;
+ }
+}
diff --git a/@linaria/examples/gatsby/plugin/src/components/layout.js b/@linaria/examples/gatsby/plugin/src/components/layout.js
new file mode 100644
index 0000000..0359ea6
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/components/layout.js
@@ -0,0 +1,51 @@
+/**
+ * Layout component that queries for data
+ * with Gatsby's useStaticQuery component
+ *
+ * See: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+import React from "react"
+import PropTypes from "prop-types"
+import { useStaticQuery, graphql } from "gatsby"
+
+import Header from "./header"
+import "./layout.css"
+
+const Layout = ({ children }) => {
+ const data = useStaticQuery(graphql`
+ query SiteTitleQuery {
+ site {
+ siteMetadata {
+ title
+ }
+ }
+ }
+ `)
+
+ return (
+ <>
+ <Header siteTitle={data.site.siteMetadata.title} />
+ <div
+ style={{
+ margin: `0 auto`,
+ maxWidth: 960,
+ padding: `0 1.0875rem 1.45rem`,
+ }}
+ >
+ <main>{children}</main>
+ <footer>
+ © {new Date().getFullYear()}, Built with
+ {` `}
+ <a href="https://www.gatsbyjs.org">Gatsby</a>
+ </footer>
+ </div>
+ </>
+ )
+}
+
+Layout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
+
+export default Layout
diff --git a/@linaria/examples/gatsby/plugin/src/components/seo.js b/@linaria/examples/gatsby/plugin/src/components/seo.js
new file mode 100644
index 0000000..aee4d45
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/components/seo.js
@@ -0,0 +1,88 @@
+/**
+ * SEO component that queries for data with
+ * Gatsby's useStaticQuery React hook
+ *
+ * See: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+import React from "react"
+import PropTypes from "prop-types"
+import { Helmet } from "react-helmet"
+import { useStaticQuery, graphql } from "gatsby"
+
+function SEO({ description, lang, meta, title }) {
+ const { site } = useStaticQuery(
+ graphql`
+ query {
+ site {
+ siteMetadata {
+ title
+ description
+ author
+ }
+ }
+ }
+ `
+ )
+
+ const metaDescription = description || site.siteMetadata.description
+
+ return (
+ <Helmet
+ htmlAttributes={{
+ lang,
+ }}
+ title={title}
+ titleTemplate={`%s | ${site.siteMetadata.title}`}
+ meta={[
+ {
+ name: `description`,
+ content: metaDescription,
+ },
+ {
+ property: `og:title`,
+ content: title,
+ },
+ {
+ property: `og:description`,
+ content: metaDescription,
+ },
+ {
+ property: `og:type`,
+ content: `website`,
+ },
+ {
+ name: `twitter:card`,
+ content: `summary`,
+ },
+ {
+ name: `twitter:creator`,
+ content: site.siteMetadata.author,
+ },
+ {
+ name: `twitter:title`,
+ content: title,
+ },
+ {
+ name: `twitter:description`,
+ content: metaDescription,
+ },
+ ].concat(meta)}
+ />
+ )
+}
+
+SEO.defaultProps = {
+ lang: `en`,
+ meta: [],
+ description: ``,
+}
+
+SEO.propTypes = {
+ description: PropTypes.string,
+ lang: PropTypes.string,
+ meta: PropTypes.arrayOf(PropTypes.object),
+ title: PropTypes.string.isRequired,
+}
+
+export default SEO
diff --git a/@linaria/examples/gatsby/plugin/src/images/gatsby-astronaut.png b/@linaria/examples/gatsby/plugin/src/images/gatsby-astronaut.png
new file mode 100644
index 0000000..da58ece
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/images/gatsby-astronaut.png
Binary files differ
diff --git a/@linaria/examples/gatsby/plugin/src/images/gatsby-icon.png b/@linaria/examples/gatsby/plugin/src/images/gatsby-icon.png
new file mode 100644
index 0000000..908bc78
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/images/gatsby-icon.png
Binary files differ
diff --git a/@linaria/examples/gatsby/plugin/src/pages/404.js b/@linaria/examples/gatsby/plugin/src/pages/404.js
new file mode 100644
index 0000000..bc4c31d
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/pages/404.js
@@ -0,0 +1,14 @@
+import React from "react"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+const NotFoundPage = () => (
+ <Layout>
+ <SEO title="404: Not found" />
+ <h1>NOT FOUND</h1>
+ <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+ </Layout>
+)
+
+export default NotFoundPage
diff --git a/@linaria/examples/gatsby/plugin/src/pages/index.js b/@linaria/examples/gatsby/plugin/src/pages/index.js
new file mode 100644
index 0000000..e7cc99f
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/pages/index.js
@@ -0,0 +1,28 @@
+import React from "react"
+import { Link } from "gatsby"
+import { css } from "linaria"
+
+import Layout from "../components/layout"
+import Image from "../components/image"
+import SEO from "../components/seo"
+
+const imageWrapper = css`
+ max-width: 300px;
+ margin-bottom: 1.45rem;
+`
+
+const IndexPage = () => (
+ <Layout>
+ <SEO title="Home" />
+ <h1>Hi people</h1>
+ <p>Welcome to your new Gatsby site.</p>
+ <p>Now go build something great.</p>
+ <div className={imageWrapper}>
+ <Image />
+ </div>
+ <Link to="/page-2/">Go to page 2</Link> <br />
+ <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
+ </Layout>
+)
+
+export default IndexPage
diff --git a/@linaria/examples/gatsby/plugin/src/pages/page-2.js b/@linaria/examples/gatsby/plugin/src/pages/page-2.js
new file mode 100644
index 0000000..666c23e
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/pages/page-2.js
@@ -0,0 +1,16 @@
+import React from "react"
+import { Link } from "gatsby"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+const SecondPage = () => (
+ <Layout>
+ <SEO title="Page two" />
+ <h1>Hi from the second page</h1>
+ <p>Welcome to page 2</p>
+ <Link to="/">Go back to the homepage</Link>
+ </Layout>
+)
+
+export default SecondPage
diff --git a/@linaria/examples/gatsby/plugin/src/pages/using-typescript.tsx b/@linaria/examples/gatsby/plugin/src/pages/using-typescript.tsx
new file mode 100644
index 0000000..f9212ca
--- /dev/null
+++ b/@linaria/examples/gatsby/plugin/src/pages/using-typescript.tsx
@@ -0,0 +1,34 @@
+// If you don't want to use TypeScript you can delete this file!
+import React from "react"
+import { PageProps, Link, graphql } from "gatsby"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+type DataProps = {
+ site: {
+ buildTime: string
+ }
+}
+
+const UsingTypescript: React.FC<PageProps<DataProps>> = ({ data, path }) => (
+ <Layout>
+ <SEO title="Using TypeScript" />
+ <h1>Gatsby supports TypeScript by default!</h1>
+ <p>This means that you can create and write <em>.ts/.tsx</em> files for your pages, components etc. Please note that the <em>gatsby-*.js</em> files (like gatsby-node.js) currently don't support TypeScript yet.</p>
+ <p>For type checking you'll want to install <em>typescript</em> via npm and run <em>tsc --init</em> to create a <em>.tsconfig</em> file.</p>
+ <p>You're currently on the page "{path}" which was built on {data.site.buildTime}.</p>
+ <p>To learn more, head over to our <a href="https://www.gatsbyjs.org/docs/typescript/">documentation about TypeScript</a>.</p>
+ <Link to="/">Go back to the homepage</Link>
+ </Layout>
+)
+
+export default UsingTypescript
+
+export const query = graphql`
+ {
+ site {
+ buildTime(formatString: "YYYY-MM-DD hh:mm a z")
+ }
+ }
+`
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-17 20:09:48 +0000