🚸 Show release notes after update

.gitignore

@@ -73,6 +73,7 @@ dist
 
 # Typescript output
 build
+tsconfig.tsbuildinfo
 
 # vuepress build output
 .vuepress/dist

client/components/Modal/Changelog.vue

@@ -0,0 +1,117 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <Modal class="changelog-modal" @close="close">
+    <h1>Successfully updated to v{{ version }} 🎉</h1>
+    <p>Your WebCrate instance just performed an update and is now on the latest version! The best way to stay up to date about the latest releases is to <a href="https://github.com/WebCrateApp/webcrate">watch the repository</a> on GitHub.</p>
+    <div v-if="release" class="release-notes">
+      <h2>Release notes</h2>
+      <p>Here are the release notes for <a :href="`https://github.com/WebCrateApp/webcrate/releases/tag/v${ version }`">v{{ version }}</a>. You can also view them on <a :href="`https://github.com/WebCrateApp/webcrate/releases`">GitHub</a>.</p>
+      <div class="release" v-html="release.html"></div>
+    </div>
+    <p v-else class="wrapper">
+      Couldn't grab release notes automatically. You need to view them on <a :href="`https://github.com/WebCrateApp/webcrate/releases`">GitHub</a> directly.
+    </p>
+    <div class="wrapper release">
+      <h3>Help improve WebCrate!</h3>
+      <p>As WebCrate is still very early in its development, I'm currently looking to gather some feedback on the app in order to improve it and decide what features to focus on next. If this sounds interesting to you, hit me up on <a href="https://twitter.com/BetaHuhn">Twitter</a> or shoot me an email at <a href="mailto:hi@webcrate.app">hi@webcrate.app</a>, I would love to talk to you!</p>
+    </div>
+  </Modal>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			canClose: false,
+			isOpen: false,
+			release: undefined
+		}
+	},
+	async fetch() {
+		const data = await this.$api.getGitHubRelease(`v${ this.version }`)
+
+		console.log(data)
+		this.release = data
+	},
+	computed: {
+		version() {
+			return this.$version()
+		}
+	},
+	created() {
+		// Prevent other old click events from closing modal
+		setTimeout(() => {
+			this.canClose = true
+		}, 200)
+	},
+	methods: {
+		copy() {
+			this.$clipboard(this.code)
+			this.$toast.success('Copied to clipboard!')
+		},
+		async close() {
+			if (!this.isOpen && this.canClose) {
+				await this.$api.sawConfig()
+				this.$modal.hide()
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.changelog-modal {
+		& h1 {
+			font-size: 1.4rem;
+			margin-bottom: 1rem;
+		}
+
+		& a {
+			color: var(--text-dark);
+			text-decoration: underline;
+		}
+	}
+
+	h2 {
+		font-size: 1.1rem;
+		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
+		font-weight: 550;
+	}
+
+	.release-notes {
+		margin-top: 1rem;
+		margin-bottom: 1rem;
+	}
+
+	.wrapper {
+		background: var(--background-2nd);
+		padding: 1rem;
+		border-radius: var(--border-radius);
+		margin-top: 1rem;
+	}
+
+	.release ::v-deep {
+		font-size: 0.95rem;
+
+		h3 {
+			font-size: 1rem;
+			margin-top: 0.5rem;
+			margin-bottom: 0.5rem;
+
+			&:first-child {
+				margin-top: 0;
+			}
+		}
+
+		a {
+			color: var(--text-dark);
+		}
+
+		code {
+			background: var(--grey);
+			padding: 0.2rem;
+			border-radius: 5px;
+		}
+	}
+</style>

client/components/Modal/Wrapper.vue

@@ -9,6 +9,7 @@
     <ModalCopyOutput v-else-if="showModal && showModal.copyOutput" />
     <ModalShareLink v-if="showModal && showModal.shareLink" />
     <ModalBookmarklet v-if="showModal && showModal.bookmarklet" />
+    <ModalChangelog v-if="showModal && showModal.changelog" />
 
     <ConfirmModal />
   </div>

client/layouts/sidebar.vue

@@ -34,7 +34,11 @@ export default {
 	created() {
 		this.isPublic = this.$route.path.includes('public')
 
-		this.$store.dispatch('GET_CONFIG')
+		this.$store.dispatch('GET_CONFIG').then((config) => {
+			if (config && config.didUpdate) {
+				this.$modal.show('changelog')
+			}
+		})
 
 		if (!this.isPublic) {
 			this.loadingCrates = true

client/plugins/api.js

@@ -17,6 +17,26 @@ class API {
 		return res.data
 	}
 
+	async sawConfig() {
+		if (this.publicMode) return undefined
+
+		const { data: res } = await this.http.get(`/config/saw-update`)
+
+		return res.data
+	}
+
+	async getGitHubRelease(version) {
+		const { data: release } = await this.axios.get(`https://api.github.com/repos/WebCrateApp/webcrate/releases/tags/${ version }`)
+
+		const body = release.body.split('.tar.gz))')[1]
+
+		const { data: html } = await this.axios.post(`https://api.github.com/markdown`, {
+			text: body
+		})
+
+		return { ...release, body, html }
+	}
+
 	async setConfig(config) {
 		if (this.publicMode) return undefined
 

client/plugins/helpers.js

@@ -84,4 +84,7 @@ export default ({ env, store, app }, inject) => {
 
 		app.router.push(newPath)
 	})
+
+	console.log('Looks like you are pretty curious, check out the code here: https://github.com/WebCrateApp/webcrate')
+	console.log('Have a great day! 👨‍💻🦄')
 }

client/store/index.js

@@ -106,6 +106,8 @@ export const actions = {
 		const config = await this.$api.getConfig()
 
 		commit('SET_CONFIG', config)
+
+		return config
 	},
 	async ADD_LINK({ commit }, { url, crate }) {
 		const link = await this.$api.addLinkToCrate(url, crate)

client/store/modal.js

@@ -1,4 +1,4 @@
-const modals = [ 'search', 'addLink', 'addCrate', 'addExternalCrate', 'linkDetails', 'confirm', 'copyOutput', 'changeName', 'shareLink', 'bookmarklet' ]
+const modals = [ 'search', 'addLink', 'addCrate', 'addExternalCrate', 'linkDetails', 'confirm', 'copyOutput', 'changeName', 'shareLink', 'bookmarklet', 'changelog' ]
 
 export const state = () => ({
 	show: undefined,

server/models/config.ts

@@ -1,12 +1,19 @@
 import db from '../service/db'
+import pkg from '../../package.json'
 
 const Base = db.Base('config')
 
 const get = async () => {
 	const name = await Base.get('name')
+	const configVersion = await Base.get('version')
+
+	const version = pkg.version
+	const storedVersion = configVersion?.value
 
 	return {
-		name: name?.value
+		name: name?.value,
+		version: version,
+		didUpdate: storedVersion !== version
 	}
 }
 

server/router/api/config.ts

@@ -34,4 +34,18 @@ router.get('/', async (_req: express.Request, res: express.Response, next: expre
 	}
 })
 
+router.get('/saw-update', async (_req: express.Request, res: express.Response, next: express.NextFunction) => {
+	try {
+		const config = await Config.get()
+
+		// Update stored version with current one
+		await Config.set({ version: config.version })
+
+		log.debug(config.version)
+		res.ok()
+	} catch (err) {
+		return next(err)
+	}
+})
+
 export default router

server/tsconfig.json

@@ -12,5 +12,8 @@
     "strict": true, /* Enable all strict type-checking options. */
     "resolveJsonModule": true,
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-  }
+  },
+  "references": [      // this is how we declare a dependency from
+    { "path": "../" }  // this project to the one at the root dir`
+  ]
 }

tsconfig.json

@@ -12,7 +12,6 @@
     "allowJs": true,
     "sourceMap": true,
     "strict": true,
-    "noEmit": true,
     "experimentalDecorators": true,
     "baseUrl": ".",
     "paths": {
@@ -27,11 +26,17 @@
       "@nuxt/types",
       "@nuxtjs/axios",
       "@types/node"
-    ]
+    ],
+    "resolveJsonModule": true,
+    "composite": true
   },
   "exclude": [
     "node_modules",
     ".nuxt",
     "dist"
+  ],
+  "files": [
+    "src/**/*.ts",
+    "package.json"
   ]
 }