Commit a25c34b0 authored by Igor Aragão's avatar Igor Aragão Committed by Claudio W
Browse files

documentation: update home and add to nav-list

parent 004902b3
......@@ -36,16 +36,11 @@ jspm_packages/
.npm
# Environment files
.env
# Hugo files
documentation/static/gnomeui.min.css
documentation/public
documentation/resources
.Environment
# Jekyll files
documentation/_site
documentation/_sass/custom
documentation/.sass-cache
documentation/.jekyll-cache
documentation/.jekyll-metadata
......
......@@ -6,7 +6,7 @@ For further reference concerning styling, check on [Tailwind CSS' documentation]
The GNOME UI library uses [Feather Icons](https://feathericons.com/) by default.
The GNOME UI Documentation is developed using [Hugo](https://gohugo.io/) and Gitlab pages, and it uses a theme called [hugo-book](https://github.com/alex-shpak/hugo-book) and is available [here](https://teams.pages.gitlab.gnome.org/Engagement/websites/gnome-websites-framework/).
The GNOME UI Documentation is developed using [Jekyll](https://jekyllrb.com/) and Gitlab pages, and it uses a theme called [Just The Docs](https://pmarsceill.github.io/just-the-docs/) and is available [here](https://teams.pages.gitlab.gnome.org/Engagement/websites/gnome-websites-framework/).
The project documentation is placed in the `documentation` folder.
......@@ -18,10 +18,10 @@ The steps below will provide you guidance in how to setup the dependencies and h
- Install the pre-requisites
- [NPM](https://www.npmjs.com/get-npm)
- [Hugo](https://gohugo.io/getting-started/installing)
- [Jekyll](https://jekyllrb.com/docs/installation/)
- Clone the repository
```sh
git clone --recurse-submodules https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework.git
git clone https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework.git
```
- Then go to the directory of the repository you cloned
```sh
......@@ -40,7 +40,7 @@ In order to generate the styles you need to run the following command.
```sh
npm run build
````
```
This command will output the following styles
......@@ -51,20 +51,15 @@ This command will output the following styles
│ ├── index.min.css
```
<<<<<<< HEAD
### Building the Docs (Hugo)
=======
### Generating Documentation
The project documentation is developed using Jekyll and Gitlab pages, and it uses a theme called Just-the-docs. and is available [here](https://teams.pages.gitlab.gnome.org/Engagement/websites/general-website-resources/). The project documentation is placed in the `documentation` folder.
>>>>>>> documentation: remove hugo docs, update readme and update gitlab-ci
### Building the Docs (Jekyll)
- Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/)
- Install [Jekyll and Jekyll's requirements](https://jekyllrb.com/docs/installation/)
- Install dependencies inside documentation folder:
```
cd documentation/
bundle install
```
- Then copy the **generated styles from the previous steps** into the custom styles of the documentation folder
- Then copy the **generated styles from [Building the Library](#building-the-library-(css/tailwind)) section** into the custom styles of the documentation folder
```sh
mkdir _sass/custom/ # Only needed in the first time
cp ../dist/index.min.css "_sass/custom/custom.scss"
......@@ -73,4 +68,4 @@ The project documentation is developed using Jekyll and Gitlab pages, and it use
```
bundle exec jekyll serve
```
- Navigate to http://127.0.0.1:4000/Engagement/websites/general-website-resources/ in your browser to see it running.
\ No newline at end of file
- Navigate to http://127.0.0.1:4000/Engagement/websites/gnome-websites-framework/ in your browser to see it running.
\ No newline at end of file
......@@ -2,9 +2,7 @@ title: GNOME UI
email: engagement@gnome.org
description: >-
GNOME's own UI library.
baseurl: "/Engagement/websites/general-website-resources"
#url: "https://teams.pages.gitlab.gnome.org"
twitter_username: GNOME
baseurl: "/Engagement/websites/gnome-websites-framework"
logo: "/assets/logo-horizontal.svg"
# Build settings
......@@ -12,25 +10,4 @@ theme: just-the-docs
color_scheme: gnome-blue
plugins:
- jekyll-feed
# Exclude from processing.
# The following items will not be processed, by default.
# Any item listed under the `exclude:` key here will be automatically added to
# the internal "default list".
#
# Excluded items can be processed by explicitly listing the directories or
# their entries' file path in the `include:` list.
#
# exclude:
# - .sass-cache/
# - .jekyll-cache/
# - gemfiles/
# - Gemfile
# - Gemfile.lock
# - node_modules/
# - vendor/bundle/
# - vendor/cache/
# - vendor/gems/
# - vendor/ruby/
- jekyll-feed
\ No newline at end of file
This diff is collapsed.
---
layout: default
title: Components
nav_order: 1
permalink: /components/
nav_order: 2
has_children: true
---
\ No newline at end of file
---
layout: home
title: Home
description: "The GNOME UI is a web library built using [Tailwind CSS](https://tailwindcss.com/) to be used on GNOME's websites. It eases the styling process of the websites and enables better consistency between them, while maintaining a GNOMEish look."
permalink: /
nav_order: 1
---
# GNOME UI
The GNOME UI is a web library built using [Tailwind CSS](https://tailwindcss.com/) to be used on GNOME's websites. It eases the styling process of the websites and enables better consistency between them while keeping a beautiful and GNOMEish look.
# GNOME Websites Framework
<br>
The GNOME Websites Framework is a CSS library built using [Tailwind CSS](https://tailwindcss.com/) to be used to craft and style Websites following GNOME's own visual identity. It eases the styling process of the websites and enables better consistency between them while keeping a beautiful and GNOMEish look.
For further reference concerning styling, check on [Tailwind CSS' documentation](https://tailwindcss.com/).
<br>
The GNOME UI library uses [Feather Icons](https://feathericons.com/) by default.
## Get started
### Set up locally
The GNOME UI Documentation is developed using [Jekyll](https://jekyllrb.com/) and Gitlab pages, and it uses a theme called [Just The Docs](https://pmarsceill.github.io/just-the-docs/) and is available [here](https://teams.pages.gitlab.gnome.org/Engagement/websites/gnome-websites-framework/).
The project documentation is placed in the `documentation` folder.
## Getting started
The steps below will provide you guidance in how to setup the dependencies and how to build the components of this repository.
### Setting up Dependencies
- Install the pre-requisites
- [NPM](https://www.npmjs.com/get-npm)
- [Jekyll](https://jekyllrb.com/docs/installation/)
- Clone the repository
```sh
git clone https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework.git
```
- Then go to the directory of the repository you cloned
```sh
cd gnome-websites-framework
```
- Install the dependencies
```sh
npm ci
```
1. [Install npm](https://www.npmjs.com/get-npm).
2. Clone the repository:
> `$ git clone git@gitlab.gnome.org:Teams/Engagement/websites/gnome-websites-framework.git`
3. Navigate to the repository folder:
> `$ cd gnome-websites-framework`
4. Install dependencies:
> $ npm install
5. Generate a build:
> $ npm run build
### Building the Library (CSS/Tailwind)
This Library uses [Tailwind](https://tailwindcss.com/) as a base framework and this repositoriy extends Tailwind's functionalities. In order to generate the styles that can be used for production (other websites) you need to build the styles.
In order to generate the styles you need to run the following command.
```sh
npm run build
```
This command will output the following styles
It will then generate the following files using the created styles:
```
├── dist/
│ ├── index.css
......@@ -35,16 +58,21 @@ It will then generate the following files using the created styles:
│ ├── index.min.css
```
### Documentation
The project documentation is developed using Jekyll and Gitlab pages, and it uses a theme called Just-the-docs. and is available [here](https://teams.pages.gitlab.gnome.org/Engagement/websites/gnome-websites-framework/). The project documentation is placed in the `documentation` folder.
1. Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/).
2. Install dependencies:
> $ bundle install
3. Copy the **generated styles from the previous steps** into the custom styles of the documentation: # Only needed in the first time
> $ mkdir documentation/_sass/custom/
### Building the Docs (Jekyll)
> $ cp dist/index.css "documentation/_sass/custom/custom.scss"
4. Run the documentation server:
> $ bundle exec jekyll build -s documentation/
5. Navigate to http://127.0.0.1:4000/Engagement/websites/gnome-websites-framework/ in your browser to see it running.
\ No newline at end of file
- Install [Jekyll and Jekyll's requirements](https://jekyllrb.com/docs/installation/)
- Install dependencies inside documentation folder:
```
cd documentation/
bundle install
```
- Then copy the **generated styles from [Building the Library](#building-the-library-(css/tailwind)) section** into the custom styles of the documentation folder
```sh
mkdir _sass/custom/ # Only needed in the first time
cp ../dist/index.min.css "_sass/custom/custom.scss"
```
- Run the documentation server:
```
bundle exec jekyll serve
```
- Navigate to http://127.0.0.1:4000/Engagement/websites/gnome-websites-framework/ in your browser to see it running.
\ No newline at end of file
......@@ -2,6 +2,6 @@
layout: default
title: Preflight
permalink: /preflight/
nav_order: 3
has_children: true
nav_order: 2
---
\ No newline at end of file
---
layout: default
title: Samples
nav_order: 3
permalink: /samples/
nav_order: 4
has_children: true
---
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment