Skip to content

Home

Jump to bottom
Kim CHOUARD edited this page Feb 13, 2014 · 5 revisions

The new version of the Adobe Github Homepage is pulling all the data it displays from the GitHub API. It is made in such a way that it is easy to change:

The purpose of this wiki is to explain how to update this content.

Update content

The configuration data is stored in .json files (see at the end of this wiki to learn more about JSON) under the data/ folder.

Just update the .json files in the github repository adobe.github.com and change will be automatically reflected in the website (N.B.: it can takes up to 15 minutes for the organisation list to be updated on the server).

  • data/org.json : contains the Github organisation list.
  • data/featured.json : contains the featured items for both projects and organisation.

Organisations

The data/org.json file contains an array of all the Github organisation related to Adobe.

For each organisation, we need to know:

  • userName: its github user name
  • name: its display name that will be printed on the website
  • desc: a short description of the organisation.

The organisation object is therefore structured this way :

{
	"userName": "adobe",
	"name": "Adobe Systems",
	"desc": "Repository for certain Adobe Open Source releases"
}

You can checkout the file here.

Featured

The data/featured.json is a bit more complicated. It contains an object with two arguments:

  • projects: an array containing the featured elements for the repositories.
  • orgs: an array containing the featured elements for the organisations.

N.B.: This object is embedded into an array. Even if this array contains only one element, it is crutial to keep it that way. If the JSON first node is not an array, AngularJS will crash and the website will not be able load.

Each featured item is based on 3 arguments:

  • title: it is the title of the current featured item. Not displayed directly in the website.
  • logo: a link to the logo image of the feature item (required). The path is relative to the root of the website (ex: img/logo.png).
  • textHeader: an HTML content that will be displayed next to the logo. It usually contains a <h3> title, a description and a link embedded in <p class='details'></p>.

Here is an example of a featured object:

{
	"title": "Brackets, code the web",
	"logo": "img/brackets_logo.svg", // the relative path to the logo, it can be a jpg, a png, an svg...
	"textHeader": [
		"<h3>Brackets</h3>", // the name of the featured item, in a <h3>
		"<p class='details'>Open-source code editor<br> built <em>with</em> the web <em>for</em> the web<br/>", // a little description embedded in a paragraph with class 'details'
		"<a href='http://brackets.io/' target='_blank'>Learn more...</a></p>" // still in the <p> tag, an external (target='_blank' make it open in a new tab) link to learn more about the featured item.
	]
}

N.B.: The textHeader attribute is stored here in an array of strings. It is mainly for readability. The script will aggregate all the array strings into a single one and import that into the website.

You can checkout the file here.

Analytics

Several analytics are available for adobe.github.com.

Google Analytics

COMING SOON.

New Relic

COMING SOON.

Basics reminder: JSON Format

The configuration data is stored in the JSON format.

In a nutshell, it allows you to store object in an human and computer readable format. The synthax is really simple:

  • braces are used to descibe objects. Each attribute is defined this way: "name": value. Here is an example:
{
	"name": "Hello World", // the attribute can be a string...
	"value": 42, // it can be a number
	"data": { ... } // it can even be another object or any other javascript format
}
  • brackets are standing for array.
[
	"Hello",
	"World"
]

All this is nesteable. Array can contain object for example:

[
	{
		"name": "Hello World",
		"value": 42,
		"data": { ... }
	},
	{ ... },
	...
]
Clone this wiki locally