Skip to content

Commit

Permalink
Patch 14
Browse files Browse the repository at this point in the history 
- Change ReqResExample function.
- Change `Getting info: icon` and `Getting info: tag` pages.
- Fix `Devicon card` on homepage.
  • Loading branch information
@lunatic-fox
lunatic-fox committed May 3, 2024
1 parent c02bb60 commit d93374b
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 209 deletions.
63 changes: 34 additions & 29 deletions src/app/components/Code/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,21 @@ function icons(str: string) {
.replace(/@\[([a-z0-9]+?)\]/g, `<img width="16" src="/img/icon/$1.svg"/>`)
}

/** @param h Language highlight */
export default function Code({ c, ic, h, style }: {
export default function Code({ c, sf, ic, h, style }: {
/** Code string */
c?: string
/** Skip formatting */
sf?: boolean
/** Inline code string */
ic?: string
/** Highlight format */
h?: string
/** Inline style object */
style?: React.CSSProperties
}) {
}) {
ic = ic?.replace(/</g, '&lt;').replace(/>/g, '&gt;')

if (c)
if (c && !sf)
c = literalStringTab(c)

if (c && h)
Expand Down Expand Up @@ -58,30 +63,30 @@ export default function Code({ c, ic, h, style }: {
dangerouslySetInnerHTML={{ __html: icons(c) }}></code>
<h6>Double click to copy</h6>
</section>
: c ?
<section>
<code
onDoubleClick={(ev) => handleCopy(ev)}
className={styles.code}
style={style ? style : {}}
dangerouslySetInnerHTML={{
__html: icons(c)
.split('\n')
.map(e => `<span>${e}</span>`)
.filter(e => e)
.join('')
.replace(/<span><\/span>/g, '')
}}></code>
<h6>Double click to copy</h6>
</section>
: ic ?
<code
className={styles.inlineCode}
dangerouslySetInnerHTML={{
__html: icons(ic.split('\n')
.map(e => e.trim())
.join(''))
}}></code>
: ''
: c ?
<section>
<code
onDoubleClick={(ev) => handleCopy(ev)}
className={styles.code}
style={style ? style : {}}
dangerouslySetInnerHTML={{
__html: icons(c)
.split('\n')
.map(e => `<span>${e}</span>`)
.filter(e => e)
.join('')
.replace(/<span><\/span>/g, '')
}}></code>
<h6>Double click to copy</h6>
</section>
: ic ?
<code
className={styles.inlineCode}
dangerouslySetInnerHTML={{
__html: icons(ic.split('\n')
.map(e => e.trim())
.join(''))
}}></code>
: ''
)
}
67 changes: 33 additions & 34 deletions src/app/docs/components/ReqResExample/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,63 +3,62 @@ import Code from '../../../components/Code'
import styles from './index.module.css'

const API_URL = 'https://devapix.vercel.app/api'
export default function ReqResExample({ reqs, title }: {
reqs: string[] | { request: string, code: string }[]
export default function ReqResExample({ reqs, title, info }: {
reqs: string[]
title?: string | boolean
info?: boolean
}) {
let examples = reqs.map((req, i) => {
let examples = reqs.map(async (req, i) => {
const icon = { name: '', size: 128 }
const requestProps = req.split('&').map(e => e.split('='))

if (typeof req === 'string') {
const requestProps = req
.split('&')
.map(e => e.split('='))

requestProps.forEach(e => {
if (e.length === 1) icon.name = e[0]
if (e[0].match(/s(ize)?/) && !isNaN(+e[1])) icon.size = +e[1]
})
requestProps.forEach(e => {
if (e.length === 1) icon.name = e[0]
if (e[0].match(/s(ize)?/) && !isNaN(+e[1])) icon.size = +e[1]
})

if (info) {
const iconInfo = await (await fetch(`${API_URL}/info?${req}`)).json()
return (
<section key={i}>
{i > 0 ? <br /> : ''}
{i > 0 ? <div className={styles.line}></div> : ''}
<section className={styles.reqResWrapper}>
<h5>Request</h5>
<Code c={`${API_URL}?${req}`} />
<Code c={`${API_URL}/info?${req}`} />
<h5>Response</h5>
<section className={styles.reqResImgWrapper}>
<Image
src={`${API_URL}?${req}`}
width={icon.size}
height={icon.size}
alt={icon.name}
priority={true} />
</section>
<Code c={JSON.stringify(iconInfo, null, 2)} sf={true} h='json' />
</section>
</section>
)
} else {
return (
<section key={i}>
{i > 0 ? <br /> : ''}
{i > 0 ? <div className={styles.line}></div> : ''}
<section className={styles.reqResWrapper}>
<h5>Request</h5>
<Code c={`${API_URL}/${req.request}`} />
<h5>Response</h5>
<Code h='json' c={req.code} />
}

return (
<section key={i}>
{i > 0 ? <br /> : ''}
{i > 0 ? <div className={styles.line}></div> : ''}
<section className={styles.reqResWrapper}>
<h5>Request</h5>
<Code c={`${API_URL}?${req}`} />
<h5>Response</h5>
<section className={styles.reqResImgWrapper}>
<Image
src={`${API_URL}?${req}`}
width={icon.size}
height={icon.size}
alt={icon.name}
priority={true} />
</section>
</section>
)
}
</section>
)
})

return (
<section>
{
title === false ? ''
: <>
: <>
<br />
<h4>{title ? title : `Example${examples.length > 1 ? 's' : ''}`}</h4>
</>
Expand Down
68 changes: 1 addition & 67 deletions src/app/docs/pages/gettinginfo/icon/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,73 +9,7 @@ export default function Page() {
It is possible to get information, based on <Code ic='devicon.json' /> file, about the icon via <Code ic='project' /> response property. Also check the request values through <Code ic='request' /> if the properties to modify the icon are passed.
</p>
<Code c='@[connector]/info?[ICON_NAME]' />

<ReqResExample reqs={[
{
request: 'info?elixir',
code: `
{
"project": {
"version": "latest",
"releases": [
"2.10.0",
"2.10.1",
"2.11.0",
"2.12.0",
"2.13.0",
"2.14.0",
"2.15.0",
"2.15.1",
"2.16.0"
],
"altnames": [
"elexirlang"
],
"iconVersions": [
"original",
"plain",
"original-wordmark",
"plain-wordmark"
],
"tags": [
"language"
],
"color": "#380A4D"
},
"request": {
"name": "elixir",
"version": "original"
}
}`
},
{
request: 'info?rust&v=p&c=blue&s=50',
code: `
{
"project": {
"version": "latest",
"altnames": [
"rustlang"
],
"iconVersions": [
"original",
"line"
],
"tags": [
"programming",
"language"
],
"color": "#000"
},
"request": {
"name": "rust",
"version": "original",
"color": "#0000FF",
"size": 50
}
}`
}
]} />
<ReqResExample reqs={['elixir', 'rust']} info={true}/>
<p>
Notice in <Code ic='rust' /> info request that the <Code ic='version' /> property refers to <Code ic='plain' /> icon version, but since this icon version is not present into the latest project version, the API request points to <Code ic='original' /> icon version instead. Also CSS color is automatically converted to its corresponding hexadecimal color.
</p>
Expand Down
78 changes: 1 addition & 77 deletions src/app/docs/pages/gettinginfo/tag/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,83 +9,7 @@ export default function Page() {
<Code ic='tag' /> property allows access to a list of icon names that have the same searched tag value in their <Code ic='tags' /> array of <Code ic='devicon.json' /> file.
</p>
<Code c='@[connector]/info?tag=[TAG]' />
<ReqResExample reqs={[
{
request: 'info?tag=language',
code: `
{
"tag": "language",
"icons": [
"aarch64",
"antdesign",
"apl",
"awk",
"bun",
"c",
"carbon",
"ceylon",
"clarity",
"clojure",
"clojurescript",
"coffeescript",
"cplusplus",
"crystal",
"csharp",
"css3",
"dart",
"elixir",
"embeddedc",
"fortran",
"fsharp",
"go",
"graphql",
"groovy",
"haskell",
"haxe",
"html5",
"java",
"javascript",
"jetpackcompose",
"jule",
"julia",
"jupyter",
"kotlin",
"labview",
"lua",
"markdown",
"matlab",
"mysql",
"nodejs",
"objectivec",
"ocaml",
"ohmyzsh",
"opencl",
"perl",
"php",
"prolog",
"python",
"r",
"rect",
"ruby",
"rust",
"scala",
"sequelize",
"solidity",
"swift",
"typescript",
"unifiedmodelinglanguage",
"vala",
"visualbasic",
"vyper",
"wasm",
"xml",
"yaml",
"zig"
]
}
`
}
]} />
<ReqResExample reqs={['tag=language']} info={true}/>
</Docs>
)
}
4 changes: 2 additions & 2 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function Home() {
<section className={styles.headerDescription}>Devapix</section>
</header>
<section className={styles.bigWrapper}>
<Link href='https://devicon.dev'>
<a href='https://devicon.dev'>
<section className={styles.card}>
<Image
src='https://devapix.vercel.app/api?devicon'
Expand All @@ -32,7 +32,7 @@ export default function Home() {
</p>
</article>
</section>
</Link>
</a>

<Link href='/docs'>
<section className={styles.card}>
Expand Down

0 comments on commit d93374b

Please sign in to comment.