From bd298c94f73598502121431965787b78edc22875 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Sun, 28 Apr 2024 22:04:46 +0100 Subject: Initial commit from gatsby --- src/images/icon.png | Bin 0 -> 11189 bytes src/pages/404.tsx | 49 +++++++++++++ src/pages/index.tsx | 193 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 242 insertions(+) create mode 100644 src/images/icon.png create mode 100644 src/pages/404.tsx create mode 100644 src/pages/index.tsx (limited to 'src') diff --git a/src/images/icon.png b/src/images/icon.png new file mode 100644 index 0000000..38b2fb0 Binary files /dev/null and b/src/images/icon.png differ diff --git a/src/pages/404.tsx b/src/pages/404.tsx new file mode 100644 index 0000000..972f139 --- /dev/null +++ b/src/pages/404.tsx @@ -0,0 +1,49 @@ +import * as React from "react" +import { Link, HeadFC, PageProps } from "gatsby" + +const pageStyles = { + color: "#232129", + padding: "96px", + fontFamily: "-apple-system, Roboto, sans-serif, serif", +} +const headingStyles = { + marginTop: 0, + marginBottom: 64, + maxWidth: 320, +} + +const paragraphStyles = { + marginBottom: 48, +} +const codeStyles = { + color: "#8A6534", + padding: 4, + backgroundColor: "#FFF4DB", + fontSize: "1.25rem", + borderRadius: 4, +} + +const NotFoundPage: React.FC = () => { + return ( +
+

Page not found

+

+ Sorry πŸ˜”, we couldn’t find what you were looking for. +
+ {process.env.NODE_ENV === "development" ? ( + <> +
+ Try creating a page in src/pages/. +
+ + ) : null} +
+ Go home. +

+
+ ) +} + +export default NotFoundPage + +export const Head: HeadFC = () => Not found diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..2da81b8 --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,193 @@ +import * as React from "react" +import type { HeadFC, PageProps } from "gatsby" + +const pageStyles = { + color: "#232129", + padding: 96, + fontFamily: "-apple-system, Roboto, sans-serif, serif", +} +const headingStyles = { + marginTop: 0, + marginBottom: 64, + maxWidth: 320, +} +const headingAccentStyles = { + color: "#663399", +} +const paragraphStyles = { + marginBottom: 48, +} +const codeStyles = { + color: "#8A6534", + padding: 4, + backgroundColor: "#FFF4DB", + fontSize: "1.25rem", + borderRadius: 4, +} +const listStyles = { + marginBottom: 96, + paddingLeft: 0, +} +const doclistStyles = { + paddingLeft: 0, +} +const listItemStyles = { + fontWeight: 300, + fontSize: 24, + maxWidth: 560, + marginBottom: 30, +} + +const linkStyle = { + color: "#8954A8", + fontWeight: "bold", + fontSize: 16, + verticalAlign: "5%", +} + +const docLinkStyle = { + ...linkStyle, + listStyleType: "none", + display: `inline-block`, + marginBottom: 24, + marginRight: 12, +} + +const descriptionStyle = { + color: "#232129", + fontSize: 14, + marginTop: 10, + marginBottom: 0, + lineHeight: 1.25, +} + +const docLinks = [ + { + text: "TypeScript Documentation", + url: "https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/", + color: "#8954A8", + }, + { + text: "GraphQL Typegen Documentation", + url: "https://www.gatsbyjs.com/docs/how-to/local-development/graphql-typegen/", + color: "#8954A8", + } +] + +const badgeStyle = { + color: "#fff", + backgroundColor: "#088413", + border: "1px solid #088413", + fontSize: 11, + fontWeight: "bold", + letterSpacing: 1, + borderRadius: 4, + padding: "4px 6px", + display: "inline-block", + position: "relative" as "relative", + top: -2, + marginLeft: 10, + lineHeight: 1, +} + +const links = [ + { + text: "Tutorial", + url: "https://www.gatsbyjs.com/docs/tutorial/getting-started/", + description: + "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.", + color: "#E95800", + }, + { + text: "How to Guides", + url: "https://www.gatsbyjs.com/docs/how-to/", + description: + "Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.", + color: "#1099A8", + }, + { + text: "Reference Guides", + url: "https://www.gatsbyjs.com/docs/reference/", + description: + "Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.", + color: "#BC027F", + }, + { + text: "Conceptual Guides", + url: "https://www.gatsbyjs.com/docs/conceptual/", + description: + "Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.", + color: "#0D96F2", + }, + { + text: "Plugin Library", + url: "https://www.gatsbyjs.com/plugins", + description: + "Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.", + color: "#8EB814", + }, + { + text: "Build and Host", + url: "https://www.gatsbyjs.com/cloud", + badge: true, + description: + "Now you’re ready to show the world! Give your Gatsby site superpowers: Build and host on Gatsby Cloud. Get started for free!", + color: "#663399", + }, +] + +const IndexPage: React.FC = () => { + return ( +
+

+ Congratulations +
+ β€” you just made a Gatsby site! πŸŽ‰πŸŽ‰πŸŽ‰ +

+

+ Edit src/pages/index.tsx to see this page + update in real-time. 😎 +

+ +
    + {links.map(link => ( +
  • + + + {link.text} + + {link.badge && ( + + NEW! + + )} +

    {link.description}

    +     +
    • + ))} +
+ Gatsby G Logo +
+ ) +} + +export default IndexPage + +export const Head: HeadFC = () => Home Page -- cgit v1.2.3