Skip to content

Commit 9e301ce

Browse files
recurserrecurser
committed
feat: add Twitter and Open Graph meta tags
1 parent 5b504cb commit 9e301ce

File tree

17 files changed

+111
-116
lines changed

17 files changed

+111
-116
lines changed

‎locales/en/common.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
22
"meta_description": "A powerful, open-source, privacy-friendly online toolkit for developers, with a focus on security.",
3-
"page_title_suffix": " - string.is - a privacy-friendly toolkit for developers"
3+
"page_title": "string.is",
4+
"page_title_suffix": " - a privacy-friendly toolkit for developers"
45
}

‎locales/en/pages-about.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"li_goal_open_source": "It should be open-source.",
1313
"li_goal_strict_csp": "It should have a strict <0>Content Security Policy</0>.",
1414
"page_heading": "About string.is",
15-
"page_title": "About",
15+
"page_title": "About string.is",
1616
"para_icon": "The icon is based on <0>developer</0> by <1>Achmad Mulyana</1>.",
1717
"para_acknowledgements": "string.is wouldn\u2019t exist without the following open-source libraries:",
1818
"para_built": "string.is was built to meet those goals, and provide a secure, trustworthy string conversion tool.",

‎locales/en/pages-home.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
{
2-
"page_heading": "Online Developer Toolkit",
3-
"page_title": "string.is - a privacy-friendly toolkit for developers"
2+
"page_heading": "Online Developer Toolkit"
43
}

‎locales/en/pages-privacy.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"li_dont_share": "We don\u2019t share information with advertising companies or social networks.",
1212
"meta_description": "TL;DR: we don\u2019t use cookies and we don\u2019t collect any personal data. We don\u2019t provide accounts or accept payments. We are committed to complying with GDPR, CCPA, PECR and other privacy regulations.",
1313
"page_heading": "Privacy Policy",
14-
"page_title": "Privacy Policy",
14+
"page_title": "Privacy Policy - string.is",
1515
"para_changes": "We may update this policy as needed to comply with relevant regulations and reflect any new practices. The complete change history is <0>available on Github</0>.",
1616
"para_file_issue": "Feel free to <0>file an issue on Github</0> if you have any questions, comments, or concerns about this privacy policy, your data, or your rights with respect to your information.",
1717
"para_tldr": "TL;DR: we don\u2019t use cookies and we don\u2019t collect any personal data. We don\u2019t provide accounts or accept payments. We are committed to complying with GDPR, CCPA, PECR and other privacy regulations. See the <0>Security page</0> for details of the measures taken to protect both your data and privacy."

‎locales/en/pages-security.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"open_source_content": "The source code is publicly available on <0>Github</0>, so that you can verify for yourself how your data is handled.",
1717
"open_source_heading": "Open source",
1818
"page_heading": "Security",
19-
"page_title": "Security",
19+
"page_title": "Security - string.is",
2020
"ssl_content": "Requests and responses are encrypted in transit to protect against MITM attacks. Certificates are provided by <0>Let\u2019s Encrypt</0>, and managed by <1>Vercel</1>.",
2121
"ssl_heading": "All requests are served over SSL"
2222
}

‎locales/en/pages-terms.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"meta_description": "These are the Terms of Use governing the use of this Service and the agreement that operates between You and the Company. These Terms of Use set out the rights and obligations of all users regarding the use of the Service.",
33
"page_heading": "Terms of Use",
4-
"page_title": "Terms of Use"
4+
"page_title": "Terms of Use - string.is"
55
}

‎pages/_document.tsx‎

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -57,39 +57,7 @@ class StringIsDocument extends Document {
5757
render(): ReactElement {
5858
return (
5959
<Html>
60-
<Head>
61-
<meta charSet="utf-8" />
62-
<link
63-
href="/favicons/apple-touch-icon.png"
64-
rel="apple-touch-icon"
65-
sizes="180x180"
66-
/>
67-
<link
68-
href="/favicons/favicon-32x32.png"
69-
rel="icon"
70-
sizes="32x32"
71-
type="image/png"
72-
/>
73-
<link
74-
href="/favicons/favicon-16x16.png"
75-
rel="icon"
76-
sizes="16x16"
77-
type="image/png"
78-
/>
79-
<link href="/favicons/site.webmanifest" rel="manifest" />
80-
<link
81-
color="#45b980"
82-
href="/favicons/safari-pinned-tab.svg"
83-
rel="mask-icon"
84-
/>
85-
<link href="/favicons/favicon.ico" rel="shortcut icon" />
86-
<meta content="#45b980" name="msapplication-TileColor" />
87-
<meta
88-
content="/favicons/browserconfig.xml"
89-
name="msapplication-config"
90-
/>
91-
<meta content="#ffffff" name="theme-color" />
92-
</Head>
60+
<Head />
9361
<body>
9462
<Main />
9563
<NextScript />

‎public/twitter-cards/string-is.png‎

108 KB
Loading

‎src/components/layout/MetaTags.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import Head from 'next/head'
2+
import { ReactElement } from 'react'
3+
import useTranslation from 'next-translate/useTranslation'
4+
5+
interface Props {
6+
/**
7+
* The meta description of the page.
8+
*/
9+
description?: string
10+
11+
/**
12+
* The top-level title of the page.
13+
*/
14+
title?: string
15+
}
16+
17+
/**
18+
* Renders the default meta tags. These can be over-ridden on a per-page basis.
19+
*/
20+
export const MetaTags = ({
21+
description: optionalDescription,
22+
title: optionalTitle,
23+
}: Props): ReactElement => {
24+
const { t } = useTranslation('common')
25+
26+
const titleTag = optionalTitle
27+
? `${optionalTitle}${t('page_title_suffix')}`
28+
: `${t('page_title')}${t('page_title_suffix')}`
29+
const title = optionalTitle ? optionalTitle : t('page_title')
30+
const description = optionalDescription
31+
? optionalDescription
32+
: t('meta_description')
33+
34+
return (
35+
<Head>
36+
<title>{titleTag}</title>
37+
<meta charSet="utf-8" />
38+
<meta content={description} name="description" />
39+
<meta content={title} key="title" property="og:title" />
40+
<meta content={description} property="og:description" />
41+
<meta
42+
content="https://string.is/twitter-cards/string-is.png"
43+
property="og:image"
44+
/>
45+
<meta content="summary" name="twitter:card" />
46+
<meta content="@davemetrics" name="twitter:creator" />
47+
<meta content="@string__is" name="twitter:site" />
48+
<meta content={title} name="twitter:title" />)
49+
<meta content={description} name="twitter:description" />
50+
<meta
51+
content="https://string.is/twitter-cards/string-is.png"
52+
name="twitter:image"
53+
/>
54+
<link
55+
href="/favicons/apple-touch-icon.png"
56+
rel="apple-touch-icon"
57+
sizes="180x180"
58+
/>
59+
<link
60+
href="/favicons/favicon-32x32.png"
61+
rel="icon"
62+
sizes="32x32"
63+
type="image/png"
64+
/>
65+
<link
66+
href="/favicons/favicon-16x16.png"
67+
rel="icon"
68+
sizes="16x16"
69+
type="image/png"
70+
/>
71+
<link href="/favicons/site.webmanifest" rel="manifest" />
72+
<link
73+
color="#45b980"
74+
href="/favicons/safari-pinned-tab.svg"
75+
rel="mask-icon"
76+
/>
77+
<link href="/favicons/favicon.ico" rel="shortcut icon" />
78+
<meta content="#45b980" name="msapplication-TileColor" />
79+
<meta content="/favicons/browserconfig.xml" name="msapplication-config" />
80+
<meta content="#ffffff" name="theme-color" />
81+
</Head>
82+
)
83+
}

‎src/components/layout/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react'
44
export * from '@components/layout/Card'
55
export * from '@components/layout/Footer'
66
export * from '@components/layout/Header'
7+
export * from '@components/layout/MetaTags'
78

89
/**
910
* This is the main Application layout.

0 commit comments

Comments
 (0)