old-ybbond

My old site that was written with ReactJS
Log | Files | Refs | README

commit 2aed1803891d83424f651c5d4b81805d08808404
parent 304e1e712f8bbbd5f08653f21d570b4a24260442
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Sat, 18 Apr 2020 15:22:44 +0700

feature(indie): Indie Web Sign In

Diffstat:
Mpublic/index.html | 32+++++++++++++++++++-------------
Msrc/Components/HeaderFooter.js | 13+++++++++++--
Msrc/Components/Link.js | 15++++++++++++---
Msrc/Pages/CVPage.js | 14+++++++++++---

4 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/public/index.html b/public/index.html
@@ -15,19 +15,25 @@
       name="description"
       content="Yohanes Bandung Bondowoso currently work as Frontend Engineer of kumparan.com in Jakarta, Indonesia. Building it with React, React Native for Android and iOS. Eager to have new insight from everyone, and everything. I learn, sometimes after I broke stuff. But still, I learn. Contact: bandungpenting@gmail.com"
     />
-    <!-- OG Tags -->
-    <!-- required og for every web ['title', 'type', 'image', 'url'] https://ogp.me/ -->
-    <meta property="og:title" content="Yohanes Bandung Bondowoso - Frontend Developer" />
-    <meta property="og:type" content="website" />
-    <meta property="og:image" content="https://scontent-cgk1-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/84658821_215857272932579_1110014877533899232_n.jpg?_nc_ht=scontent-cgk1-1.cdninstagram.com&_nc_cat=111&_nc_ohc=qj8xVO-6qsoAX8FNA1J&oh=79d8fd42bd97a05ba76c7c296305ff08&oe=5E93D412" />
-    <meta property="og:url" content="https://ybbond.dev" />
-    <meta
-      property="og:description"
-      content="Yohanes Bandung Bondowoso currently work as Frontend Engineer of kumparan.com in Jakarta, Indonesia. Building it with React, React Native for Android and iOS. Eager to have new insight from everyone, and everything. I learn, sometimes after I broke stuff. But still, I learn. Contact: bandungpenting@gmail.com"
-    />
-    <meta property="og:determiner" content="the" />
-    <meta property="og:site_name" content="ybbond.dev" />
-    <!-- OG Tags -->
+    <!-- IndieWebify START -->
+      <link data-hint="Blog" rel="me" href="https://blog.ybbond.dev">
+      <link data-hint="Email" rel="me" href="mailto:bandungpenting@gmail.com">
+      <link data-hint="Twitter" rel="me" href="https://twitter.com/bandungpenting" />
+      <link data-hint="GitHub" rel="me" href="https://github.com/ybbond">
+    <!-- IndieWebify END -->
+    <!-- OG Tags START -->
+      <!-- required og for every web ['title', 'type', 'image', 'url'] https://ogp.me/ -->
+      <meta property="og:title" content="Yohanes Bandung Bondowoso - Frontend Developer" />
+      <meta property="og:type" content="website" />
+      <meta property="og:image" content="https://scontent-cgk1-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/84658821_215857272932579_1110014877533899232_n.jpg?_nc_ht=scontent-cgk1-1.cdninstagram.com&_nc_cat=111&_nc_ohc=qj8xVO-6qsoAX8FNA1J&oh=79d8fd42bd97a05ba76c7c296305ff08&oe=5E93D412" />
+      <meta property="og:url" content="https://ybbond.dev" />
+      <meta
+        property="og:description"
+        content="Yohanes Bandung Bondowoso currently work as Frontend Engineer of kumparan.com in Jakarta, Indonesia. Building it with React, React Native for Android and iOS. Eager to have new insight from everyone, and everything. I learn, sometimes after I broke stuff. But still, I learn. Contact: bandungpenting@gmail.com"
+      />
+      <meta property="og:determiner" content="the" />
+      <meta property="og:site_name" content="ybbond.dev" />
+    <!-- OG Tags END -->
   </head>
   <body style="min-width: 100vw;min-height: 100vh;margin:0;padding:0;">
     <div id="react-app"></div>
diff --git a/src/Components/HeaderFooter.js b/src/Components/HeaderFooter.js
@@ -54,7 +54,12 @@ const HeaderFooter = ({children, dark, toggleDark}: HeaderFooterProps) => (
           About
         </Link>{' '}
         ::{' '}
-        <Link aria-label="Go to my Blog!" to="https://blog.ybbond.dev">
+        <Link
+          aria-label="Go to my Blog!"
+          to="https://blog.ybbond.dev"
+          data-hint="Blog"
+          rel="me"
+        >
           Blog 🌐
         </Link>{' '}
       </Text>
@@ -64,7 +69,11 @@ const HeaderFooter = ({children, dark, toggleDark}: HeaderFooterProps) => (
       <Text>See you sooner :)</Text>
       <Text>
         Contact:{' '}
-        <Link to="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev">
+        <Link
+          to="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev"
+          data-hint="Email"
+          rel="me"
+        >
           bandungpenting@gmail.com
         </Link>
       </Text>
diff --git a/src/Components/Link.js b/src/Components/Link.js
@@ -16,7 +16,11 @@ const linkHoverColor = theme('mode', {
   dark: colors.orange,
 });
 
-type LinkProps = {to: string, children: React$Node};
+type LinkProps = {
+  to: string,
+  children: React$Node,
+  rel?: string,
+};
 
 const LinkBase: StyledComponent<{isCurrentRoute?: boolean}, {}, {}> = styled.a`
   color: ${({isCurrentRoute}) => (isCurrentRoute ? linkHoverColor : linkColor)};
@@ -30,7 +34,7 @@ const LinkBase: StyledComponent<{isCurrentRoute?: boolean}, {}, {}> = styled.a`
   }
 `;
 
-const Link = ({children, to, ...props}: LinkProps) => {
+const Link = ({children, to, rel, ...props}: LinkProps) => {
   const history = useHistory();
 
   Link.goTo = (to: string) => {
@@ -40,7 +44,12 @@ const Link = ({children, to, ...props}: LinkProps) => {
   const isExternal = to[0] !== '/';
   if (isExternal) {
     return (
-      <LinkBase {...props} target="_blank" rel="noopener noreferrer" href={to}>
+      <LinkBase
+        {...props}
+        target="_blank"
+        rel={rel ? rel : 'noopener noreferrer'}
+        href={to}
+      >
         {children}
       </LinkBase>
     );
diff --git a/src/Pages/CVPage.js b/src/Pages/CVPage.js
@@ -57,9 +57,17 @@ const CVPage = () => {
           </Link>
         </List>
         <List as="li">
-          <Link to="https://github.com/ybbond">Github</Link>,{' '}
-          <Link to="https://www.instagram.com/ybbond">Instagram</Link>,{' '}
-          <Link to="https://twitter.com/bandungpenting">Twitter</Link>
+          <Link to="https://github.com/ybbond" data-hint="GitHub" rel="me">
+            Github
+          </Link>
+          , <Link to="https://www.instagram.com/ybbond">Instagram</Link>,{' '}
+          <Link
+            to="https://twitter.com/bandungpenting"
+            data-hint="Twitter"
+            rel="me"
+          >
+            Twitter
+          </Link>
         </List>
       </List>
     </React.Fragment>