From 096d7076b21971787d587510037a06d4ef1cddb5 Mon Sep 17 00:00:00 2001
From: Ikhun Um <ih.pert@gmail.com>
Date: Tue, 11 Oct 2022 14:56:57 +0900
Subject: [PATCH] Provide a way to conveniently give star Armeria from the site
 (#4476)

Motivation:

If a user stays on Armeria site (https://armeria.dev) for more than 10 seconds, we can assume they might be interested in our project and like to star Armeria on GitHub.

Modifications:

- Add a small banner to the left corner of the Armeria site.
  - It will be exposed 10 seconds after a user visits.

Result:

Gentle star marketing
---
 site/package-lock.json                    | 98 ++++++++++-------------
 site/package.json                         |  1 +
 site/src/layouts/base.tsx                 |  2 +
 site/src/layouts/star-begging.module.less | 42 ++++++++++
 site/src/layouts/star-begging.tsx         | 57 +++++++++++++
 5 files changed, 144 insertions(+), 56 deletions(-)
 create mode 100644 site/src/layouts/star-begging.module.less
 create mode 100644 site/src/layouts/star-begging.tsx

diff --git a/site/package-lock.json b/site/package-lock.json
index aae385d08d8..83ba744e862 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -75,6 +75,7 @@
         "react-dom": "^17.0.2",
         "react-easy-emoji": "^1.6.1",
         "react-helmet": "^6.1.0",
+        "react-iframe-click": "^2.0.2",
         "react-mixitup": "^2.3.0",
         "react-reveal": "^1.2.2",
         "react-sticky-box": "^1.0.2",
@@ -20672,6 +20673,14 @@
         "react": ">=16.3.0"
       }
     },
+    "node_modules/react-iframe-click": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-iframe-click/-/react-iframe-click-2.0.2.tgz",
+      "integrity": "sha512-E3cn6m50xS6wT66Bu/xqF70Wd8OJTnOtUYANioGUXgdPj7F42ZbJhqTlx0wLJYhze67kMeiPdIfaulfFaKAtDQ==",
+      "peerDependencies": {
+        "react": "^16.8.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -27498,8 +27507,7 @@
         "ws": {
           "version": "7.4.5",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
-          "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
-          "requires": {}
+          "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g=="
         }
       }
     },
@@ -28094,8 +28102,7 @@
     "@mdx-js/react": {
       "version": "1.6.22",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
-      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
-      "requires": {}
+      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg=="
     },
     "@mdx-js/util": {
       "version": "1.6.22",
@@ -29424,14 +29431,12 @@
     "acorn-import-assertions": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
-      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "requires": {}
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw=="
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "requires": {}
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -29476,8 +29481,7 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
     },
     "anser": {
       "version": "2.1.1",
@@ -31457,8 +31461,7 @@
     "cssnano-utils": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.0.2.tgz",
-      "integrity": "sha512-KhprijuQv2sP4kT92sSQwhlK3SJTbDIsxcfIEySB0O+3m9esFOai7dP9bMx5enHAh2MwarVIcnwiWoOm01RIbQ==",
-      "requires": {}
+      "integrity": "sha512-KhprijuQv2sP4kT92sSQwhlK3SJTbDIsxcfIEySB0O+3m9esFOai7dP9bMx5enHAh2MwarVIcnwiWoOm01RIbQ=="
     },
     "csso": {
       "version": "4.2.0",
@@ -32054,8 +32057,7 @@
         "ws": {
           "version": "7.4.6",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
-          "requires": {}
+          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
         }
       }
     },
@@ -32079,8 +32081,7 @@
         "ws": {
           "version": "7.4.6",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
-          "requires": {}
+          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
         }
       }
     },
@@ -32479,8 +32480,7 @@
     "eslint-config-prettier": {
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
-      "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
-      "requires": {}
+      "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q=="
     },
     "eslint-import-resolver-node": {
       "version": "0.3.6",
@@ -32667,8 +32667,7 @@
     "eslint-plugin-react-hooks": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.4.0.tgz",
-      "integrity": "sha512-U3RVIfdzJaeKDQKEJbz5p3NW8/L80PCATJAfuojwbaEL+gBjfGdhUcGde+WGUW46Q5sr/NgxevsIiDtNXrvZaQ==",
-      "requires": {}
+      "integrity": "sha512-U3RVIfdzJaeKDQKEJbz5p3NW8/L80PCATJAfuojwbaEL+gBjfGdhUcGde+WGUW46Q5sr/NgxevsIiDtNXrvZaQ=="
     },
     "eslint-scope": {
       "version": "5.1.1",
@@ -34430,8 +34429,7 @@
     "gatsby-plugin-cname": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-cname/-/gatsby-plugin-cname-1.0.0.tgz",
-      "integrity": "sha512-U0yRgn4cm1zBi+qC5a827acPFnUqKSowoCvAxT3MDmMJVLSWB4vmSyM7m6ThVz35obO4nKr4iP4vZhvA7gEVsA==",
-      "requires": {}
+      "integrity": "sha512-U0yRgn4cm1zBi+qC5a827acPFnUqKSowoCvAxT3MDmMJVLSWB4vmSyM7m6ThVz35obO4nKr4iP4vZhvA7gEVsA=="
     },
     "gatsby-plugin-google-analytics": {
       "version": "3.14.0",
@@ -34476,8 +34474,7 @@
     "gatsby-plugin-import": {
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-import/-/gatsby-plugin-import-2.1.7.tgz",
-      "integrity": "sha512-N3L4kqRY9qQaGCciKmTBbb2NygDWYCY6SEtWAk6MoRa+RHnJnomuQ0QNQvrApXg9hbEQDZOMjv0w4zrXQUXYYg==",
-      "requires": {}
+      "integrity": "sha512-N3L4kqRY9qQaGCciKmTBbb2NygDWYCY6SEtWAk6MoRa+RHnJnomuQ0QNQvrApXg9hbEQDZOMjv0w4zrXQUXYYg=="
     },
     "gatsby-plugin-less": {
       "version": "5.14.0",
@@ -35722,14 +35719,12 @@
     "graphql-type-json": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz",
-      "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==",
-      "requires": {}
+      "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg=="
     },
     "graphql-ws": {
       "version": "4.9.0",
       "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz",
-      "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==",
-      "requires": {}
+      "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag=="
     },
     "gray-matter": {
       "version": "4.0.3",
@@ -36131,8 +36126,7 @@
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "requires": {}
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
     },
     "ieee754": {
       "version": "1.2.1",
@@ -36746,8 +36740,7 @@
     "isomorphic-ws": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz",
-      "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==",
-      "requires": {}
+      "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w=="
     },
     "iterall": {
       "version": "1.3.0",
@@ -37013,8 +37006,7 @@
           "version": "8.5.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
           "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -38157,8 +38149,7 @@
     "meros": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz",
-      "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==",
-      "requires": {}
+      "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ=="
     },
     "methods": {
       "version": "1.1.2",
@@ -39967,32 +39958,27 @@
     "postcss-discard-comments": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.3.tgz",
-      "integrity": "sha512-6W5BemziRoqIdAKT+1QjM4bNcJAQ7z7zk073730NHg4cUXh3/rQHHj7pmYxUB9aGhuRhBiUf0pXvIHkRwhQP0Q==",
-      "requires": {}
+      "integrity": "sha512-6W5BemziRoqIdAKT+1QjM4bNcJAQ7z7zk073730NHg4cUXh3/rQHHj7pmYxUB9aGhuRhBiUf0pXvIHkRwhQP0Q=="
     },
     "postcss-discard-duplicates": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.3.tgz",
-      "integrity": "sha512-vPtm1Mf+kp7iAENTG7jI1MN1lk+fBqL5y+qxyi4v3H+lzsXEdfS3dwUZD45KVhgzDEgduur8ycB4hMegyMTeRw==",
-      "requires": {}
+      "integrity": "sha512-vPtm1Mf+kp7iAENTG7jI1MN1lk+fBqL5y+qxyi4v3H+lzsXEdfS3dwUZD45KVhgzDEgduur8ycB4hMegyMTeRw=="
     },
     "postcss-discard-empty": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.3.tgz",
-      "integrity": "sha512-xGJugpaXKakwKI7sSdZjUuN4V3zSzb2Y0LOlmTajFbNinEjTfVs9PFW2lmKBaC/E64WwYppfqLD03P8l9BuueA==",
-      "requires": {}
+      "integrity": "sha512-xGJugpaXKakwKI7sSdZjUuN4V3zSzb2Y0LOlmTajFbNinEjTfVs9PFW2lmKBaC/E64WwYppfqLD03P8l9BuueA=="
     },
     "postcss-discard-overridden": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.4.tgz",
-      "integrity": "sha512-3j9QH0Qh1KkdxwiZOW82cId7zdwXVQv/gRXYDnwx5pBtR1sTkU4cXRK9lp5dSdiM0r0OICO/L8J6sV1/7m0kHg==",
-      "requires": {}
+      "integrity": "sha512-3j9QH0Qh1KkdxwiZOW82cId7zdwXVQv/gRXYDnwx5pBtR1sTkU4cXRK9lp5dSdiM0r0OICO/L8J6sV1/7m0kHg=="
     },
     "postcss-flexbugs-fixes": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
-      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
-      "requires": {}
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
     },
     "postcss-loader": {
       "version": "5.3.0",
@@ -40098,8 +40084,7 @@
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "requires": {}
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -40130,8 +40115,7 @@
     "postcss-normalize-charset": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.3.tgz",
-      "integrity": "sha512-iKEplDBco9EfH7sx4ut7R2r/dwTnUqyfACf62Unc9UiyFuI7uUqZZtY+u+qp7g8Qszl/U28HIfcsI3pEABWFfA==",
-      "requires": {}
+      "integrity": "sha512-iKEplDBco9EfH7sx4ut7R2r/dwTnUqyfACf62Unc9UiyFuI7uUqZZtY+u+qp7g8Qszl/U28HIfcsI3pEABWFfA=="
     },
     "postcss-normalize-display-values": {
       "version": "5.0.3",
@@ -41234,6 +41218,11 @@
         "react-side-effect": "^2.1.0"
       }
     },
+    "react-iframe-click": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-iframe-click/-/react-iframe-click-2.0.2.tgz",
+      "integrity": "sha512-E3cn6m50xS6wT66Bu/xqF70Wd8OJTnOtUYANioGUXgdPj7F42ZbJhqTlx0wLJYhze67kMeiPdIfaulfFaKAtDQ=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -41270,8 +41259,7 @@
     "react-side-effect": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
-      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
-      "requires": {}
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
     },
     "react-sticky-box": {
       "version": "1.0.2",
@@ -41390,8 +41378,7 @@
     "redux-thunk": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
-      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
-      "requires": {}
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q=="
     },
     "refractor": {
       "version": "3.6.0",
@@ -45057,8 +45044,7 @@
     "ws": {
       "version": "7.5.7",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
-      "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
-      "requires": {}
+      "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A=="
     },
     "x-is-string": {
       "version": "0.1.0",
diff --git a/site/package.json b/site/package.json
index 831a3f65e45..bec2a4b9631 100644
--- a/site/package.json
+++ b/site/package.json
@@ -86,6 +86,7 @@
     "react-dom": "^17.0.2",
     "react-easy-emoji": "^1.6.1",
     "react-helmet": "^6.1.0",
+    "react-iframe-click": "^2.0.2",
     "react-mixitup": "^2.3.0",
     "react-reveal": "^1.2.2",
     "react-sticky-box": "^1.0.2",
diff --git a/site/src/layouts/base.tsx b/site/src/layouts/base.tsx
index 20b477d17e3..4076c375277 100644
--- a/site/src/layouts/base.tsx
+++ b/site/src/layouts/base.tsx
@@ -13,6 +13,7 @@ import Footer from './footer';
 import * as styles from './base.module.less';
 import flashAtHash from './flash-at-hash';
 import jumpToHash from './jump-to-hash';
+import StarBegging from './star-begging';
 
 const { Content } = Layout;
 
@@ -116,6 +117,7 @@ const BaseLayout: React.FC<BaseLayoutProps> = (props) => {
         )}
         <Footer />
       </Layout>
+      <StarBegging />
       <CookieConsent
         declineButtonText="Opt out"
         containerClasses={styles.cookieConsentContainer}
diff --git a/site/src/layouts/star-begging.module.less b/site/src/layouts/star-begging.module.less
new file mode 100644
index 00000000000..dddbe1dd2ed
--- /dev/null
+++ b/site/src/layouts/star-begging.module.less
@@ -0,0 +1,42 @@
+#starBegging {
+  transition: transform .25s;
+  transform: scale(0);
+  border-radius: 8px;
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  padding: 20px 40px 16px 20px;
+  background: #fff;
+  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.15);
+  z-index: 9999998;
+
+  p {
+    font-size: 16px;
+    margin: 0 0 15px;
+  }
+
+  .close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    height: 40px;
+    width: 40px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    font-family: arial, sans-serif;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 5px;
+  }
+}
+
+#starBegging.on {
+  transform: scale(1);
+}
+#starBegging.off {
+  transform: translateX(400px);
+}
+
diff --git a/site/src/layouts/star-begging.tsx b/site/src/layouts/star-begging.tsx
new file mode 100644
index 00000000000..fc5991ec221
--- /dev/null
+++ b/site/src/layouts/star-begging.tsx
@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import Iframe from 'react-iframe-click';
+
+import * as styles from './star-begging.module.less';
+
+// Forked from https://github.com/javalin/javalin.github.io/blob/36bc38763043bd9326b1b8c8d7acca84db3e5cc1/_includes/starBegging.html
+
+const StarBegging: React.FC = () => {
+  const [display, setDisplay] = useState(false);
+  useEffect(() => {
+    if (localStorage.getItem('dismissed') !== 'true') {
+      setTimeout(() => setDisplay(true), 10000); // 10 seconds
+    }
+  }, []);
+
+  function close() {
+    setDisplay(false);
+    localStorage.setItem('dismissed', 'true');
+  }
+
+  function handleKeyDown(e) {
+    if (e.keyCode === 13) {
+      close();
+    }
+  }
+
+  return (
+    <div id={styles.starBegging} className={display ? styles.on : styles.off}>
+      <p>
+        Like Armeria?
+        <br />
+        Star us ⭐️
+      </p>
+      <span
+        role="button"
+        tabIndex={0}
+        className={styles.close}
+        onClick={close}
+        onKeyDown={handleKeyDown}
+      >×</span> {/* eslint-disable-line prettier/prettier */}
+      <Iframe
+        id="starFrame"
+        className="githubStar"
+        title="github-stars"
+        // @ts-ignore
+        src="https://ghbtns.com/github-btn.html?user=line&repo=armeria&type=star&count=true&size=large"
+        frameBorder="0"
+        scrolling="0"
+        width="150px"
+        height="30px"
+        onInferredClick={() => close()}
+      />
+    </div>
+  );
+};
+
+export default StarBegging;