mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-23 18:29:09 +00:00
Merge branch 'master' into i18n
# Conflicts: # website/_config.yml
This commit is contained in:
Artur Paikin
commit
0aa73eef48
16 changed files with 204 additions and 198 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -13,3 +13,5 @@ website/public/
|
|||
website/.deploy*/
|
||||
website/src/_drafts
|
||||
website/themes/uppy/source/js/uppy.js
|
||||
|
||||
npm-debug.log*
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ OUTDIR="dist"
|
|||
TRANSFORMS="[ babelify ]"
|
||||
FLAGS="-t [ babelify ] --standalone Uppy"
|
||||
|
||||
rm -rf $OUTDIR
|
||||
mkdir $OUTDIR
|
||||
mkdir -p "${OUTDIR}"
|
||||
|
||||
browserify $SRC $FLAGS > $OUTDIR/$OUT
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"test": "bin/test",
|
||||
"test:unit": "./node_modules/.bin/babel-node test/core.spec.js",
|
||||
"watch": "nodemon --watch src --ext scss,js -x \"npm run build && node website/update.js\"",
|
||||
"watch:all": "parallelshell \"npm run watch\" \"npm run web\"",
|
||||
"watch:css": "nodemon --watch src --ext scss -x \"npm run build && node website/update.js\"",
|
||||
"watch:examples": "cd website && node build-examples.js watch",
|
||||
"watch:js": "nodemon --watch src --ext js -x \"npm run build && node website/update.js\"",
|
||||
|
|
@ -58,6 +59,7 @@
|
|||
"zuul": "^3.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"parallelshell": "^2.0.0",
|
||||
"superagent": "^1.5.0",
|
||||
"tus-js-client": "^1.1.3"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@ logo_large: /images/uppy.svg
|
|||
logo_medium: /images/uppy.svg
|
||||
logo_icon: /images/uppy.png
|
||||
description_primary: >
|
||||
JavaScript file uploader that fetches files from Dropbox, Instagram, local disk, remote URLs, and other exciting locations.
|
||||
Plugin-based architecture, first-class support for resumable uploads via <a href="http://tus.io">tus.io</a>
|
||||
and custom encoding backends make it very extensible and robust.
|
||||
Uppy is (going to be) a JavaScript file uploader that fetches files from Dropbox, Instagram, local disk, remote URLs, and other exciting locations.
|
||||
It has a Plugin-based architecture, first-class support for resumable uploads via <a href="http://tus.io">tus.io</a>
|
||||
and custom encoding backends, making it very extensible and robust.
|
||||
description_secondary: >
|
||||
Uppy (almost as cute as a puppy) is brought to you by the people behind <a href="https://transloadit.com">Transloadit</a> and as such has first class
|
||||
support for adding their uploading and encoding backend, but this is opt-in, and you can just as easily
|
||||
|
|
|
|||
|
|
@ -21,15 +21,3 @@ documentation('../src/index.js', {order: docOrder}, function (err, comments) {
|
|||
console.info(chalk.green('✓ documentation generated'));
|
||||
});
|
||||
});
|
||||
|
||||
// var remark = require('remark');
|
||||
// var inputMarkdownContent = fs.readFileSync('src/api/docs.md', 'utf-8');
|
||||
// var docjsReadme = require('documentation-readme/lib/plugin');
|
||||
// remark().use(docjsReadme, {
|
||||
// section: 'Uppy Core & Plugins', // inject into the ## Usage section of the input doc
|
||||
// documentationArgs: [ '../src/index.js' ]
|
||||
// }).process(inputMarkdownContent, function (err, vfile, content) {
|
||||
// fs.writeFileSync('src/api/docs.md', content);
|
||||
// // console.log(content);
|
||||
// console.log('documentation generated');
|
||||
// });
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
- "Resumable file uploads via the open tus standard"
|
||||
- "Robust: retries for all-the-things, avoid showing ‘weird errors’"
|
||||
- "Themable UI with a beautiful default"
|
||||
- "i18n support: Easily switch languages or supply your own copy"
|
||||
- "Compatible with React (Native)"
|
||||
- "Works great on mobile"
|
||||
- "Small core, modular architecture. Everything is a plugin"
|
||||
|
|
|
|||
|
|
@ -31,23 +31,12 @@ It's recommended to exclude `./website/public/` from your editor if you want eff
|
|||
For local previews on http://127.0.0.1:4000 type:
|
||||
|
||||
```bash
|
||||
npm run web
|
||||
npm run watch:all
|
||||
```
|
||||
|
||||
If you want to work on Uppy itself, and see its changes reflected in the website, open a new tab and type:
|
||||
This will watch the website, as well as Uppy, as the examples, and rebuild everything and refresh your browser as files change.
|
||||
|
||||
```bash
|
||||
npm run watch
|
||||
# Or if you're only interested in one of these:
|
||||
npm run watch:js
|
||||
npm run watch:css
|
||||
```
|
||||
|
||||
For example, if you'd like to work on the Multipart Form example,
|
||||
|
||||
Run: `npm run watch` and in new tab: `npm run web`
|
||||
|
||||
Then:
|
||||
Then, to work on e.g. the Multipart example, you'd edit the following files:
|
||||
|
||||
```bash
|
||||
atom src/core/Core.js \
|
||||
|
|
@ -57,7 +46,7 @@ atom src/core/Core.js \
|
|||
website/src/examples/multipart/app.es6
|
||||
```
|
||||
|
||||
And open <http://0.0.0.0:4000/examples/multipart/index.html>
|
||||
And open <http://0.0.0.0:4000/examples/multipart/index.html> in your webbrowser.
|
||||
|
||||
## CSS Guidelines
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
|
||||
<div class="content <%- page.type ? page.type + ' with-sidebar' : '' %>">
|
||||
<div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
|
||||
<h1><%- page.title %> Example</h1>
|
||||
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -21,8 +21,6 @@
|
|||
<p class="IndexHero-descSecondary"><%- config.description_secondary %></p>
|
||||
|
||||
</header>
|
||||
|
||||
<!-- <a href="/guide/" class="IndexHero-installBtn button">Install v<%- config.uppy_version %></a> -->
|
||||
</section>
|
||||
|
||||
<section id="example" class="IndexExample">
|
||||
|
|
|
|||
|
|
@ -17,15 +17,12 @@
|
|||
</head>
|
||||
<body class="<%= isIndex ? 'page-index' : 'page-inner' %>">
|
||||
<div class="page">
|
||||
<nav id="mobile-bar" class="MobileBar">
|
||||
<button class="menu-button"></button>
|
||||
<a class="logo" href="/"><img src="<%- config.logo_icon %>"></a>
|
||||
</nav>
|
||||
<header id="header" class="MainHeader js-MainHeader">
|
||||
<button class="MainHeader-menuBtn js-MenuBtn"></button>
|
||||
|
||||
<header id="header" class="MainHeader">
|
||||
<a id="logo" class="MainLogo" href="/">
|
||||
<img src="<%- config.logo_medium %>">
|
||||
<span><%- config.title %></span>
|
||||
<img class="MainLogo-img" src="<%- config.logo_medium %>">
|
||||
<span class="MainLogo-text"><%- config.title %></span>
|
||||
</a>
|
||||
|
||||
<nav>
|
||||
|
|
@ -35,7 +32,7 @@
|
|||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<main class="MainContent js-MainContent" id="main">
|
||||
<%- body %>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<% if (page.type) { %>
|
||||
<%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
|
||||
<% } %>
|
||||
<div class="content <%- page.type ? page.type + ' with-sidebar' : '' %>">
|
||||
<div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
|
||||
<h1><%- page.title %></h1>
|
||||
<%- page.content %>
|
||||
<% if (page.type === 'guide') { %>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<li>
|
||||
<!-- @todo uncomment search input when we get our own swifttype -->
|
||||
<!-- <li>
|
||||
<form id="search-form" class="MainMenu-search">
|
||||
<input type="text" id="search-query" class="MainMenu-searchQuery st-default-search-input">
|
||||
</form>
|
||||
</li>
|
||||
</li> -->
|
||||
<li><a href="/guide/" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
|
||||
<li><a href="/api/" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
|
||||
<li><a href="/examples/cdn/" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="Sidebar js-sidebar">
|
||||
<div class="Sidebar js-Sidebar">
|
||||
<ul class="main-menu">
|
||||
<%- partial('partials/main_menu') %>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -122,33 +122,103 @@ a.button {
|
|||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-index .BuildBadge { margin-left: -2px !important; }
|
||||
.page-inner .BuildBadge { margin-top: 15px; }
|
||||
|
||||
.MainLogo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 120px;
|
||||
.page-inner .MainContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow-x: hidden;
|
||||
padding: 2em 1.4em 0;
|
||||
|
||||
@media #{$screen-medium} {
|
||||
width: 150px;
|
||||
padding: 0 60px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.MainHeader {
|
||||
background-color: $color-white;
|
||||
padding: 25px 60px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
/**
|
||||
* MainLogo
|
||||
*/
|
||||
.MainLogo {
|
||||
display: inline-block;
|
||||
font-size: 1.5em;
|
||||
line-height: $size-headerHeight;
|
||||
color: $color-dark;
|
||||
font-family: $fontFamily-logo;
|
||||
font-weight: 500;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
width: $size-headerHeight;
|
||||
height: $size-headerHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.MainLogo-text {
|
||||
display: none;
|
||||
@media #{$screen-medium} {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* MainHeader
|
||||
*/
|
||||
|
||||
.page-index .MainHeader {
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 2.5em;
|
||||
border-top: 6px solid $color-primary;
|
||||
}
|
||||
|
||||
.page-inner .MainHeader {
|
||||
display: none;
|
||||
@media #{$screen-medium} {
|
||||
display: block;
|
||||
}
|
||||
.page-inner .MainHeader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
z-index: 9;
|
||||
box-shadow: 0 0 4px rgba(0,0,0,.25);
|
||||
background-color: $color-white;
|
||||
text-align: center;
|
||||
|
||||
@media #{$screen-medium} {
|
||||
position: static;
|
||||
height: auto;
|
||||
padding: 25px 60px;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 6px solid $color-primary;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.MainHeader-menuBtn {
|
||||
display: block;
|
||||
|
||||
@media #{$screen-medium} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-index .MainHeader-menuBtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-inner .MainHeader-menuBtn {
|
||||
background: none;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
background: svg('burger.svg', '[fill]: #{$color-gray}') center center no-repeat;
|
||||
background-size: 22px;
|
||||
}
|
||||
|
||||
/**
|
||||
* MainMenu
|
||||
*/
|
||||
|
||||
.MainMenu {
|
||||
text-transform: uppercase;
|
||||
|
|
@ -156,13 +226,54 @@ a.button {
|
|||
list-style-type: none;
|
||||
margin: 2em 1.8em 0;
|
||||
padding: 0;
|
||||
font-size: $fontSize-s;
|
||||
|
||||
@media #{$screen-medium} {
|
||||
margin: 0;
|
||||
font-size: $fontSize-s;
|
||||
}
|
||||
}
|
||||
|
||||
.MainMenu-searchQuery {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 15px 0 30px;
|
||||
border: 1px solid #e3e3e3;
|
||||
outline: none;
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
transition: border-color .2s ease;
|
||||
background: svg('search.svg', '[fill]: #{$color-gray}') 8px 5px no-repeat;
|
||||
background-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:focus { border-color: $color-primary; }
|
||||
|
||||
@media #{$screen-medium} {
|
||||
width: auto;
|
||||
width: 200px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-inner .MainMenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
top: 25px;
|
||||
height: $size-headerHeight;
|
||||
line-height: $size-headerHeight;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 .6em;
|
||||
}
|
||||
|
||||
@media #{$screen-medium} {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $color-light;
|
||||
padding-bottom: 3px;
|
||||
|
|
@ -178,3 +289,9 @@ a.button {
|
|||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* BuildBadge
|
||||
*/
|
||||
.page-index .BuildBadge { margin-left: -2px !important; }
|
||||
.page-inner .BuildBadge { margin-top: 15px; }
|
||||
|
|
|
|||
|
|
@ -1,114 +1,6 @@
|
|||
.page-inner #main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow-x: hidden;
|
||||
padding: 2em 1.4em 0;
|
||||
|
||||
@media #{$screen-medium} {
|
||||
padding: 0 60px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-inner #nav {
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
top: 25px;
|
||||
height: $size-headerHeight;
|
||||
line-height: $size-headerHeight;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 .6em;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-bottom: 3px;
|
||||
&:hover, &.current { border-bottom: 3px solid $color-primary; }
|
||||
}
|
||||
|
||||
.MainMenu-searchQuery {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 15px 0 30px;
|
||||
border: 1px solid #e3e3e3;
|
||||
outline: none;
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
transition: border-color .2s ease;
|
||||
background: svg('search.svg', '[fill]: #{$color-gray}') 8px 5px no-repeat;
|
||||
background-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:focus { border-color: $color-primary; }
|
||||
|
||||
@media #{$screen-medium} {
|
||||
width: auto;
|
||||
width: 200px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.MainLogo {
|
||||
display: inline-block;
|
||||
font-size: 1.5em;
|
||||
line-height: $size-headerHeight;
|
||||
color: $color-dark;
|
||||
font-family: $fontFamily-logo;
|
||||
font-weight: 500;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
width: $size-headerHeight;
|
||||
height: $size-headerHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.page-index .MobileBar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.MobileBar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: $color-white;
|
||||
z-index: 9;
|
||||
box-shadow: 0 0 4px rgba(0,0,0,.25);
|
||||
|
||||
@media #{$screen-medium} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
background: none;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
background: svg('burger.svg', '[fill]: #{$color-gray}') center center no-repeat;
|
||||
background-size: 22px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
background-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.fix-sidebar .Sidebar { position: fixed; }
|
||||
/**
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
.Sidebar {
|
||||
position: fixed;
|
||||
|
|
@ -128,7 +20,8 @@
|
|||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.open { transform: translate(0, 0); }
|
||||
&.is-open { transform: translate(0, 0); }
|
||||
.fix-sidebar & { position: fixed; }
|
||||
|
||||
@media #{$screen-medium} {
|
||||
position: absolute;
|
||||
|
|
@ -199,7 +92,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
/**
|
||||
* Content
|
||||
*/
|
||||
.Content {
|
||||
padding: 2.2em 0;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -337,10 +233,10 @@
|
|||
height: 1em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: $color-light;
|
||||
margin-top: 2em;
|
||||
padding-top: 2em;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
font-size: .9em;
|
||||
}
|
||||
// .footer {
|
||||
// color: $color-light;
|
||||
// margin-top: 2em;
|
||||
// padding-top: 2em;
|
||||
// border-top: 1px solid #e5e5e5;
|
||||
// font-size: .9em;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
(function () {
|
||||
|
||||
var each = [].forEach
|
||||
var main = document.getElementById('main')
|
||||
|
||||
var main = document.querySelector('.js-MainContent')
|
||||
var doc = document.documentElement
|
||||
var body = document.body
|
||||
var header = document.getElementById('header')
|
||||
var menu = document.querySelector('.js-sidebar')
|
||||
var content = document.querySelector('.content')
|
||||
var mobileBar = document.getElementById('mobile-bar')
|
||||
var header = document.querySelector('.js-MainHeader')
|
||||
var menu = document.querySelector('.js-Sidebar')
|
||||
var content = document.querySelector('.js-Content')
|
||||
|
||||
var menuButton = mobileBar.querySelector('.menu-button')
|
||||
var menuButton = document.querySelector('.js-MenuBtn')
|
||||
menuButton.addEventListener('click', function () {
|
||||
menu.classList.toggle('open')
|
||||
menu.classList.toggle('is-open')
|
||||
})
|
||||
|
||||
body.addEventListener('click', function (e) {
|
||||
if (e.target !== menuButton && !menu.contains(e.target)) {
|
||||
menu.classList.remove('open')
|
||||
menu.classList.remove('is-open')
|
||||
}
|
||||
})
|
||||
|
||||
// build sidebar
|
||||
var currentPageAnchor = menu.querySelector('.sidebar-link.current')
|
||||
var isAPI = document.querySelector('.content').classList.contains('api')
|
||||
var isAPI = document.querySelector('.Content').classList.contains('api')
|
||||
if (currentPageAnchor || isAPI) {
|
||||
var allLinks = []
|
||||
var sectionContainer
|
||||
|
|
@ -85,9 +85,9 @@
|
|||
var top = doc && doc.scrollTop || body.scrollTop
|
||||
var headerHeight = header.offsetHeight
|
||||
if (top > headerHeight) {
|
||||
main.className = 'fix-sidebar'
|
||||
addClass(main, 'fix-sidebar');
|
||||
} else {
|
||||
main.className = ''
|
||||
removeClass(main, 'fix-sidebar');
|
||||
}
|
||||
if (animating || !allLinks) return
|
||||
var last
|
||||
|
|
@ -160,6 +160,22 @@
|
|||
wrapper.appendChild(link)
|
||||
}
|
||||
|
||||
function addClass(el, className) {
|
||||
if (el.classList) {
|
||||
el.classList.add(className);
|
||||
} else {
|
||||
el.className += ' ' + className;
|
||||
}
|
||||
}
|
||||
|
||||
function removeClass(el, className) {
|
||||
if (el.classList) {
|
||||
el.classList.remove(className);
|
||||
} else {
|
||||
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
}
|
||||
|
||||
// Search with SwiftType
|
||||
// @todo get our own swifttype
|
||||
|
||||
|
|
@ -182,4 +198,4 @@
|
|||
// }
|
||||
// })
|
||||
|
||||
})()
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue