Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
update instructions for installing gulp and move contrib section up
lnussel committed May 29, 2018
1 parent f73d635 commit cc3c008
Showing 1 changed file with 35 additions and 48 deletions.
83 changes: 35 additions & 48 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,46 @@
# The new openSUSE landing page
# The openSUSE landing page

Visit the website at: https://www.opensuse.org/

In this new page we will feature Tumbleweed and Leap.
# CONTRIBUTING

## Do you want to contribute by providing translations for the new openSUSE website?
If yes is your answer, then you will make thousands of users happy to have the openSUSE landing page in their language.

#### Update 10/09/2015
We added a Gulp task that:
- Preprocesses CSS (compiles Less into CSS).
- Preprocesses and minifies the Vendor's CSS into one file.
- Minifies all .JS files into one file.
- Watches all changes on CSS and JS files and compiles them on the go, so you dont need to compile manually as you work on the UI.
- And runs a local instance in your localhost:8000
The openSUSE translations are provided by https://l10n.opensuse.org/. You can log in with your openSUSE account there.

Just clone the repo and run gulp:
For introducing a new language, you need to continue reading.

```
~/Opensuse-landing-page> gulp
```
#### 1. introducing new language

Now its time to add the new language to the dropdown. For this follow the next steps:

1. Inside the 'index.html' search with your text editor for 'dropdownMenu1', which is the list containing the options of languages available.
2. Add a new option to the list by simply adding a like such ```<li><a href="#" class="change-language" data-language-value="es">Spanish</a></li>```. **Note** that the <code>data-language-value</code> attribute contains the value of the international code of the language you added.
3. Now we have added the file in the dropdown, and the last step is to include the translation file. For this, you need to open the file **assets/js/opensuse-theme.js** . Here you need to search for "i18n" and add your language following the pattern there.

#### 2. Last steps: build and test

GULP is used to run automatic tasks to preprocess CSS (from less), compress images, and optimize and compress JS.

<pre>
# zypper in 'rubygem(nokogiri)' 'rubygem(gettext)' npm gettext-tools
$ po/update_po.rb
$ npm update
$ npm install gulp
$ node_modules/.bin/gulp
</pre>
<small>More info about <a href="http://gulpjs.com/" target="_blank">gulp here</a></small>

Gulp will give the final touch in the code so then you only need to open the project in your browser
http://localhost:8000
Test your language works well. To make sure there is no variable without translation, open up the web inspector of your browser and check if there is error message in the console, if not, you have done an Excellent job!
So, open a new Pull Request in github, we will double check everything is fine, and then Merge your contribution!


---

# FAQ

## Why did we need a new one?
After years working without a defined target audience and rather than focusing on all software, internet and computer users, the openSUSE Board invested time and knowledge understanding the real personas behind our beloved openSUSE. They identified two "different" users: the Tumbleweed user and users wanting a long-term distribution - the Leap user.
@@ -87,41 +109,6 @@ This is an static landing page and so, I (cynthia, who is writing this nice expl

---

# CONTRIBUTE

## Do you want to contribute by providing translations for the new openSUSE website?
If yes is your answer, then you will make thousands of users happy to have the openSUSE landing page in their language.

The openSUSE translations are provided by https://l10n.opensuse.org/. You can log in with your openSUSE account there.

For introducing a new language, you need to continue reading.

#### 1. introducing new language

Now its time to add the new language to the dropdown. For this follow the next steps:

1. Inside the 'index.html' search with your text editor for 'dropdownMenu1', which is the list containing the options of languages available.
2. Add a new option to the list by simply adding a like such ```<li><a href="#" class="change-language" data-language-value="es">Spanish</a></li>```. **Note** that the <code>data-language-value</code> attribute contains the value of the international code of the language you added.
3. Now we have added the file in the dropdown, and the last step is to include the translation file. For this, you need to open the file **assets/js/opensuse-theme.js** . Here you need to search for "i18n" and add your language following the pattern there.

#### 2. Last steps: build and test

We use GULP to run automatic tasks to preprocess CSS (from less), compress images, and optimize and compress JS.
The last step you need to do, is opening the terminal and going to the directory where you have the project cloned.
Once you are there and considering you have `Gulp` and the ruby gems `nokogiri` and `gettext` installed, just run:
<pre>
$ po/update_po.rb
$ gulp
</pre>
<small>More info about <a href="http://gulpjs.com/" target="_blank">gulp here</a></small>

Gulp will give the final touch in the code so then you only need to open the project in your browser
http://localhost:8000
Test your language works well. To make sure there is no variable without translation, open up the web inspector of your browser and check if there is error message in the console, if not, you have done an Excellent job!
So, open a new Pull Request in github, we will double check everything is fine, and then Merge your contribution!

---

Thanks to:
* <img src="http://trivialine.herokuapp.com/assets/cynt-aa3571490f7e5e51d6a4e000dfc8f55d.jpg" /> Cynthia Sanchez for developing it. Find her at: <a href="https://www.linkedin.com/in/csanchezfrontend">LinkedIn</a> | <a href="https://twitter.com/cyntss">Twitter</a>
* <img src="http://trivialine.herokuapp.com/assets/zvez-3c414d000429b6e8434209c41976fdc7.jpg" /> Zvezdana Marjanovic for designing it. Find her at: <a href="https://www.linkedin.com/pub/zvezdana-marjanovic/51/5b2/537">LinkedIn</a>

0 comments on commit cc3c008

Please sign in to comment.