This project contains the source code and content for https://kits.se.
The system context diagram below gives you an overview of how the different systems work together to create kits.se:
System Context Diagram
There are quite a few systems involved for such a simple site but if we look at a container diagram for KITS.se it may be easier to see how each of the systems are used to generate the final site.
The easiste way to add content to the site is to use https://kits.se/admin. You can login using your GitHub account if you're a member of the KITS organization. The CMS is powered by Netlify CMS and all different content can be edited in a custom form for each type.
When you add content it will be saved as a new branch on GitHub and a pull request will be created. This means you can play with the content without publishing changes.
You can use any editor for development (Visual Studio Code, Atom, WebStorm, IntelliJ, Vim, ...) but you should make sure that it supports the following technologies:
- TypeScript – Since the project is written in TypeScript
- EditorConfig – To help the editor use the correct encoding, indentation, ...
- Styled Components – To support styled component that we use for styling our components
- Prettier – To format the code according to our coding conventions
The code is automatically formatted when you commit code. It is also linted before you push the commits to the server.
For debugging purposes you should install React Developer Tools.
Install all required tools
Checkout the code and fetch all dependencies
$ git clone firstname.lastname@example.org:kits-ab/kits.git $ yarn install
When you've checked out the code and all dependencies have been fetched you probably want to run
yarn start but you can run any of the the following scripts:
yarn build– Creates a production ready builds in
yarn clean– Removes all generated files
yarn format– Format the entire codebase using Prettier
yarn generateschema– Reads the GraphQL schema from a started server and create TypeScript-types
yarn lint– Lints all code with TSLint and Stylelint
yarn start– Starts a local server with hot reloading enabled on http://8000
All content that is read from Markdown, YAML or image files is exposed through GraphQL.
Copyright 2015-2019 KITS AB
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.