feat: Implemented Nextcloud Hub changelog

This adds additional slides to the wizard for changes in the current Nextcloud Hub release and for sharing it with other users. Also modified the menu entry from "About" to "About & What's new". Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · susnux · Apr 8, 2024 · Feb 29, 2024 · Mar 27, 2024 · Apr 4, 2024
commit 1daa1bfb15c3fab13d9a124f0e333311418bbeca
diff --git a/README.md b/README.md
@@ -24,3 +24,13 @@ Make sure you have `node`, `npm` and `make` installed on your system.
 3. 🏗 To build the Javascript after you have made changes, run `npm run build`
 4. ✅ Enable the app through the app management of your Nextcloud
 5. 🎉 Partytime! Help fix [some issues](https://github.com/nextcloud/firstrunwizard/issues) and [review pull requests](https://github.com/nextcloud/firstrunwizard/pulls) 👍
+
+### Add Nextcloud Hub release notes
+
+1. Open the `src/hub-release.ts` file
+2. Adjust the `version` property to reflect the new Hub release version
+3. Adjust the `link` (e.g. blog post)
+4. Add `releaseNotes`, this is an array of strings, for localization those are translated using `t('firstrunwizard', 'YOUR MESSAGE')`
+5. Change the `videoAltText` for the Hub release animation if needed (alternative text for accessibility)
+6. Adjust the `shareSubject` which is used when users share their thoughts about the release on social media
+7. Replace `img/nextcloudHub.mp4` and `img/nextcloudHub.webm` with updated animations
@@ -36,7 +36,7 @@ The First run wizard can be customized to meet specific design goals, or to chan
 	<navigations>
 		<navigation>
 			<id>firstrunwizard_about</id>
-			<name>About</name>
+			<name>About &amp; What's new</name>
 			<icon>info.svg</icon>
 			<order>99990</order>
 			<type>settings</type>

diff --git a/img/facebook.svg b/img/facebook.svg
diff --git a/img/mastodon.svg b/img/mastodon.svg
diff --git a/img/x.svg b/img/x.svg
diff --git a/src/components/pages/HubRelease.vue b/src/components/pages/HubRelease.vue
@@ -0,0 +1,59 @@
+<!--
+  - @copyright Copyright (c) 2024 Ferdinand Thiessen <[email protected]>
+  -
+  - @author Ferdinand Thiessen <[email protected]>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<WizardPage :title="t('firstrunwizard', 'Introducing Nextcloud Hub {version}', { version: HUBRelease.version })">
+		<a :href="HUBRelease.link" :class="$style.anchor" target="_blank">
+			<video :class="$style.animation"
+				playsinline
+				autoplay
+				muted>
+				<source :src="videoWebm" type="video/webm">
+				<source :src="videoMp4" type="video/mp4">
+				{{ HUBRelease.videoAltText }}
+			</video>
+		</a>
+	</WizardPage>
+</template>
+
+<script setup lang="ts">
+import { translate as t } from '@nextcloud/l10n'
+import { imagePath } from '@nextcloud/router'
+
+import HUBRelease from '../../hub-release'
+import WizardPage from '../WizardPage.vue'
+
+const videoMp4 = imagePath('firstrunwizard', 'nextcloudHub.mp4')
+const videoWebm = imagePath('firstrunwizard', 'nextcloudHub.webm')
+</script>
+
+<style module>
+.anchor {
+	width: 100%;
+}
+
+.animation {
+	border-radius: var(--border-radius-rounded);
+	object-fit: contain;
+	width: 100%;
+}
+</style>
diff --git a/src/components/pages/SharePage.vue b/src/components/pages/SharePage.vue
@@ -0,0 +1,111 @@
+<!--
+  - @copyright Copyright (c) 2024 Ferdinand Thiessen <[email protected]>
+  -
+  - @author Ferdinand Thiessen <[email protected]>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<WizardPage :title="t('firstrunwizard', 'Find our more on the blog')">
+		<NcButton :href="HubRelease.link" target="_blank">
+			{{ t('firstrunwizard', 'Read the Nextcloud Hub {version} blog', { version: HubRelease.version}) }} ↗
+		</NcButton>
+
+		<section :class="$style.share_section">
+			<h2>{{ t('firstrunwizard', 'Share your opinion about Nextcloud Hub {version}', { version: HubRelease.version }) }}</h2>
+			<div :class="$style.share_wrapper">
+				<Card v-for="entry of shareLinks"
+					:key="entry.id"
+					:class="$style.card"
+					:href="entry.link"
+					:title="entry.id === 'mail' ? t('firstrunwizard', 'Share via email') : t('firstrunwizard', 'Share on {socialMedia}', { socialMedia: entry.name })">
+					<NcIconSvgWrapper v-if="entry.icon"
+						:svg="entry.id !== 'email' ? entry.icon : undefined"
+						:path="entry.id === 'email' ? entry.icon : undefined" />
+				</Card>
+			</div>
+		</section>
+	</WizardPage>
+</template>
+
+<script setup lang="ts">
+import { mdiEmail } from '@mdi/js'
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
+
+import facebookSvg from '../../../img/facebook.svg?raw'
+import mastodonSvg from '../../../img/mastodon.svg?raw'
+import xSvg from '../../../img/x.svg?raw'
+
+import HubRelease from '../../hub-release'
+import WizardPage from '../WizardPage.vue'
+import Card from '../Card.vue'
+
+const encodedLink = encodeURIComponent(encodeURI(HubRelease.link))
+const mailSubject = encodeURIComponent(HubRelease.shareSubject ?? t('firstrunwizard', 'Nextcloud Hub {version} release', { version: HubRelease.version }))
+const mailBody = encodeURIComponent(t('firstrunwizard', 'Read more about it on the Nextcloud Hub {version} blog', { version: HubRelease.version }) + '\n' + HubRelease.link)
+
+const shareLinks = [
+	{
+		id: 'facebook',
+		name: 'Facebook',
+		link: `https://www.facebook.com/sharer/sharer.php?u=${encodedLink}`,
+		icon: facebookSvg,
+	},
+	{
+		id: 'x',
+		name: 'X',
+		link: `https://x.com/intent/post?url=${encodedLink}&via=Nextclouders&text=${encodeURIComponent(HubRelease.shareSubject ?? '')}`,
+		icon: xSvg,
+	},
+	{
+		id: 'mastodon',
+		name: 'Mastodon',
+		link: `https://mastodon.social/share?text=${encodedLink}`,
+		icon: mastodonSvg,
+	},
+	{
+		id: 'email',
+		name: 'EMail',
+		link: `mailto:?subject=${mailSubject}&body=${mailBody}`,
+		icon: mdiEmail,
+	},
+]
+</script>
+
+<style module>
+.share_section {
+	width: 100%;
+}
+
+.share_wrapper {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: calc(var(--default-grid-baseline) * 4);
+	justify-content: space-around;
+	width: 100%;
+}
+
+.card {
+	flex: 1 1 auto;
+
+	/* Reduce padding a bit as we only have a single line of text with icon */
+	padding: calc(var(--default-grid-baseline) * 2) !important;
+}
+</style>
diff --git a/src/components/pages/WhatsNew.vue b/src/components/pages/WhatsNew.vue
@@ -0,0 +1,48 @@
+<!--
+  - @copyright Copyright (c) 2024 Ferdinand Thiessen <[email protected]>
+  -
+  - @author Ferdinand Thiessen <[email protected]>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<WizardPage :title="t('firstrunwizard', 'What is new in Nextcloud Hub {version}?', { version: HubRelease.version })">
+		<ul :class="$style.list">
+			<li v-for="(entry, index) of HubRelease.releaseNotes" :key="index" :class="$style.entry">
+				{{ entry }}
+			</li>
+		</ul>
+	</WizardPage>
+</template>
+
+<script setup lang="ts">
+import { translate as t } from '@nextcloud/l10n'
+
+import HubRelease from '../../hub-release'
+import WizardPage from '../WizardPage.vue'
+</script>
+
+<style module>
+.list {
+	margin-inline: 2em auto;
+}
+
+.entry {
+	padding-block: var(--default-grid-baseline);
+}
+</style>
diff --git a/src/pages.ts b/src/pages.ts
@@ -1,10 +1,37 @@
+/**
+ * @copyright Copyright (c) 2024 Ferdinand Thiessen <[email protected]>
+ *
+ * @author Ferdinand Thiessen <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
 import type { Component } from 'vue'
 
 import { translate as t } from '@nextcloud/l10n'
 
-import AboutNextcloud from './components/pages/AboutNextcloud.vue'
-import DeviceIntegration from './components/pages/DeviceIntegration.vue'
-import KeyNotes from './components/pages/KeyNotes.vue'
+import AboutNextcloudPage from './components/pages/AboutNextcloud.vue'
+import DeviceIntegrationPage from './components/pages/DeviceIntegration.vue'
+import HubReleasePage from './components/pages/HubRelease.vue'
+import KeyNotesPage from './components/pages/KeyNotes.vue'
+import SharePage from './components/pages/SharePage.vue'
+import WhatsNewPage from './components/pages/WhatsNew.vue'
+
+import HubRelease from './hub-release'
 
 interface IPageButton {
 	to: string
@@ -20,16 +47,19 @@ export interface IPage {
 export default [
 	{
 		id: 'key-aspects',
-		component: KeyNotes,
+		component: KeyNotesPage,
 		buttons: [{
+			to: 'whats-new',
+			label: t('firstrunwizard', 'What\'s new?'),
+		}, {
 			to: 'devices',
 			label: t('firstrunwizard', 'Nextcloud on all your devices'),
 		}],
 	},
 
 	{
 		id: 'devices',
-		component: DeviceIntegration,
+		component: DeviceIntegrationPage,
 		buttons: [{
 			to: 'about',
 			label: t('firstrunwizard', 'More about Nextcloud'),
@@ -38,11 +68,38 @@ export default [
 
 	{
 		id: 'about',
-		component: AboutNextcloud,
+		component: AboutNextcloudPage,
+		buttons: [{
+			to: 'hub-release',
+			label: t('firstrunwizard', 'Nextcloud Hub {version}', { version: HubRelease.version }),
+		}],
+	},
+
+	{
+		id: 'hub-release',
+		component: HubReleasePage,
+		buttons: [{
+			to: 'whats-new',
+			label: t('firstrunwizard', 'Read more'),
+		}],
+	},
+
+	{
+		id: 'whats-new',
+		component: WhatsNewPage,
+		buttons: [{
+			to: 'share',
+			label: t('firstrunwizard', 'Share on social media'),
+		}],
+	},
+
+	{
+		id: 'share',
+		component: SharePage,
 		buttons: [{
 			to: 'close',
 			label: t('firstrunwizard', 'Get started!'),
 		}],
-	}
+	},
 
 ] as IPage[]