Patch 10

- New documentation of "Ways of use: @devapix/react". - Change `literalStringTab.ts` file.
lunatic-fox · Apr 22, 2024 · 679ed80 · 679ed80
1 parent c0befc3
commit 679ed80
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 33 deletions.
diff --git a/src/app/docs/pages/waysofuse/devapixreact/page.tsx b/src/app/docs/pages/waysofuse/devapixreact/page.tsx
@@ -1,35 +1,31 @@
 import Code from '@/app/components/Code'
 import Docs from '@/app/docs/components/Docs'
 import ReqResExample from '@/app/docs/components/ReqResExample'
+import Image from 'next/image'
+import responseStyle from '@/app/docs/components/ReqResExample/index.module.css'
 
 export default function Page() {
   return (
     <Docs title='Ways of use: @devapix/react'>
       <p>
-        To use <Code ic='<Devicon>' /> React element with React you just need to install <Code ic='@devapix/react' /> npm package.
+        To use <Code ic='Devicon' /> React elements you just need to install <Code ic='@devapix/react' /> npm package.
       </p>
       <Code c='npm i @devapix/react' />
       <p>
-        After installation, the next step is to import the module to your project <Code ic='.jsx' /> file.
-      </p>
-      <Code
-        h='jsx'
-        c={`import Devicon from '@devapix/react'`} />
-      <p>
-        Then call <Code ic='<Devicon>' /> React element into <Code ic='.jsx' /> file, like in the example below.
+        After installation, the next step is to import the modules you want to your <Code ic='.jsx' /> or <Code ic='.tsx' /> file, like in the example below.
       </p>
       <h4>Example</h4>
       <h5>page.jsx</h5>
       <Code
         h='jsx'
         c={`
-        import Devicon from '@devapix/react'
+        import { DeviconJavascript } from '@devapix/react'
 
         export default function Page() {
           return (
             <section>
               <h2>JavaScript logo</h2>
-              <Devicon icon='javascript'/>
+              <DeviconJavascript/>
             </section>
           )
         }
@@ -39,17 +35,56 @@ export default function Page() {
         title={false}
         reqs={['javascript']} />
       <br />
+
+      <h3>Element name</h3>
       <p>
-        The properties expected by <Code ic='Devicon' /> are the same of API request.
+        All React element names follow this pattern: <Code ic={'<Devicon[Icon name]/>'} />, see the examples below.
       </p>
       <Code
         h='ts'
         c={`
-        // Mandatory property
-        icon: string
+          python:     <DeviconPython/>
+          javascript: <DeviconJavascript/>
+          typescript: <DeviconTypescript/>
+          java:       <DeviconJava/>
+          ruby:       <DeviconRuby/>
+        `} />
 
-        // Optional properties
-        release: string
+      <h3>Release</h3>
+      <p>
+        To select a specific release you just have to specify the release number when importing.
+      </p>
+      <Code
+        h='ts'
+        c={`import { DeviconPhotoshop } from '@devapix/react'`} />
+      <p>
+        This is equivalent to the latest release of <Code ic='photoshop' /> icon.
+      </p>
+      <ReqResExample
+        title={false}
+        reqs={['photoshop']} />
+      <p>
+        While this example below.
+      </p>
+      <Code
+        h='ts'
+        c={`import { DeviconPhotoshop } from '@devapix/react/2.15.1'`} />
+      <p>
+        Is equivalent to <Code ic='photoshop' /> icon of <Code ic='2.15.1' /> release.
+      </p>
+      <ReqResExample
+        title={false}
+        reqs={['photoshop&r=2.15.1']} />
+      <p style={{ textAlign: 'center', color: '#ffd900' }}>
+        ⚠️ Notice that this library only works with released icons, that is, it will not work with icons that are still under <Code ic='develop' /> branch of <Code ic='Devicon' /> project.
+      </p>
+      <h3>Other properties</h3>
+      <p>
+        The other properties are optional attributes and the same as API request, take a look at the list below.
+      </p>
+      <Code
+        h='ts'
+        c={`
         version:
             'o'  | 'original'
           | 'p'  | 'plain'
@@ -62,34 +97,64 @@ export default function Page() {
         size: number
       `} />
       <p>
-        Here we have two more examples using the rest of properties.
+        Here we have more examples using the rest of properties.
       </p>
-      <h4>Twitter icon</h4>
+      <h4>Icons</h4>
       <h5>page.jsx</h5>
       <Code
         h='jsx'
         c={`
-        import Devicon from '@devapix/react'
+        import {
+          DeviconJavascript,
+          DeviconTypescript,
+          DeviconPython,
+          DeviconVscode
+        } from '@devapix/react'
+
+        export default function Page() {
+          return (
+            <section>
+              <DeviconJavascript theme='light' size={80}/>
+              <DeviconTypescript theme='dark'/>
+              <DeviconPython color='#008004'/>
+              <DeviconVscode version='ow' color='#ff5300' size={80}/>
+            </section>
+          )
+        }
+        `} />
+
+      <section className={responseStyle.reqResImgWrapper} style={{display: 'flex', alignItems: 'center'}}>
+        <Image src='https://devapix.vercel.app/api?js&t=l&s=80' width={80} height={80} alt='i' />
+        <Image src='https://devapix.vercel.app/api?ts&t=d' width={64} height={64} alt='i' />
+        <Image src='https://devapix.vercel.app/api?python&c=008004' width={64} height={64} alt='i' />
+        <Image src='https://devapix.vercel.app/api?vscode&v=ow&c=ff5300&s=80' width={80} height={80} alt='i' />
+      </section>
+      <hr />
+
+      <h4>[email protected] icon</h4>
+      <h5>page.jsx</h5>
+      <Code
+        h='jsx'
+        c={`
+        import Devicon from '@devapix/react/2.8'
 
         export default function Page() {
           return (
             <section>
-              <h2>Twitter logo</h2>
-              <Devicon 
-                icon='twitter'
-                release='2.15.1'
+              <DeviconTwitter
                 version={'p'}
                 color='#c7bd2b'
-                size={64}/>
+                size={80}/>
             </section>
           )
         }
       `} />
       <ReqResExample
         title={false}
-        reqs={['twitter&r=2.15.1&v=p&c=c7bd2b&s=64']} />
+        reqs={['twitter&r=2.8&v=p&c=c7bd2b&s=80']} />
       <hr />
-      <h4>ChakraUI icon</h4>
+
+      <h4>Twitter@latest icon</h4>
       <h5>page.jsx</h5>
       <Code
         h='jsx'
@@ -99,20 +164,21 @@ export default function Page() {
         export default function Page() {
           return (
             <section>
-              <h2>ChakraUI logo</h2>
-              <Devicon 
-                icon='rust'
-                release='2.15.1'
+              <DeviconTwitter
                 version={'p'}
-                theme={'light'}
-                size={64}/>
+                color='#c7bd2b'
+                size={80}/>
             </section>
           )
         }
       `} />
       <ReqResExample
         title={false}
-        reqs={['chakraui&r=dev&v=p&t=l&s=64']} />
+        reqs={['twitter&v=p&c=c7bd2b&s=80']} />
+      <hr />
+
+
+
     </Docs>
   )
 }
diff --git a/src/functions/literalStringTab.ts b/src/functions/literalStringTab.ts
@@ -5,7 +5,7 @@ export default function literalStringTab(str: string) {
   const nStr = arrStr.map(e => e.replace(/^(\s*).+?$/, '$1').length).filter(e => e > 0)
   let cStr = nStr.length > 0 ? Math.min(...nStr) : null
 
-  if (nStr.every(e => e === cStr) && cStr && nStr.length > 1) 
+  if (nStr.every(e => e === cStr) && cStr && nStr.length > 1 && arrStr[0].match(/^<.+/)) 
     cStr -= 2
 
   if (cStr)