Difference between revisions of "AniDB:CSS DEV"

From AniDB
Jump to navigation Jump to search
m
m
Line 1: Line 1:
 
{{TOCright}}
 
{{TOCright}}
  
This pages content is centred around CSS development via AniDB's [[Wikipedia:Subversion (software)|SVN]]. The goals of the SVN are:
+
This pages content is centred around CSS development via AniDB's GIT. The goals of the GIT are:
 
# Keeping track of all CSS styles.
 
# Keeping track of all CSS styles.
 
# Version control for developers.
 
# Version control for developers.
Line 10: Line 10:
  
 
==Getting the Source of a Style==
 
==Getting the Source of a Style==
If you only want to get the latest version of all files belonging to a particular style, you don't need to install an SVN client. A simpler approach would be to download the files from the SVN repository with your web browser.
+
If you only want to get the latest version of all files belonging to a particular style, you don't need to install an GIT client. A simpler approach would be to download the files from the GIT repository with your web browser.
  
 
To do that go to [https://git.anidb.net/anidb/svn/tree/master gitlab] and click the download link.
 
To do that go to [https://git.anidb.net/anidb/svn/tree/master gitlab] and click the download link.
Line 24: Line 24:
  
 
===Committing===
 
===Committing===
After you have edited, added or even deleted some things you still have to commit your changes. This will write the things to the SVN.  
+
After you have edited, added or even deleted some things you still have to commit your changes. This will write the things to the GIT.  
  
You can commit on a file or dirlevel. Meaning you can commit a big change with multiple files or folders involved or just specific files. '''To not spam us all into oblivion with SVN mails it's recommended to bundle some commits.'''
+
You can commit on a file or dirlevel. Meaning you can commit a big change with multiple files or folders involved or just specific files. '''To not spam us all into oblivion with GIT mails it's recommended to bundle some commits.'''
  
Take also note that you should before editing anything '''always''' update your local files with the ones in the SVN.
+
Take also note that you should before editing anything '''always''' update your local files with the ones in the GIT.
  
 
==Adding a new project==
 
==Adding a new project==

Revision as of 16:32, 3 June 2014

This pages content is centred around CSS development via AniDB's GIT. The goals of the GIT are:

  1. Keeping track of all CSS styles.
  2. Version control for developers.
  3. Automatic upload procedure to one of AniDB's server.
  4. Automatic update of the drop down menu in the profile.
Note You should build your style on already existing code. Check the folder css/common. Examples can be found in css/sub.

Getting the Source of a Style

If you only want to get the latest version of all files belonging to a particular style, you don't need to install an GIT client. A simpler approach would be to download the files from the GIT repository with your web browser.

To do that go to gitlab and click the download link.

If you want to contribute your own styles, you will need to install a git client.

Connecting to GIT

Web

For write access contact an AniDB Mod.

If you have further questions feel free to ask in irc://irc.synirc.net/anidb-dev or irc://irc.synirc.net/anidb.

Committing

After you have edited, added or even deleted some things you still have to commit your changes. This will write the things to the GIT.

You can commit on a file or dirlevel. Meaning you can commit a big change with multiple files or folders involved or just specific files. To not spam us all into oblivion with GIT mails it's recommended to bundle some commits.

Take also note that you should before editing anything always update your local files with the ones in the GIT.

Adding a new project

There are a few things that needs to get done when adding a new project:

  1. Add a new dir for your project in the CSS folder (/trunk/css/{your_style})
  2. Name the dir whatever you want, but NO SPACES!.
  3. If you are using images different from the AniDB ones add a /images/ dir below your project (i.e. /trunk/css/{your_style}/images)
    • You may use sub-folders below that one if you want.
  4. Add a screenshot and a thumbnail of your style in the images folder with the following specifications:
    • Filename: thumbnail.png
    • Resolution: 210x150 (width is more or less optional, height should stay 150px, but try to keep to these values)
    • Filename: screenshot.png
    • Resolution: doesn't matter. just use something sensible
  5. Add a description file in the root of your project, add the following lines and fill them accordingly as you see fit:
    • title:
    • creator:
    • update:
    • status:
    • description:
  6. (optional) For auto-processing edit the styleslist file and add a relative path for the main CSS file (the one with all your @import lines, i.e. ./sub/silver/main.css)
    • You can disable processing by adding a # in front of the line.

In the end you should end up with a structure like this:

 /trunk/css/<your project>
 /trunk/css/<your project>/description
 /trunk/css/<your project>/images
 /trunk/css/<your project>/images/screenshot.png
 /trunk/css/<your project>/images/thumbnail.png

Merging & Hosting

Every CSS that is used this way gets merged into 1 file (to reduce http overhead), uploaded to 1 of AniDB's server and added to the style selection in the AniDB profile. To realize this a python script is used, doing the following:

  1. read the file stylelist in the same folder as the script (ignores lines starting with #)
  2. takes the first line from stylelist and reads the main CSS file for this style
  3. reads every @import line, opens the file specified behind those and copies the content to a new file
  4. repeats the procedure for the next lines aside of the # ones
  5. checks if there are is an /images/ folder below the CSS folder and if yes collects a list of all gif/jpg/png files
  6. uploads the big CSS file and the images to 1 of AniDB's servers