A content management system for webcomics with a bold new UI.
Built using TypeScript.
- Comic navigation by swiping
- Animations to make comic navigating clearer
- Static generation for SEO
- Full comic transcripts for searchability and accessibility
Comic CMS consists of a client and server. The client is using nuxtjs; the server is using express. After pulling, run npm ci in both directories to install all dependencies.
You'll want to create a colors.scss file in client/assets/scss with the following content:
$primary: #64b5f6;
$primaryLight: #9be7ff;
$primaryDark: #2286c3;
$secondary: #81c784;
$secondaryLight: #b2fab4;
$secondaryDark: #519657;
$darkBackground: #333;
$mediumBackground: #444;
$lightBackground: #555;
$font: white;
(replace these with the color of your choice)
and similarly create a fonts.scss file in client/assets/scss:
@font-face {
font-family: "Kalam";
src: url("/fonts/Kalam-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Komika Axis";
src: url("/fonts/KOMIKAX_.ttf") format("truetype");
}
$textFont: "Kalam", sans-serif;
$emphasisFont: "Komika Axis", sans-serif;
replacing these with the fonts of your choice.
You can also create a favicon in client/static/favicon.ico for your site.
You must have mysql or mariadb set up on your server. The client directory and server directory each need a .env file.
The client .env file should look like this:
API_URL=https://your.webssite/api
And the server should look like this:
PORT=8011
CLIENT_USER=******
ADMIN_USER=******
DB_PASS_CLIENT=******
DB_PASS_ADMIN=*******
JWT_SECRET=SOME_REALLY_LONG_SECRET_STRING
NODE_ENV=production
APP_URL=https://your.website/
COMIC_TITLE=the comic's title
COMIC_DESCRIPTION=a short description for the comic (used in the rss feed)
COMIC_AUTHOR=your name
[email protected]
The development version of the app can then be run by running ./run in the root directory of the project.
A production build can be generated by running ./build in the root directory of the project. Then the client/dist directory contains the front end and can be served statically. The server will be in server/build and can be started with node server/build/index.js (I recommend pm2 or forever to keep the server up when you exit the terminal).
An about page can be generated by creating a markdown file in client/content called about.md.