feat: add social

Author: yulei-chen

global.css

@@ -1,6 +1,10 @@
 @import '@unocss/reset/tailwind.css';
 @unocss all;
 
+#intro {
+  @apply md:w-xs lg:w-md xl:w-xl relative left-1/2 p-15 pt-[30vh];
+}
+
 h1 {
   @apply text-4xl font-montserrat font-900 pb-5 pt-10;
 }
@@ -18,15 +22,14 @@ a {
 }
 
 .ch-scrollycoding {
+  /* --ch-scrollycoding-sticker-width: 420px; */
   @apply max-w-screen-xl flex-row-reverse mx-auto my-0 gap-0;
 
   .ch-scrollycoding-content {
     @apply flex-1 text-brand-1 p-10 bg-brand-2;
 
     .ch-scrollycoding-step-content {
-      @apply px-5 max-w-lg min-w-0;
-      /* @apply w-full */
-      /* @apply border-none; */
+      @apply px-5 box-border md:w-xs lg:w-md xl:w-xl;
 
       .ch-codeblock,
       .ch-codegroup,
@@ -49,6 +52,7 @@ a {
   .ch-scrollycoding-sticker {
     @apply flex-1 max-h-unset h-screen top-0 py-5 px-10 bg-brand-1;
 
+    .ch-codeblock,
     .ch-codegroup {
       --ch-t-colorScheme: dark;
       --ch-t-foreground: #a6accd;
@@ -81,23 +85,14 @@ a {
       --ch-t-list-activeSelectionForeground: #e4f0fb;
       --ch-t-list-hoverBackground: #30334080;
       --ch-t-list-hoverForeground: #e4f0fb;
-      @apply max-h-unset h-screen;
     }
 
-    .ch-codeblock {
-      --ch-t-background: var(--brand-1);
-      --ch-t-tab-activeBackground: var(--brand-1);
-      --ch-t-tab-inactiveBackground: var(--brand-1);
-      --ch-t-tab-activeBorder: #ffffff1f;
-      --ch-t-editorGroupHeader-tabsBackground: var(
-        --brand-1
-      );
-      --ch-t-lighter-inlineBackground: var(--brand-1);
+    .ch-codegroup {
+      @apply max-h-unset h-screen;
     }
 
     .ch-expand-dialog-content {
-      @apply border-4;
-      border-color: var(--brand-2);
+      @apply border-4 border-brand-2;
 
       .ch-code-browser-sidebar {
         @apply bg-brand-2;

package.json

@@ -28,6 +28,7 @@
     "sort-by": "^1.2.0"
   },
   "devDependencies": {
+    "@iconify-json/mdi": "^1.1.64",
     "@unocss/postcss": "^0.58.8",
     "@unocss/transformer-directives": "^0.58.8",
     "@vitejs/plugin-react": "^4.2.1",

pages/_app.js

@@ -2,6 +2,7 @@ import '@code-hike/mdx/dist/index.css'
 import App from 'next/app'
 import '../global.css'
 import Dropdown from './components/Dropdown'
+import Social from './components/Social'
 import { THEME } from './common/constants'
 
 export default function MyApp({
@@ -20,6 +21,9 @@ export default function MyApp({
     >
       <div className="min-h-screen md:bg-gradient-to-r from-brand-1 from-50% to-brand-2 to-50%">
         <Dropdown className="fixed top-5 right-5 md:right-1/2 md:translate-x-1/2" />
+        <div className="absolute w-[50vw] pt-[30vh] flex justify-end px-20 text-brand-2">
+          <Social />
+        </div>
         <Component {...pageProps} />
       </div>
     </div>

pages/components/Intro.jsx

@@ -3,20 +3,22 @@ function Social({ className = '' }) {
     <div
       className={`flex flex-col items-center gap-6 ${className}`}
     >
-      <img
-        alt="Yulei Chen"
-        src="/avatar.png"
-        className="h-35 w-35 hue-rotate-[var(--img-hue-rotate)]"
-      />
+      <a href="https://yulei.monster">
+        <img
+          alt="Yulei Chen"
+          src="/avatar.png"
+          className="h-35 w-35 hue-rotate-[var(--img-hue-rotate)]"
+        />
+      </a>
       <div className="flex gap-3">
         <a
           className="i-mdi-github text-3xl"
-          href="https://github.com/yuleicul"
+          href="https://github.com/yuleicul/react-router-tutorial"
         />
-        <a
+        {/* <a
           className="i-mdi-youtube text-3xl"
           href="https://www.youtube.com/@code_tuner"
-        />
+        /> */}
         {/* <a className="i-mdi-rss text-3xl" /> */}
       </div>
     </div>

pages/components/Item.jsx

@@ -1,4 +1,4 @@
-<CH.Scrollycoding showCopyButton={true} showExpandButton={true} lineNumbers={true}>
+<section id="intro">
 
 # React Router Tutorial
 
@@ -8,7 +8,9 @@ April 1, 2024
 
 An alternative take on [React Router's official tutorial](https://reactrouter.com/en/main/start/tutorial), built with [CodeHike](https://codehike.org/).
 
----
+</section>
+
+<CH.Scrollycoding showCopyButton={true} showExpandButton={true} lineNumbers={true}>
 
 Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you keep track of your contacts. We expect it to take between 30-60m if you're following along.