diff --git a/components/GitHubShareButton.tsx b/components/GitHubShareButton.tsx
new file mode 100644
index 0000000..527b1d6
--- /dev/null
+++ b/components/GitHubShareButton.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+
+import styles from './styles.module.css'
+
+export const GitHubShareButton: React.FC = () => {
+ return (
+
+
+
+ )
+}
diff --git a/components/NotionPage.tsx b/components/NotionPage.tsx
index 48c2604..afafff3 100644
--- a/components/NotionPage.tsx
+++ b/components/NotionPage.tsx
@@ -29,6 +29,7 @@ import { Page404 } from './Page404'
import { PageHead } from './PageHead'
import { PageActions } from './PageActions'
import { Footer } from './Footer'
+import { GitHubShareButton } from './GitHubShareButton'
import { ReactUtterances } from './ReactUtterances'
import styles from './styles.module.css'
@@ -250,6 +251,8 @@ export const NotionPage: React.FC = ({
}
/>
+
+
>
)
diff --git a/components/styles.module.css b/components/styles.module.css
index 09fdaee..be9051b 100644
--- a/components/styles.module.css
+++ b/components/styles.module.css
@@ -175,3 +175,38 @@
color: #19bf64;
background: #e5f2e8;
}
+
+@media (max-width: 1360px) {
+ .githubCorner {
+ display: none;
+ }
+}
+
+.githubCorner:hover .octoArm {
+ animation: octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+ 0%,
+ 100% {
+ transform: rotate(0);
+ }
+ 20%,
+ 60% {
+ transform: rotate(-25deg);
+ }
+ 40%,
+ 80% {
+ transform: rotate(10deg);
+ }
+}
+
+@media (max-width: 500px) {
+ .githubCorner:hover .octoArm {
+ animation: none;
+ }
+
+ .githubCorner .octoArm {
+ animation: octocat-wave 560ms ease-in-out;
+ }
+}