comixcraft

Words are good, pictures are better.

   Deployment

   Table of Content

• Description
• Authors and acknowledgment
• Development
  • Setup
  • Development Server
  • Production
• Style Guide
• Hosting
• Updating the catalog
  • Updating the catalog with a new version from the Comixplain repository
• Contributing
  • How to make a clean pull request
• License

Description

Comics are a powerful way to bring stories to life and can even support student engagement in learning complex scientific subjects. With our user-friendly platform, anyone can become a comic creator – no artistic skills required!

Authors and acknowledgment

    Anna Blasinger     

    Florent Gabillon     

    Alica Holla     

    Vanessa Koeck     

    Juliana Matsumura     

    Antoine Muneret     

    Hannah Wagner     

Special thanks to Gausszhou and is vue-drag-resize-rotate plugin.

Development

Setup

Make sure to install the dependencies:

npm install

Development Server

Start the development server on http://localhost:3000:

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

Style Guide

The font used for the comixcraft-Editor is Nunito, it is the default for everything. Any text in the comics themselves is in the font Pangolin (.text-comic).

For icons the rounded Material Symbols are used (npm-package: material-symbols). All available icons can be found in the catalogue. Any icon can be used by providing its name as a ligature in snake_case.

<span class="icon">comic_bubble</span> <span class="material-symbols-rounded">comic_bubble</span>

Only colors that are defined in ./assets/scss/_variables.scss should be used. This also applies to spacers, borders, and other design elements. When you need any new size or a setting that might be used multiple times, always define it in the _variables.scss file.

Hosting

The content of this repository is hosted on https://comixcraft.com/ over Netlify. Updates on the website are done automatically on update of the main-branch.

Updating the catalog

The catalog-structure is defined in server/assets/comixplain-catalog.js. This catalog follows the same structure as in the Comixplain repository. The structure in the comixplain-catalog.js is used to generate the catalog on the website. The naming of categories, sub-categories and filters all originate from this catalog, therefore it is important that all keys carry readable names.

Updating the catalog with a new version from the Comixplain repository

The following steps describe how the existing catalog structure from the Comixplain repository most be adjusted to properly work for comixcraft.

1. Copy the JSON-structure from the Comixplain repository (/docs/assets.json) and paste it into comixplain-catalog.js. The structure needs to be a named export.

export const catalog = {
    /* structure goes here */
}

2. Remove the category with the key Template from the catalog. The data provided in this category is not usable in comixcraft.
3. Over Strg+F and Strg+R replace all occurrences of .png" with ". This provides better alt-texts for the images.
4. Over Strg+F and Strg+R replace all occurrences of https://github.com/fhstp/comixplain/blob/main/Comixplain_Assets with /catalog. This provides relative urls.
5. If new images were added update the public/catalog-folder with the new images.
6. If new categories or sub-categories were added please add/adapt the corresponding icons in config/iconsConfig.js with the icons-name from Material Symbols

Contributing

If you want to contribute to a project and make it better, your help is very welcome. Contributing is also a great way to learn more about social coding on Github, new technologies and and their ecosystems and how to make constructive, helpful bug reports, feature requests and the noblest of all contributions: a good, clean pull request.

How to make a clean pull request

Look for a project's contribution instructions. If there are any, follow them.

• Create a personal fork of the project on Github.
• Clone the fork on your local machine. Your remote repo on Github is called origin.
• Add the original repository as a remote called upstream.
• If you created your fork a while ago be sure to pull upstream changes into your local repository.
• Create a new branch to work on! Branch from dev if it exists, else from main.
• Implement/fix your feature, comment your code.
• Follow the code style of the project, including indentation.
• If the project has tests run them!
• Write or adapt tests as needed.
• Add or change the documentation as needed.
• Squash your commits into a single commit with git's interactive rebase. Create a new branch if necessary.
• Push your branch to your fork on Github, the remote origin.
• From your fork open a pull request in the correct branch. Target the project's dev branch if there is one, else go for main!
• If the maintainer requests further changes just push them to your branch. The PR will be updated automatically.
• Once the pull request is approved and merged you can pull the changes from upstream to your local repo and delete your extra branch(es).

And last but not least: Always write your commit messages in the present tense. Your commit message should describe what the commit, when applied, does to the code – not what you did to the code.

License

Under Attribution-ShareAlike 4.0 International license. More details about this license