Add download modal to front page (#113)

Add download modal to front page

.gitignore

@@ -15,5 +15,6 @@ npm-debug.log
 # Compiled site
 /public/
 
-# Custom VSC workspace
+# Ignore Visual Studio Code files
 *.code-workspace
+.vscode/launch.json

package-lock.json

@@ -10961,6 +10961,11 @@
 				}
 			}
 		},
+		"sweetalert2": {
+			"version": "9.7.1",
+			"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.7.1.tgz",
+			"integrity": "sha512-ytBEyqRmZQsEFuPsYcuEXpruj9AgT32ELEBWGnioflsqbxHMMM8/Ghm1+hi4hsZ1PU7cp9TFFWe06WveGfwWKw=="
+		},
 		"table": {
 			"version": "5.4.6",
 			"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -11773,6 +11778,14 @@
 				"loader-utils": "^1.0.2"
 			}
 		},
+		"vue-sweetalert2": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-3.0.1.tgz",
+			"integrity": "sha512-njjJeqvwX/lQSVRcteafD/0VV5C66RT5awbZELfet93o71+HnYrQY4n3eU8DB8WYaSBvCKtgaoEjlk3lqHYM4w==",
+			"requires": {
+				"sweetalert2": "9.x"
+			}
+		},
 		"vue-template-compiler": {
 			"version": "2.6.11",
 			"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",

package.json

@@ -33,6 +33,7 @@
 		"iso-639-1": "^2.1.0",
 		"lodash.groupby": "^4.6.0",
 		"lodash.sortby": "^4.7.0",
-		"material-design-icons": "^3.0.1"
+		"material-design-icons": "^3.0.1",
+		"vue-sweetalert2": "^3.0.1"
 	}
 }

src/.vuepress/components/DownloadButtons.vue

@@ -14,8 +14,8 @@
 				<div class="download-button stable">
 					<span class="download-area">
 						<MaterialIcon
-							name="download-get_app download-icons"
+							name="download-cloud_download download-icons"
-							icon-name="get_app"
+							icon-name="cloud_download"
 						/>
 						<span class="download-text-stable download-text"
 							>Stable release</span
@@ -44,7 +44,7 @@
 
 <style scoped lang="stylus">
 *
-	font-family 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
+	font-family $buttonFontFamily
 
 ul
 	margin 0.625em 0 0
@@ -62,8 +62,8 @@ a.download-link
 		text-decoration none
 	.download-button
 		align-items center
-		background-color #2e84bf
+		background-color $accentColor
-		border-radius 0.3125em
+		border-radius $buttonBorderRadius
 		cursor pointer
 		display flex
 		height 3.75em
@@ -71,11 +71,11 @@ a.download-link
 		padding 0 1em
 		width 11.25em
 		&.stable
-			background-color #2e84bf
+			background-color $accentColor
 			&:hover
 				filter brightness(110%)
 		&.dev
-			background-color #476582
+			background-color $accentColorSecondary
 			&:hover
 				filter brightness(110%)
 		.download-area
@@ -87,15 +87,15 @@ a.download-link
 				color #ffffff
 				font-size 0.875em
 				max-width 2em
-			.download-get_app
+			.download-cloud_download
-				margin-left 0.188em
+				margin-left 0.2em
-				margin-right 0.25em
+				margin-right 0.5em
 			.download-bug_report
 				margin-right 0.25em
 			.download-text-stable
 				margin-right 0.375em
 			.download-text-dev
-				margin-right 0.063em
+				margin-right 0.05em
 </style>
 
 <script>

src/.vuepress/components/MaterialIcon.vue

@@ -1,11 +1,10 @@
 <template>
-	<div :class="name" class="material-holder">
+	<i v-if="iconOnly" class="material-icons">{{ iconName }}</i>
-		<i
+	<div v-else-if="legacy" :class="name" class="material-holder">
-			v-if="legacy"
+		<i :class="iconName" class="material-legacy-icons mdi"></i>
-			:class="iconName"
+	</div>
-			class="material-legacy-icons mdi"
+	<div v-else :class="name" class="material-holder">
-		></i>
+		<i class="material-icons">{{ iconName }}</i>
-		<i v-else class="material-icons">{{ iconName }}</i>
 	</div>
 </template>
 
@@ -19,6 +18,10 @@
  */
 export default {
 	props: {
+		iconOnly: {
+			type: Boolean,
+			default: false
+		},
 		legacy: {
 			type: Boolean,
 			default: false
@@ -35,36 +38,33 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="stylus" scoped>
-.material-holder {
+.material-holder
-	color: #476582;
+	color #476582
-	margin: 0;
+	margin 0
-	font-size: 0.85em;
+	font-size 0.85em
-	border-radius: 3px;
+	border-radius 3px
-	display: inline;
+	display inline
-}
 
-.material-icons {
+.material-icons
-	font-family: "Material Icons";
+	font-family 'Material Icons'
-	font-size: 1.35em;
+	font-size 1.35em
-	font-style: normal;
+	font-style normal
-	position: relative;
+	position relative
-	top: 0.2rem;
+	top 0.2rem
-	font-weight: normal;
+	font-weight normal
-	line-height: 1;
+	line-height 1
-	letter-spacing: normal;
+	letter-spacing normal
-	text-transform: none;
+	text-transform none
-	display: inline-block;
+	display inline-block
-	white-space: nowrap;
+	white-space nowrap
-	word-wrap: normal;
+	word-wrap normal
-	direction: ltr;
+	direction ltr
-	-webkit-font-feature-settings: "liga";
+	font-feature-settings 'liga'
-	-webkit-font-smoothing: antialiased;
+	-webkit-font-smoothing antialiased
-}
 
-.material-legacy-icons {
+.material-legacy-icons
-	font-family: "Material Design Icons";
+	font-family 'Material Design Icons'
-	font-size: 1.35em;
+	font-size 1.35em
-	font-style: normal;
+	font-style normal
-}
 </style>

src/.vuepress/enhanceApp.js

@@ -1,6 +1,9 @@
 import './styles/fonts.styl'
+import './styles/animations.styl'
+import 'sweetalert2/dist/sweetalert2.min.css';
 
-import { VueAgile } from 'vue-agile'
+import { VueAgile } from 'vue-agile';
+import VueSweetalert2 from 'vue-sweetalert2';
 
 export default ({
 	Vue, // the version of Vue being used in the VuePress app
@@ -9,5 +12,6 @@ export default ({
 	siteData // site metadata
 }) => {
 	// eslint-disable-next-line vue/match-component-file-name
-	Vue.component('Agile', VueAgile)
+	Vue.component('Agile', VueAgile);
+	Vue.use(VueSweetalert2);
 };

src/.vuepress/styles/index.styl

@@ -5,13 +5,19 @@ user-select()
 	-ms-user-select arguments
 	user-select arguments
 
+font-feature-settings()
+	-webkit-font-feature-settings arguments
+	-moz-font-feature-settings arguments
+	-ms-font-feature-settings arguments
+	font-feature-settings arguments
+
 // Custom block containers
 .custom-block
 	&.tip
 	&.warning
 	&.error
 	&.danger
-		border-radius 0.4rem
+		border-radius $containerBorderRadius
 	&.aside
 		color transparentify($textColor, 0.4)
 		font-size 0.9rem
@@ -19,8 +25,8 @@ user-select()
 
 // Guide container
 .guide
-	background-color $containerBackground
+	background-color $containerBackgroundColor
-	border-radius 0.4rem
+	border-radius $containerBorderRadius
 	margin 1rem 0
 	padding 0.1rem 1.5rem
 	.title
@@ -28,8 +34,8 @@ user-select()
 
 // Expander container
 .expander
-	background-color $containerBackground
+	background-color $containerBackgroundColor
-	border-radius 0.4rem
+	border-radius $containerBorderRadius
 	margin 1rem 0
 	padding 1rem 1.5rem
 	.expansion
@@ -40,7 +46,7 @@ user-select()
 
 // File tree
 .file-tree
-	font-family source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace
+	font-family $codeFontFamily
 	font-size 0.85rem
 	list-style none
 	padding 0
@@ -104,21 +110,56 @@ user-select()
 		background-color $badgeVersionColor !important
 
 // Index changes
-main.home
+.home
+	max-width $homePageWidth
 	.hero img
-		max-height 8em
+		max-height $heroImageHeight
-	.action a.nav-link.action-button.secondary
+	.action
-		border-bottom none
+		user-select none
-		border-radius 0.3125em
+		a
-		font-family 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
+			border-radius $buttonBorderRadius
+			cursor pointer
+			font-family $buttonFontFamily
 			font-size 1.125em
-		margin-top 0.5em
+			width 10.5rem
+		.material-icons
+			font-size 1.125em
+			color #ffffff
+			margin-right 2px
+	.feature
+		text-align center
+		p
+			height 5em
+		img
+			max-height 28em
+			max-width 100%
+
+// Index download modal
+.download-container
+	button
+		user-select none
+	.download-stable-button
+	.download-dev-button
+	.download-confirm-button
+		border-radius $buttonBorderRadius
+		font-family $buttonFontFamily
+		font-size 1.125em
+		height 3rem
+		width 8.5rem
+		&:focus
+			outline none
+			outline-style solid
+	.download-confirm-button
+	.download-title
+		border-bottom-width 0
+	.download-footer
+		border-top-width 0
+		padding-top 0
+	.download-dev-button
+		background-color $accentColorSecondary
 
 // Navbar Changes
 .navbar
-	img.logo
-		/* Bring navbar-name closer to navbar-logo */
-		margin-right 0
 	.site-name.can-hide
 		/* Display navbar-name even for small screens */
 		@media (max-width: $MQMobile)

src/.vuepress/styles/palette.styl

@@ -1,5 +1,6 @@
 // Colors
 $accentColor = #2E84BF
+$accentColorSecondary = #476582
 $textColor = #2c3e50
 $borderColor = #eaecef
 $codeBgColor = #282c34
@@ -8,15 +9,19 @@ $badgeTipColor = $accentColor
 $badgeWarningColor = darken(#ffe564, 35%)
 $badgeErrorColor = #DA5961
 $badgeVersionColor = #000000
-$containerBackground = #f0f4f8
+$containerBackgroundColor = #f0f4f8
-
 // Layout
 $navbarHeight = 3.6rem
 $sidebarWidth = 20rem
 $contentWidth = 46.25rem
-$homePageWidth = 60rem
+$homePageWidth = 70rem
-
+$heroImageHeight = 8rem
+$containerBorderRadius = 0.4rem
+$buttonBorderRadius = 0.25rem
 // Responsive breakpoints
 $MQNarrow = 959px
 $MQMobile = 767px
 $MQMobileNarrow = 419px
+// Fonts
+$buttonFontFamily = 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif
+$codeFontFamily = source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace

src/.vuepress/theme/components/Home.vue

@@ -5,32 +5,29 @@
 				v-if="data.heroImage"
 				:src="$withBase(data.heroImage)"
 				:alt="data.heroAlt || 'hero'"
-			>
+			/>
 
-			<h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>
+			<h1 v-if="data.heroText !== null" id="main-title">
+				{{ data.heroText || $title || "Tachiyomi" }}
+			</h1>
 
 			<p class="description">
-				{{ data.tagline || $description || 'Welcome to your VuePress site' }}
+				{{
+					data.tagline ||
+						$description ||
+						"Free and open source manga reader for Android."
+				}}
 			</p>
 
-			<p
+			<p class="action" v-if="data.actionText && data.actionLink">
-				class="action"
+				<a @click="showDownloads" class="action-button download">
-				v-if="data.actionText && data.actionLink"
+					Download ↓
-			>
+				</a>
-				<DownloadButtons
+				<NavLink class="action-button secondary" :item="actionLink" />
-				/>
-
-				<NavLink
-					class="action-button secondary"
-					:item="actionLink"
-				/>
 			</p>
 		</header>
 
-		<div
+		<div class="features" v-if="data.features && data.features.length">
-			class="features"
-			v-if="data.features && data.features.length"
-		>
 			<div
 				class="feature"
 				v-for="(feature, index) in data.features"
@@ -38,43 +35,42 @@
 			>
 				<h2>{{ feature.title }}</h2>
 				<p>{{ feature.details }}</p>
+				<img v-if="feature.image" :src="$withBase(feature.image)" />
 			</div>
 		</div>
 
-		<Content class="theme-default-content custom"/>
+		<Content class="theme-default-content custom" />
 
-		<footer
+		<footer class="footer" v-if="data.footer">
-			class="footer"
-			v-if="data.footer"
-		>
 			{{ data.footer }}
 		</footer>
 	</main>
 </template>
 
 <script>
-import NavLink from '@parent-theme/components/NavLink.vue';
+import NavLink from "@parent-theme/components/NavLink.vue";
 
-import axios from 'axios';
+import axios from "axios";
 
-const RELEASE_URL = 'https://api.github.com/repos/inorichi/tachiyomi/releases/latest';
+const RELEASE_URL =
+	"https://api.github.com/repos/inorichi/tachiyomi/releases/latest";
 
 export default {
 	components: { NavLink },
 
-	data () {
+	data() {
 		return {
-			tagName: '',
+			tagName: "",
-			browserDownloadUrl: '',
+			browserDownloadUrl: ""
-		}
+		};
 	},
 
 	computed: {
-		data () {
+		data() {
 			return this.$page.frontmatter;
 		},
 
-		actionLink () {
+		actionLink() {
 			return {
 				link: this.data.actionLink,
 				text: this.data.actionText
@@ -82,179 +78,200 @@ export default {
 		}
 	},
 
-	async mounted () {
+	methods: {
+		showDownloads() {
+			this.$swal({
+				title: "Download",
+				text: "Select which version to use",
+				confirmButtonText: "Stable",
+				confirmButtonAriaLabel: "Stable",
+				cancelButtonText: "Dev",
+				cancelButtonAriaLabel: "Dev",
+				showCloseButton: true,
+				showCancelButton: true,
+				focusConfirm: false,
+				customClass: {
+					actions: "download-actions",
+					cancelButton: "download-dev-button",
+					closeButton: "download-close-button",
+					confirmButton: "download-stable-button",
+					container: "download-container",
+					content: "download-content",
+					header: "download-header",
+					icon: "download-icon",
+					popup: "download-popup",
+					title: "download-title"
+				},
+				showClass: {
+					popup: "animated zoomIn fastest"
+				},
+				hideClass: {
+					popup: "animated zoomOut faster"
+				}
+			}).then(result => {
+				if (result.value) {
+					this.$swal({
+						title: "Downloading",
+						text: "Stable version is being downloaded.",
+						icon: "success",
+						focusConfirm: false,
+						focusCancel: false,
+						timer: 5000,
+						timerProgressBar: true,
+						customClass: {
+							confirmButton: "download-confirm-button",
+							container: "download-container"
+						},
+						showClass: {
+							popup: "animated pulse faster"
+						},
+						hideClass: {
+							popup: "animated zoomOut faster"
+						}
+					});
+					window.location.assign(
+						this.$data.browserDownloadUrl ||
+							"https://github.com/inorichi/tachiyomi/releases/latest"
+					);
+				} else if (result.dismiss === "cancel") {
+					this.$swal({
+						title: "Downloading",
+						text: "Development version is being downloaded.",
+						icon: "success",
+						focusConfirm: false,
+						focusCancel: false,
+						timer: 5000,
+						timerProgressBar: true,
+						customClass: {
+							confirmButton: "download-confirm-button",
+							container: "download-container"
+						},
+						showClass: {
+							popup: "animated pulse faster"
+						},
+						hideClass: {
+							popup: "animated zoomOut faster"
+						}
+					});
+					window.location.assign("http://tachiyomi.kanade.eu/latest");
+				}
+			});
+		}
+	},
+
+	async mounted() {
 		const { data } = await axios.get(RELEASE_URL);
 		// Maybe eventually some release has more than the apk in assets.
-		const apkAsset = data.assets.find(a => a.name.includes('.apk'));
+		const apkAsset = data.assets.find(a => a.name.includes(".apk"));
 		// Set the values.
 		this.$data.tagName = data.tag_name;
 		this.$data.browserDownloadUrl = apkAsset.browser_download_url;
 	}
-}
+};
 </script>
 
 <style lang="stylus">
-// Use Stylus to use the layout variables.
+.home
-.home {
+	display block
-	padding: $navbarHeight 2rem 0;
+	margin 0 auto
-	max-width: 960px;
+	padding $navbarHeight 2rem 0
-	margin: 0px auto;
+	.hero
-	display: block;
+		text-align center
+		img
+			display block
+			margin 3rem auto 1.5rem
+			max-width 100%
+		h1
+			font-size 3rem
+		h1
+		.description
+		.action
+			margin 1.8rem auto
+		.description
+			color lighten($textColor, 40%)
+			font-size 1.6rem
+			line-height 1.3
+			max-width 35rem
+		.action-button
+			background-color $accentColor
+			border-bottom 1px solid darken($accentColor, 10%)
+			box-sizing border-box
+			color #fff
+			display inline-block
+			padding 0.8rem 1.6rem
+			transition background-color 0.1s ease
+			&:hover
+				background-color lighten($accentColor, 10%)
+			&.secondary
+				background-color darken($borderColor, 5%)
+				border-bottom-color darken($borderColor, 15%)
+				color lighten($textColor, 25%)
+				&:hover
+					background-color lighten($borderColor, 5%)
+			svg + span
+				margin-left 0.5rem
+			svg
+				height 1em
+				width 1em
+			& + .action-button
+				margin-left 0.5rem
+	.features
+		align-content stretch
+		align-items flex-start
+		border-top 1px solid $borderColor
+		display flex
+		flex-wrap wrap
+		justify-content space-between
+		margin-top 2.5rem
+		padding 1.2rem 0
+	.feature
+		flex-basis 30%
+		flex-grow 1
+		max-width 30%
+		h2
+			border-bottom none
+			color lighten($textColor, 10%)
+			font-size 1.4rem
+			font-weight 500
+			padding-bottom 0
+		p
+			color lighten($textColor, 25%)
+	.footer
+		border-top 1px solid $borderColor
+		color lighten($textColor, 25%)
+		padding 2.5rem
+		text-align center
 
-	.hero {
+@media (max-width: $MQMobile)
-		text-align: center;
+	.home
+		.features
+			flex-direction column
+		.feature
+			max-width 100%
+			padding 0 2.5rem
+		.hero
+			.action-button + .action-button
+				margin-left 0
+				margin-top 0.5rem
 
-		img {
+@media (max-width: $MQMobileNarrow)
-			max-width: 100%;
+	.home
-			max-height: 280px;
+		padding-left 1.5rem
-			display: block;
+		padding-right 1.5rem
-			margin: 3rem auto 1.5rem;
+		.hero
-		}
+			img
-
+				margin 2rem auto 1.2rem
-		h1 {
+			h1
-			font-size: 3rem;
+				font-size 2rem
-		}
+			h1
-
+			.description
-		h1, .description, .action {
+			.action
-			margin: 1.8rem auto;
+				margin 1.2rem auto
-		}
+			.description
-
+				font-size 1.2rem
-		.description {
+			.action-button
-			max-width: 35rem;
+				font-size 1rem
-			font-size: 1.6rem;
+				padding 0.6rem 1.2rem
-			line-height: 1.3;
+			.feature h2
-			color: lighten($textColor, 40%);
+				font-size 1.25rem
-		}
-
-		.action-button {
-			display: inline-block;
-			font-size: 1.2rem;
-			color: #fff;
-			background-color: $accentColor;
-			padding: 0.8rem 1.6rem;
-			border-radius: 4px;
-			transition: background-color .1s ease;
-			box-sizing: border-box;
-			border-bottom: 1px solid darken($accentColor, 10%);
-
-			&:hover {
-				background-color: lighten($accentColor, 10%);
-			}
-
-			&.secondary {
-				background-color: darken($borderColor, 5%);
-				color: lighten($textColor, 25%);
-				border-bottom-color: darken($borderColor, 15%);
-
-				&:hover {
-					background-color: lighten($borderColor, 5%);
-				}
-			}
-
-			svg + span {
-				margin-left: 0.5rem;
-			}
-
-			svg {
-				height: 1em;
-				width: 1em;
-			}
-
-			& + .action-button {
-				margin-left: 0.5rem;
-			}
-		}
-	}
-
-	.features {
-		border-top: 1px solid $borderColor;
-		padding: 1.2rem 0;
-		margin-top: 2.5rem;
-		display: flex;
-		flex-wrap: wrap;
-		align-items: flex-start;
-		align-content: stretch;
-		justify-content: space-between;
-	}
-
-	.feature {
-		flex-grow: 1;
-		flex-basis: 30%;
-		max-width: 30%;
-
-		h2 {
-			font-size: 1.4rem;
-			font-weight: 500;
-			border-bottom: none;
-			padding-bottom: 0;
-			color: lighten($textColor, 10%);
-		}
-
-		p {
-			color: lighten($textColor, 25%);
-		}
-	}
-
-	.footer {
-		padding: 2.5rem;
-		border-top: 1px solid $borderColor;
-		text-align: center;
-		color: lighten($textColor, 25%);
-	}
-}
-
-@media (max-width: $MQMobile) {
-	.home {
-		.features {
-			flex-direction: column;
-		}
-
-		.feature {
-			max-width: 100%;
-			padding: 0 2.5rem;
-		}
-
-		.hero {
-			.action-button + .action-button {
-				margin-left: 0;
-				margin-top: 0.5rem;
-			}
-		}
-	}
-}
-
-@media (max-width: $MQMobileNarrow) {
-	.home {
-		padding-left: 1.5rem;
-		padding-right: 1.5rem;
-
-		.hero {
-			img {
-				max-height: 210px;
-				margin: 2rem auto 1.2rem;
-			}
-
-			h1 {
-				font-size: 2rem;
-			}
-
-			h1, .description, .action {
-				margin: 1.2rem auto;
-			}
-
-			.description {
-				font-size: 1.2rem;
-			}
-
-			.action-button {
-				font-size: 1rem;
-				padding: 0.6rem 1.2rem;
-			}
-
-			.feature h2 {
-				font-size: 1.25rem;
-			}
-		}
-	}
-}
 </style>

src/README.md

@@ -1,17 +1,18 @@
 ---
 home: true
 lang: en-US
-heroImage: /assets/media/hero.png
+heroImage: /assets/media/logo.svg
 actionText: Get started →
 actionLink: /help/guides/getting-started
 features:
     - title: Extensions
-      details: Online reading from sources such as KissManga, MangaDex and more.
+      details: Online reading from sources such as MangaDex, KissManga and hundreds more.
+      image: /assets/media/my-library.png
     - title: Tracking
-      details: MyAnimeList, AniList, Kitsu and Shikimori support.
+      details: Automatically keep track of your manga with MyAnimeList, AniList, Kitsu and Shikimori.
+      image: /assets/media/catalogues.png
     - title: Configurable
       details: Reader with multiple viewers, reading directions and other settings.
+      image: /assets/media/manga.png
 footer: Apache Licensed | Copyright © 2015-present Javier Tomás
 ---
-
-![screens](/assets/media/screens.png)