diff --git a/src/app/docs/codes.ts b/src/app/docs/codes.ts new file mode 100644 index 0000000..1a8388a --- /dev/null +++ b/src/app/docs/codes.ts @@ -0,0 +1,87 @@ +export const basicApiFetchCode = { + js: `const res = await fetch("https://mock-data-generator-jet.vercel.app/api/generator", { + method: "POST", + body: JSON.stringify({ + count: 10, + fields: ["firstName", "lastName"], + }) +}); + +const data = await res.json(); +console.log(data.value);`, + + py: `import requests + +response = requests.post("https://mock-data-generator-jet.vercel.app/api/generator", json={ + "count": 10, + "fields": ["firstName", "lastName"], +}) + +data = response.json() +print(data["value"])`, + + res: `[ + { firstName: 'Estelle', lastName: 'Turcotte' }, + { firstName: 'Shaun', lastName: 'Wilkinson' }, + { firstName: 'Archie', lastName: 'Russel' }, + { firstName: 'Ruben', lastName: 'Emard' }, + { firstName: 'Barbara', lastName: 'Hahn' }, + { firstName: 'Nikki', lastName: 'Okuneva' }, + { firstName: 'Johnnie', lastName: 'Howe' }, + { firstName: 'Molly', lastName: 'Runolfsson' }, + { firstName: 'Sherman', lastName: 'Schowalter' }, + { firstName: 'Earl', lastName: 'Klein' } +]`, +}; + +export const seedApiFetchCode = { + js: `const res = await fetch("https://mock-data-generator-jet.vercel.app/api/generator", { + method: "POST", + body: JSON.stringify({ + count: 5, + fields: ["avatar", "email", "password"], + seed: 123, + }) +}); + +const data = await res.json(); +console.log(data.value);`, + py: `import requests + +response = requests.post("https://mock-data-generator-jet.vercel.app/api/generator", json={ + "count": 5, + "fields": ["avatar", "email", "password"], + "seed": 123, +}) + +data = response.json() +print(data["value"])`, + + res: `[ + { + avatar: 'https://avatars.githubusercontent.com/u/28613933', + email: 'Chris84@gmail.com', + password: 'aqi83WueYU0cbUE' + }, + { + avatar: 'https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/male/512/71.jpg', + email: 'Gabriel.Murray@hotmail.com', + password: 'xpBFcBiYbF7AQ_q' + }, + { + avatar: 'https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/male/512/68.jpg', + email: 'Jeannie_Kuvalis11@hotmail.com', + password: 'UrEB1oAUWRw4Rv9' + }, + { + avatar: 'https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/female/512/34.jpg', + email: 'Jeffrey.Moore@hotmail.com', + password: 'VmFf0ZsI4KUyWLh' + }, + { + avatar: 'https://avatars.githubusercontent.com/u/43857224', + email: 'Jasmine_Langosh@hotmail.com', + password: 'gdp0kucJJiVXnAy' + } +]` +} diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx index 32a30e9..fa7372b 100644 --- a/src/app/docs/page.tsx +++ b/src/app/docs/page.tsx @@ -1,68 +1,133 @@ -import { CodeBlock, CodeGroup } from "@prose-ui/next"; +import { cn } from "@/utilities"; +import { CodeGroup, Card, CodeBlock, Callout } from "@prose-ui/next"; +import { basicApiFetchCode, seedApiFetchCode } from "./codes"; import * as Prism from "prismjs"; +import "prismjs/components/prism-python"; -export default function DocsPage() { - const code = `const x = 'Hello world'; -console.log(x); - -const y = 'Hello world'; -console.log(y); - -const z = 'Hello world'; -console.log(z);`; - const highlightedCode = Prism.highlight(code, Prism.languages.javascript, "javascript"); - const highlightedCodeWithLines = `${highlightedCode.split('\n').reduce((acc, line) => { - return acc + `${line}`; - }, '')}`; +const highlightCode = (code: string, language: string) => { + return `
${Prism.highlight(code, Prism.languages[language], language).split("\n").reduce((acc, el) => {
+    return acc + `${el}`;
+  }, "")}
`; +}; - const secondCode = `typescript -const x = 'Hello world'; -console.log(x); +export default function DocsPage() { + return ( +
+

API docs

+ + Our web application provides an API that allows you to generate sample + data using `faker`, an npm library. This makes it easy to quickly create + test records, mocks, or prototype data without having to build them by + hand. + -const y = 'Hello world'; -console.log(y); +

Example code to fetch API

+ -const z = 'Hello world'; -console.log(z);`; +

In console you should see:

+ test + + Values in your console can be a bit different because seed is not set and data is generated randomly. + - const secondHighlightedCode = Prism.highlight(secondCode, Prism.languages.javascript, "javascript"); - const secondHighlightedCodeWithLines = `${secondHighlightedCode.split('\n').reduce((acc, line) => { - return acc + `${line}`; - }, '')}`; +

You can change count of records, fields and seed:

+ - return ( - <> -

Docs

-
- - test - +

In console you will get:

+ test + +
    +
  • Count can be between 1 and 300.
    • +
  • You can use as many fields as you need.
    • +
  • Seed is optional, if you don't set it, data will be generated randomly.
    • +
+ - +

All working fields

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Column nameColumn value
"firstName"First name of user like "John"
"lastName"Last name of user like "Doe"
"fullName"Full name of user like "John Doe"
"email"Email of user like "john.doe@example.com"
"username"Username of user like "john_doe"
"password"Password of user like "password123"
"avatar"Avatar of user like "https://example.com/avatar.png"
"phrase"Phrase of user with computer science terms
"anytime"Random date and time
- - ); +
+ ) } diff --git a/src/app/styles/_config.scss b/src/app/styles/_config.scss index 4ed5832..b9bcfcf 100644 --- a/src/app/styles/_config.scss +++ b/src/app/styles/_config.scss @@ -50,6 +50,8 @@ $props: ( size-xl: 128px, size-xxl: 256px, size-xxxl: 384px, + size-xxxxl: 512px, + size-xxxxxl: 640px, size-10: 10%, size-20: 20%, @@ -113,6 +115,16 @@ $spacing: ( ); $widths: ( + 100px: 100px, + 200px: 200px, + 300px: 300px, + 400px: 400px, + 500px: 500px, + 600px: 600px, + 700px: 700px, + 800px: 800px, + 900px: 900px, + 1000px: 1000px, 10: 10%, 20: 20%, 30: 30%, diff --git a/src/app/styles/components/_code.scss b/src/app/styles/components/_code.scss index ee4bcdd..df7d48b 100644 --- a/src/app/styles/components/_code.scss +++ b/src/app/styles/components/_code.scss @@ -1,7 +1 @@ -@layer components { - - .code-group, - .code-block { - border: 1px solid var(--color-bg-disabled); - } -} +@layer components {} diff --git a/src/app/styles/components/_header.scss b/src/app/styles/components/_header.scss index 8167008..cd39fce 100644 --- a/src/app/styles/components/_header.scss +++ b/src/app/styles/components/_header.scss @@ -57,10 +57,12 @@ z-index: 10000; padding: var(--space-m); transition: 0.5s; - text-align: center; + flex-direction: column; + gap: var(--space-s); + align-items: center; @media (max-width: 768px) { - display: block; + display: flex; } &.hidden { diff --git a/src/app/styles/components/_prose-ui-style.scss b/src/app/styles/components/_prose-ui-style.scss index 9a162dc..9cdcf29 100644 --- a/src/app/styles/components/_prose-ui-style.scss +++ b/src/app/styles/components/_prose-ui-style.scss @@ -1,5 +1,33 @@ @layer components { .prose-ui { background-color: var(--color-bg-primary); + + &.center { + width: var(--size-100); + padding: 0 var(--size-10); + + @media (max-width: 768px) { + padding: 0 var(--space-m); + } + } + + .code-group, + .code-block { + border: 1px solid var(--color-bg-disabled); + } + + .prose-ui-table-div { + overflow-x: auto; + max-width: var(--size-100); + } + + table { + text-align: left; + + th, + td { + padding: var(--space-s) var(--space-m); + } + } } } diff --git a/src/app/styles/utilities/_position.scss b/src/app/styles/utilities/_position.scss index 5a19234..f05aece 100644 --- a/src/app/styles/utilities/_position.scss +++ b/src/app/styles/utilities/_position.scss @@ -40,4 +40,12 @@ .justify-self-center { justify-self: center; } + + .flex-column { + flex-direction: column; + } + + .flex-row { + flex-direction: row; + } } diff --git a/src/app/styles/utilities/_sizes.scss b/src/app/styles/utilities/_sizes.scss index 63ee16a..418937c 100644 --- a/src/app/styles/utilities/_sizes.scss +++ b/src/app/styles/utilities/_sizes.scss @@ -5,5 +5,9 @@ .width-#{"" + $key} { width: $value; } + + .max-width-#{"" + $key} { + max-width: $value; + } } } diff --git a/src/components/header.tsx b/src/components/header.tsx index 8b999de..5781f54 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -48,6 +48,9 @@ export default function Header() { generator + + API docs +
@@ -57,6 +60,9 @@ export default function Header() { generator + + API docs +