AniDB:CSS DEV: Difference between revisions

From AniDB
Jump to navigation Jump to search
(→‎Connecting to GIT: registrations are now closed to public)
 
(29 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.


For Mac users we recommend [http://rapidsvn.tigris.org/ RapidSVN]. RapidSVN does not integrate with the Mac Finder as much as Tortoise does with Explorer. Instead it is a standalone app that you use to browse the files on the SVN server (Repository) as well as your local files (Working Copy).
To do that go to [https://git.anidb.net/anidb/css/tree/master gitlab] and click the download link.


By SVN Client: svn://dev.anidb.info/svn/trunk<br/>
If you want to contribute your own styles, you will need to install a git client.
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.
==Connecting to GIT==
[https://git.anidb.net https://git.anidb.net] - [https://git.anidb.net/anidb/css/tree/master Direct access to public repo]


===SVN via Tortoise===
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.
Here some tortoise specific notes.


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)
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 means the file is not in the svn and hence not 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.
Deleting things works analog. You first have to delete the placeholder.
===SVN via RapidSVN===
To get started, run RapidSVN and go to '''Repository -&gt; Checkout''' and enter svn://dev.anidb.info/svn/trunk in the URL field and your desired local directory in the Destination Directory field.
You may now create/edit/delete any files or folders in your working copy dir.  Any changes you make will be automatically recognized and highlighted in the RapidSVN file browser: items edited or deleted will have a red icon,  and items created will have a question mark icon.  To add created items to the SVN right click on them and choose '''Add''' (or select them and hit '''cmd+A''').  Note that Adding only lets them be recognized by the SVN, it does not commit their creation to the server. To commit changes, select the files, right click and choose '''Commit'''. You will be given a dialog box in which you may annotate what this commit entails.  You may choose to leave this blank, but it's good practice to log your changes so others know what you've changed.
===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==
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:  
in the end you should end up with a structure like this:
#* 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.


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


Optional:
==Merging & Hosting==
: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)
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:
::* 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