Skip to content

Commit c7049a6

Browse files
ueokandeueokande
committed
Add SEO and fix layout
1 parent acf5123 commit c7049a6

File tree

9 files changed

+194
-76
lines changed

9 files changed

+194
-76
lines changed

‎gatsby-config.ts

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,34 @@ import type { GatsbyConfig } from "gatsby";
33
const config: GatsbyConfig = {
44
jsxRuntime: "automatic",
55
siteMetadata: {
6-
title: "browser-actions-web",
7-
siteUrl: "https://www.yourdomain.tld",
6+
title: "Browser Actions",
7+
description: "GitHub Actions for Browsers",
8+
siteUrl: "https://browser-actions.github.io",
89
},
9-
// More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
10-
// If you use VSCode you can also use the GraphQL plugin
11-
// Learn more at: https://gatsby.dev/graphql-typegen
1210
graphqlTypegen: true,
1311
plugins: [
12+
{
13+
resolve: "gatsby-source-filesystem",
14+
options: {
15+
name: "images",
16+
path: `${__dirname}/src/images/`,
17+
},
18+
},
1419
"gatsby-plugin-styled-components",
1520
"gatsby-plugin-image",
1621
"gatsby-plugin-sharp",
1722
"gatsby-transformer-sharp",
23+
{
24+
resolve: "gatsby-plugin-manifest",
25+
options: {
26+
name: "Browser Actions - GitHub Actions for Browsers",
27+
short_name: "Browser Actions",
28+
start_url: "/",
29+
background_color: "#ffffff",
30+
display: "standalone",
31+
icon: "src/images/icon.png",
32+
},
33+
},
1834
],
1935
};
2036

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"babel-plugin-styled-components": "^2.1.4",
2020
"gatsby": "^5.13.5",
2121
"gatsby-plugin-image": "^3.13.1",
22+
"gatsby-plugin-manifest": "^5.13.1",
2223
"gatsby-plugin-sharp": "^5.13.1",
2324
"gatsby-plugin-styled-components": "^6.13.1",
2425
"gatsby-source-filesystem": "^5.13.1",

‎pnpm-lock.yaml

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/layout.tsx

Lines changed: 88 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Link } from "gatsby";
1+
import { Link, graphql, useStaticQuery } from "gatsby";
2+
import { GatsbyImage } from "gatsby-plugin-image";
23
import { Grommet } from "grommet";
34
import type * as React from "react";
45
import "./layout.css";
@@ -19,75 +20,98 @@ interface Props {
1920
children: React.ReactNode;
2021
}
2122

22-
const AppName = "browser-actions";
23+
const AppName = "Browser Actions";
24+
25+
const AppHeader = () => {
26+
const actionItems = ["setup-chrome", "setup-firefox", "setup-edge"];
27+
const extensionItems = ["release-chrome-extension", "release-firefox-addon"];
28+
const { icon } = useStaticQuery(graphql`
29+
query Icon {
30+
icon: file(relativePath: { eq: "icon.png" }) {
31+
childImageSharp {
32+
gatsbyImageData(width: 24, height: 24)
33+
}
34+
}
35+
}
36+
`);
37+
38+
return (
39+
<Header
40+
background="white"
41+
fill="horizontal"
42+
pad={{ horizontal: "large", vertical: "none" }}
43+
style={{
44+
boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 2px 0px",
45+
}}
46+
sticky="scrollup"
47+
>
48+
<Box direction="row" align="center" gap="medium">
49+
<Button as={Link} {...{ to: "/" }}>
50+
<GatsbyImage
51+
image={icon.childImageSharp.gatsbyImageData}
52+
alt="icon"
53+
/>
54+
<Text margin={{ left: "xsmall" }}>{AppName}</Text>
55+
</Button>
56+
<Menu
57+
label="Open Source"
58+
items={[
59+
actionItems.map((action) => ({
60+
label: action,
61+
as: (props) => <Link to={`/${action}`} {...props} />,
62+
})),
63+
extensionItems.map((extension) => ({
64+
label: extension,
65+
as: (props) => <Link to={`/${extension}`} {...props} />,
66+
})),
67+
]}
68+
/>
69+
</Box>
70+
<Box align="end">
71+
<Anchor
72+
href="https://github.com/browser-actions"
73+
target="_blank"
74+
rel="noopener noreferrer"
75+
label="GitHub"
76+
icon={<GithubIcon />}
77+
/>
78+
</Box>
79+
</Header>
80+
);
81+
};
82+
83+
const AppFooter = () => {
84+
return (
85+
<Footer background="dark-1" pad="medium" justify="between">
86+
<Text>
87+
Copyright by{" "}
88+
<Anchor
89+
href="https://github.com/ueokande"
90+
target="_blank"
91+
rel="noopener noreferrer"
92+
>
93+
@ueokande
94+
</Anchor>{" "}
95+
and all contributors
96+
</Text>
97+
<Anchor
98+
href="https://github.com/browser-actions"
99+
target="_blank"
100+
rel="noopener noreferrer"
101+
>
102+
GitHub
103+
</Anchor>
104+
</Footer>
105+
);
106+
};
23107

24108
export const Layout: React.FC<Props> = ({ children }) => {
25109
return (
26110
<Grommet theme={grommet} full>
27111
<Box>
28-
<Header
29-
background="white"
30-
fill="horizontal"
31-
pad={{ horizontal: "small", vertical: "none" }}
32-
style={{
33-
boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 2px 0px",
34-
}}
35-
sticky="scrollup"
36-
>
37-
<Box direction="row" align="center">
38-
<Button margin="small" as={Link} {...{ to: "/" }}>
39-
{AppName}
40-
</Button>
41-
<Menu
42-
label="setup actions"
43-
items={[
44-
[
45-
{
46-
label: "setup-chrome",
47-
as: (props) => <Link to="/setup-chrome" {...props} />,
48-
},
49-
{
50-
label: "setup-firefox",
51-
as: (props) => <Link to="/setup-firefox" {...props} />,
52-
},
53-
{
54-
label: "setup-edge",
55-
as: (props) => <Link to="/setup-edge" {...props} />,
56-
},
57-
],
58-
[
59-
{
60-
label: "release-chrome-extension",
61-
as: (props) => (
62-
<Link to="/release-chrome-extension" {...props} />
63-
),
64-
},
65-
{
66-
label: "release-firefox-extension",
67-
as: (props) => (
68-
<Link to="/release-firefox-extension" {...props} />
69-
),
70-
},
71-
],
72-
]}
73-
/>
74-
</Box>
75-
<Box align="end">
76-
<Anchor
77-
href="#"
78-
target="_blank"
79-
rel="noopener noreferrer"
80-
as="a"
81-
label="GitHub"
82-
icon={<GithubIcon />}
83-
/>
84-
</Box>
85-
</Header>
112+
<AppHeader />
86113
<Main flex>{children}</Main>
87-
<Footer background="dark-1" pad="medium" justify="between">
88-
<Text>© Copyright by {AppName} developers</Text>
89-
<Anchor href="#">GitHub</Anchor>
90-
</Footer>
114+
<AppFooter />
91115
</Box>
92116
</Grommet>
93117
);

‎src/components/seo.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { graphql, useStaticQuery } from "gatsby";
2+
3+
interface Props {
4+
title?: string;
5+
description?: string;
6+
children?: React.ReactNode;
7+
}
8+
9+
export const Seo: React.FC<Props> = ({
10+
description,
11+
title: subTitle,
12+
children,
13+
}) => {
14+
const { site, cover } = useStaticQuery(graphql`
15+
query Site {
16+
site {
17+
siteMetadata {
18+
title
19+
description
20+
siteUrl
21+
}
22+
}
23+
cover: file(relativePath: { eq: "cover.png" }) {
24+
childImageSharp {
25+
gatsbyImageData
26+
}
27+
}
28+
}`);
29+
30+
const metaDescription = description || site.siteMetadata.description;
31+
const siteTitle = site.siteMetadata?.title;
32+
const title = subTitle
33+
? `${subTitle} | ${siteTitle}`
34+
: `${siteTitle} | ${metaDescription}`;
35+
const coverUrl = `${site.siteMetadata.siteUrl}${cover.childImageSharp.gatsbyImageData.images.fallback.src}`;
36+
37+
return (
38+
<>
39+
<title>{title}</title>
40+
<meta name="description" content={metaDescription} />
41+
<meta name="image" content={coverUrl} />
42+
<meta property="og:title" content={title} />
43+
<meta property="og:image" content={coverUrl} />
44+
<meta property="og:description" content={metaDescription} />
45+
<meta property="og:type" content="website" />
46+
{children}
47+
</>
48+
);
49+
};

‎src/images/cover.png

302 KB
Loading

‎src/images/icon.png

237 KB
Loading

‎src/pages/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from "grommet-icons";
88
import type * as React from "react";
99
import { Layout } from "../components/layout";
10+
import { Seo } from "../components/seo";
1011
import { ToolList, ToolListItem } from "../components/toolList";
1112

1213
type SetupActionName = "setup-chrome" | "setup-firefox" | "setup-edge";
@@ -106,4 +107,4 @@ const IndexPage: React.FC<PageProps> = () => {
106107

107108
export default IndexPage;
108109

109-
export const Head: HeadFC = () => <title>Home Page</title>;
110+
export const Head: HeadFC = () => <Seo />;

‎src/templates/action.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,16 @@ import {
1111
} from "grommet";
1212
import { Actions as ActionsIcon, Github as GithubIcon } from "grommet-icons";
1313
import { Layout } from "../components/layout";
14+
import { Seo } from "../components/seo";
1415
import type { ActionType } from "../types";
1516

17+
type PageContext = {
18+
name: string;
19+
action: ActionType;
20+
};
21+
1622
interface Props {
17-
pageContext: {
18-
name: string;
19-
action: ActionType;
20-
};
23+
pageContext: PageContext;
2124
}
2225

2326
const ActionPage: React.FC<PageProps & Props> = ({ pageContext }) => {
@@ -50,7 +53,9 @@ const ActionPage: React.FC<PageProps & Props> = ({ pageContext }) => {
5053
<Heading level="1" margin="none">
5154
{name}
5255
</Heading>
53-
<Paragraph size="large">{action.description}</Paragraph>
56+
<Paragraph size="large" fill>
57+
{action.description}
58+
</Paragraph>
5459

5560
<Heading level="2">Inputs</Heading>
5661
{action.inputs ? (
@@ -83,6 +88,9 @@ const ActionPage: React.FC<PageProps & Props> = ({ pageContext }) => {
8388
);
8489
};
8590

86-
export const Head: HeadFC = () => <title>Home Page</title>;
91+
export const Head: HeadFC<unknown, PageContext> = ({ pageContext }) => {
92+
const { name } = pageContext;
93+
return <Seo title={name} />;
94+
};
8795

8896
export default ActionPage;

0 commit comments

Comments
 (0)