OSF Pages is an Open Science Framework (OSF) addon and website builder that helps OSF users build beautiful websites very quickly using their existing project details. OSF Pages doesn't need additional hosting or management and it's free and open source.
git clonethis repository, or your fork of it. You can also use apps like SourceTree by adding it as a remote link.- yarn install --pure-lockfile
- bower install
OSF Pages uses a very basic Django backend to store the pages data. This is a temporary method while OSf Pages is in a prototype mode.
There is already a deployed application that is linked in the code for prototype use. You don't need to make any changes. If you want to run your local server you need to download and install this Django app: https://github.com/cos-labs/osfpages-service
OSF Pages relies on OSF API to work with OSF projects and requires calls to be made to the OSF API. As part of your installation you added ember-osf as an addon. You will need to generate a configuration file and build a developer addon in OSF to be able to access the API.
- Add configuration for ember osf by following instructions here: https://github.com/CenterForOpenScience/ember-osf/#specifying-configuration-information
- Create a developer application in OSF by following these steps:
- In OSF click the dropdown near your profile image on top navbar and select Settings to go to Settings page.
- From the menu on the left select 'Developer apps'
- Click on the button that says 'New Application'
- Enter required information. For local environments your callback url will be
http://localhost:4200 - Click create.
- Use the Client ID and secret provided for your application in ember configuration settings
You will need to define the environment in your terminal application before running ember serve or you can run it together in this way:
BACKEND=stage ember serve
This README outlines the details of collaborating on this Ember application. A short introduction of this app could easily go here.
You will need the following things properly installed on your computer.
git clone <repository-url>this repositorycd osfpages-adminnpm installbower install
ember serve- Visit your app at http://localhost:4200.
Make use of the many generators for code, try ember help generate for more details
ember testember test --server
ember build(development)ember build --environment production(production)
Specify what it takes to deploy your app.
templates are made of a theme and a layout, below are the structures needed to create a new template
Creating a new theme
public/defaultThemes/
create a new theme in this file in the below structure
{
"id": 2,
"name": "Orange Tree",
"theme" : {
"primaryColor" : "#f07057",
"primaryTextColor" : "snow",
"secondaryColor" : "snow",
"secondaryTextColor" : "#black",
"tertiaryColor" : "#eeeeee",
"tertiaryTextColor" : "black",
"alignment": "center",
"blockSettings" : {
"layer-title" :{
"backgroundImage":"https://image.ibb.co/cqBWUw/bg.png"
}
}
}
renderer/defaultTheme.js
add name of theme to themeList at top of page
let themeList = [ 'theme_1.json', 'theme_2.json' , 'theme_3.json' , 'theme_4.json']
Create a new template
Layouts.js
Add a new layout
"landing-page-v0.0.1": [ "layer-title-v0.0.1", "layer-info-v0.0.1" , "layer-file-v0.0.1"]
Layer-template-select.js
Add to the templatesList (this makes it show up on the page )
{
'layoutName': 'Data Feature', //Name on page
'layout': 'data-feature-v0.0.1', //Layout with version for use in code
'themeId' : 2 , // Theme ID (theme id 2 would get theme_3.json [0-index])
'url' : ENV.rootURL +'img/green.png', //Link to image used to show what theme looks like
'colors':themes[2].theme // pulls in colors from theme to show on page to user
}