graphjs

by phonetworks

phonetworks / graphjs

A set of widgets for a meaningfully social web.

204 Stars 25 Forks Last release: about 2 years ago (1.0.0) GNU Affero General Public License v3.0 515 Commits 59 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

GraphJS

GraphJS is a Javascript client-side library to help developers easily enable social features on their web sites. GraphJS is built upon the Phở framework, and it's open source. With only a few lines of code, you can easily add authentication, comments, messages, forum, groups, profiles etc. to your static web pages.

GraphJS depends on Riot.js.

Building

Make sure you have npm installed. Simply type in:

npm install # to install Riot.js and other dependencies
npm run build # to form graph.js file

After compilation, you will get a

graph.js
file which would be served through HTTPS. Then, you should include this file in all of your web pages where you want to take advantage of GraphJS functionality.

Getting Started

To get started with Graph.js, you need to include graph.js file (created above) to your project. Then you can initiate it with GraphJS.init function.

Example:

html

<script src="path/to/graph.js"></script>
<script>
GraphJS.init("{{YOUR-PUBLIC-ID}}", {
    host:  "{{URL-OF-GRAPHJS-INSTANCE}}",
    theme: "{{YOUR-THEME-PREFERENCE}}",
    color: "{{YOUR-COLOR-PREFERENCE}}",
    language: "{{YOUR-LANGUAGE-OF-CHOICE}}",
    defaultAvatar: "{{URL-TO-YOUR-DEFAULT-AVATAR}}"
})
</script>

The
init
function comes with multiple options:

  • host: a URL pointing to your instance of GraphJS-Server that's either installed on-premise (c/o https://youtu.be/K7bWKlT0k_g for an instructional video) or one that is hosted by https://graphjs.com (in which case the URL would be provided to you in the control panel)
  • theme: either 'light' or 'dark'
  • color: a string representing any color of your preference in HEX format
  • language: current available options are en-US (English), fr-FR (French) in beta and tr-TR (Turkish). For more translations and languages, see Translations section below.
  • defaultAvatar: either "gravatar" so all no-avatar accounts show with their Gravatar counterparts (if it exists) or a URL that points to your default avatar in png, gif or jpeg formats.

For more Information/Options/Examples, please go to GraphJS official Documentation

Testing and Development

You can try your custom tags simply by editing the html files in the

test
directory. The files are self-explanatory, indicating what parts are to edit.

To test and develop, run

npm run watch
command. This command will start watching the library files, and the files in the test folder will be served automatically on your browser.

Translations

Translation files can be found in the directory /lib/language. They are standard json files. Please make a pull request on our Github repo for us to include your contributions in the master branch.

To fetch the latest translations, run

git submodule foreach 'git pull origin master'

Conditional Building

If you're only using a certain parts of the Graph.js library, then the full compiled edition may be too bloated/heavy for your goals. As of version 1.18, Graph.js comes with a new feature that allows you to build a graph.js file with only the modules that you'd need. To achieve this, build it as follows:

modules=authentication,feed npm run build

where modules can be one or a combination of:

  • blog
  • comments
  • feed
  • forum
  • groups
  • members
  • messages
  • notifications
  • profile
  • star
  • private
  • stripe

Obviously, less modules you use, lighter the library becomes. Authentication is a common module that's always included.

Tips & Tricks

  • JS: it's the
    restart
    call which ensures that the "widget" is updated once the session status changes. See: private-content.tag for more information.
  • CSS: To disable highlighting, use .disable-selection
  • CSS: see the usage of .graphjs-loading and .graphjs-blocked classes in https://github.com/phonetworks/graphjs/blob/master/lib/tags/profile-followers.tag
  • CSS: all tags to start with .graphjs-element. There is also .graphjs-root which is not CSS neutral.
  • CSS: .graphjs-wallet for lists

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

GNU Affero General Public License v3.0, see LICENSE.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.