docs: extend docker instructions

5 files changed, 116 insertions, 64 deletions

diff --git a/web/pw-server/src/routes/docs/doc.svelte b/web/pw-server/src/routes/docs/doc.svelte
index 5b2c686..20cd94c 100644
--- a/web/pw-server/src/routes/docs/doc.svelte
+++ b/web/pw-server/src/routes/docs/doc.svelte
@@ -7,5 +7,4 @@
   .container {
     max-width: 800px;
   }
-
 </style>
diff --git a/web/pw-server/src/routes/docs/local-development.md b/web/pw-server/src/routes/docs/local-development.md
index 0a2c0e3..02913dc 100644
--- a/web/pw-server/src/routes/docs/local-development.md
+++ b/web/pw-server/src/routes/docs/local-development.md
@@ -1,23 +1,31 @@
-## Local development
+# Local development
 
-Besides using the web editor, it is also possible to develop a bot in your own development environment.  
-Using the `planetwars-client` you can play test matches remotely, with your bot running on your computer.  
-You can then submit your bot to the server as a docker container.  
+Besides using the web editor, it is also possible to develop a bot in your own development environment.
 
-### Playing matches with a local bot
+Using the `planetwars-client` you can play matches remotely, with your bot running on your computer.
+This is similar to using the "Play" button in the web editor.
+
+You can then submit your bot to the server as a docker container.
+
+This way, you can author bots in any language or tool you want - as long as you can dockerize it.
+
+## Running your bot locally
 
 You can use the `planetwars-client` to play matches locally.
 
 Currently, no binaries are available, so you'll have to build the client from source.
 
-#### Building the binary
+### Building the binary
+
 If you do not have a rust compiler installed already, obtain one through https://rustup.rs/.
+
 1. Clone the repository:  
    `git clone https://github.com/iasoon/planetwars.dev.git`
 2. Build and install the client:  
    `cargo install --path planetwars.dev/planetwars-client`
 
-#### Create a bot config
+### Create a bot config
+
 The bot config file specifies how to run your bot. Create a file `mybot.toml` with contents like so:
 
 ```toml
@@ -30,20 +38,58 @@ command = "python simplebot.py"
 working_directory = "/home/user/simplebot"
 ```
 
-#### Playing a match
-Run `planetwars-client /path/to/mybot.toml opponent_name`
+### Playing a match
+
+Run `planetwars-client path/to/mybot.toml opponent_name`
 
 Try `planetwars-client --help` for more options.
 
+## Publishing your bot as a docker container
 
-### Publishing your bot as a docker container
 Once you are happy with your bot, you can push it to the planetwars server as a docker container.
 
-1. **Create a bot.**   
-   Before you can publish a new bot version, you will first need a registered bot name.
-   You can use an existing name, or you can create one by using the "New bot" button on your user profile page (you can get there by clicking your name in the navbar).
-2. Log in to the planetwars docker registry:  
+First, we will containerize our bot.
+
+### Containerizing your bot
+
+Our project directory looks like this:
+
+```
+simplebot/
+├── Dockerfile
+└── simplebot.py
+```
+
+We used this basic dockerfile. You can reuse this for simple python-based bots.
+
+```Dockerfile
+FROM python:3.10.1-slim-buster
+WORKDIR /app
+COPY simplebot.py simplebot.py
+CMD python simplebot.py
+```
+
+Refer to https://docs.docker.com for guides on how to write your own dockerfile.
+
+In the directory that contains your `Dockerfile`, run the following command:
+```bash
+docker build -t my-bot-name .
+```
+If all went well, your docker daemon now holds a container tagged as `my-bot-name`.
+
+### Publishing the bot
+
+1. **Create a bot**:  
+   Before you can publish your container, you will first need to create a bot on planetwars.dev.  
+   You can create a new bot by clicking the "New bot" button on your user profile page.  
+   If you have an existing bot that you wish to overwrite, you can use that instead.
+2. **Log in to the planetwars docker registry**:  
    `docker login registry.planetwars.dev`  
-3. Tag and push your bot to `registry.planetwars.dev/my-bot-name:latest`.
-4. Your bot should be up and running now! Feel free to launch a game against it to test whether all is working well.
-   Shortly, your bot should show up in the rankings.
+   Authenticate using your planetwars.dev credentials.
+3. **Tag your bot**:  
+   `docker tag my-bot-name registry.planetwars.dev/my-bot-name`
+4. **Push your bot**:  
+   `docker push registry.planetwars.dev/my-bot-name`  
+   This will upload the container to planetwars.dev, and automatically create a new bot version.
+
+That was it! If all went well, you should be able to see the new version on your bot page.
diff --git a/web/pw-server/src/styles/global.scss b/web/pw-server/src/styles/global.scss
index 2278dd4..cc853ee 100644
--- a/web/pw-server/src/styles/global.scss
+++ b/web/pw-server/src/styles/global.scss
@@ -1,4 +1,4 @@
 @forward "./variables.scss";
 @forward "./buttons.scss";
+@forward "./markdown.scss";
 @forward "./prism.scss";
-@forward "./markdown.scss"
\ No newline at end of file
diff --git a/web/pw-server/src/styles/markdown.scss b/web/pw-server/src/styles/markdown.scss
index d5ed2fa..aa9569b 100644
--- a/web/pw-server/src/styles/markdown.scss
+++ b/web/pw-server/src/styles/markdown.scss
@@ -3,8 +3,15 @@
 .markdown-body {
   color: rgb(36, 41, 47);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-  "Open Sans", "Helvetica Neue", sans-serif;
+    "Open Sans", "Helvetica Neue", sans-serif;
 
+  h2 {
+    margin-top: 1.5em;
+  }
+
+  h3 {
+    margin-top: 1.2em;
+  }
 
   a {
     color: variables.$blue-primary;
@@ -32,6 +39,6 @@
   }
 
   li {
-    padding: .5em;
+    margin-bottom: 1em;
   }
-}
\ No newline at end of file
+}
diff --git a/web/pw-server/src/styles/prism.scss b/web/pw-server/src/styles/prism.scss
index 7e5e2dd..89d0358 100644
--- a/web/pw-server/src/styles/prism.scss
+++ b/web/pw-server/src/styles/prism.scss
@@ -5,82 +5,82 @@
 
 code[class*="language-"],
 pre[class*="language-"] {
-    color: #393a34;
-    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
-    direction: ltr;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    font-size: 0.9em;
-    line-height: 1.2em;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
+  color: #393a34;
+  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  font-size: 0.9em;
+  line-height: 1.2em;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
 }
 
 pre > code[class*="language-"] {
-    font-size: 1em;
+  font-size: 1em;
 }
 
 pre[class*="language-"]::-moz-selection,
 pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection,
 code[class*="language-"] ::-moz-selection {
-    background: #b3d4fc;
+  background: #b3d4fc;
 }
 
 pre[class*="language-"]::selection,
 pre[class*="language-"] ::selection,
 code[class*="language-"]::selection,
 code[class*="language-"] ::selection {
-    background: #b3d4fc;
+  background: #b3d4fc;
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-    padding: 1em;
-    margin: 0.5em 0;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    background-color: white;
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border: 1px solid #dddddd;
+  background-color: white;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-    padding: 0.2em;
-    padding-top: 1px;
-    padding-bottom: 1px;
-    background: #f8f8f8;
-    border: 1px solid #dddddd;
+  padding: 0.2em;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  background: #f8f8f8;
+  border: 1px solid #dddddd;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    color: #999988;
-    font-style: italic;
+  color: #999988;
+  font-style: italic;
 }
 
 .token.namespace {
-    opacity: 0.7;
+  opacity: 0.7;
 }
 
 .token.string,
 .token.attr-value {
-    color: #e3116c;
+  color: #e3116c;
 }
 
 .token.punctuation,
 .token.operator {
-    color: #393a34; /* no highlight */
+  color: #393a34; /* no highlight */
 }
 
 .token.entity,
@@ -93,34 +93,34 @@ pre[class*="language-"] {
 .token.property,
 .token.regex,
 .token.inserted {
-    color: #36acaa;
+  color: #36acaa;
 }
 
 .token.atrule,
 .token.keyword,
 .token.attr-name,
 .language-autohotkey .token.selector {
-    color: #00a4db;
+  color: #00a4db;
 }
 
 .token.function,
 .token.deleted,
 .language-autohotkey .token.tag {
-    color: #9a050f;
+  color: #9a050f;
 }
 
 .token.tag,
 .token.selector,
 .language-autohotkey .token.keyword {
-    color: #00009f;
+  color: #00009f;
 }
 
 .token.important,
 .token.function,
 .token.bold {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .token.italic {
-    font-style: italic;
+  font-style: italic;
 }