feat(ui): add changelog view

.drone.yml

@@ -6,9 +6,10 @@ steps:
     image: node
     commands:
       - make build-view
+      - make git-json
     volumes:
-    - name: cache
-      path: /drone/src/view/node_modules
+      - name: cache
+        path: /drone/src/view/node_modules
   - name: deploy
     image: alpacadb/docker-lftp
     environment:

Makefile

@@ -1,15 +1,18 @@
 MAKEFLAGS += -j2
 
-export PORT = 8080
+dev: export PORT = 8080
 
 dev: dev-server dev-view
 
 dev-server:
-	cd server && gin run main.go
+	cd server && gin -p $$PORT run main.go
 dev-view:
 	cd view && npm run dev
 	
 build: build-view
 
 build-view:
-	cd view && npm i && npm run build
+	cd view && npm i && npm run build
+
+git-json:
+	echo "[$$(git log --pretty=format:'{"id":"%h","subject":"%s","date":"%cD"},')]" | sed "s/,]/]/g" > view/public/build/commits.json

view/src/App.svelte

@@ -3,6 +3,7 @@
 	import * as routes from "./routes";
 	import ToastWrapper from "./components/Toast/ToastWrapper.svelte";
 	import { route as currentRoute } from "./stores";
+	import Changelog from "components/Changelog";
 </script>
 
 {#if $currentRoute.startsWith("editor")}

view/src/components/Changelog/Commit.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let commit: Commit;
+</script>
+
+<p>
+  {commit.subject}
+</p>

view/src/routes/changelog.svelte

@@ -0,0 +1,65 @@
+<script>
+  import Commit from "components/Changelog/Commit.svelte";
+  import { commitStore, route } from "stores";
+
+  $: if ($commitStore.length) {
+    localStorage.setItem(
+      "currentCommit",
+      $commitStore[$commitStore.length - 1].id
+    );
+  }
+
+  $: commits =
+    $commitStore.length &&
+    $commitStore
+      .filter((commit) => {
+        return (
+          commit.subject.startsWith("feat") &&
+          commit.subject.replace("feat:", "").length > 3
+        );
+      })
+      .map((commit) => {
+        commit.subject = commit.subject.replace("feat:", "").trim();
+        commit.date = new Date(commit.date);
+        return commit;
+      });
+
+  let day = $commitStore.length && new Date($commitStore[0].date).getDay();
+
+  const checkDate = (commit) => {
+    console.log(commit);
+
+    const d = new Date(commit.date);
+    if (d.getDay() != day) {
+      day = d.getDay();
+      return true;
+    }
+    return false;
+  };
+
+  const prettyDate = (date) => {
+    return new Date(date).toLocaleDateString();
+  };
+</script>
+
+<main>
+  <button on:click={() => ($route = "list")}>exit</button>
+  <h1>Changelog</h1>
+
+  {#each commits as commit}
+    {#if checkDate(commit)}
+      <h3>
+        {prettyDate(commit.date)}
+      </h3>
+    {/if}
+
+    <Commit {commit} />
+  {/each}
+</main>
+
+<style>
+  main {
+    max-width: 640px;
+    margin: 0 auto;
+  }
+</style>

view/src/routes/index.ts

@@ -1,2 +1,3 @@
 export { default as main } from "./main.svelte"
-export { default as list } from "./list.svelte"
+export { default as list } from "./list.svelte"
+export { default as changelog } from "./changelog.svelte"

view/src/stores/commits.ts

@@ -0,0 +1,8 @@
+import { writable } from "svelte/store";
+
+
+
+const store = writable<Commit[]>([]);
+
+
+export default store;

view/src/stores/index.ts

@@ -1,3 +1,4 @@
 import * as images from "./images";
 export { images }
-export { default as route } from "./route";
+export { default as route } from "./route";
+export { default as commitStore } from "./commits";

view/src/types.d.ts

@@ -11,6 +11,12 @@ interface Image {
   data: ArrayBuffer
 }
 
+interface Commit {
+  id: string,
+  subject: string,
+  date: Date
+}
+
 declare module "*.frag" {
   const content: string;
   export default content;