[gtk-web/new-website: 64/191] updated landing page
- From: Emmanuele Bassi <ebassi src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk-web/new-website: 64/191] updated landing page
- Date: Thu, 21 Nov 2019 12:23:50 +0000 (UTC)
commit 00746b815608538743beb7b1455750c3f735c3d4
Author: ravgeetdhillon <ravgeetdhillon gmail com>
Date: Tue Jun 25 23:06:25 2019 +0530
updated landing page
.gitignore | 1 -
.gitlab-ci.yml | 11 +-
_apps/Blender-app.png | Bin 4334 -> 0 bytes
_apps/Calculator-app.png | Bin 858 -> 0 bytes
_apps/Chess-app.png | Bin 7448 -> 0 bytes
_apps/Dictionary-app.png | Bin 1741 -> 0 bytes
_apps/Evolution-app.png | Bin 5178 -> 0 bytes
_apps/Fonts-app.png | Bin 4298 -> 0 bytes
_apps/GIMP-app.png | Bin 9993 -> 0 bytes
_apps/Games-app.png | Bin 5530 -> 0 bytes
_apps/ImageViewer-app.png | Bin 8626 -> 0 bytes
_apps/Keysign-app.png | Bin 3605 -> 0 bytes
_apps/Maps-app.png | Bin 3242 -> 0 bytes
_apps/PasswordSafe-app.png | Bin 4291 -> 0 bytes
_apps/Polari-app.png | Bin 1321 -> 0 bytes
_apps/Social-app.png | Bin 2663 -> 0 bytes
_apps/Terminal-app.png | Bin 1468 -> 0 bytes
_apps/Transmission-app.png | Bin 3220 -> 0 bytes
_apps/calculator.md | 118 -
_apps/terminal.md | 184 -
_config.yml | 25 +-
_data/apps.yml | 38 +-
_data/features.yml | 19 -
_data/installations.yml | 25 -
_data/navigation.yml | 20 +-
_data/sample_codes.yml | 135 +
_data/stuff.yml | 58 +-
_data/usecases.yml | 7 +
_includes/footer.html | 4 +-
_includes/header.html | 16 +-
_layouts/app.html | 89 -
_setups/linux.md | 48 -
_setups/macos.md | 84 -
_setups/windows.md | 184 -
assets/css/colorful.css | 69 -
assets/css/index.css | 191 -
assets/css/markdown.css | 318 --
assets/css/markdown.css.map | 7 -
assets/css/theme.css | 7920 ----------------------------
assets/css/theme.css.map | 7 -
assets/illustrations/api.svg | 1 -
assets/illustrations/cross_platform.svg | 1 -
assets/illustrations/interfaces.svg | 1 -
assets/illustrations/language_bindings.svg | 1 -
assets/illustrations/open_source.svg | 1 -
assets/illustrations/stability.svg | 1 -
assets/img/DppgrRpU8AAzTrc.jpg | Bin 256186 -> 0 bytes
assets/img/DyjRMU_VYAA0X57.jpg | Bin 380587 -> 0 bytes
assets/img/Dyt-WDlVAAAahlV.jpg | Bin 389811 -> 0 bytes
assets/img/GnomeLogoHorizontal.svg | 26 -
assets/img/GnomeLogoVertical.svg | 26 -
assets/img/api.png | Bin 48655 -> 0 bytes
assets/img/apps/Blender-app.png | Bin 4334 -> 0 bytes
assets/img/apps/Calculator-app.png | Bin 858 -> 0 bytes
assets/img/apps/Chess-app.png | Bin 7448 -> 0 bytes
assets/img/apps/Dictionary-app.png | Bin 1741 -> 0 bytes
assets/img/apps/Evolution-app.png | Bin 5178 -> 0 bytes
assets/img/apps/Fonts-app.png | Bin 4298 -> 0 bytes
assets/img/apps/GIMP-app.png | Bin 9993 -> 0 bytes
assets/img/apps/Games-app.png | Bin 5530 -> 0 bytes
assets/img/apps/ImageViewer-app.png | Bin 8626 -> 0 bytes
assets/img/apps/Keysign-app.png | Bin 3605 -> 0 bytes
assets/img/apps/Maps-app.png | Bin 3242 -> 0 bytes
assets/img/apps/PasswordSafe-app.png | Bin 4291 -> 0 bytes
assets/img/apps/Polari-app.png | Bin 1321 -> 0 bytes
assets/img/apps/Social-app.png | Bin 2663 -> 0 bytes
assets/img/apps/Terminal-app.png | Bin 1468 -> 0 bytes
assets/img/apps/Transmission-app.png | Bin 3220 -> 0 bytes
assets/img/architecture.svg | 285 -
assets/img/color-palette.png | Bin 60667 -> 0 bytes
assets/img/cross_platform.png | Bin 385759 -> 0 bytes
assets/img/gtk-logo.ico | Bin 1150 -> 0 bytes
assets/img/gtk-logo.png | Bin 4503 -> 0 bytes
assets/img/interfaces.png | Bin 301019 -> 0 bytes
assets/img/landing1.png | Bin 31874 -> 0 bytes
assets/img/language_bindings.png | Bin 260750 -> 0 bytes
assets/img/manage_apps.png | Bin 268891 -> 0 bytes
assets/img/open_source.png | Bin 42990 -> 0 bytes
assets/img/screenshot1.jpg | Bin 46078 -> 0 bytes
assets/img/screenshot2.jpg | Bin 56844 -> 0 bytes
assets/img/screenshot3.jpg | Bin 58629 -> 0 bytes
assets/img/screenshot4.jpg | Bin 63781 -> 0 bytes
assets/img/stability.png | Bin 73760 -> 0 bytes
assets/scss/theme.scss | 22 -
documents/GNOME_GSOC_19_PROPOSAL.pdf | Bin 69842 -> 0 bytes
documents/gnome.txt | 24 -
documents/gtk-notes.txt | 39 -
documents/gtk.txt | 32 -
documents/tools.txt | 2 -
index.html | 306 +-
package-lock.json | 5 +
package.json | 3 +-
server.bat | 3 -
sitemap.xml | 132 -
things.txt | 49 -
95 files changed, 466 insertions(+), 10072 deletions(-)
---
diff --git a/.gitignore b/.gitignore
index e6fc243..f0d2066 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,3 @@ _site
.jekyll-metadata
documents/
*.txt
-*.bat
\ No newline at end of file
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 147a240..febe9e3 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -6,22 +6,19 @@ variables:
before_script:
- apt-get update -y
- - apt-get install -y curl
- - curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
+ - apt-get install -y libssl-dev build-essential wget
+ - wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
- source /root/.bashrc
- nvm install node
- nvm use node
- npm install
- gem install bundler
- - bundle update
+ - bundle install
- mv node_modules/bootstrap assets/ -f
- mv node_modules/jquery assets/ -f
- mv node_modules/popper.js assets/ -f
- - mv node_modules/@fortawesome assets/ -f
- - mv node_modules/@primer assets/ -f
- rm -rf node_modules
- sass assets/scss/theme.scss assets/css/theme.css
- - sass assets/@primer/css/markdown/index.scss assets/css/markdown.css
test:
stage: test
@@ -41,4 +38,4 @@ pages:
paths:
- public
only:
- - master
\ No newline at end of file
+ - master
diff --git a/_config.yml b/_config.yml
index 382e081..87369c3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,13 +1,8 @@
name: The GTK Project
title: The GTK Project | A free and open-source cross-platform widget toolkit
description: GTK is a highly usable, feature rich toolkit for creating graphical user interfaces which
boasts cross platform compatibility and an easy to use API. GTK is licensed under the GNU LGPL 2.1 allowing
development of both free and proprietary software with GTK without any license fees or royalties.
-mini_description: GTK is a free and open-source cross-platform widget toolkit for creating graphical user
interfaces.
-gtkVersion: 3.94
baseurl: ''
url: 'https://ravgeetdhillon.pages.gitlab.gnome.org/gtk-web/'
-site_repo: https://gitlab.gnome.org/ravgeetdhillon/gtk-web/
-tutorial_video_link: https://www.youtube.com/embed/bNA-Q8fQqTc
-logo: gtk-logo.ico
markdown: kramdown
kramdown:
parse_block_html: true
@@ -17,24 +12,14 @@ highlighter: rouge
# - jekyll-feed
sass:
sass_dir: _sass
-include:
- - .htaccess
+# include:
+# - .htaccess
exclude:
- - compileSass.bat
- - startJekyll.bat
- documents/
- Gemfile
- Gemfile.lock
- package.json
- package-lock.json
- - sitemap.xml
-collections:
- apps:
- output: true
- permalink: /apps/:path/
-defaults:
- - scope:
- path: ''
- type: apps
- values:
- layout: app
\ No newline at end of file
+
+# for dev only
+keep_files: [assets]
\ No newline at end of file
diff --git a/_data/apps.yml b/_data/apps.yml
index 909090a..c4eb3fd 100644
--- a/_data/apps.yml
+++ b/_data/apps.yml
@@ -1,49 +1,49 @@
apps_list:
+ - name: Fonts
+ link: /apps/
+ logo: Fonts-app.png
- name: Calculator
link: /apps/
logo: Calculator-app.png
+ - name: Blender
+ link: /apps/
+ logo: Blender-app.png
- name: Chess
link: /apps/
logo: Chess-app.png
- name: Dictionary
link: /apps/
logo: Dictionary-app.png
- - name: Evolution
- link: /apps/
- logo: Evolution-app.png
- - name: Fonts
- link: /apps/
- logo: Fonts-app.png
- - name: Blender
- link: /apps/
- logo: Blender-app.png
- name: GIMP
link: /apps/
logo: GIMP-app.png
- name: Games
link: /apps/
logo: Games-app.png
+ - name: Evolution
+ link: /apps/
+ logo: Evolution-app.png
- name: Image Viewer
link: /apps/
logo: ImageViewer-app.png
+ - name: Polari
+ link: /apps/
+ logo: Polari-app.png
+ - name: Social
+ link: /apps/
+ logo: Social-app.png
- name: Key Sign
link: /apps/
logo: Keysign-app.png
- name: Maps
link: /apps/
logo: Maps-app.png
+ - name: Transmission
+ link: /apps/
+ logo: Transmission-app.png
- name: Password Safe
link: /apps/
logo: PasswordSafe-app.png
- - name: Polari
- link: /apps/
- logo: Polari-app.png
- - name: Social
- link: /apps/
- logo: Social-app.png
- name: Terminal
link: /apps/
- logo: Terminal-app.png
- - name: Transmission
- link: /apps/
- logo: Transmission-app.png
\ No newline at end of file
+ logo: Terminal-app.png
\ No newline at end of file
diff --git a/_data/navigation.yml b/_data/navigation.yml
index 4ae2e1b..839f727 100644
--- a/_data/navigation.yml
+++ b/_data/navigation.yml
@@ -9,8 +9,8 @@ menu_links:
header: true
footer: true
section: Company
- - name: Apps
- href: /apps/
+ - name: Usecases
+ href: /usecases/
header: true
footer: true
section: Project
@@ -40,7 +40,7 @@ menu_links:
footer: true
section: Project
- name: FAQs
- href: /faqs/
+ href: https://developer.gnome.org/gtk3/stable/gtk-question-index.html
header: false
footer: true
section: Support
@@ -50,7 +50,7 @@ menu_links:
footer: true
section: Project
- name: Mailing Lists
- href: https://gitlab.gnome.org/GNOME/gtk/
+ href: /mailing-lists
header: false
footer: true
section: Company
@@ -70,10 +70,20 @@ menu_links:
footer: true
section: Company
- name: Donate
- href: /donate/
+ href: http://www.gnome.org/foundation/
header: false
footer: true
section: Company
+ - name: Consultation
+ href: /support#consultation
+ header: false
+ footer: true
+ section: Support
+ - name: Training
+ href: /support#training
+ header: false
+ footer: true
+ section: Support
social_links:
- icon: fab fa-twitter
diff --git a/_data/sample_codes.yml b/_data/sample_codes.yml
new file mode 100644
index 0000000..ee155e5
--- /dev/null
+++ b/_data/sample_codes.yml
@@ -0,0 +1,135 @@
+codes:
+ - name: Java
+ ext: java
+ snippet: |
+ ```java
+
+ import java.util.*;
+
+ class GFG {
+ static boolean isPrime(int n)
+ {
+ if (n <= 1)
+ return false;
+
+ for (int i = 2; i < n; i++)
+ if (n % i == 0)
+ return false;
+
+ return true;
+ }
+
+ public static void main(String[] args)
+ {
+ if(isPrime(11))
+ System.out.println(" true") ;
+
+ else
+ System.out.println(" false");
+
+ }
+ }
+ ```
+ - name: Python
+ ext: py
+ snippet: |
+ ```python
+
+ def isPrime(n):
+ if (n <= 1):
+ return False
+
+ for i in range(2, n):
+ if (n % i == 0):
+ return False
+
+ return True
+
+ if isPrime(11):
+ print ("true")
+ else:
+ print ("false")
+ ```
+ - name: C++
+ ext: cpp
+ snippet: |
+ ```cpp
+
+ #include <bits/stdc++.h>
+ using namespace std;
+
+ bool isPrime(int n)
+ {
+ if (n <= 1)
+ return false;
+
+ for (int i = 2; i < n; i++)
+ if (n % i == 0)
+ return false;
+
+ return true;
+ }
+ int main()
+ {
+ isPrime(11) ? cout << " true\n" :
+ cout << " false\n";
+ return 0;
+ }
+ ```
+ - name: PHP
+ ext: php
+ snippet: |
+ ```php
+
+ <?php
+ function isPrime($n)
+ {
+ if ($n <= 1)
+ return false;
+
+ for ($i = 2; $i < $n; $i++)
+ if ($n % $i == 0)
+ return false;
+
+ return true;
+ }
+
+ if(isPrime(11))
+ echo("true");
+ else
+ echo("false");
+
+ ?>
+ ```
+ - name: C#
+ ext: cs
+ snippet: |
+ ```csharp
+
+ using System;
+
+ class GFG
+ {
+ static bool isPrime(int n)
+ {
+ if (n <= 1)
+ return false;
+
+ for (int i = 2; i < n; i++)
+ if (n % i == 0)
+ return false;
+
+ return true;
+ }
+
+ static void Main()
+ {
+ if(isPrime(11))
+ Console.Write(" true") ;
+
+ else
+ Console.Write(" false");
+ }
+ }
+
+ ```
\ No newline at end of file
diff --git a/_data/stuff.yml b/_data/stuff.yml
index 1123553..16fc0c4 100644
--- a/_data/stuff.yml
+++ b/_data/stuff.yml
@@ -1,21 +1,39 @@
-headings_and_descriptions:
- - sectionId: apps
- heading: Apps built with GTK
- description: With GTK, you can create cross platform GUI apps and the process is super easy. Check out
some of the apps built using GTK and its libraries.
- - sectionId: features
- heading: Apps built with GTK
- description: With GTK, you can create cross platform GUI apps and the process is super easy. Check out
some of the apps built using GTK and its libraries.
- - sectionId: installations
- heading: Getting Started
- description: With GTK 4, you can create applications that run on Windows, GNU/Linux and Unix, OSX, and
mobile devices.
- - sectionId: tutorials
- heading: Quick Tutorials
- description: Creating an application using GTK 4 is super easy. Check out this short tutorial on how the
things are done from Setup till the deployment.
+mini_description: GTK is a free and open-source cross-platform widget toolkit for creating graphical user
interfaces.
+gtkVersion: 3.96
+site_repo: https://gitlab.gnome.org/ravgeetdhillon/gtk-web/
+tutorial_video_link: https://www.youtube.com/embed/bNA-Q8fQqTc
+logo: gtk-logo.ico
-gtk_info:
- - title: What is GTK?
- description: GTK, or the GIMP Toolkit, is a multi-platform toolkit for creating graphical user
interfaces. Offering a complete set of widgets, GTK is suitable for projects ranging from small one-off tools
to complete application suites.
- img: architecture.svg
- - title: What can it do?
- description: GTK can be configured to change the look of the widgets drawn; this is done using different
display engines. Several display engines exist which try to emulate the look of the native widgets on the
platform in use.
- img: screenshot2.jpg
+features_list:
+ - title: Cross Platform
+ description: Projects build using GTK and its dependencies run on well known operating systems.
+ img: cross_platform.svg
+ - title: Open Source
+ description: GTK is an free and open source project maintained by GNOME and an active community of
contributors.
+ img: open_source.svg
+ - title: Foundations
+ description: GTK is built on top of GLib. GLib provides the fundamental algorithmic language constructs
commonly duplicated in applications.
+ img: api.svg
+ - title: Language Bindings
+ description: GTK is written in C but has been designed to support a wide range of languages such as
Perl, Python and [many more](/languages).
+ img: language_bindings.svg
+ - title: Interfaces
+ description: GTK has a comprehensive collection of core widgets like Buttons, Windows, Toolbars for use
in your application.
+ img: interfaces.svg
+ - title: API
+ description: GTK boasts of an easy to use [API](/documentation) which helps in decreasing your
development time and produce better results.
+ img: api.svg
+ - title: Accomodation
+ description: GTK caters for a number features like Native look and feel, theme support, Object oriented
approach that today's developers look for in a toolkit.
+ img: api.svg
+ - title: Stability
+ description: GTK4 deliver the enticing features and superb performance which adds to your applications.
+ img: stability.svg
+
+news_and_events_list:
+ - title: Catchup with GTK
+ description: Get in touch with GTK developers through [IRC](irc://irc.gnome.org/%23gtk). Get daily
updates about GTK and its community from [GTK blog](https://blog.gtk.org/) or through it's
[twitter](https://twitter.com/GTKtoolkit/) handle.
+ - title: Meet the community
+ description: As regularly as possible, GTK team meetings take place at conferences and
[hackfests](https://wiki.gnome.org/Hackfests) to discuss the future of GTK and define a
[roadmap](https://wiki.gnome.org/Projects/GTK/Roadmap).
+ - title: Help evolve GTK
+ description: If you are a developer and want to contribute towards GTK, you are more than welcome to do
so. [Get started now](/docs/) to get some familarity to GTK.
diff --git a/_data/usecases.yml b/_data/usecases.yml
new file mode 100644
index 0000000..cad6b97
--- /dev/null
+++ b/_data/usecases.yml
@@ -0,0 +1,7 @@
+use_cases:
+ - title: Develop Management Systems
+ description: Read about Solvo Ltd. on how they used GTK to develop their warehouse managament system for
enhanced performance and internationalization.
+ - title: Visualisation Tools
+ description: Catch up with Kim Adil, at BMA Coal, Australia, on he used GTK to build a cross-platform
mining process visualization tool for the mine control room.
+ - title: Image Processing and Analysis
+ description: Read about the VIPS, used by The London National Gallery for storing high resolution
digital images of art work for museums worldwide.
\ No newline at end of file
diff --git a/_includes/footer.html b/_includes/footer.html
index 8d681a2..1a8961b 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -2,9 +2,9 @@
<div class="container">
<div class="row">
<div class="col-12 col-sm-5 col-md-4 py-3 py-sm-2">
- <img src="{{ '/assets/img/GnomeLogoHorizontal.svg' | prepend: site.url }}" class="img-fluid
pb-2" width="100" />
+ <a href="https://www.gnome.org/";><img src="{{ '/assets/img/GnomeLogoHorizontal.svg' |
prepend: site.url }}" class="img-fluid pb-2" width="100" /></a>
<p>GTK4+ is a GNOME product.</p>
- <p>GTK is maintained by the core team of <strong><a href="#"
class="text-muted">maintainers</a></strong> under GNOME.</p>
+ <p>GTK is maintained by the core team of <strong><a href="/community#maintainers"
class="text-muted">maintainers</a></strong> under GNOME.</p>
{% assign date_arr = site.time | date_to_string | split: ' ' %}
{% assign year = date_arr[2] %}
<p>© 2007-{{ year }}, The GTK Project. All Rights Reserved.</p>
diff --git a/_includes/header.html b/_includes/header.html
index 02b6364..e98e66b 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -10,23 +10,25 @@
<meta name="author" content="The GTK Team">
<meta name="description" content="GTK is a highly usable, feature rich toolkit for creating graphical
user interfaces which boasts cross platform compatibility and an easy to use API. GTK is licensed under the
GNU LGPL 2.1 allowing development of both free and proprietary software with GTK without any license fees or
royalties.">
<meta name="keywords" content="gtk, gtk, gimp, gnome, toolkit, user interface">
- <link rel="icon" href="{{ '/assets/img/' | prepend: site.url | append: site.logo }}"
type="image/x-icon">
- <link rel="shortcut icon" href="{{ '/assets/img/' | prepend: site.url | append: site.logo }}"
type="image/x-icon">
+ <link rel="icon" href="{{ '/assets/img/' | prepend: site.url | append: site.data.stuff.logo }}"
type="image/x-icon">
+ <link rel="shortcut icon" href="{{ '/assets/img/' | prepend: site.url | append: site.data.stuff.logo
}}" type="image/x-icon">
<title>{{site.title}}</title>
<link rel="stylesheet" href="{{ '/assets/@fortawesome/fontawesome-free/css/all.min.css' | prepend:
site.url }}" type="text/css" media="screen" />
- <link rel="stylesheet" href="{{ '/assets/css/theme.css' | prepend: site.url }}" type="text/css"
media="screen" />
<link rel="stylesheet" href="{{ '/assets/css/markdown.css' | prepend: site.url }}" type="text/css"
media="screen" />
+ <link rel="stylesheet" href="{{ '/assets/css/theme.css' | prepend: site.url }}" type="text/css"
media="screen" />
<link rel="stylesheet" href="{{ '/assets/css/colorful.css' | prepend: site.url }}" type="text/css"
media="screen" />
<link rel="stylesheet" href="{{ '/assets/css/index.css' | prepend: site.url }}" type="text/css"
media="screen" />
<script src="{{ '/assets/jquery/dist/jquery.min.js' | prepend: site.url }}"></script>
<script src="{{ '/assets/popper.js/dist/umd/popper.min.js' | prepend: site.url }}"></script>
<script src="{{ '/assets/bootstrap/dist/js/bootstrap.min.js' | prepend: site.url }}"></script>
+ <script src="{{ '/assets/slick-carousel/slick/slick.min.js' | prepend: site.url }}"></script>
+
</head>
<body>
- <header class="navbar navbar-light bg-light small">
- <nav class="container-fluid navbar-expand-md px-0 px-md-3">
- <a href="/" class="navbar-brand"><img src="{{ '/assets/img/gtk-logo.png' | prepend:
site.url }}" width="40" height="40" /><strong>GTK4+</strong></a>
+ <header class="navbar small">
+ <nav class="container navbar-expand-md px-0 px-md-3">
+ <a href="/" class="navbar-brand"><img src="{{ '/assets/img/gtk-logo.png' | prepend:
site.url }}" width="40" height="40" /><strong>GTK</strong></a>
<a class="btn navbar-toggler border-0 p-0" role="button" data-toggle="collapse"
data-target="#navbarSupportedContent">
<i class="fas fa-ellipsis-h"></i>
</a>
@@ -37,7 +39,7 @@
{% assign page_split = page.url | split: '/' %}
{% assign page_type = page_split[1] | capitalize %}
{% if link.header %}
- <li class="nav-item border-bottom-trans
border-bottom-hover"><a href="{{ link.href }}" class="nav-link float-right">{{ link.name }}</a></li>
+ <li class="nav-item"><a href="{{ link.href }}"
class="nav-link text-dark float-right">{{ link.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
diff --git a/index.html b/index.html
index 8139e51..498ff9f 100644
--- a/index.html
+++ b/index.html
@@ -1,138 +1,282 @@
---
---
-{% assign data = site.data %}
-
{%- include header.html -%}
-<section class="pt-3 pt-md-4" id="landing">
+<section class="pt-5 pb-4 d-flex flex-column align-items-center" id="landing">
<div class="container landing-sm d-flex align-items-center">
- <div class="row">
- <div class="col-lg-6 d-flex justify-content-center flex-column">
- <h1 class="display-3"><strong>{{ site.name }}</strong></h1>
- <br>
- <p class="lead">{{ site.mini_description }}</p>
- <br>
- <div>
- <a href="/docs/" class="btn btn-primary btn-md" role="button">Get
Started</a>
- <a href="/apps/" class="btn btn-outline-secondary btn-md"
role="button">View Apps</a>
+ <div class="row d-flex justify-content-center">
+ <div class="col-md-5 d-flex justify-content-center flex-column main-heading">
+ <h1 class="display-4 pb-3">Create interfaces, that users just love</h1>
+ <p class="text-muted pb-3">Offering a complete set of widgets, GTK is
suitable for projects ranging from small one-off tools to complete application suites.</p>
+ <div class="pb-3 d-flex">
+ <a href="/docs/" class="btn btn-md btn-primary" role="button">Learn
GTK</a>
+ <div class="dropdown">
+ <a class="btn btn-md btn-outline-secondary dropdown-toggle
ml-2" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Downloads</a>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+ <a href="/downloads/linux" class="dropdown-item"><i
class="fab fa-linux"></i> Linux</a>
+ <a href="/downloads/windows" class="dropdown-item"><i
class="fab fa-windows"></i> Windows</a>
+ <a href="/downloads/macos" class="dropdown-item"><i
class="fab fa-apple"></i> MacOS</a>
+ </div>
+ </div>
</div>
- <br>
- <p class="small text-muted">Currently v{{ site.gtkVersion }}</p>
+ <p class="small text-muted">Currently v{{ site.data.stuff.gtkVersion }}</p>
</div>
- <div class="col-lg-6 d-none d-md-flex justify-content-center flex-column">
- <img src="./assets/img/landing1.png" style="width: 100%" />
+ <div class="col-md-7 d-none d-md-flex justify-content-center flex-column">
+ <div class="col img-grp">
+ <img src="./assets/img/editor.png" class="img-fluid editor shadow-lg"
/>
+ <img src="./assets/img/calendar.png" class="img-fluid calendar
shadow-lg" />
+ <img src="./assets/img/music.png" class="img-fluid music shadow-lg" />
+ </div>
</div>
</div>
</div>
+ <button class="btn btn-light shadow-sm rounded-circle mt-4" onclick="slideDown()"><i class="fas
fa-chevron-down"></i></button>
</section>
-{% assign gtk_info = data.stuff.gtk_info %}
-<section class="pb-4" id="info">
- <div class="container">
- {% for info in gtk_info %}
- <div class="row py-4 d-flex {% cycle '', 'flex-md-row-reverse' %}">
- <div class="col-12 col-md-5 pt-4">
- <h2 class="font-weight-light border-bottom border-secondary pb-2 mb-3 w-25
text-nowrap">{{ info.title }}</h2>
- <p class="text-muted">{{ info.description }}</p>
+<section class="py-4" id="usecases">
+ <div class="container d-flex flex-column align-items-center">
+ <div class="row text-center d-flex justify-content-center">
+ <div class="col-md-10 col-lg-7">
+ <h2 class="text-center font-weight-light mb-3">Overcome Complex
Challenges</h2>
+ <p class="text-muted">
+ GTK is cross-platform and boasts an easy to use API, speeding up your
development time and helping you tackle challenges whether you are GTK Developer or developing using GTK.
+ </p>
</div>
- <div class="col-12 col-md-7 d-flex justify-content-center align-items-center">
- <img src="./assets/img/{{ info.img }}" class="img-fluid img-shadow rounded"
alt="{{ info.title }}" />
+ </div>
+ <div class="row">
+ <div class="col-8 mx-auto">
+ <img src="./assets/illustrations/language_bindings.svg" class="w-100
img-fluid" style="height:100%;" />
+ </div>
+ </div>
+ <br>
+ <div class="row d-flex justify-content-center pt-3">
+ {% assign cases = site.data.usecases.use_cases %}
+ {% for case in cases %}
+ <div class="col-md-4 pb-4 pb-md-0">
+ <h6>{{ case.title }}</h6>
+ <span class="text-muted small">{{ case.description }}</span>
+ <br>
+ <a href="/usecases/{{ case.title }}" class="small border-bottom
text-decoration-none border-primary">Read More</a>
+ </div>
+ {% endfor %}
+ <div class="col-12 text-center pt-3 pt-md-4">
+ <a href="/usecases/" class="btn btn-md btn-outline-primary"
role="button">Discover Usecases</a>
</div>
</div>
- {% endfor %}
</div>
</section>
-{% assign installations_info = data.stuff.headings_and_descriptions | where: "sectionId", "installations" %}
-<section class="py-4 bg-light" id ="installations">
+<section class="py-4" id="bindings">
<div class="container">
- <div class="row">
- <div class="col-12 col-md-5">
- <h1 class="font-weight-light">{{ installations_info[0].heading }}</h1>
- <br>
- <p class="text-muted">{{ installations_info[0].description }}<br>Check out
the <a href="/downloads/" class="text-primary text-decoration-none">complete list.</a></p>
- </div>
- <div class="col-12 col-md-7 d-flex flex-column justify-content-center
align-items-center">
- <ul class="list-unstyled list-inline text-small">
- {% assign installations = data.installations %}
- {% assign size = installations.systems | size | divided_by:2 %}
- {% for system in installations.systems limit:size %}
- <li class="list-inline-item display-4"><a href="{{ system.href }}"
class="text-primary px-2" title="{{ system.name }}"><i class="{{ system.icon }}"></i></a></li>
+ <div class="row text-center d-flex justify-content-center">
+ <div class="col-md-10 col-lg-7">
+ <h2 class="font-weight-light mb-3">Work with the language of your choice</h2>
+ <p class="text-muted">
+ Develop your GTK app with the language of your choice by using
Language Bindings or wrappers and take the full advantage of the official GNOME bindings which guarantee API
stability and time-based releases.
+ </p>
+ </div>
+ </div>
+ <div class="row d-flex flex-column align-items-center py-4">
+ <div class="col-lg-8 p-0 rounded-top overflow-hidden">
+ <div class="list-group flex-row flex-wrap" id="list-tab" role="tablist">
+ {% assign codes = site.data.sample_codes.codes %}
+ {% for code in codes %}
+ {% if forloop.first == true %}
+ <a class="col grp-btn btn btn-dark py-1 px-1 small border-0
rounded-0 active" id="list-{{ code.ext }}-list" data-toggle="list" href="#list-{{ code.ext }}" role="tab"
aria-controls="{{ code.ext }}" aria-selected="true">{{ code.name }}</a>
+ {% else %}
+ <a class="col grp-btn btn btn-dark py-1 px-1 small border-0
rounded-0" id="list-{{ code.ext }}-list" data-toggle="list" href="#list-{{ code.ext }}" role="tab"
aria-controls="{{ code.ext }}" aria-selected="false">{{ code.name }}</a>
+ {% endif %}
{% endfor %}
- </ul>
- <ul class="list-unstyled list-inline text-small">
- {% for system in installations.systems offset:size %}
- <li class="list-inline-item display-4"><a href="{{ system.href }}"
class="text-primary px-2" title="{{ system.name }}"><i class="{{system.icon}}"></i></a></li>
+ </div>
+ </div>
+ <div class="col-lg-8 p-0 bg-light rounded-bottom border border-info border-top-0 pl-3
overflow-auto">
+ <div class="tab-content" id="nav-tabContent">
+ {% for code in codes %}
+ {% if forloop.first == true %}
+ <div class="tab-pane overflow-y-auto fade small active show"
id="list-{{ code.ext }}" role="tabpanel" aria-labelledby="list-{{ code.ext }}-list">
+ {{ code.snippet | markdownify }}
+ </div>
+ {% else %}
+ <div class="tab-pane overflow-auto fade small" id="list-{{
code.ext }}" role="tabpanel" aria-labelledby="list-{{ code.ext }}-list">
+ {{ code.snippet | markdownify }}
+ </div>
+ {% endif %}
{% endfor %}
- </ul>
+ </div>
</div>
</div>
</div>
</section>
-{% assign features = data.features %}
-<section class="py-4" id="features">
+{% assign apps = site.data.apps.apps_list %}
+<section class="py-4" id="apps">
+ <div class="container py-3">
+ <div class="row text-center d-flex justify-content-center">
+ <div class="col-md-10 col-lg-7">
+ <h2 class="font-weight-light mb-3">Apps built with GTK</h2>
+ <p class="text-muted">
+ Developers around the world have used GTK as a platform to create
apps that solve problems faced by the end users.
+ </p>
+ </div>
+ </div>
+ <div class="app-logos slider pt-4 pb-5">
+ {% for app in apps %}
+ <div class="slide d-flex flex-column align-items-center text-center" title="{{
app.name }} App" onclick="window.location.assign('https://wiki.gnome.org/Apps/{{ app.name }}')">
+ <img src="{{ '/assets/img/apps/' | prepend: site.url }}{{ app.logo }}"
class="img-fluid app-icon" alt="{{ app.name }}" />
+ <span class="text-muted small">{{ app.name }}</span>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
<div class="container">
<div class="row">
- {% for feature in features.features_list %}
- <div class="col-12 col-sm-6 col-md-4 px-sm-3 px-md-4 py-3">
- <img src="./assets/illustrations/{{ feature.img }}" class="img-fluid pb-3
d-block mx-auto mx-sm-0" style="height: 200px;" alt="{{ feature.title }}" />
- <h6>{{ feature.title }}</h1>
- <p class="text-muted">{{ feature.description | markdownify }}</p>
+ <div class="col-lg-5 pt-4">
+ <h2 class="font-weight-light mb-3">Integrations for Rapid Application
Development</h2>
+ <p class="text-muted">Glade is a RAD tool which enables quick & easy
development of user interfaces for the GTK toolkit and the GNOME desktop environment.<br>Check out this easy
tutorial on <a href="https://developer.gnome.org/gnome-devel-demos/stable/toolbar_builder.py.html.en";>how to
create a toolbar</a> using Glade.</p>
+ </div>
+ <div class="col-lg-7 d-flex justify-content-center align-items-center">
+ <img src="./assets/img/glade.png" class="img-fluid w-100 shadow-lg"
alt="Integration of Glade and GTK" />
</div>
- {% endfor %}
</div>
</div>
+ <hr class="w-75 mt-5">
</section>
-{% assign apps_info = data.stuff.headings_and_descriptions | where: "sectionId", "apps" %}
-<section class="pt-4" id="apps">
- <div class="container py-3 d-flex flex-column align-items-center">
+{% assign features = site.data.stuff.features_list %}
+{% assign total_size = site.data.stuff.features_list | size %}
+{% assign halfway = total_size | divided_by: 2 %}
+<section class="pt-3 pb-4" id="features">
+ <div class="container">
<div class="row text-center d-flex justify-content-center">
- <div class="col-sm-12 col-md-10">
- <h1 class="font-weight-light">{{ apps_info[0].heading }}</h1>
- <p class="text-muted">{{ apps_info[0].description }}</p>
+ <div class="col-md-10 col-lg-7">
+ <h2 class="font-weight-light mb-3">A feature rich development tool</h2>
+ <p class="text-muted">
+ GTK has all the features that a widget toolkit needs to have. These
features make it the most trusted toolkit for developing Linux Apps.
+ </p>
</div>
</div>
- <div class="row d-flex justify-content-center w-100 w-lg-75 pt-3">
- {% assign apps = site.apps %}
- {% for app in apps %}
- <div class="col-6 col-sm-4 col-md-3 d-flex flex-column align-items-center
justify-content-center text-center py-3 shadow-hover">
- <div class="app-holder">
- <img src="{{ '/apps/' | prepend: site.url }}{{ app.img }}"
class="img-fluid app-icon" alt="{{ app.name }}" />
- <a href="{{ app.url }}" class="nav-link stretched-link">{{ app.name
}}</a>
+ <div class="row feature-holder py-4">
+ <div class="col-sm-6 px-3">
+ {% assign halfway = halfway | minus: 1 %}
+ {% for i in (0..halfway) %}
+ <div class="col px-0 px-sm-3">
+ <h6 class="mb-1">{{ features[i].title }}</h6>
+ <span class="text-muted small">{{ features[i].description |
markdownify }}</span>
+ <br>
</div>
+ {% endfor %}
</div>
+
+ <div class="col-sm-6 px-3">
+ {% assign halfway = halfway | plus: 1 %}
+ {% assign total_size = total_size | minus: 1 %}
+ {% for i in (halfway..total_size) %}
+ <div class="col px-0 px-sm-3">
+ <h6 class="mb-1">{{ features[i].title }}</h6>
+ <span class="text-muted small">{{ features[i].description |
markdownify }}</span>
+ <br>
+ </div>
{% endfor %}
- </div>
- <br>
- <div class="row">
- <div class="col text-center small text-muted">
- <p><a href="/apps/" class="text-decoration-none">View more</a> or submit your
<a href="#" class="text-decoration-none">own app.</a></p>
</div>
</div>
</div>
- <hr class="w-75">
+ <section class="py-4" id="development">
+ <div class="container">
+ <div class="row py-4">
+ <div class="col-md-6 px-md-4 pb-4 pb-md-0">
+ <h2 class="font-weight-light mb-3">Develop with GTK</h2>
+ <span class="text-muted">By taking the advantage of GTK being a
cross-platform development tool and it's easy to use API, you can develop amazing apps using the GTK. If you
are interested in developing an app, get started now by developing this <a
href="https://developer.gnome.org/gtk3/stable/ch01s04.html#id-1.2.3.12.5";>trivial app</a>.</span>
+ </div>
+ <div class="col-md-6 px-md-4 pb-4 pb-md-0">
+ <h2 class="font-weight-light mb-3">Develop GTK</h2>
+ <span class="text-muted">GTK is a large project and relies on
voluntary contributions from the developers around the world. To help us with the project development, hack
away on the existing <a href="https://gitlab.gnome.org/GNOME/gtk/issues/";>bugs and feature
requests</a>.</span>
+ </div>
+ </div>
+ <hr class="w-75">
+ <div class="row py-4 text-center d-flex justify-content-center">
+ <div class="col-md-10 col-lg-7">
+ <h2 class="font-weight-light mb-3">Looking for Help?</h2>
+ <span class="text-muted"> If you want to ask questions about GTK,
whether it's for developing applications with GTK or contributing to GTK itself, you can use the GNOME <a
href="https://discourse.gnome.org";>Discourse</a> instance, under the <a
href="https://discourse.gnome.org/c/platform/core";>Platform/Core</a> category. You can use tags like
<i>gtk</i> or <i>glib</i> to narrow down the topic of discussion to specific libraries. You can also ask
questions on our <a href="irc://irc.gnome.org/%23gtk">IRC</a></a> channel.</span>
+ </div>
+ </div>
+ </div>
+ </section>
</section>
-
-{% assign tutorials = data.stuff.headings_and_descriptions | where: "sectionId", "tutorials" %}
+<!--
<section class="py-4" id="tutorials">
- <div class="container py-4">
+ <div class="container">
<div class="row">
<div class="embed-responsive embed-responsive-16by9 col-12 col-md-6 rounded">
- <iframe class="embed-responsive-item py-3 px-3" src="{{
site.tutorial_video_link }}" allowfullscreen></iframe>
+ <iframe class="embed-responsive-item py-3 px-3" src="{{
site.data.stuff.tutorial_video_link }}" allowfullscreen></iframe>
</div>
<div class="col-12 col-md-6 px-3 py-3 px-md-4 d-flex flex-column
justify-content-center">
- <h1 class="font-weight-light">{{ tutorials[0].heading }}</h1>
- <br>
- <p class="text-muted">{{ tutorials[0].description }}</p>
+ <h2 class="font-weight-light mb-3">Quick Tutorials</h2>
+ <p class="text-muted">Creating an application using GTK 4 is super easy.
Check out this short tutorial on how the things are done from Setup till the deployment.</p>
<div>
- <a href="#" class="btn border border-primary text-primary btn-sm"
role="button">Developers Guide</a>
+ <a href="#" class="btn btn-sm btn-outline-primary"
role="button">Developers Guide</a>
</div>
</div>
</div>
</div>
+</section> -->
+
+{% assign news_and_events = site.data.stuff.news_and_events_list %}
+<section class="py-4" id="events">
+ <div class="container">
+ <h2 class="text-center font-weight-light mb-3">News and Events</h2>
+ <div class="row py-4">
+ {% for news in news_and_events %}
+ <div class="col-md-4 px-3 pb-4 pb-md-0">
+ <div class="w-100 px-4 py-4 rounded shadow bg-light h-100">
+ <h6 class="border-bottom border-primary pb-2">{{ news.title }}</h6>
+ <span class="text-muted small">{{ news.description | markdownify
}}</span>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
</section>
+<script>
+ function slideDown() {
+ location.assign("#usecases");
+ }
+
+ // controls the appearance of code container for language bindings
+ var tabs = document.querySelectorAll(".tab-pane");
+ var i, l = tabs.length;
+ var max = 400;
+ for (i = 0; i < l; i++) {
+ tabs[i].style.height = max + "px";
+ }
+
+ // controls the app silder
+ $(document).ready(function(){
+ $('.app-logos').slick({
+ slidesToShow: 6,
+ swipeToSlide: true,
+ autoplay: true,
+ autoplaySpeed: 2500,
+ arrows: false,
+ dots: false,
+ pauseOnHover: false,
+ responsive: [
+ {
+ breakpoint: 992,
+ settings: {
+ slidesToShow: 4
+ }
+ },
+ {
+ breakpoint: 768,
+ settings: {
+ slidesToShow: 3
+ }
+ }]
+ });
+ });
+
+ $('.dropdown-toggle').dropdown()
+</script>
{%- include footer.html -%}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b8bf288..3f16242 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,11 @@
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz";,
"integrity":
"sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+ },
+ "slick-carousel": {
+ "version": "1.8.1",
+ "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz";,
+ "integrity":
"sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
}
}
}
diff --git a/package.json b/package.json
index 7f7cafc..3129ddb 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"@primer/css": "^12.4.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
- "popper.js": "^1.15.0"
+ "popper.js": "^1.15.0",
+ "slick-carousel": "^1.8.1"
}
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
