Merge pull request #1 from lunatic-fox/docs

Patch 16
lunatic-fox · Oct 21, 2024 · 3ff5115 · 3ff5115
2 parents be7b366 + ef703b0
commit 3ff5115
Show file tree

Hide file tree

Showing 18 changed files with 293 additions and 89 deletions.
diff --git a/src/app/components/Code/index.module.css b/src/app/components/Code/index.module.css
@@ -78,9 +78,6 @@
   font-size: 14px;
 }
 
-/* @media (max-width: 800px) {
-  .code,
-  .highlightCode {
-    max-width: calc(100vw - 80px);
-  }
-} */
+.codeGet {
+  background: #2a5739;
+}
diff --git a/src/app/components/Code/index.tsx b/src/app/components/Code/index.tsx
@@ -7,6 +7,8 @@ import 'highlight.js/styles/tokyo-night-dark.css'
 
 function icons(str: string) {
   return str
+    .replace(/(^GET\s)(.+)/gm, '<span style="color: lime;font-weight: 700">$1</span>$2')
+    .replace(/{(.+?)}/g, '<span style="color: #ffd900">{$1}</span>')
     .replace(/(#[a-f0-9]{3,8})\[(.+?)\]/gi, '<span style="color: $1">$2</span>')
     .replace(/@\[([a-z0-9]+?)\]/g, `<img width="16" src="/img/icon/$1.svg"/>`)
 }
@@ -67,7 +69,7 @@ export default function Code({ c, sf, ic, h, style }: {
         <section>
           <code
             onDoubleClick={(ev) => handleCopy(ev)}
-            className={styles.code}
+            className={c.match(/^GET.+/) ? `${styles.code} ${styles.codeGet}`: styles.code }
             style={style ? style : {}}
             dangerouslySetInnerHTML={{
               __html: icons(c)

diff --git a/src/app/components/Table/index.module.css b/src/app/components/Table/index.module.css
@@ -0,0 +1,24 @@
+.tableWrapper {
+  margin: 5px;
+  border-radius: 5px;
+  background: var(--code-background);
+}
+
+.table {
+  width: 100%;
+  display: table;
+  font-family: 'Fira Mono', monospace;
+  font-size: .9rem;
+}
+
+.tr { display: flex }
+
+.th, .td, .tdNone {
+  width: 100%;
+  text-align: left;
+  padding: 5px 15px;
+}
+
+.td { border-top: 1px solid var(--g4d) }
+.tdNone { border-top: none }
+.th { font-weight: 700 }
diff --git a/src/app/components/Table/index.tsx b/src/app/components/Table/index.tsx
@@ -0,0 +1,20 @@
+import styles from './index.module.css'
+
+export default function Table({ header, rows }: {
+  header: string[]
+  rows: string[][]
+}) {
+  return (
+    <section className={styles.tableWrapper}>
+      <section className={styles.table}>
+        <div className={styles.tr}>{
+          header.map(e => <div className={styles.th}>{e}</div>)
+        }</div>
+        {rows.map(e => <div className={styles.tr}>{e.map(f =>
+          f.match(/^\^.*?|^$/) ? <div className={styles.tdNone}>{f.slice(1)}</div>
+            : <div className={styles.td}>{f}</div>)}</div>
+        )}
+      </section>
+    </section>
+  )
+}
diff --git a/src/app/docs/components/Docs/index.tsx b/src/app/docs/components/Docs/index.tsx
@@ -19,7 +19,7 @@ export default function Docs({ title, children }: {
 
   const sidebarId = useId()
   const [headerOptions, setHeaderOptions] = useState(false)
-  const handleHeaderOptions = (ev: React.MouseEvent) => {
+  const handleHeaderOptions = (_: React.MouseEvent) => {
     setHeaderOptions(!headerOptions)
     const sidebarElement = document.getElementById(sidebarId) as HTMLElement
     sidebarElement.style.display = headerOptions ? 'none' : 'block'

diff --git a/src/app/docs/pages/gettingicons/color/page.tsx b/src/app/docs/pages/gettingicons/color/page.tsx
@@ -1,4 +1,5 @@
 import Code from '@/app/components/Code'
+import Table from '@/app/components/Table'
 import Docs from '@/app/docs/components/Docs'
 import ReqResExample from '@/app/docs/components/ReqResExample'
 
@@ -15,13 +16,23 @@ export default function Page() {
         This property colors only icons with one color, therefore if the default icon has more than one color it returns the <Code ic='plain' /> icon instead.
       </p>
       <Code c={`
-        @[connector]?[ICON_NAME]&color=[COLOR]
-        @[connector]?[ICON_NAME]&c=[COLOR]`} />
+        GET /api?{iconName}&color={color}
+        GET /api?{iconName}&c={color}`} />
 
-      <ReqResExample reqs={[
-        'python&color=f0a',
-        'python&c=gold'
+      <h4>Examples</h4>
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'python'],
+        ['color', 'f0a']
       ]} />
+      <ReqResExample reqs={['python&color=f0a']} title={false} />
+
+      <hr />
+
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'python'],
+        ['c', 'gold']
+      ]} />
+      <ReqResExample reqs={['python&c=gold']} title={false} />
     </Docs>
   )
 }
diff --git a/src/app/docs/pages/gettingicons/icon/page.tsx b/src/app/docs/pages/gettingicons/icon/page.tsx
@@ -1,4 +1,5 @@
 import Code from '@/app/components/Code'
+import Table from '@/app/components/Table'
 import Docs from '@/app/docs/components/Docs'
 import ReqResExample from '@/app/docs/components/ReqResExample'
 
@@ -8,8 +9,11 @@ export default function Page() {
       <p>
         <Code ic='icon' /> is a required implicit property of the API request, when alone and if it is a valid technology name or alternative name, the request returns the default icon for the specified technology.
       </p>
-      <Code c={`@[connector]?[ICON_NAME]`} />
-      <ReqResExample reqs={['java']} />
+      <Code c={`GET /api?{iconName}`} />
+
+      <h4>Example</h4>
+      <Table header={['Parameter', 'Value']} rows={[['iconName', 'java']]}/>
+      <ReqResExample reqs={['java']} title={false}/>
     </Docs>
   )
 }
diff --git a/src/app/docs/pages/gettingicons/moreexamples/page.tsx b/src/app/docs/pages/gettingicons/moreexamples/page.tsx
@@ -0,0 +1,61 @@
+import Code from '@/app/components/Code'
+import Table from '@/app/components/Table'
+import Docs from '@/app/docs/components/Docs'
+import ReqResExample from '@/app/docs/components/ReqResExample'
+
+export default function Page() {
+  return (
+    <Docs title='Getting icons: More examples'>
+      <p>
+        This is a example of getting a icon using its alternative name, in this case, using <Code ic='x'/> instead of <Code ic='twitter'/>. Also using more parameters: <Code ic='release'/>, <Code ic='size'/> and <Code ic='color'/>.
+      </p>
+      <Code c={`GET /api?{iconName}&r={release}&s={size}&c={color}`} /><Code></Code>
+      <h4>Example</h4>
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'x'],
+        ['release | r', 'dev'],
+        ['size | s', '96'],
+        ['color | c', 'green'],
+      ]}/>
+      <ReqResExample reqs={['x&r=dev&s=96&c=green']} title={false}/>
+
+      <hr />
+
+      <p>
+        In these next examples let's use the <Code ic='theme'/> parameter.
+      </p>
+      <Code c={`GET /api?{iconName}&r={release}&s={size}&t={theme}`} /><Code></Code>
+      <h4>Examples</h4>
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'github'],
+        ['release | r', '2.10'],
+        ['size | s', '64'],
+        ['theme | t', 'light'],
+      ]}/>
+      <ReqResExample reqs={['github&r=2.10&s=64&t=light']} title={false}/>
+      <hr />
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'github'],
+        ['release | r', '2.10'],
+        ['size | s', '64'],
+        ['theme | t', 'dark'],
+      ]}/>
+      <ReqResExample reqs={['github&r=2.10&s=64&t=dark']} title={false}/>
+      <hr />
+
+      <p>
+        This example shows <Code ic='theme'/> parameter priority over <Code ic='color'/>.
+      </p>
+      <Code c={`GET /api?{iconName}&r={release}&s={size}&t={theme}&c={color}`} /><Code></Code>
+      <h4>Example</h4>
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'github'],
+        ['release | r', '2.10'],
+        ['size | s', '72'],
+        ['theme | t', 'light'],
+        ['color | c', 'ff00ff']
+      ]}/>
+      <ReqResExample reqs={['gitlab&r=2.10&s=72&t=dark&c=ff00ff']} title={false}/>
+    </Docs>
+  )
+}
diff --git a/src/app/docs/pages/gettingicons/release/page.tsx b/src/app/docs/pages/gettingicons/release/page.tsx
@@ -1,4 +1,5 @@
 import Code from '@/app/components/Code'
+import Table from '@/app/components/Table'
 import Docs from '@/app/docs/components/Docs'
 import ReqResExample from '@/app/docs/components/ReqResExample'
 
@@ -9,20 +10,59 @@ export default function Page() {
         It is possible to get an icon from a previous or next release of Devicon by specifying the project version through <Code ic='release' /> or <Code ic='r' /> key.
       </p>
       <Code c={`
-        @[connector]?[ICON_NAME]&release=[RELEASE]
-        @[connector]?[ICON_NAME]&r=[RELEASE]
+        GET /api?{iconName}&release={release}
+        GET /api?{iconName}&r={release}
       `} />
       <p>
         Property value can be <Code ic='dev' /> or <Code ic='develop' /> to access the development branch and get early access to new icons. Or, in order to get previous icon releases, the value can be the project version number since version <Code ic='2.7' />. Versions before <Code ic='2.7' /> will not work because Devicon project compatibility.
       </p>
-      <ReqResExample reqs={[
-        'chakraui&r=dev',
-        'php&r=2.7',
-        'twitter',
-        'twitter&release=2.15.1',
-        'rust',
-        'rust&r=2.15.1'
-      ]} />
+
+      <h4>Examples</h4>
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'chakraui'], 
+        ['r', 'dev']
+      ]}/>
+      <ReqResExample reqs={['chakraui&r=dev']} title={false}/>
+
+      <hr />
+
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'php'], 
+        ['r', '2.7']
+      ]}/>
+      <ReqResExample reqs={['php&r=2.7']} title={false}/>
+
+      <hr />
+
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'twitter'],
+        ['release (implicit)', 'fallback to latest']
+      ]}/>
+      <ReqResExample reqs={['twitter']} title={false}/>
+
+      <hr />
+
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'twitter'],
+        ['release', '2.15.1']
+      ]}/>
+      <ReqResExample reqs={['twitter&release=2.15.1']} title={false}/>
+
+      <hr />
+
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'rust'],
+        ['release (implicit)', 'fallback to latest']
+      ]}/>
+      <ReqResExample reqs={['rust']} title={false}/>
+
+      <hr />
+
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'rust'],
+        ['release', '2.15.1']
+      ]}/>
+      <ReqResExample reqs={['rust&release=2.15.1']} title={false}/>
       <p>
         When the release is not specified the request returns the latest released icon for the named technology.
       </p>

diff --git a/src/app/docs/pages/gettingicons/size/page.tsx b/src/app/docs/pages/gettingicons/size/page.tsx
@@ -1,4 +1,5 @@
 import Code from '@/app/components/Code'
+import Table from '@/app/components/Table'
 import Docs from '@/app/docs/components/Docs'
 import ReqResExample from '@/app/docs/components/ReqResExample'
 
@@ -9,13 +10,23 @@ export default function Page() {
         <Code ic='size' /> is an optional property that can be specified by the key <Code ic='size' /> or <Code ic='s' />. Its value have to be an <Code ic='integer' /> to change the icon size in pixels.
       </p>
       <Code c={`
-        @[connector]?[ICON_NAME]&size=[SIZE]
-        @[connector]?[ICON_NAME]&s=[SIZE]`} />
+        GET /api?{iconName}&size={size}
+        GET /api?{iconName}&s={size}`} />
 
-      <ReqResExample reqs={[
-        'javascript&size=256',
-        'javascript&s=96'
+      <h4>Examples</h4>
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'javascript'],
+        ['size', '256']
       ]} />
+      <ReqResExample reqs={['javascript&size=256']} title={false} />
+
+      <hr />
+
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'javascript'],
+        ['s', '96']
+      ]} />
+      <ReqResExample reqs={['javascript&s=96']} title={false} />
     </Docs>
   )
 }
diff --git a/src/app/docs/pages/gettingicons/theme/page.tsx b/src/app/docs/pages/gettingicons/theme/page.tsx
@@ -1,4 +1,5 @@
 import Code from '@/app/components/Code'
+import Table from '@/app/components/Table'
 import Docs from '@/app/docs/components/Docs'
 import ReqResExample from '@/app/docs/components/ReqResExample'
 
@@ -13,13 +14,23 @@ export default function Page() {
       </p>
 
       <Code c={`
-        @[connector]?[ICON_NAME]&theme=dark
-        @[connector]?[ICON_NAME]&t=d`} />
+        GET /api?{iconName}&theme={theme}
+        GET /api?{iconName}&t={theme}`} />
 
-      <ReqResExample reqs={[
-        'p5js&theme=dark',
-        'p5js&t=l'
+      <h4>Examples</h4>
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'p5js'],
+        ['theme', 'dark | d']
       ]} />
+      <ReqResExample reqs={['p5js&theme=dark']} title={false} />
+
+      <hr />
+
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'p5js'],
+        ['t', 'light | l']
+      ]} />
+      <ReqResExample reqs={['p5js&t=l']} title={false} />
     </Docs>
   )
 }
diff --git a/src/app/docs/pages/gettingicons/version/page.tsx b/src/app/docs/pages/gettingicons/version/page.tsx
@@ -1,4 +1,5 @@
 import Code from '@/app/components/Code'
+import Table from '@/app/components/Table'
 import Docs from '@/app/docs/components/Docs'
 import ReqResExample from '@/app/docs/components/ReqResExample'
 
@@ -9,13 +10,24 @@ export default function Page() {
         <Code ic='version' /> is an optional property that is used to specify the icon version. The property key can be <Code ic='version' /> or <Code ic='v' /> and its values can be <Code ic='original' /> or <Code ic='o' />, <Code ic='original-wordmark' /> or <Code ic='ow' />, <Code ic='plain' /> or <Code ic='p' />, <Code ic='plain-wordmark' /> or <Code ic='pw' />, <Code ic='line' /> or <Code ic='l' /> and <Code ic='line-wordmark' /> or <Code ic='lw' />.
       </p>
       <Code c={`
-        @[connector]?[ICON_NAME]&version=[VERSION]
-        @[connector]?[ICON_NAME]&v=[VERSION]`} />
+        GET /api?{iconName}&version={version}
+        GET /api?{iconName}&v={version}`} />
 
-      <ReqResExample reqs={[
-        'apache&version=original-wordmark',
-        'apache&v=ow'
+      <h4>Examples</h4>
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'apache'],
+        ['version', 'original-wordmark']
       ]} />
+      <ReqResExample reqs={['apache&version=original-wordmark']} title={false} />
+
+      <hr />
+
+      <Table header={['Parameter', 'Value']} rows={[
+        ['iconName', 'apache'],
+        ['v', 'ow']
+      ]} />
+      <ReqResExample reqs={['apache&v=ow']} title={false} />
+
     </Docs>
   )
 }