mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
Merge branch 'develop'
This commit is contained in:
Sam Carlton
commit
3643699d2c
8 changed files with 291 additions and 49 deletions
167
components/all-updates-subscribe.vue
Normal file
167
components/all-updates-subscribe.vue
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
<div
|
||||
v-if="feedbackMessage === null"
|
||||
>
|
||||
<form
|
||||
class="all-updates-subscribe text-xs relative"
|
||||
@submit.prevent="trySubmit"
|
||||
>
|
||||
<label
|
||||
v-if="isFocused"
|
||||
:for="inputId"
|
||||
class="block font-medium absolute"
|
||||
style="top: -2em;"
|
||||
>Email</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<div
|
||||
v-if="isFocused"
|
||||
class="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none"
|
||||
>
|
||||
<!-- Heroicon name: mail -->
|
||||
<svg
|
||||
class="h-5 w-5 text-gray-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
:id="inputId"
|
||||
v-model="email"
|
||||
:class="inputClasslist"
|
||||
:placeholder="isFocused ? 'me@email.com' : placeholder"
|
||||
:aria-label="placeholder"
|
||||
name="all-updates-subscribe"
|
||||
style="width: 240px;"
|
||||
type="email"
|
||||
required
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="feedbackMessage"
|
||||
class="text-center p-4"
|
||||
>
|
||||
{{ feedbackMessage }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
appName: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Send me regular app updates'
|
||||
},
|
||||
notes: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
inputClassGroups: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
email: '',
|
||||
|
||||
isFocused: false,
|
||||
feedbackMessage: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputId () {
|
||||
return `all-updates-subscribe-${this._uid}`
|
||||
},
|
||||
inputClasslist () {
|
||||
const defaultClassGroups = {
|
||||
general: 'form-input block w-full rounded-md py-1',
|
||||
shadow: 'neumorphic-shadow',
|
||||
bg: 'bg-darker',
|
||||
focus: 'pl-8',
|
||||
blur: 'placeholder-white text-center border border-transparent px-3',
|
||||
}
|
||||
|
||||
const mergedClassGroups = {
|
||||
...defaultClassGroups,
|
||||
...this.inputClassGroups
|
||||
}
|
||||
|
||||
if (this.isFocused) {
|
||||
delete mergedClassGroups.blur
|
||||
} else {
|
||||
delete mergedClassGroups.focus
|
||||
}
|
||||
|
||||
return Object.values(mergedClassGroups)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async trySubmit () {
|
||||
console.log('Trying submit')
|
||||
|
||||
// Set intermediate message
|
||||
this.feedbackMessage = 'Sending...'
|
||||
|
||||
// const pagePath = $nuxt.$route.path
|
||||
|
||||
// console.log('this.$config.allUpdateSubscribe', this.$config.allUpdateSubscribe)
|
||||
|
||||
// https://stackoverflow.com/questions/51995070/post-data-to-a-google-form-with-ajax/55496118#55496118
|
||||
const actionUrl = this.$config.allUpdateSubscribe
|
||||
|
||||
axios({
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
url: actionUrl,
|
||||
data: {
|
||||
// Email
|
||||
'email': this.email
|
||||
},
|
||||
}).then( response => {
|
||||
|
||||
this.feedbackMessage = 'We\'ll keep you informed!'
|
||||
|
||||
// console.log('response', response)
|
||||
// if (response.status === 200) {
|
||||
// this.feedbackMessage = '- We\'ll keep an eye on it for you!'
|
||||
// } else {
|
||||
// this.feedbackMessage = 'Oops! Something went wrong'
|
||||
// }
|
||||
}).catch( error => {
|
||||
console.warn('error', error)
|
||||
this.feedbackMessage = 'Something went wrong. Try refreshing. '
|
||||
})
|
||||
|
||||
// .catch(error => {
|
||||
// // handle error
|
||||
// console.error('Error Subscribing -', error)
|
||||
// this.feedbackMessage = 'Oops! Something went wrong'
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -21,8 +21,7 @@
|
|||
</nav> -->
|
||||
<div class="mt-8 flex justify-center space-x-6">
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<div>Get Twitter Updates</div>
|
||||
<TwitterFollow />
|
||||
<AllUpdatesSubscribe />
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-8 text-center text-base leading-6 text-gray-400">
|
||||
|
|
@ -38,12 +37,13 @@
|
|||
import 'typeface-inter/inter.css'
|
||||
|
||||
import Navbar from '~/components/navbar.vue'
|
||||
import TwitterFollow from '~/components/twitter-follow.vue'
|
||||
// import TwitterFollow from '~/components/twitter-follow.vue'
|
||||
import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Navbar,
|
||||
TwitterFollow
|
||||
AllUpdatesSubscribe
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,6 +68,10 @@ const storeAppLists = async function (builder) {
|
|||
export default {
|
||||
target: 'static',
|
||||
|
||||
publicRuntimeConfig: {
|
||||
allUpdateSubscribe: process.env.ALL_UPDATE_SUBSCRIBE
|
||||
},
|
||||
|
||||
/*
|
||||
** Hooks
|
||||
* https://nuxtjs.org/api/configuration-hooks/
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</h2>
|
||||
|
||||
<div class="subscribe space-y-6 sm:space-x-6 mb-4">
|
||||
<EmailSubscribe
|
||||
<AllUpdatesSubscribe
|
||||
:app-name="app.name"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -47,14 +47,14 @@
|
|||
<script>
|
||||
import parseGithubDate from '~/helpers/parse-github-date'
|
||||
import LinkButton from '~/components/link-button.vue'
|
||||
import EmailSubscribe from '~/components/email-subscribe.vue'
|
||||
import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
|
||||
import appList from '~/static/app-list.json'
|
||||
// import buildAppList from '~/helpers/build-app-list'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LinkButton,
|
||||
EmailSubscribe
|
||||
AllUpdatesSubscribe
|
||||
},
|
||||
async asyncData ({ params: { slug } }) {
|
||||
|
||||
|
|
@ -78,14 +78,30 @@ export default {
|
|||
head() {
|
||||
return {
|
||||
title: `Does ${this.app.name} work on Apple Silicon?`,
|
||||
// meta: [
|
||||
// // hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
// {
|
||||
// hid: 'description',
|
||||
// name: 'description',
|
||||
// content: 'My custom description'
|
||||
// }
|
||||
// ]
|
||||
meta: [
|
||||
// hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
{
|
||||
'hid': 'description',
|
||||
'name': 'description',
|
||||
'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors`
|
||||
},
|
||||
|
||||
// Twitter Card
|
||||
{
|
||||
'hid': 'twitter:title',
|
||||
'property': 'twitter:title',
|
||||
'content': `Does ${this.app.name} work on Apple Silicon?`
|
||||
},
|
||||
{
|
||||
'hid': 'twitter:description',
|
||||
'property': 'twitter:description',
|
||||
'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors`
|
||||
},
|
||||
{
|
||||
'property': 'twitter:url',
|
||||
'content': `${process.env.URL}${this.$nuxt.$route.path}`
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,14 +56,30 @@ export default {
|
|||
head() {
|
||||
return {
|
||||
title: `Does ${this.app.name} work on Apple Silicon?`,
|
||||
// meta: [
|
||||
// // hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
// {
|
||||
// hid: 'description',
|
||||
// name: 'description',
|
||||
// content: 'My custom description'
|
||||
// }
|
||||
// ]
|
||||
meta: [
|
||||
// hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
{
|
||||
'hid': 'description',
|
||||
'name': 'description',
|
||||
'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors when installed via Homebrew. `
|
||||
},
|
||||
|
||||
// Twitter Card
|
||||
{
|
||||
'hid': 'twitter:title',
|
||||
'property': 'twitter:title',
|
||||
'content': `Does ${this.app.name} work on Apple Silicon?`
|
||||
},
|
||||
{
|
||||
'hid': 'twitter:description',
|
||||
'property': 'twitter:description',
|
||||
'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors when installed via Homebrew. `
|
||||
},
|
||||
{
|
||||
'property': 'twitter:url',
|
||||
'content': `${process.env.URL}${this.$nuxt.$route.path}`
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,12 +8,6 @@
|
|||
{{ app.text }}
|
||||
</h2>
|
||||
|
||||
<!-- <div class="subscribe space-y-6 sm:space-x-6 mb-4">
|
||||
<EmailSubscribe
|
||||
:app-name="app.name"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<ThomasCredit />
|
||||
|
||||
<div class="links space-y-6 sm:space-x-6 mb-8">
|
||||
|
|
@ -102,7 +96,6 @@
|
|||
|
||||
<script>
|
||||
import LinkButton from '~/components/link-button.vue'
|
||||
import EmailSubscribe from '~/components/email-subscribe.vue'
|
||||
import ThomasCredit from '~/components/thomas-credit.vue'
|
||||
|
||||
import gameList from '~/static/game-list.json'
|
||||
|
|
@ -112,7 +105,6 @@ import gameList from '~/static/game-list.json'
|
|||
export default {
|
||||
components: {
|
||||
LinkButton,
|
||||
EmailSubscribe,
|
||||
ThomasCredit
|
||||
},
|
||||
async asyncData ({ params: { slug } }) {
|
||||
|
|
@ -125,14 +117,30 @@ export default {
|
|||
head() {
|
||||
return {
|
||||
title: `Does ${this.app.name} work on Apple Silicon?`,
|
||||
// meta: [
|
||||
// // hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
// {
|
||||
// hid: 'description',
|
||||
// name: 'description',
|
||||
// content: 'My custom description'
|
||||
// }
|
||||
// ]
|
||||
meta: [
|
||||
// hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
{
|
||||
'hid': 'description',
|
||||
'name': 'description',
|
||||
'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors for gaming. `
|
||||
},
|
||||
|
||||
// Twitter Card
|
||||
{
|
||||
'hid': 'twitter:title',
|
||||
'property': 'twitter:title',
|
||||
'content': `Does ${this.app.name} work on Apple Silicon?`
|
||||
},
|
||||
{
|
||||
'hid': 'twitter:description',
|
||||
'property': 'twitter:description',
|
||||
'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors for gaming. `
|
||||
},
|
||||
{
|
||||
'property': 'twitter:url',
|
||||
'content': `${process.env.URL}${this.$nuxt.$route.path}`
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,16 @@
|
|||
</LinkButton>
|
||||
</div>
|
||||
|
||||
<AllUpdatesSubscribe
|
||||
:input-class-groups="{
|
||||
shadow: 'hover:neumorphic-shadow',
|
||||
bg: '',
|
||||
focus: 'bg-transparent neumorphic-shadow pl-8',
|
||||
blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
|
||||
}"
|
||||
class="my-12"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -37,6 +47,7 @@
|
|||
<script>
|
||||
import Search from '~/components/search.vue'
|
||||
import LinkButton from '~/components/link-button.vue'
|
||||
import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
|
||||
|
||||
export default {
|
||||
async asyncData () {
|
||||
|
|
@ -51,7 +62,8 @@ export default {
|
|||
},
|
||||
components: {
|
||||
Search,
|
||||
LinkButton
|
||||
LinkButton,
|
||||
AllUpdatesSubscribe
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -107,19 +107,38 @@ export default {
|
|||
},
|
||||
title () {
|
||||
return `List of ${this.category.pluralLabel || this.category.label} that work on Apple Silicon?`
|
||||
}
|
||||
},
|
||||
description () {
|
||||
return `Check the the latest reported support status of ${this.category.pluralLabel || this.category.label} on Apple Silicon and Apple M1 Processors. `
|
||||
},
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title,
|
||||
// meta: [
|
||||
// // hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
// {
|
||||
// hid: 'description',
|
||||
// name: 'description',
|
||||
// content: 'My custom description'
|
||||
// }
|
||||
// ]
|
||||
meta: [
|
||||
// hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
{
|
||||
'hid': 'description',
|
||||
'name': 'description',
|
||||
'content': this.description
|
||||
},
|
||||
|
||||
// Twitter Card
|
||||
{
|
||||
'hid': 'twitter:title',
|
||||
'property': 'twitter:title',
|
||||
'content': this.title
|
||||
},
|
||||
{
|
||||
'hid': 'twitter:description',
|
||||
'property': 'twitter:description',
|
||||
'content': this.description
|
||||
},
|
||||
{
|
||||
'property': 'twitter:url',
|
||||
'content': `${process.env.URL}${this.$nuxt.$route.path}`
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue