AniDB:CSS DEV: Difference between revisions
mNo edit summary |
(→Connecting to GIT: registrations are now closed to public) |
||
(15 intermediate revisions by 6 users not shown) | |||
Line 1: | Line 1: | ||
{{TOCright}} | {{TOCright}} | ||
This pages content is | 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. | ||
# | # Automatic upload procedure to one of AniDB's server. | ||
# | # Automatic update of the drop down menu in the [[profile]]. | ||
{{eyecatch|Note|You should build your style on already existing code. Check the folder ''' | {{eyecatch|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== | ==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 | 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 [ | To do that go to [https://git.anidb.net/anidb/css/tree/master gitlab] and click the download link. | ||
If you want to contribute your own styles, you will need to install | If you want to contribute your own styles, you will need to install a git client. | ||
==Connecting to | ==Connecting to GIT== | ||
[https://git.anidb.net https://git.anidb.net] - [https://git.anidb.net/anidb/css/tree/master 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 {{irclink|anidb-dev}} or {{irclink|anidb}} or post a question in the [https://anidb.net/forum/20/thread Stylesheets and Export Templates] subforum. | |||
===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 | 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 | 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 | 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: | ||
# Add a new dir for your project in the | # Add a new dir for your project in the CSS folder (<tt>/{your_style}</tt>) | ||
# Name the dir whatever you want, but '''NO SPACES!'''. | # Name the dir whatever you want, but '''NO SPACES!'''. | ||
# If you are using images different from the | # 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 | #* You may use sub-folders below that one if you want. | ||
# Add a screenshot and a thumbnail of your style in the images folder with the following specifications: | # Add a screenshot and a thumbnail of your style in the images folder with the following specifications: | ||
#* Filename: thumbnail.png | #* Filename: thumbnail.png | ||
Line 65: | Line 45: | ||
#* status: | #* status: | ||
#* description: | #* description: | ||
# (optional) For | # (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. | #* 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 | |||
==Merging & Hosting== | ==Merging & Hosting== | ||
Every | 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: | ||
# 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 | # 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 | # 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 | # uploads the big CSS file and the images to 1 of AniDB's servers | ||
[[Category:Development]][[Category:CSS]] | [[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:
- Keeping track of all CSS styles.
- Version control for developers.
- Automatic upload procedure to one of AniDB's server.
- 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:
- Add a new dir for your project in the CSS folder (/{your_style})
- Name the dir whatever you want, but NO SPACES!.
- 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.
- 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
- 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:
- (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:
- 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
- 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
- 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 servers