| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="description" content=""> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Documentation</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
| <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800,900" rel="stylesheet"> |
| <link rel="author" href=""> |
| <style> |
| |
| :root { |
| --primary-color: #432E30; |
| --primary-color-light: #8E7474; |
| --accent-color: #FE6A6B; |
| --accent-color-light: #FFE4E4; |
| --accent-color-dark: #B94B4C; |
| --white-color: #FAFBFC; |
| --light-gray-color: #C6CBD1; |
| --medium-gray-color: #959DA5; |
| --dark-gray-color: #444D56; |
| --bg-color: #F8F8FA; |
| --code-bg-color: #F0E8E8; |
| } |
| |
| |
| html, body { |
| padding: 0; |
| margin: 0; |
| font-family: 'Nunito Sans', sans-serif; |
| background-color: white; |
| } |
| |
| p { |
| font-weight: 300; |
| color: #4A4A4A; |
| } |
| |
| a, a:hover { |
| text-decoration: none; |
| color: var(--primary-color); |
| } |
| |
| hr { |
| padding: 1rem 0; |
| border: 0; |
| border-bottom: 1px solid var(--bg-color); |
| } |
| |
| * { |
| box-sizing: border-box; |
| } |
| |
| |
| |
| |
| .section__title { |
| color: var(--primary-color); |
| } |
| |
| |
| .tab__container { |
| position: relative; |
| } |
| |
| .tab__container > ul { |
| position: absolute; |
| list-style: none; |
| margin: 0; |
| right: 1rem; |
| top: -2rem; |
| padding-left: 0; |
| } |
| |
| .tab__container .code { |
| white-space: normal; |
| padding: 1rem 1.5rem; |
| } |
| |
| .tab { |
| display: inline-block; |
| padding: 0.3rem 0.5rem; |
| font-weight: 200; |
| cursor: pointer; |
| } |
| |
| .tab.active { |
| border-bottom: 1px solid var(--primary-color); |
| font-weight: 700; |
| display: inline-block; |
| } |
| |
| .tab__pane { |
| display: none; |
| } |
| |
| .tab__pane.active { |
| display: block; |
| } |
| |
| |
| .code { |
| border-radius: 3px; |
| font-family: Space Mono, SFMono-Regular, Menlo,Monaco, Consolas, Liberation Mono, Courier New, monospace; |
| background: var(--bg-color); |
| border: 1px solid var(--code-bg-color); |
| color: var(--primary-color-light); |
| } |
| |
| .code--block { |
| white-space: pre-line; |
| padding: 0 1.5rem; |
| } |
| |
| .code--inline { |
| padding: 3px 6px; |
| font-size: 80%; |
| } |
| |
| |
| .button--primary { |
| padding: 10px 22px; |
| background-color: var(--accent-color); |
| color: white; |
| position: relative; |
| text-decoration: none; |
| border: 0; |
| transition: all .3s ease-out; |
| } |
| |
| .button--primary:after { |
| position: absolute; |
| content: ""; |
| width: 1rem; |
| height: 1rem; |
| background-color: var(--accent-color-light); |
| right: -0.4rem; |
| top: -0.4rem; |
| transition: all 0.3s ease-out; |
| } |
| |
| .button--primary:hover { |
| text-shadow: 0px 1px 1px var(--accent-color-dark); |
| color: white; |
| transform: translate3D(0, -3px, 0); |
| } |
| |
| .button--primary:hover::after { |
| transform: rotate(90deg); |
| } |
| |
| .button--secondary { |
| padding: 10px 22px; |
| border: 2px solid var(--primary-color); |
| transition: all 0.5s ease-out; |
| } |
| |
| .button--secondary:hover { |
| border-color: var(--accent-color); |
| color: var(--accent-color); |
| } |
| |
| |
| .link { |
| text-decoration: none; |
| transition: all 0.3s ease-out; |
| } |
| |
| .link:hover { |
| color: var(--accent-color); |
| } |
| |
| .link--dark { |
| color: var(--primary-color); |
| } |
| |
| .link--light { |
| color: var(--accent-color); |
| } |
| |
| |
| nav { |
| display: grid; |
| grid-template-columns: 70px auto; |
| } |
| |
| .menu { |
| margin: 0; |
| text-align: right; |
| overflow: hidden; |
| list-style: none; |
| } |
| |
| .toggle { |
| display: none; |
| position: relative; |
| } |
| |
| .toggle span, |
| .toggle span:before, |
| .toggle span:after { |
| content: ''; |
| position: absolute; |
| height: 2px; |
| width: 18px; |
| border-radius: 2px; |
| background: var(--primary-color); |
| display: block; |
| cursor: pointer; |
| transition: all 0.3s ease-in-out; |
| right: 0; |
| } |
| |
| .toggle span:before { |
| top: -6px; |
| } |
| |
| .toggle span:after { |
| bottom: -6px; |
| } |
| |
| .toggle.open span{ |
| background-color: transparent; |
| } |
| |
| .toggle.open span:before, |
| .toggle.open span:after { |
| top: 0; |
| } |
| |
| .toggle.open span:before { |
| transform: rotate(45deg); |
| } |
| |
| .toggle.open span:after { |
| transform: rotate(-45deg); |
| } |
| |
| .menu__item { |
| padding: 1rem; |
| display: inline-block; |
| } |
| |
| .menu__item.toggle { |
| display: none; |
| } |
| |
| |
| table { |
| border-collapse: collapse; |
| width: 100%; |
| transition: color .3s ease-out; |
| margin-bottom: 2rem; |
| } |
| |
| table td, table th { |
| border: 1px solid var(--code-bg-color); |
| padding: 0.8rem; |
| font-weight: 300; |
| } |
| |
| table th { |
| text-align: left; |
| background-color: white; |
| border-color: white; |
| border-bottom-color: var(--code-bg-color); |
| } |
| |
| table td:first-child { |
| background-color: var(--bg-color); |
| font-weight: 600; |
| } |
| |
| @media screen and (max-width: 600px) { |
| nav { |
| grid-template-columns: 70px auto; |
| } |
| |
| .menu__item{ |
| display: none; |
| } |
| |
| .menu__item.toggle { |
| display: inline-block; |
| } |
| |
| .menu { |
| text-align: right; |
| padding: 0.5rem 1rem; |
| } |
| |
| .toggle { |
| display: block; |
| } |
| |
| .menu.responsive .menu__item:not(:first-child) { |
| display: block; |
| padding: 0 0 0.5rem 0; |
| } |
| } |
| |
| |
| .wrapper { |
| margin: 0 auto; |
| width: 70%; |
| } |
| |
| .footer { |
| text-align: center; |
| background-color: var(--primary-color); |
| padding: 2rem; |
| color: white; |
| } |
| |
| @keyframes fadeUp { |
| 0% { |
| opacity: 0; |
| transform: translate3d(0,30px,0); |
| } |
| 100% { |
| transform: translate3d(0,0,0); |
| } |
| } |
| html, body { |
| display: flex; |
| flex-direction: column; |
| min-height: 100vh; |
| } |
| |
| |
| .header { |
| border-bottom: 1px solid var(--code-bg-color); |
| grid-template-columns: 1fr 150px 60% 1fr; |
| } |
| |
| .wrapper { |
| display: flex; |
| flex-grow: 1; |
| } |
| |
| |
| .logo { |
| font-weight: 900; |
| color: var(--primary-color); |
| font-size: 1.4em; |
| grid-column: 2; |
| } |
| |
| .logo__thin { |
| font-weight: 300; |
| } |
| |
| |
| .menu { |
| grid-template-columns: 1fr 180px 60% 1fr; |
| } |
| |
| .menu__item { |
| padding: 1.5rem 1rem; |
| } |
| |
| |
| .doc__bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| width: 28%; |
| background-color: var(--bg-color); |
| z-index: -1; |
| } |
| |
| .doc__nav { |
| flex-basis: 20%; |
| font-weight: 200; |
| } |
| |
| .doc__nav ul { |
| list-style: none; |
| padding-left: 0; |
| line-height: 1.8; |
| } |
| |
| .doc__nav ul.fixed { |
| position: fixed; |
| top: 2rem; |
| } |
| |
| .doc__nav li:hover { |
| color: var(--primary-color-light); |
| cursor: pointer; |
| transition: color .3s ease-in-out; |
| } |
| |
| .doc__nav .selected { |
| color: var(--accent-color); |
| position: relative; |
| } |
| |
| .doc__nav .selected:after { |
| position: absolute; |
| content: ""; |
| width: 1rem; |
| height: 1rem; |
| background-color: var(--accent-color); |
| left: -1.5rem; |
| top: 0.3rem; |
| } |
| |
| .doc__content { |
| flex-basis: 80%; |
| padding: 0 0 5rem 1rem; |
| } |
| |
| @media (max-width: 750px) { |
| .wrapper { |
| flex-direction: column; |
| } |
| .doc__content { |
| padding-left: 0; |
| } |
| .doc__nav ul { |
| border-bottom: 1px solid var(--code-bg-color); |
| padding-bottom: 0.5rem; |
| } |
| .doc__nav ul.fixed { |
| |
| position: relative; |
| top: 0; |
| } |
| .doc__nav li { |
| display: inline-block; |
| padding-right: 1rem; |
| } |
| .doc__nav .selected:after { |
| display: none; |
| } |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div class="doc__bg"></div> |
| <nav class="header"> |
| <h1 class="logo">Docs <span class="logo__thin"></span></h1> |
| <ul class="menu"> |
| <div class="menu__item toggle"><span></span></div> |
| <li class="menu__item"><a href="https://github.com/MyDapitt" class="link link--dark"><i class="fa fa-github"></i> Github</a></li> |
| <li class="menu__item"><a href="index.html" class="link link--dark"><i class="fa fa-home"></i> Home</a></li> |
| </ul> |
| </nav> |
| <div class="wrapper"> |
| <aside class="doc__nav"> |
| <ul> |
| <li class="js-btn selected">Docs</li> |
| <li class="js-btn">Configuration</li> |
| <li class="js-btn">Endpoint</li> |
| <li class="js-btn">Sample Library</li> |
| </ul> |
| </aside> |
| <article class="doc__content"> |
| <section class="js-section"> |
| <h3 class="section__title">JS Code Snippet</h3> |
| <div class="code__block code__block--notabs"> |
| <pre class="code code--block"> |
| <code> |
| //JS Code Snippet// |
| |
| /* If you are using CommonJS, use the following modules: |
| file-type version "16.5.3" |
| node-fetch version "2.6.0" */ |
| |
| |
| async function uploader(buffer) { |
| let { ext } = await type.fromBuffer(buffer); |
| bodyForm = new FormData(); |
| bodyForm.append("file", buffer, "file." + ext); |
| |
| let response = await fetch("https://f.curvee.eu.org/upload", { |
| method: "post", |
| body: bodyForm, |
| }); |
| |
| return { |
| status: response.status, |
| result: (await response.json()).result, |
| }; |
| } |
| |
| |
| module.exports = { uploader } |
| </code> |
| </pre> |
| </div> |
| </section> |
| <article class="doc__content"> |
| <section class="js-section"> |
| <h3 class="section__title">Call Function</h3> |
| <div class="code__block code__block--notabs"> |
| <pre class="code code--block"> |
| <code> |
| // Call Function |
| |
| const { uploader } = require('../lib/uploader') |
| const { getBuffer } = require('../lib/function') |
| const link = `https://example.com/img.jpg` |
| var buf = await getBuffer(link) |
| let res = await uploader(buf) |
| console.log(res) |
| </code> |
| </pre> |
| </div> |
| </section> |
| <article class="doc__content"> |
| <section class="js-section"> |
| <h3 class="section__title">Function getBuffer</h3> |
| <div class="code__block code__block--notabs"> |
| <pre class="code code--block"> |
| <code> |
| // getBuffer |
| |
| const axios = require('axios'); |
| const FileType = require('file-type'); |
| const fetch = require('node-fetch'); |
| |
| const getBuffer = async (url, options) => { |
| try { |
| options ? options : {} |
| const res = await axios({ |
| method: "get", |
| url, |
| headers: { |
| 'DNT': 1, |
| 'Upgrade-Insecure-Request': 1 |
| }, |
| ...options, |
| responseType: 'arraybuffer' |
| }) |
| return res.data |
| } catch (e) { |
| console.log(`Error : ${e}`) |
| } |
| } |
| |
| module.exports = { getBuffer } |
| </code> |
| </pre> |
| </div> |
| </section> |
| <section class="js-section"> |
| <h3 class="section__title">Endpoint List</h3> |
| <table id="customers"> |
| <tr> |
| <th>Endpoint</th> |
| <th>Description</th> |
| <th>Status</th> |
| </tr> |
| <tr> |
| <td>/upload</td> |
| <td>Upload Files with buffer.</td> |
| <td>true</td> |
| </tr> |
| </table> |
| <hr/> |
| </section> |
| <article class="doc__content"> |
| <section class="js-section"> |
| <h3 class="section__title">Sample Library</h3> |
| <div class="code__block code__block--notabs"> |
| <pre class="code code--block"> |
| <code> |
| const fetch = require('node-fetch') |
| const FormData = require('form-data') |
| const { fromBuffer } = require('file-type') |
| |
| /** |
| * Upload image to url |
| * Supported mimetype: |
| * - `image/jpeg` |
| * - `image/jpg` |
| * - `image/png`s |
| * - `video/mp4`s |
| * - `all files` |
| * @param {Buffer} buffer Image Buffer |
| */ |
| |
| module.exports = async buffer => { |
| let { ext } = await fromBuffer(buffer); |
| let bodyForm = new FormData(); |
| bodyForm.append("file", buffer, "file." + ext); |
| let res = await fetch("https://f.curvee.eu.org/upload", { |
| method: "post", |
| body: bodyForm, |
| }); |
| let data = await res.json(); |
| let resultUrl = data.result ? data.result.url : ''; |
| return resultUrl; |
| } |
| </code> |
| </pre> |
| </div> |
| </section> |
| <section class="js-section"> |
| <h3 class="section__title">Issues</h3> |
| <p>If you encounter any problems, please contact me by contacting me on GitHub, I will be happy to answer any questions you have.</p> |
| </section> |
| </article> |
| </div> |
| <footer class="footer">© Copyright<a href="https://github.com/MyDapitt" target="_blank" class="link link--light"> Davitt </a>.</footer> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> |
| <script>hljs.initHighlightingOnLoad();</script> |
| <script> |
| var get = function (selector, scope) { |
| scope = scope ? scope : document; |
| return scope.querySelector(selector); |
| }; |
| |
| var getAll = function (selector, scope) { |
| scope = scope ? scope : document; |
| return scope.querySelectorAll(selector); |
| }; |
| |
| |
| if (document.getElementsByClassName('demo').length > 0) { |
| var i = 0; |
| var txt = `elemet`; |
| var speed = 60; |
| |
| function typeItOut () { |
| if (i < txt.length) { |
| document.getElementsByClassName('demo')[0].innerHTML += txt.charAt(i); |
| i++; |
| setTimeout(typeItOut, speed); |
| } |
| } |
| |
| setTimeout(typeItOut, 1800); |
| } |
| |
| |
| window.addEventListener("load", function() { |
| |
| var tabContainers = getAll(".tab__container"); |
| |
| |
| for (var i = 0; i < tabContainers.length; i++) { |
| get('.tab__menu', tabContainers[i]).addEventListener("click", tabClick); |
| } |
| |
| |
| function tabClick (event) { |
| var scope = event.currentTarget.parentNode; |
| var clickedTab = event.target; |
| var tabs = getAll('.tab', scope); |
| var panes = getAll('.tab__pane', scope); |
| var activePane = get(`.${clickedTab.getAttribute('data-tab')}`, scope); |
| |
| |
| for (var i = 0; i < tabs.length; i++) { |
| tabs[i].classList.remove('active'); |
| } |
| |
| |
| for (var i = 0; i < panes.length; i++) { |
| panes[i].classList.remove('active'); |
| } |
| |
| |
| clickedTab.classList.add('active'); |
| activePane.classList.add('active'); |
| } |
| }); |
| |
| |
| var btns = getAll('.js-btn'); |
| var sections = getAll('.js-section'); |
| |
| function setActiveLink(event) { |
| |
| for (var i = 0; i < btns.length; i++) { |
| btns[i].classList.remove('selected'); |
| } |
| |
| event.target.classList.add('selected'); |
| } |
| |
| function smoothScrollTo(i, event) { |
| var element = sections[i]; |
| setActiveLink(event); |
| |
| window.scrollTo({ |
| 'behavior': 'smooth', |
| 'top': element.offsetTop - 20, |
| 'left': 0 |
| }); |
| } |
| |
| if (btns.length && sections.length > 0) { |
| for (var i = 0; i<btns.length; i++) { |
| btns[i].addEventListener('click', smoothScrollTo.bind(this,i)); |
| } |
| } |
| |
| |
| window.addEventListener('scroll', function () { |
| var docNav = get('.doc__nav > ul'); |
| |
| if( docNav) { |
| if (window.pageYOffset > 63) { |
| docNav.classList.add('fixed'); |
| } else { |
| docNav.classList.remove('fixed'); |
| } |
| } |
| }); |
| |
| |
| var topNav = get('.menu'); |
| var icon = get('.toggle'); |
| |
| window.addEventListener('load', function(){ |
| function showNav() { |
| if (topNav.className === 'menu') { |
| topNav.className += ' responsive'; |
| icon.className += ' open'; |
| } else { |
| topNav.className = 'menu'; |
| icon.classList.remove('open'); |
| } |
| } |
| icon.addEventListener('click', showNav); |
| }); |
| </script> |
| </body> |
| </html> |
