✨ Add support for inputPosition option

giscus · Feb 3, 2022 · 6f4e985 · 6f4e985
1 parent 87158f6
commit 6f4e985
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'
     }
   },