mirror of
https://github.com/fullstack-cash/fullstack-gatsby-theme-bch-wallet.git
synced 2026-09-22 17:22:05 -07:00
Forked from gatsby-ipfs-adminlte
This commit is contained in:
Chris Troutner
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
|
||||
import { Content, Row, Col, Box, Button } from "adminlte-2-react"
|
||||
|
||||
class Example extends React.Component {
|
||||
state = {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Content
|
||||
title="Test"
|
||||
subTitle="Getting started with adminlte-2-react"
|
||||
browserTitle="Hello World"
|
||||
>
|
||||
<Row>
|
||||
<Col xs={6}>
|
||||
<Box
|
||||
title="My first box"
|
||||
type="primary"
|
||||
closable
|
||||
collapsable
|
||||
footer={<Button type="danger" text="Danger Button" />}
|
||||
>
|
||||
Hello World
|
||||
</Box>
|
||||
</Col>
|
||||
<Col xs={6}>
|
||||
<Box title="Another box">Content goes here</Box>
|
||||
</Col>
|
||||
</Row>
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Example
|
||||
@@ -0,0 +1,28 @@
|
||||
import React from "react"
|
||||
import Image from "../image"
|
||||
|
||||
import { Content, Row, Col } from "adminlte-2-react"
|
||||
|
||||
class Example2 extends React.Component {
|
||||
state = {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Content
|
||||
title="IMG"
|
||||
subTitle="Getting started with adminlte-2-react"
|
||||
browserTitle="Hello World"
|
||||
>
|
||||
<Row>
|
||||
<Col xs={3}></Col>
|
||||
<Col xs={6}>
|
||||
<Image />
|
||||
</Col>
|
||||
<Col xs={3}></Col>
|
||||
</Row>
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Example2
|
||||
@@ -0,0 +1,285 @@
|
||||
import React from "react"
|
||||
|
||||
import {
|
||||
Content,
|
||||
Row,
|
||||
Col,
|
||||
Box,
|
||||
Button,
|
||||
Inputs,
|
||||
Divider,
|
||||
} from "adminlte-2-react"
|
||||
|
||||
const { Text, Checkbox, Radio, Select } = Inputs
|
||||
|
||||
class Example3 extends React.Component {
|
||||
state = {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Content
|
||||
title="General Form Elements"
|
||||
subTitle="Preview"
|
||||
browserTitle="AdminLTE 2 | General Form Elements"
|
||||
>
|
||||
<Row>
|
||||
<Col md={6}>
|
||||
<Box
|
||||
type="primary"
|
||||
title="Quick Example"
|
||||
border
|
||||
footer={<Button type="primary" text="Submit" pullLeft />}
|
||||
>
|
||||
<Text
|
||||
name="exampleInputEmail1"
|
||||
placeholder="Enter email"
|
||||
label="Email address"
|
||||
labelPosition="above"
|
||||
/>
|
||||
<Text
|
||||
name="exampleInputPassword1"
|
||||
placeholder="Password"
|
||||
label="Password"
|
||||
labelPosition="above"
|
||||
inputType="password"
|
||||
/>
|
||||
<Text
|
||||
name="exampleInputPassword1"
|
||||
label="File input"
|
||||
labelPosition="above"
|
||||
inputType="file"
|
||||
help="Example block-level help text here."
|
||||
/>
|
||||
<Checkbox label="Check me out" />
|
||||
</Box>
|
||||
<Box type="success" title="Different Height" border>
|
||||
<Text placeholder=".input-lg" size="lg" labelPosition="none" />
|
||||
<br />
|
||||
<Text placeholder="Default input" labelPosition="none" />
|
||||
<br />
|
||||
<Text placeholder=".input-sm" size="sm" labelPosition="none" />
|
||||
</Box>
|
||||
<Box type="danger" title="Different Width" border>
|
||||
<Row>
|
||||
<Col xs={3}>
|
||||
<Text placeholder=".col-xs-3" labelPosition="none" />
|
||||
</Col>
|
||||
<Col xs={4}>
|
||||
<Text placeholder=".col-xs-4" labelPosition="none" />
|
||||
</Col>
|
||||
<Col xs={5}>
|
||||
<Text placeholder=".col-xs-5" labelPosition="none" />
|
||||
</Col>
|
||||
</Row>
|
||||
</Box>
|
||||
<Box type="info" title="Input Addon" border>
|
||||
<Text labelPosition="none" placeholder="Username" addonLeft="@" />
|
||||
<br />
|
||||
<Text labelPosition="none" addonRight=".00" />
|
||||
<br />
|
||||
<Text labelPosition="none" addonLeft="$" addonRight=".00" />
|
||||
<h4>With icons</h4>
|
||||
<Text
|
||||
labelPosition="none"
|
||||
placeholder="Email"
|
||||
iconLeft="fas-envelope"
|
||||
/>
|
||||
<br />
|
||||
<Text labelPosition="none" iconRight="fas-check" />
|
||||
<br />
|
||||
<Text
|
||||
labelPosition="none"
|
||||
iconRight="fas-ambulance"
|
||||
iconLeft="fas-dollar-sign"
|
||||
/>
|
||||
<h4>With checkbox and radio inputs</h4>
|
||||
<Row>
|
||||
<Col lg={6}>
|
||||
<Text checkboxLeft labelPosition="none" />
|
||||
</Col>
|
||||
<Col lg={6}>
|
||||
<Text radioLeft labelPosition="none" />
|
||||
</Col>
|
||||
</Row>
|
||||
<h4>With buttons</h4>
|
||||
<p className="margin">
|
||||
Large: <code>.input-group.input-group-lg</code>
|
||||
</p>
|
||||
<Text
|
||||
size="lg"
|
||||
buttonLeft={
|
||||
<Button size="lg" type="warning" text="Action">
|
||||
<a href="/">Action</a>
|
||||
<a href="/">Another action</a>
|
||||
<a href="/">Something else here</a>
|
||||
<Divider />
|
||||
<a href="/">Separated link</a>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<p className="margin">Normal</p>
|
||||
<Text buttonLeft={<Button type="danger" text="Action" />} />
|
||||
<p className="margin">
|
||||
Small <code>.input-group.input-group-sm</code>
|
||||
</p>
|
||||
<Text
|
||||
size="sm"
|
||||
buttonRight={<Button type="info" flat text="Go!" />}
|
||||
/>
|
||||
</Box>
|
||||
</Col>
|
||||
<Col md={6}>
|
||||
<Box
|
||||
type="info"
|
||||
title="Horizontal Form"
|
||||
bodyClassName="form-horizontal"
|
||||
footer={
|
||||
<React.Fragment>
|
||||
<Button text="Cancel" pullLeft />
|
||||
<Button text="Sign in" type="info" pullRight />
|
||||
</React.Fragment>
|
||||
}
|
||||
border
|
||||
>
|
||||
<Text name="inputEmail3" placeholder="Email" label="Email" />
|
||||
<Text
|
||||
name="inputPassword3"
|
||||
placeholder="Password"
|
||||
label="Password"
|
||||
inputType="password"
|
||||
/>
|
||||
<Checkbox label="Remember me" />
|
||||
</Box>
|
||||
<Box type="warning" title="General Elements" border>
|
||||
<Text
|
||||
label="Text"
|
||||
labelPosition="above"
|
||||
placeholder="Enter ..."
|
||||
/>
|
||||
<Text
|
||||
label="Text Disabled"
|
||||
labelPosition="above"
|
||||
placeholder="Enter ..."
|
||||
disabled
|
||||
/>
|
||||
<Text
|
||||
label="Textarea"
|
||||
inputType="textarea"
|
||||
rows={3}
|
||||
labelPosition="above"
|
||||
placeholder="Enter ..."
|
||||
/>
|
||||
<Text
|
||||
label="Textarea Disabled"
|
||||
inputType="textarea"
|
||||
rows={3}
|
||||
labelPosition="above"
|
||||
placeholder="Enter ..."
|
||||
disabled
|
||||
/>
|
||||
<Text
|
||||
type="success"
|
||||
labelPosition="above"
|
||||
label="Input with success"
|
||||
labelIcon="fas-check"
|
||||
placeholder="Enter ..."
|
||||
help="Help block with success"
|
||||
/>
|
||||
<Text
|
||||
type="warning"
|
||||
labelPosition="above"
|
||||
label="Input with warning"
|
||||
labelIcon="far-bell"
|
||||
placeholder="Enter ..."
|
||||
help="Help block with warning"
|
||||
/>
|
||||
<Text
|
||||
type="error"
|
||||
labelPosition="above"
|
||||
label="Input with error"
|
||||
labelIcon="far-times-circle"
|
||||
placeholder="Enter ..."
|
||||
help="Help block with error"
|
||||
/>
|
||||
<Checkbox text="Checkbox 1" labelXs={0} />
|
||||
<Checkbox text="Checkbox 2" labelXs={0} />
|
||||
<Checkbox text="Checkbox disabled" labelXs={0} disabled />
|
||||
<Radio
|
||||
options={[
|
||||
{
|
||||
checked: true,
|
||||
id: "optionsRadios1",
|
||||
value: "option1",
|
||||
label:
|
||||
"Option one is this and that—be sure to include why it's great",
|
||||
},
|
||||
{
|
||||
id: "optionsRadios2",
|
||||
value: "option2",
|
||||
label:
|
||||
"Option two can be something else and selecting it will deselect option one",
|
||||
},
|
||||
{
|
||||
disabled: true,
|
||||
id: "optionsRadios3",
|
||||
value: "option3",
|
||||
label: "Option three is disabled",
|
||||
},
|
||||
]}
|
||||
name="optionsRadios"
|
||||
onChange={() => {}}
|
||||
/>
|
||||
<Select
|
||||
label="Select"
|
||||
options={[
|
||||
{ label: "option 1", value: "1" },
|
||||
{ label: "option 2", value: "2" },
|
||||
{ label: "option 3", value: "3" },
|
||||
{ label: "option 4", value: "4" },
|
||||
{ label: "option 5", value: "5" },
|
||||
]}
|
||||
value={1}
|
||||
/>
|
||||
<Select
|
||||
label="Select Disabled"
|
||||
options={[
|
||||
{ label: "option 1", value: "1" },
|
||||
{ label: "option 2", value: "2" },
|
||||
{ label: "option 3", value: "3" },
|
||||
{ label: "option 4", value: "4" },
|
||||
{ label: "option 5", value: "5" },
|
||||
]}
|
||||
disabled
|
||||
/>
|
||||
<Select
|
||||
label="Select Multiple"
|
||||
options={[
|
||||
{ label: "option 1", value: "1" },
|
||||
{ label: "option 2", value: "2" },
|
||||
{ label: "option 3", value: "3" },
|
||||
{ label: "option 4", value: "4" },
|
||||
{ label: "option 5", value: "5" },
|
||||
]}
|
||||
multiple
|
||||
/>
|
||||
<Select
|
||||
label="Select Disabled"
|
||||
options={[
|
||||
{ label: "option 1", value: "1" },
|
||||
{ label: "option 2", value: "2" },
|
||||
{ label: "option 3", value: "3" },
|
||||
{ label: "option 4", value: "4" },
|
||||
{ label: "option 5", value: "5" },
|
||||
]}
|
||||
multiple
|
||||
disabled
|
||||
/>
|
||||
</Box>
|
||||
</Col>
|
||||
</Row>
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Example3
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from "react"
|
||||
import Example from "./example"
|
||||
import Example2 from "./example2"
|
||||
import Example3 from "./example3"
|
||||
|
||||
import AdminLTE, { Sidebar } from "adminlte-2-react"
|
||||
|
||||
const { Item } = Sidebar
|
||||
|
||||
class AdminLTEPage extends React.Component {
|
||||
state = {}
|
||||
|
||||
sidebar = [
|
||||
<Item key="test" text="TEST" to="/test" />,
|
||||
<Item key="img" text="IMG" to="/img" />,
|
||||
<Item key="forms" text="FORMS" to="/forms" />,
|
||||
]
|
||||
|
||||
render() {
|
||||
return (
|
||||
<AdminLTE
|
||||
title={["Hello", "World"]}
|
||||
titleShort={["He", "we"]}
|
||||
theme="blue"
|
||||
sidebar={this.sidebar}
|
||||
>
|
||||
<Example path="/test" />
|
||||
<Example2 path="/img" />
|
||||
<Example3 path="/forms" />
|
||||
</AdminLTE>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default AdminLTEPage
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
@@ -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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -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't exist... the sadness.</p>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
export default NotFoundPage
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react'
|
||||
|
||||
let AdminLTE =
|
||||
typeof window !== `undefined`
|
||||
? require('../components/admin-lte').default
|
||||
: null
|
||||
|
||||
class AdminLTEPage extends React.Component {
|
||||
state = {}
|
||||
|
||||
|
||||
render() {
|
||||
return <>{AdminLTE && <AdminLTE />}</>
|
||||
}
|
||||
}
|
||||
|
||||
export default AdminLTEPage
|
||||
@@ -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
|
||||
@@ -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")
|
||||
}
|
||||
}
|
||||
`
|
||||
Reference in New Issue
Block a user