Add license, images and changes to README

kamicut · May 31, 2024 · 0a973f2 · 0a973f2
1 parent 60361e0
commit 0a973f2
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 5 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Marc Farra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,7 +1,6 @@
-# FIDE Players Viewer
+# ![Chess Icon](./docs/assets/board.png) FIDE Players API & Viewer
 
-View the list of FIDE players and their ratings. The source of the data is the [FIDE website](https://ratings.fide.com/download.phtml).
-Originally created for use for [Keshmat Chess School](https://keshmat.org/).
+View the list of FIDE players and their ratings. Originally created for use for [Keshmat Chess School](https://keshmat.org/).
 
 ## Architecture
 
@@ -10,7 +9,7 @@ Originally created for use for [Keshmat Chess School](https://keshmat.org/).
 - `index.html` is a simple HTML page that uses the API to display the list of players
 - The Datasette API is available at [https://fide-players.fly.dev/players](https://fide-players.fly.dev/players)
 - The HTML page is available at [https://kamicut.cc/fide-players/](https://kamicut.cc/fide-players/)
-- TODO: A Github Action to update the data daily
+- A Github Action is used to update the data weekly and deploy the API and HTML page
 
 ## Run locally
 
@@ -42,3 +41,10 @@ Open the HTML page in a browser:
 ```bash
 open index.html
 ```
+
+## Attributions
+
+- Data from [FIDE](https://ratings.fide.com/download.phtml)
+- Icons <a href="https://www.flaticon.com/free-icons/chess" title="chess icons">Chess icons created by Andrejs Kirma - Flaticon</a>
+
+# License
diff --git a/docs/assets/board.png b/docs/assets/board.png
diff --git a/index.html → docs/index.html b/index.html → docs/index.html
@@ -5,9 +5,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
   <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
-  <title>FIDE Player Selector</title>
+  <link rel="icon" type="image/png" href="./assets/board.png">
+  <title>FIDE Players Viewer</title>
 </head>
 <body class="bg-gray-100 flex items-center justify-center min-h-screen p-4 sm:p-8">
+  <div class="bg-white p-4 sm:p-8 rounded shadow-md w-full max-w-4xl">
+    <div class="flex items-center mb-4">
+      <img src="./assets/board.png" alt="Chess Icon" class="w-8 h-8 mr-2">
+      <h1 class="text-2xl font-bold">FIDE Players</h1>
+    </div>
+    <p class="mb-4">Use this tool to search for FIDE-rated chess players by name and country. Click on a player's row to view their profile on the FIDE ratings website.</p>
   <div x-data="fideSelector(player => handleClick(player))" x-init="fetchCountries()" class="bg-white p-4 sm:p-8 rounded shadow-md w-full max-w-4xl">
     <form>
       <!-- Country Selector -->
@@ -89,6 +96,8 @@
       </table>
     </div>
 
+
+
     <!-- Pagination Buttons -->
     <div class="flex justify-between mt-4">
       <button @click="fetchPrevious" :disabled="pageStack.length <= 1" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" :class="{'opacity-50': pageStack.length <= 1, 'cursor-not-allowed': pageStack.length <= 1}">
@@ -99,6 +108,19 @@
       </button>
     </div>
   </div>
+
+  <!-- Footer -->
+  <footer class="mt-8 border-t pt-4 text-center text-gray-600">
+    <p class="flex justify-center items-center space-x-4">
+      <a href="https://github.com/kamicut/fide-players" class="flex items-center text-blue-500 hover:underline">
+        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Icon" class="w-6 h-6 mr-1">
+        GitHub Repository
+      </a>
+      <!-- use unicode chess icons as separator -->
+      <a href="https://keshmat.org" class="flex items-center text-blue-500 hover:underline">🇱🇧 Keshmat Chess Academy in Lebanon</a>
+    </p>
+  </footer>
+
   <script>
     function handleClick(player) {
       const fideUrl = `https://ratings.fide.com/profile/${player.fideid}`;

diff --git a/main.js → docs/main.js b/main.js → docs/main.js