From 6f4e9857dccba5ff894ec79620d4943223987f65 Mon Sep 17 00:00:00 2001
From: sage <laymonage@gmail.com>
Date: Thu, 3 Feb 2022 16:44:33 +0700
Subject: [PATCH] :sparkles:  Add support for inputPosition option

---
 packages/@shared/types.ts         |  3 +++
 packages/@shared/util.ts          |  4 +++-
 packages/react/_debug/main.tsx    |  1 +
 packages/react/lib/Giscus.tsx     | 28 ++--------------------------
 packages/svelte/_debug/App.svelte |  1 +
 packages/svelte/lib/Giscus.svelte |  2 ++
 packages/vue/_debug/App.vue       |  1 +
 packages/vue/lib/Giscus.tsx       |  4 ++++
 8 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/packages/@shared/types.ts b/packages/@shared/types.ts
index 016bb3c9..f65fd6f3 100644
--- a/packages/@shared/types.ts
+++ b/packages/@shared/types.ts
@@ -10,11 +10,14 @@ type Giscus = {
   theme?: Theme
   reactionsEnabled?: BooleanString
   emitMetadata?: BooleanString
+  inputPosition?: InputPosition
   lang?: Lang
 }
 
 type BooleanString = '0' | '1'
 
+type InputPosition = 'top' | 'bottom'
+
 type Session = {
   session: string
 }
diff --git a/packages/@shared/util.ts b/packages/@shared/util.ts
index 5fa567e2..cf6ce6d4 100644
--- a/packages/@shared/util.ts
+++ b/packages/@shared/util.ts
@@ -26,6 +26,7 @@ export function getIframeSrc({
   theme = 'light',
   reactionsEnabled = '1',
   emitMetadata = '0',
+  inputPosition = 'bottom',
   lang = 'en',
   session,
   origin
@@ -44,6 +45,7 @@ export function getIframeSrc({
     theme,
     reactionsEnabled,
     emitMetadata,
+    inputPosition,
     repo,
     repoId,
     category,
@@ -72,7 +74,7 @@ export function getIframeSrc({
       params.term =
         location.pathname.length < 2
           ? 'index'
-          : location.pathname.substr(1).replace(/\.\w+$/, '')
+          : location.pathname.substring(1).replace(/\.\w+$/, '')
       break
   }
 
diff --git a/packages/react/_debug/main.tsx b/packages/react/_debug/main.tsx
index 42f58cb9..3f7e5829 100644
--- a/packages/react/_debug/main.tsx
+++ b/packages/react/_debug/main.tsx
@@ -13,6 +13,7 @@ ReactDOM.render(
       term="Welcome to giscus-component Discussions"
       reactionsEnabled="1"
       emitMetadata="0"
+      inputPosition="bottom"
       theme="light"
       lang="en"
     />
diff --git a/packages/react/lib/Giscus.tsx b/packages/react/lib/Giscus.tsx
index 248fb331..ac94bc43 100644
--- a/packages/react/lib/Giscus.tsx
+++ b/packages/react/lib/Giscus.tsx
@@ -66,34 +66,10 @@ function GiscusClient(props: GiscusProps) {
   )
 }
 
-export default function Giscus({
-  repo,
-  repoId,
-  category,
-  categoryId,
-  mapping,
-  term,
-  theme,
-  reactionsEnabled,
-  emitMetadata,
-  lang
-}: GiscusProps) {
+export default function Giscus(props: GiscusProps) {
   const [isMounted, setIsMounted] = useState(false)
   useEffect(() => setIsMounted(true), [])
 
   if (!isMounted) return null
-  return (
-    <GiscusClient
-      repo={repo}
-      repoId={repoId}
-      category={category}
-      categoryId={categoryId}
-      mapping={mapping}
-      term={term}
-      theme={theme}
-      reactionsEnabled={reactionsEnabled}
-      emitMetadata={emitMetadata}
-      lang={lang}
-    />
-  )
+  return <GiscusClient {...props} />
 }
diff --git a/packages/svelte/_debug/App.svelte b/packages/svelte/_debug/App.svelte
index 5544aeb9..148428c7 100644
--- a/packages/svelte/_debug/App.svelte
+++ b/packages/svelte/_debug/App.svelte
@@ -12,6 +12,7 @@
     term="Welcome to giscus-component Discussions"
     reactionsEnabled="1"
     emitMetadata="0"
+    inputPosition="bottom"
     theme="light"
     lang="en"
   />
diff --git a/packages/svelte/lib/Giscus.svelte b/packages/svelte/lib/Giscus.svelte
index 940f644c..88b94caa 100644
--- a/packages/svelte/lib/Giscus.svelte
+++ b/packages/svelte/lib/Giscus.svelte
@@ -22,6 +22,7 @@
   export let theme: GiscusProps['theme'] = 'light'
   export let reactionsEnabled: GiscusProps['reactionsEnabled'] = '1'
   export let emitMetadata: GiscusProps['emitMetadata'] = '0'
+  export let inputPosition: GiscusProps['inputPosition'] = 'bottom'
 
   let session = ''
   $: src = getIframeSrc({
@@ -35,6 +36,7 @@
     theme,
     reactionsEnabled,
     emitMetadata,
+    inputPosition,
     session,
   })
 
diff --git a/packages/vue/_debug/App.vue b/packages/vue/_debug/App.vue
index e91cd17e..1e03da2a 100644
--- a/packages/vue/_debug/App.vue
+++ b/packages/vue/_debug/App.vue
@@ -8,6 +8,7 @@
     term="Welcome to giscus-component Discussions"
     reactionsEnabled="1"
     emitMetadata="0"
+    inputPosition="bottom"
     theme="light"
     lang="en"
   />
diff --git a/packages/vue/lib/Giscus.tsx b/packages/vue/lib/Giscus.tsx
index 22d3f1ba..3f449925 100644
--- a/packages/vue/lib/Giscus.tsx
+++ b/packages/vue/lib/Giscus.tsx
@@ -50,6 +50,10 @@ const Giscus = defineComponent({
     emitMetadata: {
       type: String as PropType<GiscusProps['emitMetadata']>,
       default: '0'
+    },
+    inputPosition: {
+      type: String as PropType<GiscusProps['inputPosition']>,
+      default: 'bottom'
     }
   },