feat: implement pinned feature

config.example.js

@@ -50,6 +50,12 @@ export const coverBottomItems = [
   }
 ];
 
+export const pinned = [
+  { title: "title1", description: "example description1", url: "/" },
+  { title: "title2", description: "example description2", url: "/" },
+  { title: "title3", description: "example description3", url: "/" }
+];
+
 // NOTE: HTML support
 export const copyrights = "© jhon due";
 

src/app/renderer.tsx

@@ -1,7 +1,9 @@
+import { pinned } from "../../config";
 import {
   CoverComponent,
   RecentArticlesComponent
 } from "../components/components";
+import { Pinned } from "../components/pinned";
 import { Article } from "../models/models";
 import containerStyles from "../styles/components/container.module.scss";
 import styles from "../styles/home.module.scss";
@@ -15,6 +17,8 @@ export const Renderer: React.FunctionComponent<{
       <main>
         <div className={`${containerStyles.container} ${styles.wrap}`}>
           <RecentArticlesComponent articles={articles} />
+          <hr />
+          <Pinned items={pinned} />
         </div>
       </main>
     </>

src/components/components.ts

@@ -11,6 +11,7 @@ export * from "./headmeta";
 export * from "./injectScript";
 export * from "./navigation";
 export * from "./pagination";
+export * from "./pinned";
 export * from "./planePage";
 export * from "./searchResult";
 export * from "./series";

src/components/pinned.tsx

@@ -0,0 +1,17 @@
+import style from "../styles/components/pinned.module.scss";
+
+export const Pinned: React.FunctionComponent<{ items }> = ({ items }) => {
+  return (
+    <div className={style["pinned"]}>
+      {items.map((item) => (
+        <a className="unstyled" href={item.url} target="_blank" key={item.url}>
+          <div className={style["pinned-card"]}>
+            <span className={style["title"]}>{item.title}</span>
+            <p className={style["description"]}>{item.description}</p>
+            <div className={style["link"]}>→</div>
+          </div>
+        </a>
+      ))}
+    </div>
+  );
+};

src/styles/_themes.scss

@@ -28,6 +28,9 @@
 
   --home-background-color:                  #e4e4e4;
 
+  --pinned-background-color:                #f7f7f7;
+  --pinned-border-color:                    #ddd;
+
   --cover-background-color:                 #070b19;
   --cover-title-color:                      #ffffff;
   --cover-meta-color:                       #ffffff;
@@ -95,6 +98,9 @@
   --tr-background:                        #54535a62;
   --tr-background-secondary:              #565161;
 
+  --pinned-background-color:              #252424;
+  --pinned-border-color:                  #5f5555;
+
   --cover-title-color:                    #dbdbdb;
   --cover-meta-color:                     #d4d4d4;
   --cover-tag-link-color:                 #d4d4d4;

src/styles/_variables.scss

@@ -113,6 +113,11 @@ $home-colors: (
   'background':            var(--home-background-color),
 );
 
+$pinned-colors: (
+  'background':            var(--pinned-background-color),
+  'border':                var(--pinned-border-color),
+);
+
 $cover-colors: (
   'background':            var(--cover-background-color),
   'title':                 var(--cover-title-color),

src/styles/components/pinned.module.scss

@@ -0,0 +1,55 @@
+@import
+    '../_variables';
+
+.pinned {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1em;
+  padding: 2em 1em 2em 1em;
+  border-radius: 0.5em;
+
+  @media (max-width: 1200px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pinned-card {
+  background-color: map-get($pinned-colors, 'background');
+  border: 0.01em solid map-get($pinned-colors, 'border');
+  border-radius: 0.3em;
+  padding: 0.6em 1em 0.2em 1em;
+  display: flex;
+  flex-direction: column;
+  color: map-get($basic-colors, 'base');
+
+  &:hover {
+    background-color: map-get($home-colors, 'background');
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .title {
+    font-style: italic;
+    font-size: medium;
+
+    font-size: 1em;
+  }
+
+  .description {
+    font-size: 0.7em;
+    margin-left: 0.3em;
+  }
+
+  .link {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1em;
+    align-self: flex-end;
+  }
+}