Merge pull request #92 from Eisvana/dev

Add base changing; add pagination; improve semantics

README.md

@@ -19,3 +19,65 @@ npm run dev
 ```sh
 npm run build
 ```
+
+## How to Adapt for Other Civs
+
+> [!NOTE]
+> If you want to use this for your own civ, you should be somewhat familiar with coding. You don't need to understand a lot, but you should be comfortable with Git and GitHub to some degree.
+>
+> You should also have a Discord server in order to receive the census submissions and renewal requests.
+
+> [!IMPORTANT]
+> You should **not** do any of this on mobile. Use a computer of some kind.
+
+First, you should [fork the repo](https://github.com/Eisvana/Eisvana-Census/fork) into your own account.
+
+### Things to Change
+
+#### Site-Breaking Changes
+
+In GitHub, open the repository settings, go to `Secrets and variables -> Actions`. You need to set 3 secrets:
+
+1. `DISCORD_ANNOUNCEMENT_WEBHOOK`: This should be a Discord webhook URL to the channel where an announcement will be posted on January 1st that the census has reset.
+2. `DISCORD_FORM_WEBHOOK`: This should be a Discord webhook URL to the channel where census form submissions will be sent to. Ideally, this should not be a public channel.
+3. `DISCORD_RENEW_WEBHOOK`: This should be a Discord webhook URL to the channel where census renewal requests will be sent to. Ideally, this should not be a public channel.
+
+The first webhook is optional if you don't want any announcement, but the site won't function properly without the other two!
+
+You can edit the code directly on GitHub by hitting `.` on your keyboard while on the main page of the repo.
+
+Open the `vite.config.ts` file at the root of the project. Uncomment the `base` property, and set it to the name of your repo (should still be `Eisvana-Census` if you didn't change it when you forked it).
+
+Go to the `.github/workflows/announcements.yml` file. You can adjust the sentences after the `message='` to fit your liking. Your site will be deployed under `<your-username>.github.io/<repo-name>`.
+
+Go into the `public` directory and delete the `CNAME` file. Otherwise the site cannot be deployed.
+
+Go to `src/variables/civilized.ts` and set the variable to the name of your civ.
+
+Go to `src/variables/regiont.ts` and change the keys (the left-hand side of the object) to the region glyphs of your civs, and the values (right-hand side) to the corresponding name of the region.
+
+That should cover the inital setup.
+
+#### Misc Changes
+
+Use the search tab in the editor to search for `Eisvana`. Replace all ocurrences with your civ's name.
+
+Use the search tab again to search for `Lenni`. **Don't** change the name in the `.yml` files, that will break the build process! Change the name in all other files to the one of your civ's census manager.
+
+### Deploying the Page
+
+Commit and push your changes to GitHub by clicking on the "Source Control" tab in the editor, specifying a commit message and then clicking "Commit and Push".
+
+Go back to the GitHub repo itself (not the code editor).
+
+Go to the repository settings and navigate to the `Pages` tab.
+
+Under `Branch`, select `gh-pages` and click `Save`.
+
+If you click on the `Actions` tab, you should be able to see your site being built and deployed.
+
+It should now be available under `<your-username>.github.io/<repo-name>`.
+
+### When Problems Arise
+
+You can find me (Lenni) in the Eisvana [Discord server](https://discord.gg/Czu3VvjBaa). Just send me a message and I'll take a look :)

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "eisvana-census-renew",
+  "name": "eisvana-census",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -13,18 +13,18 @@
     "@picocss/pico": "^2.0.6",
     "parse-mediawiki-template": "^0.1.0",
     "pinia": "^2.1.7",
-    "sass": "^1.72.0",
+    "sass": "^1.75.0",
     "simple-image-compressor": "^1.8.0",
     "sortablejs": "^1.15.2",
     "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@types/node": "^20.11.28",
+    "@types/node": "^20.12.7",
     "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-vue": "^5.0.4",
     "prettier": "^3.2.5",
-    "typescript": "^5.4.4",
+    "typescript": "^5.4.5",
     "vite": "^5.2.8",
-    "vue-tsc": "^2.0.11"
+    "vue-tsc": "^2.0.13"
   }
 }

src/App.vue

@@ -65,5 +65,9 @@ const hasSearchParams = Boolean(window.location.search);
 .navigation-items {
   display: flex;
   flex-direction: column;
+
+  &::before {
+    content: unset;
+  }
 }
 </style>

src/components/ConfirmDialog.vue

@@ -33,7 +33,7 @@ defineExpose({
             class="close"
           ></button>
         </form>
-        <p class="confirm-heading">Confirm renewal of {{ userName }}?</p>
+        <p class="text-center">Confirm renewal of {{ userName }}?</p>
       </header>
       <form
         method="dialog"
@@ -58,10 +58,6 @@ defineExpose({
   }
 }
 
-.confirm-heading {
-  text-align: center;
-}
-
 .close-button-wrapper {
   display: inline;
   margin-bottom: 0;