Fetch examples from p5 website repo (#203)
* changed open to examples, created basic fetch-examples.js * use dotenv babel-register polyfill * save examples in order * added assets * use rawgit.com * async process.exit * sound:Convolution Reverb
This commit is contained in:
Yining Shi
Cassie Tarakajian
parent
55b54f09bd
commit
29de5fce55
4 changed files with 284 additions and 9 deletions
|
|
@ -81,16 +81,14 @@ function Nav(props) {
|
|||
</li>
|
||||
);
|
||||
}
|
||||
return (
|
||||
})()}
|
||||
<li className="nav__item">
|
||||
<p className="nav__open">
|
||||
<Link to="/p5/sketches">
|
||||
Open
|
||||
Examples
|
||||
</Link>
|
||||
</p>
|
||||
</li>
|
||||
);
|
||||
})()}
|
||||
<li className="nav__item">
|
||||
<p className="nav__reference">
|
||||
<a
|
||||
|
|
|
|||
4
fetch-examples.js
Normal file
4
fetch-examples.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
require('babel-register');
|
||||
require('babel-polyfill');
|
||||
require('dotenv').config();
|
||||
require('./server/examples.js');
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
"lint": "eslint client server",
|
||||
"build": "NODE_ENV=production webpack --config webpack.config.prod.js --progress",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"fetch-examples": "node fetch-examples.js",
|
||||
"postinstall" : "git submodule update --remote --recursive"
|
||||
},
|
||||
"main": "index.js",
|
||||
|
|
@ -95,6 +96,7 @@
|
|||
"passport": "^0.3.2",
|
||||
"passport-github": "^1.1.0",
|
||||
"passport-local": "^1.0.0",
|
||||
"q": "^1.4.1",
|
||||
"project-name-generator": "^2.1.3",
|
||||
"react": "^15.1.0",
|
||||
"react-dom": "^15.1.0",
|
||||
|
|
@ -106,6 +108,7 @@
|
|||
"redux-form": "^5.3.3",
|
||||
"redux-thunk": "^2.1.0",
|
||||
"request": "^2.76.0",
|
||||
"request-promise": "^4.1.1",
|
||||
"s3-policy": "^0.2.0",
|
||||
"shortid": "^2.2.6",
|
||||
"srcdoc-polyfill": "^0.2.0",
|
||||
|
|
|
|||
270
server/examples.js
Normal file
270
server/examples.js
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
import rp from 'request-promise';
|
||||
import Q from 'q';
|
||||
import mongoose from 'mongoose';
|
||||
import objectID from 'bson-objectid'
|
||||
import shortid from 'shortid';
|
||||
import User from './models/user';
|
||||
import Project from './models/project';
|
||||
import async from 'async';
|
||||
import eachSeries from 'async/eachSeries';
|
||||
|
||||
const defaultHTML =
|
||||
`<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.sound.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="sketch.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
const defaultCSS =
|
||||
`html, body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const a = objectID().toHexString();
|
||||
const b = objectID().toHexString();
|
||||
const c = objectID().toHexString();
|
||||
const r = objectID().toHexString();
|
||||
|
||||
const client_id = process.env.GITHUB_ID;
|
||||
const client_secret = process.env.GITHUB_SECRET;
|
||||
|
||||
const headers = {'User-Agent': 'p5js-web-editor/0.0.1'};
|
||||
|
||||
mongoose.connect(process.env.MONGO_URL);
|
||||
mongoose.connection.on('error', () => {
|
||||
console.error('MongoDB Connection Error. Please make sure that MongoDB is running.');
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
getp5User();
|
||||
|
||||
function getp5User() {
|
||||
User.findOne({username: 'p5'}, (err, user) => {
|
||||
if (err) throw err;
|
||||
|
||||
if (!user) {
|
||||
user = new User({
|
||||
username: 'p5',
|
||||
email: 'p5-examples@gmail.com',
|
||||
password: 'test'
|
||||
});
|
||||
user.save(err => {
|
||||
if (err) throw err;
|
||||
console.log('Created a user p5' + user);
|
||||
});
|
||||
}
|
||||
|
||||
Project.find({user: user._id}, (err, projects) => {
|
||||
// if there are already some sketches, delete them
|
||||
console.log('Deleting old projects...');
|
||||
projects.forEach(project => {
|
||||
Project.remove({_id: project._id}, err => {
|
||||
if (err) throw err;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return getCategories()
|
||||
.then(getSketchesInCategories)
|
||||
.then(getSketchContent)
|
||||
.then(createProjectsInP5user);
|
||||
});
|
||||
}
|
||||
|
||||
function getCategories() {
|
||||
let categories = [];
|
||||
const options = {
|
||||
url: 'https://api.github.com/repos/processing/p5.js-website/contents/dist/assets/examples/en?client_id='+
|
||||
client_id+'&client_secret='+client_secret,
|
||||
method: 'GET',
|
||||
headers: headers
|
||||
};
|
||||
return rp(options).then(res => {
|
||||
const json = JSON.parse(res);
|
||||
|
||||
json.forEach(metadata => {
|
||||
let category = '';
|
||||
for (let j = 1; j < metadata.name.split('_').length; j++) {
|
||||
category += metadata.name.split('_')[j] + ' ';
|
||||
}
|
||||
categories.push({url: metadata.url, name: category});
|
||||
});
|
||||
|
||||
return categories;
|
||||
}).catch(err => {
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
|
||||
function getSketchesInCategories(categories) {
|
||||
return Q.all(categories.map(category => {
|
||||
const options = {
|
||||
url: category.url.replace('?ref=master', '')+'?client_id='+client_id+'&client_secret='+client_secret,
|
||||
method: 'GET',
|
||||
headers: headers
|
||||
};
|
||||
|
||||
return rp(options).then(res => {
|
||||
let projectsInOneCategory = [];
|
||||
const examples = JSON.parse(res);
|
||||
examples.forEach(example => {
|
||||
let projectName;
|
||||
if (example.name.split('_')[1]) {
|
||||
projectName = category.name + ': '+ example.name.split('_').slice(1).join(' ').replace('.js', '');
|
||||
} else {
|
||||
projectName = category.name + ': '+ example.name.replace('.js', '');
|
||||
}
|
||||
projectsInOneCategory.push({sketchUrl: example.download_url, projectName: projectName});
|
||||
});
|
||||
return projectsInOneCategory;
|
||||
}).catch(err => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
}));
|
||||
}
|
||||
|
||||
function getSketchContent(projectsInAllCategories) {
|
||||
return Q.all(projectsInAllCategories.map(projectsInOneCategory => {
|
||||
return Q.all(projectsInOneCategory.map(project => {
|
||||
const options = {
|
||||
url: project.sketchUrl.replace('?ref=master', '')+'?client_id='+client_id+'&client_secret='+client_secret,
|
||||
method: 'GET',
|
||||
headers: headers
|
||||
};
|
||||
|
||||
return rp(options).then(res => {
|
||||
project.sketchContent = res;
|
||||
return project;
|
||||
}).catch(err => {
|
||||
throw err;
|
||||
});
|
||||
}));
|
||||
}));
|
||||
}
|
||||
|
||||
function createProjectsInP5user(projectsInAllCategories) {
|
||||
let assetsfiles = [];
|
||||
const options = {
|
||||
url: 'https://api.github.com/repos/processing/p5.js-website/contents/dist/assets/examples/assets?client_id='+
|
||||
client_id+'&client_secret='+client_secret,
|
||||
method: 'GET',
|
||||
headers: headers
|
||||
};
|
||||
|
||||
rp(options).then(res => {
|
||||
const assets = JSON.parse(res);
|
||||
|
||||
User.findOne({username: 'p5'}, (err, user) => {
|
||||
if (err) throw err;
|
||||
|
||||
async.eachSeries(projectsInAllCategories, (projectsInOneCategory, categoryCallback) => {
|
||||
async.eachSeries(projectsInOneCategory, (project, projectCallback) => {
|
||||
let newProject = new Project({
|
||||
name: project.projectName,
|
||||
user: user._id,
|
||||
files: [
|
||||
{
|
||||
name: 'root',
|
||||
id: r,
|
||||
_id: r,
|
||||
children: [a, b, c],
|
||||
fileType: 'folder'
|
||||
},
|
||||
{
|
||||
name: 'sketch.js',
|
||||
content: project.sketchContent,
|
||||
id: a,
|
||||
_id: a,
|
||||
isSelectedFile: true,
|
||||
fileType: 'file',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'index.html',
|
||||
content: defaultHTML,
|
||||
id: b,
|
||||
_id: b,
|
||||
fileType: 'file',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'style.css',
|
||||
content: defaultCSS,
|
||||
id: c,
|
||||
_id: c,
|
||||
fileType: 'file',
|
||||
children: []
|
||||
}
|
||||
],
|
||||
_id: shortid.generate()
|
||||
});
|
||||
|
||||
let assetsInProject = project.sketchContent.match(/assets\/[\w-]+\.[\w]*/g) || project.sketchContent.match(/assets\/[\w-]*/g) || [];
|
||||
|
||||
assetsInProject.forEach((assetName, i) => {
|
||||
assetName = assetName.split('assets/')[1];
|
||||
|
||||
assets.forEach(asset => {
|
||||
if (asset.name === assetName || asset.name.split('.')[0] === assetName) {
|
||||
assetName = asset.name;
|
||||
}
|
||||
});
|
||||
|
||||
if (assetName !== '') {
|
||||
if (i === 0) {
|
||||
const id = objectID().toHexString();
|
||||
newProject.files.push({
|
||||
name: 'assets',
|
||||
id,
|
||||
_id: id,
|
||||
children: [],
|
||||
fileType: 'folder'
|
||||
});
|
||||
// add assets folder inside root
|
||||
newProject.files[0].children.push(id);
|
||||
}
|
||||
|
||||
const fileID = objectID().toHexString();
|
||||
newProject.files.push({
|
||||
name: assetName,
|
||||
url: `https://rawgit.com/processing/p5.js-website/master/dist/assets/examples/assets/${assetName}`,
|
||||
id: fileID,
|
||||
_id: fileID,
|
||||
children: [],
|
||||
fileType: 'file'
|
||||
});
|
||||
console.log('create assets: ' + assetName);
|
||||
// add asset file inside the newly created assets folder at index 4
|
||||
newProject.files[4].children.push(fileID);
|
||||
}
|
||||
});
|
||||
|
||||
newProject.save( (err, newProject) => {
|
||||
if (err) throw err;
|
||||
console.log('Created a new project in p5 user: ' + newProject.name);
|
||||
projectCallback();
|
||||
});
|
||||
}, (err) => {
|
||||
categoryCallback();
|
||||
});
|
||||
}, (err) => {
|
||||
process.exit();
|
||||
});
|
||||
});
|
||||
|
||||
}).catch(err => {
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
Loading…
Reference in a new issue