AniDB:CSS DEV: Difference between revisions

From AniDB
Jump to navigation Jump to search
(→‎Connecting to GIT: registrations are now closed to public)
 
(30 intermediate revisions by 9 users not shown)
Line 1: Line 1:
{{TOCright}}
{{TOCright}}


This pages content is centered around CSS developement via Anidb's 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
# Keeping track of all CSS styles.
# version control for developers
# Version control for developers.
# automatical upload procedure to one of anidbs server
# Automatic upload procedure to one of AniDB's server.
# automatical update of the drop down menu in the [[profile]]
# Automatic update of the drop down menu in the [[profile]].


=open issues=
{{eyecatch|Note|You should build your style on already existing code. Check the folder '''common'''. Examples can be found in '''sub'''.}}
#screenshot filename and resolution
#format and name of the descriptionfile (xml?)
#stuff


==Connecting to SVN==
==Getting the Source of a Style==
First thing you need a client. You can of course use any svn client you want, but we recomment [http://tortoisesvn.tigris.org/ Tortoise SVN] for windows user as it nicely integrates into explorer and makes it, as such, very easy to use. After that you specify a dir on your hdd where you want to put the files and checkout the current cvs version
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.


By SVN Client: svn://dev.anidb.info/svn/trunk<br/>
To do that go to [https://git.anidb.net/anidb/css/tree/master gitlab] and click the download link.
For write access contact an AniDB Mod.


If you have further questions feel free to ask in #anidb-dev or #anidb @irc.zirc.org or pm a mod.
If you want to contribute your own styles, you will need to install a git client.


===SVN via Tortoise===
==Connecting to GIT==
Here some tortoise specific notes.
[https://git.anidb.net https://git.anidb.net] - [https://git.anidb.net/anidb/css/tree/master Direct access to public repo]


After installing a version and having picked a dir, where to put your stuff right click in the new dir and select '''checkout''' In the following dialog enter svn://dev.anidb.info/svn/trunk/ in the url field. This will download the whole content of the svn to this dir. After this is done you will notice a green thingy in the file and dirname icons. (This means your local version matches the version in the SVN Once you edit any file it will turn red)
Write access requires registration to the Git. Registrations are closed to the public, so if you wish to register of have further questions, please contact us on IRC {{irclink|anidb-dev}} or {{irclink|anidb}} or post a question in the [https://anidb.net/forum/20/thread Stylesheets and Export Templates] subforum.


To add new content you can create new files and dirs like you are used via explorer. Editing the files can be done via any editor you want as well. You will notice no green thingy turning up for anything new you created. This menas the file is not in the svn and henc enot recognized. You have to add them first. In the context menu you will find an option who would have guessed it named '''add'''. This only creates a placeholder in the SVN. No actual content is written yet.
===Committing===
Deleting things works analog. You first have to delete the placeholder.
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.  


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. 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==
There are a few things that needs to get done when 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 project>)
# Add a new dir for your project in the CSS folder (<tt>/{your_style}</tt>)
:2. name the dir as you want to call your style ('''NO SPACES!''')
# 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 project>/images)
# If you are using images different from the AniDB ones add a <tt>/images/</tt> dir below your project (i.e. <tt>/{your_style}/images</tt>)
::* you may use subfolders below that one if you want)
#* You may use sub-folders below that one if you want.
:4. add a screenshot of your style in the images folder with the following specifications: (filename: screenshot.<ext> and resolution:)
# Add a screenshot and a thumbnail of your style in the images folder with the following specifications:
:5. add a description file in the root of your project, add the following lines and fill them accordingly as you see fit:
#* Filename: thumbnail.png
::*Title:  
#* Resolution: 210x150 (width is more or less optional, height should stay 150px, but try to keep to these values)
::*Creator:  
#* Filename: screenshot.png
::*Last update:  
#* Resolution: doesn't matter. just use something sensible
::*Status:  
# Add a description file in the root of your project, add the following lines and fill them accordingly as you see fit:
::*further notes:
#* title:
#* creator:  
#* update:  
#* status:  
#* description:  
# (optional) For auto-processing edit the '''styleslist''' file and add a relative path for the main CSS file (the one with all your <tt>@import</tt> lines, i.e. <tt>./sub/silver/main.css</tt>)
#* You can disable processing by adding a # in front of the line.


in the end you should end up with a structure like this:
In the end you should end up with a structure like this:
  /<your project>
  /<your project>/description
  /<your project>/images
  /<your project>/images/screenshot.png
  /<your project>/images/thumbnail.png


:/trunk/css/<your project>
==Merging & Hosting==
:/trunk/css/<your project>/description
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:
:/trunk/css/<your project>/images
:/trunk/css/<your project>/images/screenshot.png
 
Optional:
:6. for autoprocessing 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 stop processing by adding a # in front of the line)
 
==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 dropdown menu in the anidb [[profile]]. To realize this a python script is used, doing the following:


# read the file '''stylelist''' in the same folder as the script (ignores lines starting with #)
# read the file '''stylelist''' in the same folder as the script (ignores lines starting with #)
# takes the first line from '''stylelist''' and reads the main css file for this style
# takes the first line from '''stylelist''' and reads the main CSS file for this style
# reads every @import line, opens the file specified behind those and copies the content to a new file
# reads every @import line, opens the file specified behind those and copies the content to a new file
# repeats the procedure for the next lines aside of the # ones
# repeats the procedure for the next lines aside of the # ones
# checks if there are is an /images/ folder below the css folder and if yes collects a list of all gif/jpg/png files
# checks if there are is an /images/ folder below the CSS folder and if yes collects a list of all gif/jpg/png files
# uploads the big css file and the images to 1 of anidb's server
# uploads the big CSS file and the images to 1 of AniDB's servers
(not done yet # upodates some configfile responsible for the dropdown menu in the [[profile]])
 
[[Category:Development]][[Category:CSS]]

Latest revision as of 21:35, 16 September 2019

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 common. Examples can be found in 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

https://git.anidb.net - Direct access to public repo

Write access requires registration to the Git. Registrations are closed to the public, so if you wish to register of have further questions, please contact us on IRC irc://irc.synirc.net/anidb-dev or irc://irc.synirc.net/anidb or post a question in the Stylesheets and Export Templates subforum.

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 (/{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. /{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:

 /<your project>
 /<your project>/description
 /<your project>/images
 /<your project>/images/screenshot.png
 /<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