chore: home layout

Author: lencx

gatsby-node.js

@@ -268,6 +268,7 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
         'description',
         'home',
         'built_date',
+        ['home_layout', '[String]!'],
         ['label_category', '[String]!'],
         ['label_level', '[String]!'],
       ]),

src/components/issues_num/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { Link } from 'gatsby';
+import clsx from 'clsx';
 
 import { fmtIssues } from '@utils/tools';
 import useRgd from '@hooks/useRgd';
@@ -9,6 +10,7 @@ import './index.scss';
 interface IssuesNumProps {
   number: number;
   len?: number;
+  className?: string;
 }
 
 const IssuesNum: FC<IssuesNumProps> = (props) => {
@@ -21,7 +23,11 @@ const IssuesNum: FC<IssuesNumProps> = (props) => {
     _link = `https://github.com/${rgdData.owner}/${rgdData.repo}/discussions/${props.number}`;
   }
   return (
-    <Link className="number issues-num" to={_link} target="_blank">
+    <Link
+      className={clsx('number issues-num', props.className)}
+      to={_link}
+      target="_blank"
+    >
       {props.len ? fmtIssues(props.number, props.len) : `#${props.number}`}
     </Link>
   );

src/hooks/useRgd.ts

@@ -15,6 +15,7 @@ export default function useRgd() {
             title
             description
             home
+            home_layout
             label_category
             label_level
             built_date

src/styles/labels-category.scss

@@ -57,6 +57,10 @@
       margin-bottom: 10px;
       padding: 10px;
       border-radius: 5px;
+
+      .label-issue {
+        margin-right: 10px;
+      }
     }
 
     .labels-list {

src/templates/labels-category.tsx

@@ -41,6 +41,7 @@ export default function BlogLabelsCategory(props: any) {
   }, []);
 
   const listData = labelsMap?.[activeTab]?.list;
+  const hasUser = includes(website?.home_layout, 'user');
 
   return (
     <Layout className="labels-category-page" title="Labels">
@@ -94,21 +95,33 @@ export default function BlogLabelsCategory(props: any) {
                 if (!node) return null;
                 return (
                   <div key={node.number} className="item">
-                    <Author
-                      author={node.author}
-                      date={node.updatedAt}
-                      extra={<IssuesNum number={node.number} />}
-                    />
-                    <div className="labels-list">
-                      {node.labels.map((label: any) => {
-                        return <Label data={label} hasLevel />;
-                      })}
-                    </div>
+                    {hasUser && (
+                      <Author
+                        author={node.author}
+                        date={node.updatedAt}
+                        extra={<IssuesNum number={node.number} />}
+                      />
+                    )}
                     <div className="post-info">
+                      {!hasUser && (
+                        <IssuesNum
+                          className="label-issue"
+                          number={node.number}
+                        />
+                      )}
                       <Link className="title" to={`/issues/${node.number}`}>
                         {node.title}
                       </Link>
                     </div>
+                    {includes(website?.home_layout, 'label') && (
+                      <div className="labels-list">
+                        {node.labels.map((label: any) => {
+                          return (
+                            <Label key={label.name} data={label} hasLevel />
+                          );
+                        })}
+                      </div>
+                    )}
                   </div>
                 );
               })}