[gtk-web/new-website: 129/180] updated docs for js and python bindings



commit 501a88e976f749e1db1b39410804cf70ff91d3c0
Author: ravgeetdhillon <ravgeetdhillon gmail com>
Date:   Thu Aug 8 18:47:25 2019 +0530

    updated docs for js and python bindings

 _layouts/documentation.html     | 38 +++++++++++++++++----
 collections/_docs/javascript.md | 76 +++++++++++++++++++++++++++++------------
 collections/_docs/python.md     | 14 ++++----
 3 files changed, 92 insertions(+), 36 deletions(-)
---
diff --git a/_layouts/documentation.html b/_layouts/documentation.html
index 59ab706..da2e40f 100644
--- a/_layouts/documentation.html
+++ b/_layouts/documentation.html
@@ -10,7 +10,7 @@ any changes made to this file will affect all the documentation pages
 <section>
   <div class="container-fluid">
     <div class="row">
-      <div class="col-lg-3 col-md-4 small p-0 nav-side" id="mySidenav">
+      <div class="small p-0 nav-side" id="mySidenav">
         <div class="text-break bg-white p-0 pt-2 pt-md-4 px-md-4 h-100">
           <a href="#" class="btn d-md-none btn-close mt-2" onclick="closeSideNav()"><i class="fas fa-times 
fa-halfx"></i></a>
           <ul class="list-group">
@@ -36,7 +36,7 @@ any changes made to this file will affect all the documentation pages
           </ul>
         </div>
       </div>
-      <div class="col-lg-7 col-md-8 py-4 px-sm-4 bg-light border-0 border-md-left">
+      <div class="col py-4 px-sm-4 bg-light border-0 border-md-left">
         <div class="d-flex flex-sm-row flex-column py-3 py-md-0 app-shadow">
           <div class="w-100">
             <span class="btn btn-mdcolor btn-sm d-inline-block d-md-none" style="cursor:pointer;" 
onclick="openSideNav()" role="button"><i class="fas fa-bars fa-fw pr-2"></i>More Topics</span>
@@ -61,13 +61,18 @@ any changes made to this file will affect all the documentation pages
           {{ page.content }}
         </article>
       </div>
-      <div class="col-lg-2 col-md-12 small text-break my-4 p-0 pl-3">
-        <div class="mr-3 px-3 py-3 border rounded shadow-sm">
+      <div class="col-xl-2 col-12 small text-break my-4 p-0 pl-3">
+        <div class="mr-3 border rounded shadow-sm">
           {% assign page_name = page.path | split: '/' %}
           {% assign page_name = page_name.last %}
-          <p class="mb-0">Observed a typo or some missing information, edit this page <a href="{{ 
site.data.stuff.site_repo | append: 'blob/master/collections/_docs/' }}{{ page_name }}/">here</a>.</p>
-          <br>
-          <p class="mb-0">Read on <a href="{{ site.data.stuff.site_repo | append: 
'blob/master/CONTRIBUTING.md/' }}">how to contribute</a> to this website.</p>
+          <div class="px-3 py-3 border-bottom w-100">
+            <i class="fas fa-edit text-info"></i>
+            <span>Observed a typo or some missing information, edit this page <a href="{{ 
site.data.stuff.site_repo | append: 'blob/master/collections/_docs/' }}{{ page_name }}/">here</a>.</span>
+          </div>
+          <div class="bg-light px-3 py-3 w-100">
+            <i class="fas fa-plus-square text-info"></i>
+            <span>Read on <a href="{{ site.data.stuff.site_repo | append: 'blob/master/CONTRIBUTING.md/' 
}}">how to contribute</a> to this website.</span>
+          </div>
         </div>
       </div>
     </div>
@@ -81,5 +86,24 @@ any changes made to this file will affect all the documentation pages
   function closeSideNav() {
     document.querySelector(".nav-side").style.width = "0";
   }
+
+  // provides headings with their individual permalinks
+  var headings_names = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+  var markdown_headings_all = [];
+
+  headings_names.forEach(heading => {
+    var headings = document.querySelectorAll( '.markdown-body ' + heading );
+    headings.forEach(element => {
+      markdown_headings_all.push(element);
+    });
+  });
+  
+  markdown_headings_all.forEach(heading => {
+    heading.innerHTML = heading.innerHTML + `
+      
+      <a id="${heading.id}" href="#${heading.id}" class="anchor"><i class="fas fa-link octicon octicon-link 
text-secondary" style="font-size: 0.8rem;"></i></a>
+      
+      `;
+  });
 </script>
 {% include footer.html %}
\ No newline at end of file
diff --git a/collections/_docs/javascript.md b/collections/_docs/javascript.md
index 224355a..48f379d 100644
--- a/collections/_docs/javascript.md
+++ b/collections/_docs/javascript.md
@@ -1,28 +1,60 @@
 ---
 permalink: /docs/language-bindings/:name/
 ---
-# GTK and Javascript
+# ![GJS and GTK Binding](/assets/img/docs/docs-jsgnome.png) GJS
+
+## About
+
+GJS is a Javascript binding for using GNOME patform libraries in your applications. Developers can easily 
integrate GJS with GTK and create powerful GTK applications using Javascript. GJS powers GNOME Shell, Polari, 
GNOME Documents, and many other apps which are primarily written in Javascript.
+
+The current stable series is built on Mozilla's SpiderMonkey 52 featuring ES6 (ECMAScript 2015) and 
GObjectIntrospection making most of the GNOME API library available.
+
+## GJS API Documentation
+There is an official [GJS API Documentation](https://gjs-docs.gnome.org/gtk30~3.24.8/) for using GJS with 
GTK.
+
+There are also a growing number of examples and thorough tests of language features in the test suite.
+
+## A Hello World app
 
 ```javascript
-const Gio = imports.gi.Gio;
 const Gtk = imports.gi.Gtk;
-const Lang = imports.lang;
-
-const ExampleApp = Lang.Class({
-    Name: 'ExampleApp',
-    Extends: Gtk.Application,
-
-    _init: function() {
-        this.parent({ application_id: 'org.gnome.example',
-                      flags: Gio.ApplicationFlags.FLAGS_NONE, });
-    },
-
-    vfunc_activate: function() {
-        let w = new Gtk.ApplicationWindow({ application: this });
-        w.show();
-    },
-});
-
-let app = new ExampleApp();
-app.run(ARGV);
-```
\ No newline at end of file
+const GLib = imports.gi.GLib;
+ 
+// Initialize the gtk
+Gtk.init(null, 0);
+ 
+let mwindow = new Gtk.Window({type : Gtk.WindowType.TOPLEVEL});
+let label = new Gtk.Label({label : "Hello World"});
+ 
+// Set the window title
+mwindow.title = "Hello World!";
+mwindow.connect("destroy", function(){Gtk.main_quit()});
+ 
+// Add the label
+mwindow.add(label);
+ 
+// Show the widgets
+label.show();
+mwindow.show();
+ 
+Gtk.main();
+```
+
+### Explanation
+
+This code depicts how to use GJS and GTK together for creating a simple Hello World application.
+
+## GTK Templates in GJS
+[http://www.hadess.net/2014/09/gtk-widget-templates-now-in-javascript.html](http://www.hadess.net/2014/09/gtk-widget-templates-now-in-javascript.html)
+
+## Contribute
+
+If you are interested in contributing to the GJS project, read the instructions on how to get started for 
contributing to GJS in the [contributing 
guide](https://gitlab.gnome.org/GNOME/gjs/blob/master/CONTRIBUTING.md).
+
+If you want to get in touch with the original source files, you can visit the project's [git 
repository](https://gitlab.gnome.org/GNOME/gjs/) on Gitlab.
+
+## See More
+
+* Project: [https://gitlab.gnome.org/GNOME/gjs](https://gitlab.gnome.org/GNOME/gjs)
+* Wikis: [https://gitlab.gnome.org/GNOME/gjs/wikis/Home](https://gitlab.gnome.org/GNOME/gjs/wikis/Home)
+* Docs: [https://gjs-docs.gnome.org/gtk30~3.24.8/](https://gjs-docs.gnome.org/gtk30~3.24.8/)
\ No newline at end of file
diff --git a/collections/_docs/python.md b/collections/_docs/python.md
index 47b1d09..849afd6 100644
--- a/collections/_docs/python.md
+++ b/collections/_docs/python.md
@@ -13,11 +13,11 @@ If you want to write a Python application for GNOME or a Python GUI application
 
 For more information, visit [https://pygobject.readthedocs.io](https://pygobject.readthedocs.io).
 
-## PyGObject API Reference
+## PyGObject API
 
 You can view the API Reference for the PyGObject at 
[http://lazka.github.io/pgi-docs/](http://lazka.github.io/pgi-docs/)
 
-## Hello World
+## A Hello World app
 
 Below is an `Hello World` program that can be used as an example to get started with the PyGObject.
 
@@ -40,9 +40,9 @@ Gtk.main()
 
 If you are interested in contributing to the PyGObject project or want to get in touch with the original 
source files, you can visit the project's [git repository](https://gitlab.gnome.org/GNOME/pygobject/) on 
Gitlab.
 
-## More Resources
+## See More
 
-[Gitlab Project](https://gitlab.gnome.org/GNOME/pygobject/)
-[PyGObject Website](https://pygobject.readthedocs.io/en/latest/)
-[API References](http://lazka.github.io/pgi-docs/)
-[PyGObject Tutorials](https://python-gtk-3-tutorial.readthedocs.io/en/latest/)
\ No newline at end of file
+* Gitlab Project: [https://gitlab.gnome.org/GNOME/pygobject/](https://gitlab.gnome.org/GNOME/pygobject/)
+* PyGObject Website: 
[https://pygobject.readthedocs.io/en/latest/](https://pygobject.readthedocs.io/en/latest/)
+* API References: [http://lazka.github.io/pgi-docs/](http://lazka.github.io/pgi-docs/)
+* PyGObject Tutorials: 
[https://python-gtk-3-tutorial.readthedocs.io/en/latest/](https://python-gtk-3-tutorial.readthedocs.io/en/latest/)
\ No newline at end of file


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]