complete docs page - contribution page - changelog page - sponsors pa…

…ge - release page - extratox module - contribution page - changelog page - sponsors page - release page - extratox module
tamilking07 · Dec 27, 2022 · a0d8ad9 · a0d8ad9
1 parent bc6e724
commit a0d8ad9
Showing 22 changed files with 1,194 additions and 30 deletions.
diff --git a/.hintrc b/.hintrc
@@ -3,6 +3,8 @@
     "development"
   ],
   "hints": {
-    "disown-opener": "off"
+    "disown-opener": "off",
+    "typescript-config/strict": "off",
+    "button-type": "off"
   }
 }
diff --git a/docs/components/changelog.module.css b/docs/components/changelog.module.css
@@ -1,6 +1,126 @@
-.counter {
-  border: 1px solid #ccc;
+.tm-timeline {
+  position: relative;
+}
+.container {
+  margin-top: 40px;
+}
+.tmtimelineitem {
+  border-left: 2px solid #2c26d9;
+  margin-top: -5px;
+  padding-left: 40px;
+  padding-bottom: 40px;
+  position: relative;
+}
+.tmtimelineitem h2 {
+  margin-top: 0;
+  line-height: 0.5;
+}
+.tmtimelineitem p {
+  margin-bottom: 0;
+}
+.tmtimelineitem:before {
+  content: ' ';
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  left: -8px;
+  background-color: #2063df;
+  border-radius: 50%;
+}
+.tmtimelineitem:first-child:before {
+  left: -8px;
+}
+.tmtimelineitem:last-child:before {
+  left: -6px;
+}
+.tmtimelineitem:last-of-type {
+  padding-bottom: 0;
+  border: 0;
+}
+
+.tmtimelineentry {
+  padding-top: 15px;
+}
+.tmtimelineentry + .tmtimelineentry {
+  margin-top: 15px;
+}
+.tmtimelineentry .tmtimelineentrylabel {
+  font-size: 16px;
+  color: #1a1a1a;
+}
+@media (min-width: 768px) {
+  .tmtimelineentry .tmtimelineentrylabel {
+    width: 100px;
+    float: left;
+    clear: both;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .tmtimelineentry .tmtimelineentrydata {
+    margin-left: 100px;
+  }
+}
+@media (max-width: 767px) {
+  .uk-block {
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+}
+.tm-block-content {
+  min-height: calc(100vh - 142px);
+}
+.uk-block-muted {
+  background: #f8f9fa;
+}
+.uk-block-primary {
+  background: #e43d3c;
+}
+.uk-block-secondary {
+  background: #1a1a1a;
+}
+.ukbadge {
+  font-weight: 400;
+  padding: 4px;
+  box-shadow: #1a1a1a;
+}
+/* ADDED */
+.ukbadgesuccess {
+  background-color: #3dc372;
+  color: #fff;
+  border-radius: 8px;
+  padding: 4px;
+  text-shadow: #2063df;
+}
+/* CHANGED */
+.ukbadgewarning {
+  background-color: #ffb24e;
+  color: #fff;
+}
+/* FIXED or REMOVED */
+.ukbadgedanger {
+  background-color: #e44e56;
+  border-radius: 8px;
+  text-shadow: #ffb24e;
+  padding: 4px;
+  color: #fff;
+}
+
+.iconset {
+  padding-top: 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 50px;
+}
+
+.bicon {
+  display: flex;
+  gap: 8px;
+  flex-direction: row;
+}
+
+.avatar {
   border-radius: 5px;
-  padding: 2px 6px;
-  margin: 12px 0 0;
+  box-shadow: #1a1a1a;
+  padding: 2px;
 }
diff --git a/docs/components/changelog.tsx b/docs/components/changelog.tsx
@@ -1,20 +1,58 @@
 // Example from https://beta.reactjs.org/learn
 
-import { useState } from 'react'
+import React, { useState, useEffect } from "react";
 import styles from './changelog.module.css'
 
+function dateformate(date){
+  const event = new Date(date)
+  return event.toDateString()
+}
 function ChangeLog() {
-  const [count, setCount] = useState(0)
+  const [books, setBooks] = useState(null);
 
-  function handleClick() {
-    setCount(count + 1)
-  }
+  useEffect(() => {
+    getData();
 
+    async function getData() {
+      try {
+        const response = await fetch(
+          "https://api.github.com/repos/kalanakt/All-Url-Uploader/commits"
+        );
+        const data = await response.json();
+
+        setBooks(data);      
+      } catch (error) {
+        console.log(error);       
+      }
+    }
+  }, []);
   return (
-    <div>
-      <button onClick={handleClick} className={styles.counter}>
-        Clicked {count} times
-      </button>
+    <div className={styles.container}>
+      {books && (
+        <div className="books">
+          {books.map((book: { commit: { message: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal; author: { date: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal; }; comment_count: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal; verification: { verified: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal; }; }; html_url: string; comments_url: string; author: {
+            [x: string]: string; login: string; avatar_url: string; 
+}; }, index: React.Key) => {
+            return (
+              <div key={index} className={styles.tmtimelineitem}>
+                <h2>1.0.4 <span className={styles.uktextmuted}>({dateformate(book.commit.author.date)})</span></h2>
+                <div className={styles.tmtimelineentry}>
+                  <div className={styles.tmtimelineentrylabel}>
+                    <span className={styles.ukbadge}>{book.commit.verification.verified ? <span className={styles.ukbadgesuccess}>Success</span> : <span className={styles.ukbadgedanger}>Fail</span>}</span>
+                  </div>
+                  <div className={styles.tmtimelineentrydata}>
+                    <a href={book.html_url}>{book.commit.message}</a>
+                  </div>
+                </div>
+                <div className={styles.iconset}>
+                  <div className={styles.bicon}>Committer : <a href={book.author.html_url}><img className={styles.avatar} alt="github icon" src={book.author.avatar_url} width={25} height={25} /></a></div>
+                  <div className={styles.bicon}><a href={book.comments_url}> Comments : {book.commit.comment_count}</a></div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
     </div>
   )
 }

diff --git a/docs/components/collaborators.module.css b/docs/components/collaborators.module.css
@@ -0,0 +1,40 @@
+.avatars {
+  display: flex;
+}
+.container {
+  display: flex;
+  padding-top: 20px;
+}
+
+.avatars__item {
+  margin-left: -0.25rem;
+}
+
+.avatars__image {
+  box-shadow: 0 0 0 0.25rem #fff;
+  overflow: hidden;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 9999px;
+}
+
+.avatars__image:hover {
+  color: red;
+}
+
+.more {
+  box-shadow: 0 0 0 0.25rem #fff;
+  display: flex;
+  overflow: hidden;
+  border-radius: 9999px;
+  margin-left: -10px;
+  z-index: 10;
+  padding: 8px;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  background-color: rgba(1, 4, 14, 0.653);
+}
diff --git a/docs/components/collaborators.tsx b/docs/components/collaborators.tsx
@@ -0,0 +1,55 @@
+// Example from https://beta.reactjs.org/learn
+
+import React, { useState, useEffect } from "react";
+import styles from './collaborators.module.css'
+
+function Collaborators() {
+  const [books, setBooks] = useState(null);
+
+  useEffect(() => {
+    getData();
+
+    async function getData() {
+      try {
+        const response = await fetch(
+          "https://api.github.com/repos/kalanakt/All-Url-Uploader/contributors"
+        );
+        const data = await response.json();
+
+        setBooks(data);      
+      } catch (error) {
+        console.log(error);       
+      }
+    }
+  }, []);
+  return (
+    <div className={styles.container}>
+      {books? (
+        <div className={styles.avatars}>
+          {books.map((book: {
+            [x: string]: any; commit: { message: string; author: { date: string; };  verification: { verified: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal; }; }; html_url: string; comments_url: string; author: {
+            [x: string]: string; login: string; avatar_url: string; 
+}; }, index: React.Key) => {
+            return (
+                  <div className={styles.avatars__item}>
+                      <a href={book.html_url} target="_blank">
+                        <img className={styles.avatars__image} src={book.avatar_url} alt={book.login} width={40} height={40} />
+                      </a>
+                  </div>
+            );
+          })}
+          <a href="https://github.com/kalanakt/All-Url-Uploader" target="_blank"><div className={styles.more}>+</div></a>
+        </div>
+      ) :
+      (
+        <div>
+          <span>404 Page Not Found.</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function MyApp() {
+  return <Collaborators />
+}
diff --git a/docs/components/extratox.module.css b/docs/components/extratox.module.css
@@ -34,9 +34,9 @@
 }
 
 .sponsors {
-  flex: auto;
+  display: flex;
   flex-wrap: wrap;
-  flex-flow: row;
+  flex-direction: row;
   gap: 2px;
   justify-content: space-around;
   align-items: center;

diff --git a/docs/components/extratox.tsx b/docs/components/extratox.tsx
@@ -14,11 +14,6 @@ function ExtraTox() {
             <img src='./tmwad.png' alt='TMWAD IMG' width={200} height={50}/>
           </a>
         </div>
-        {/* <div className={styles.bg}>
-          <a href="https://www.buymeacoffee.com/kalanakt" className={styles.text}>
-            Sponsor +
-          </a>
-        </div> */}
       </div>
     <div className={styles.bgt}>
       <a href="https://www.buymeacoffee.com/kalanakt" className={styles.text}>

diff --git a/docs/components/followers.module.css b/docs/components/followers.module.css
@@ -0,0 +1,38 @@
+.avatars {
+  display: flex;
+  flex-wrap: wrap;
+}
+.container {
+  display: flex;
+  padding-top: 20px;
+}
+
+.avatars__item {
+  margin-left: -0.25rem;
+  margin-bottom: 20px;
+}
+
+.avatars__image {
+  box-shadow: 0 0 0 0.25rem #fff;
+  overflow: hidden;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 9999px;
+}
+
+.more {
+  box-shadow: 0 0 0 0.25rem #fff;
+  display: flex;
+  overflow: hidden;
+  border-radius: 9999px;
+  margin-left: -10px;
+  z-index: 10;
+  padding: 8px;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  background-color: rgba(1, 4, 14, 0.653);
+}