update

packages/app/src/components/Admin/PluginsExtension/PluginCard.tsx

@@ -1,51 +1,83 @@
 // import { faCircleArrowDown, faCircleCheck } from '@fortawesome/free-solid-svg-icons';
 // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from 'react';
+
 import Image from 'next/image';
-// import Link from 'next/link';
+import Link from 'next/link';
 
 import { SearchResultItem } from '~/models/SearchResultItem';
 
-export const PluginCard = (props: SearchResultItem) => {
+
+type Props = {
+  name: string,
+  url: string,
+  description: string,
+}
+
+export const PluginCard = (props: Props) => {
+  // const {
+  //   name, fullName, description, htmlUrl, topics, stargazersCount, owner,
+  // } = props;
   const {
-    name, fullName, description, htmlUrl, topics, stargazersCount, owner,
+    name, url, description,
   } = props;
+  const [isEnabled, setIsEnabled] = useState(true);
+
+
+  // const updateCheckboxHandler = (event: { target: { checked: boolean }; }) => {
+  //   if (isEnabled === true) {
+  //     setIsEnabled(true);
+  //   }
+  //   else {
+  //     setI
+  //   }
+  // };
 
   return (
-    <div className="card shadow border-0" key={name}>
+    <div className="card shadow border-0" key={'1'}>
       <div className="card-body px-5 py-4">
         <div className="row mb-3">
           <div className="col-9">
-            {/* <h2 className="card-title h3 border-bottom pb-2 mb-3">
-              <Link href={`/${full_name}`}>{name}</Link>
-            </h2> */}
+            <h2 className="card-title h3 border-bottom pb-2 mb-3">
+              <Link href={`${url}`}>{name}</Link>
+            </h2>
             <p className="card-text text-muted">{description}</p>
           </div>
           <div className="col-3">
-            <Image className="mx-auto" alt="GitHub avator image" src={owner.avatar_url} width={250} height={250} />
+            <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
+              <input
+                type="checkbox"
+                className="custom-control-input border-0"
+                checked={isEnabled}
+                // onChange={updateCheckboxHandler}
+              />
+              <label className="custom-control-label align-center"></label>
+            </div>
+            {/* <Image className="mx-auto" alt="GitHub avator image" src={owner.avatar_url} width={250} height={250} /> */}
           </div>
         </div>
         <div className="row">
           <div className="col-12 d-flex flex-wrap gap-2">
-            {topics?.map((topic: string) => {
+            {/* {topics?.map((topic: string) => {
               return (
                 <span key={`${name}-${topic}`} className="badge rounded-1 mp-bg-light-blue text-dark fw-normal">
                   {topic}
                 </span>
               );
-            })}
+            })} */}
           </div>
         </div>
       </div>
       <div className="card-footer px-5 border-top-0 mp-bg-light-blue">
         <p className="d-flex justify-content-between align-self-center mb-0">
-          {/* <span>
-            {owner.login === 'weseek' ? <FontAwesomeIcon icon={faCircleCheck} className="me-1 text-primary" /> : <></>}
+          <span>
+            {/* {owner.login === 'weseek' ? <FontAwesomeIcon icon={faCircleCheck} className="me-1 text-primary" /> : <></>}
 
             <a href={owner.html_url} target="_blank" rel="noreferrer">
               {owner.login}
-            </a>
+            </a> */}
           </span>
-          <span>
+          {/* <span>
             <FontAwesomeIcon icon={faCircleArrowDown} className="me-1" /> {stargazersCount}
           </span> */}
         </p>

packages/app/src/components/Admin/PluginsExtension/PluginsExtensionPageContents.tsx

@@ -31,6 +31,21 @@ export const PluginsExtensionPageContents = (): JSX.Element => {
         <div className="col-lg-12">
           <h2 className="admin-setting-header">Plugins</h2>
           <div className="d-grid gap-5">
+            <PluginCard
+              name={'growi-plugin-markdown-templates'}
+              url={'https://github.com/weseek/growi-plugin-markdown-templates'}
+              description={'growi-plugin-markdown-templates-example'}
+            />
+            <PluginCard
+              name={'growi-plugin-styling-example'}
+              url={'https://github.com/weseek/growi-plugin-styling-example'}
+              description={'growi-plugin-styling-example'}
+            />
+            <PluginCard
+              name={'growi-plugin-copy-code-to-clipboard'}
+              url={'https://github.com/weseek/growi-plugin-copy-code-to-clipboard'}
+              description={'growi-plugin-copy-code-to-clipboard'}
+            />
             {/* {data?.items.map((item: SearchResultItem) => {
               return <PluginCard key={item.name} {...item} />;
             })} */}

packages/app/src/server/service/plugin.ts

@@ -21,7 +21,7 @@ export class PluginService {
 
   baseDir: any;
 
-  getFile:any;
+  getFile: any;
 
   constructor(crowi) {
     this.crowi = crowi;