Cleaup of components and styling fixes for hook
This commit is contained in:
parent
b600665ba0
commit
20be481c1c
17 changed files with 1136 additions and 1026 deletions
|
@ -1,5 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<section class="ecosystem">
|
<section class="ecosystem">
|
||||||
<aside class="ecosystem__submodules">
|
<aside class="ecosystem__submodules">
|
||||||
<div class="ecosystem__submodule chainquery">
|
<div class="ecosystem__submodule chainquery">
|
||||||
|
@ -224,7 +223,6 @@
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -3,32 +3,34 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ['path'],
|
props: ["path"],
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
githubUrl: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
name: 'EditLink',
|
|
||||||
methods: {
|
|
||||||
updateUrl () {
|
|
||||||
this.githubUrl = 'https://github.com/'+ this.$site.themeConfig.repo + '/edit/' + this.$site.themeConfig.docsBranch;
|
|
||||||
|
|
||||||
if(this.$page.path == '/') {
|
data () {
|
||||||
this.githubUrl = this.githubUrl + '/README.md';
|
return {
|
||||||
} else {
|
githubUrl: ""
|
||||||
this.githubUrl = this.githubUrl + this.$page.path.replace('.html', '.md');
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
|
||||||
created () {
|
methods: {
|
||||||
this.updateUrl();
|
updateUrl () {
|
||||||
},
|
this.githubUrl = `https://github.com/${this.$site.themeConfig.repo}/edit/${this.$site.themeConfig.docsBranch}`;
|
||||||
watch: {
|
|
||||||
path () {
|
if (this.$page.path === "/") this.githubUrl = `${this.githubUrl}/README.md`;
|
||||||
|
else this.githubUrl = `${this.githubUrl}${this.$page.path.replace(".html", ".md")}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
this.updateUrl();
|
this.updateUrl();
|
||||||
}
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
path () {
|
||||||
|
this.updateUrl();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
name: "EditLink"
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,51 +1,56 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="email-subscribe" class="newsletter-cta">
|
<div id="email-subscribe" class="newsletter-cta">
|
||||||
<h3 class="newsletter-cta__title">Don't Miss A Bit - Subscribe For LBRY Technical Updates</h3>
|
<h3 class="newsletter-cta__title">Don't Miss A Bit - Subscribe For LBRY Technical Updates</h3>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<input type="text" class="newsletter-cta__input" v-model="emailAddress" placeholder="you@domain.tld">
|
<input type="text" class="newsletter-cta__input" v-model="emailAddress" placeholder="you@domain.tld">
|
||||||
<a class="newsletter-cta__submit" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a>
|
<a class="newsletter-cta__submit" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p v-if="message" class="newsletter-cta__message">{{ message }}</p>
|
<p v-if="message" class="newsletter-cta__message">{{ message }}</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
emailAddress: '',
|
emailAddress: "",
|
||||||
message: ''
|
message: ""
|
||||||
}
|
|
||||||
},
|
|
||||||
name: 'EmailSubscribe',
|
|
||||||
methods: {
|
|
||||||
subscribe () {
|
|
||||||
var component = this;
|
|
||||||
this.message = '';
|
|
||||||
if(!this.validateEmail(this.emailAddress)) {
|
|
||||||
this.message = 'Your email is not valid!';
|
|
||||||
} else {
|
|
||||||
this.$http.post('//api.lbry.io/list/subscribe', {
|
|
||||||
email: this.emailAddress,
|
|
||||||
tag: 'developer'
|
|
||||||
}, {
|
|
||||||
emulateJSON: true
|
|
||||||
}).then(function(response) {
|
|
||||||
component.email = '';
|
|
||||||
component.message = 'Thank you for subscribing!';
|
|
||||||
}, function(response) {
|
|
||||||
if(response.status == 409) {
|
|
||||||
component.message = 'You have already subscribed to our mailing list!';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
validateEmail (email) {
|
|
||||||
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
methods: {
|
||||||
return re.test(String(email).toLowerCase());
|
subscribe () {
|
||||||
}
|
let component = this;
|
||||||
}
|
component.message = "";
|
||||||
};
|
|
||||||
|
if (!component.validateEmail(component.emailAddress)) {
|
||||||
|
component.message = "Your email is not valid!";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
component.$http.post("//api.lbry.io/list/subscribe", {
|
||||||
|
email: component.emailAddress,
|
||||||
|
tag: "developer"
|
||||||
|
}, {
|
||||||
|
emulateJSON: true
|
||||||
|
}).then(response => {
|
||||||
|
component.email = "";
|
||||||
|
component.message = "Thank you for subscribing!";
|
||||||
|
}, response => {
|
||||||
|
if (response.status === 409) component.message = "You have already subscribed to our mailing list!";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
validateEmail (email) {
|
||||||
|
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||||
|
return re.test(String(email).toLowerCase());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
name: "EmailSubscribe"
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
@ -1,72 +1,104 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="email-subscribe-large">
|
<div id="email-subscribe-large" class="newsletter-standalone">
|
||||||
<input type="text" class="input" v-model="emailAddress" placeholder="your@email.com">
|
<input type="text" class="newsletter-standalone__input" v-model="emailAddress" placeholder="your@domain.tld"/><br/>
|
||||||
<br/>
|
<a class="newsletter-standalone__submit" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a><br/>
|
||||||
<br/>
|
|
||||||
<a class="__button-black" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a>
|
<p v-if="message" class="newsletter-standalone__message">{{ message }}</p>
|
||||||
<p v-if="message" class="message">{{ message }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
emailAddress: '',
|
emailAddress: "",
|
||||||
message: ''
|
message: ""
|
||||||
}
|
|
||||||
},
|
|
||||||
name: 'EmailSubscribe',
|
|
||||||
methods: {
|
|
||||||
subscribe () {
|
|
||||||
var component = this;
|
|
||||||
this.message = '';
|
|
||||||
if(!this.validateEmail(this.emailAddress)) {
|
|
||||||
this.message = 'Your email is not valid!';
|
|
||||||
} else {
|
|
||||||
this.$http.post('//api.lbry.io/list/subscribe', {
|
|
||||||
email: this.emailAddress,
|
|
||||||
tag: 'developer'
|
|
||||||
}, {
|
|
||||||
emulateJSON: true
|
|
||||||
}).then(function(response) {
|
|
||||||
component.email = '';
|
|
||||||
component.message = 'Thank you for subscribing!';
|
|
||||||
}, function(response) {
|
|
||||||
if(response.status == 409) {
|
|
||||||
component.message = 'You have already subscribed to our mailing list!';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
validateEmail (email) {
|
|
||||||
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
methods: {
|
||||||
return re.test(String(email).toLowerCase());
|
subscribe () {
|
||||||
}
|
let component = this;
|
||||||
}
|
component.message = "";
|
||||||
};
|
|
||||||
|
if (!component.validateEmail(component.emailAddress)) {
|
||||||
|
component.message = "Your email is not valid!";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
component.$http.post("//api.lbry.io/list/subscribe", {
|
||||||
|
email: component.emailAddress,
|
||||||
|
tag: "developer"
|
||||||
|
}, {
|
||||||
|
emulateJSON: true
|
||||||
|
}).then(response => {
|
||||||
|
component.email = "";
|
||||||
|
component.message = "Thank you for subscribing!";
|
||||||
|
}, response => {
|
||||||
|
if (response.status === 409) component.message = "You have already subscribed to our mailing list!";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
validateEmail (email) {
|
||||||
|
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||||
|
return re.test(String(email).toLowerCase());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
name: "EmailSubscribe"
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../scss/init/colors";
|
||||||
|
@import "../scss/init/extends";
|
||||||
|
@import "../scss/init/mixins";
|
||||||
|
|
||||||
#email-subscribe-large {
|
.newsletter-standalone__input,
|
||||||
.title {
|
.newsletter-standalone__submit {
|
||||||
margin-bottom: 0.5rem;
|
@extend .__button-padding-horizontal;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
.input {
|
|
||||||
border: 1px solid black;
|
|
||||||
padding: 0.65rem;
|
|
||||||
background: white;
|
|
||||||
margin-right: 1rem;
|
|
||||||
width: 18rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
.__button-black {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
.message {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.newsletter-standalone__input {
|
||||||
|
background-color: $white;
|
||||||
|
font-size: 1rem;
|
||||||
|
height: 38px;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
transition: border 0.2s;
|
||||||
|
|
||||||
|
@media (min-width: 601px) {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:focus) {
|
||||||
|
border-color: $black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: mix($black, $teal, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter-standalone__submit {
|
||||||
|
@extend .__button-basic;
|
||||||
|
@extend .__button-padding-vertical;
|
||||||
|
color: $white;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&:not(:hover) {
|
||||||
|
background-color: $black;
|
||||||
|
border-color: $black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $teal;
|
||||||
|
border-color: mix($black, $teal, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<ul class="feature-links">
|
<ul class="feature-links">
|
||||||
<li v-for="featureLink in this.$page.frontmatter.featureLinks" v-on:click="visit(featureLink.href)" class="feature-link">
|
<li v-for="featureLink in this.$page.frontmatter.featureLinks" v-on:click="visit(featureLink.href)" class="feature-link">
|
||||||
<div>
|
<div>
|
||||||
|
@ -12,16 +11,14 @@
|
||||||
</figure>
|
</figure>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {}
|
return {}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
visit (slug) {
|
visit (slug) {
|
||||||
window.open(slug, "_blank");
|
window.open(slug, "_blank");
|
||||||
|
|
|
@ -73,77 +73,80 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
events: [],
|
events: [],
|
||||||
updateInterval: {},
|
updateInterval: {},
|
||||||
lastUpdated: new Date()
|
lastUpdated: new Date()
|
||||||
}
|
|
||||||
},
|
|
||||||
name: 'GithubFeed',
|
|
||||||
mounted () {
|
|
||||||
|
|
||||||
this.updateFeed();
|
|
||||||
|
|
||||||
this.updateInterval = setInterval(this.updateFeed, 60*1000);
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateFeed () {
|
|
||||||
|
|
||||||
var component = this;
|
|
||||||
|
|
||||||
component.$http.get('https://lbry.tech/github-feed').then(function(response) {
|
|
||||||
component.events = response.body;
|
|
||||||
});
|
|
||||||
|
|
||||||
component.lastUpdated = new Date();
|
|
||||||
|
|
||||||
},
|
|
||||||
refToBranch (ref) {
|
|
||||||
|
|
||||||
return ref.replace('refs/heads/','');
|
|
||||||
|
|
||||||
},
|
|
||||||
formatDate (date) {
|
|
||||||
|
|
||||||
return date.toLocaleString('en-US');
|
|
||||||
|
|
||||||
},
|
|
||||||
generateGithubUrl (type, event) {
|
|
||||||
|
|
||||||
switch(type) {
|
|
||||||
case 'actor':
|
|
||||||
return 'https://github.com/' + event.actor.display_login;
|
|
||||||
break;
|
|
||||||
case 'comment':
|
|
||||||
return event.payload.comment.html_url;
|
|
||||||
break;
|
|
||||||
case 'repo':
|
|
||||||
return 'https://github.com/' + event.repo.name;
|
|
||||||
break;
|
|
||||||
case 'forkee':
|
|
||||||
return 'https://github.com/' + event.payload.forkee.full_name;
|
|
||||||
break;
|
|
||||||
case 'issue':
|
|
||||||
return event.payload.issue.html_url;
|
|
||||||
break;
|
|
||||||
case 'pull_request':
|
|
||||||
return event.payload.pull_request.html_url;
|
|
||||||
break;
|
|
||||||
case 'release':
|
|
||||||
return event.payload.release.html_url;
|
|
||||||
break;
|
|
||||||
case 'push':
|
|
||||||
return 'https://github.com/' + event.repo.name + '/tree/' + event.payload.ref.replace('refs/heads/','');
|
|
||||||
break;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
}
|
mounted () {
|
||||||
}
|
this.updateFeed();
|
||||||
};
|
this.updateInterval = setInterval(this.updateFeed, 60*1000);
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
updateFeed () {
|
||||||
|
const component = this;
|
||||||
|
|
||||||
|
component.$http.get("https://lbry.tech/github-feed").then(response => {
|
||||||
|
component.events = response.body;
|
||||||
|
}).catch(error => {
|
||||||
|
console.log("Unable to display GitHub feed:\n", error);
|
||||||
|
});
|
||||||
|
|
||||||
|
component.lastUpdated = new Date();
|
||||||
|
},
|
||||||
|
|
||||||
|
refToBranch (ref) {
|
||||||
|
return ref.replace("refs/heads/", "");
|
||||||
|
},
|
||||||
|
|
||||||
|
formatDate (date) {
|
||||||
|
return date.toLocaleString("en-US");
|
||||||
|
},
|
||||||
|
|
||||||
|
generateGithubUrl (type, event) {
|
||||||
|
switch (type) {
|
||||||
|
case "actor":
|
||||||
|
return `https://github.com/${event.actor.display_login}`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "comment":
|
||||||
|
return event.payload.comment.html_url;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "repo":
|
||||||
|
return `https://github.com/${event.repo.name}`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "forkee":
|
||||||
|
return `https://github.com/${event.payload.forkee.full_name}`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "issue":
|
||||||
|
return event.payload.issue.html_url;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "pull_request":
|
||||||
|
return event.payload.pull_request.html_url;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "release":
|
||||||
|
return event.payload.release.html_url;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "push":
|
||||||
|
return `https://github.com/${event.repo.name}/tree/${event.payload.ref.replace("refs/heads/", "")}`;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
name: "GithubFeed"
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
@ -23,59 +23,64 @@
|
||||||
<Step2 v-if="activeStep == 2"></Step2>
|
<Step2 v-if="activeStep == 2"></Step2>
|
||||||
<Step3 v-if="activeStep == 3"></Step3>
|
<Step3 v-if="activeStep == 3"></Step3>
|
||||||
|
|
||||||
<div class="modal" v-model="uploadDialog" v-if="uploadDialog != false">
|
<aside class="modal" v-model="uploadDialog" v-if="uploadDialog !== false">
|
||||||
<template v-if="confirmed">
|
<div class="modal-wrap">
|
||||||
<h3>Your image has been published!</h3>
|
<template v-if="confirmed">
|
||||||
<p><a v-bind:href="'https://explorer.lbry.io/tx/' + txhash" target="_blank" rel="noopener noreferrer">Check out your content on the LBRY blockchain explorer</a></p>
|
<h3>Your image has been published!</h3>
|
||||||
<a href="#" class="__button-black" v-on:click="uploadDialog = false">Dismiss this dialog</a>
|
<p>Check out your content on <a v-bind:href="`https://explorer.lbry.io/tx/${txhash}`" target="_blank" rel="noopener noreferrer">the LBRY blockchain explorer</a>.</p>
|
||||||
</template>
|
<a href="#" class="__button-black" style="display: inline-block;" v-on:click.prevent="uploadDialog = false">Dismiss this dialog</a>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<h3><div class="loader small"></div> Waiting for confirmation...</h3>
|
<h3><span class="loader tiny" style="display: inline-block;"></span> Waiting for confirmation...</h3>
|
||||||
<p>Your image was uploaded to the LBRY network but we are currently waiting for the first confirmation. This should take just a few minutes. In the meantime, go ahead and try the other steps!</p>
|
<p>Your image was uploaded to the LBRY network but we are currently waiting for the first confirmation. This should take just a few minutes. In the meantime, go ahead and try the other steps!</p>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import EventBus from "../event-bus";
|
||||||
|
import Vue from "vue";
|
||||||
|
|
||||||
import Vue from 'vue'
|
export default {
|
||||||
|
data () {
|
||||||
import EventBus from '../event-bus';
|
return {
|
||||||
|
activeStep: 1,
|
||||||
export default {
|
confirmed: false,
|
||||||
data () {
|
txhash: "",
|
||||||
return {
|
uploadDialog: false
|
||||||
uploadDialog: false,
|
|
||||||
txhash: '',
|
|
||||||
confirmed: false,
|
|
||||||
activeStep: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
uploadDialog: function() {
|
|
||||||
var component = this;
|
|
||||||
if(this.uploadDialog) {
|
|
||||||
// Simulate confirmation
|
|
||||||
setTimeout(function() {
|
|
||||||
component.confirmed = true;
|
|
||||||
}, 10000)
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
|
||||||
created () {
|
watch: {
|
||||||
var component = this;
|
uploadDialog: function () {
|
||||||
EventBus.$on('HookFileUploaded', function(txhash) {
|
const component = this;
|
||||||
component.txhash = txhash;
|
|
||||||
component.uploadDialog = true;
|
if (this.uploadDialog) {
|
||||||
});
|
setTimeout(() => {
|
||||||
EventBus.$on('HookStepUpdate', function(step) {
|
component.confirmed = true; // Simulate confirmation
|
||||||
component.activeStep = step;
|
}, 10000);
|
||||||
});
|
}
|
||||||
},
|
}
|
||||||
name: 'Hook'
|
},
|
||||||
};
|
|
||||||
|
created () {
|
||||||
|
const component = this;
|
||||||
|
|
||||||
|
EventBus.$on("HookFileUploaded", txhash => {
|
||||||
|
component.txhash = txhash;
|
||||||
|
component.uploadDialog = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
EventBus.$on("HookStepUpdate", step => {
|
||||||
|
component.activeStep = step;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
name: "Hook"
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@ -84,6 +89,397 @@ export default {
|
||||||
@import "../scss/init/extends";
|
@import "../scss/init/extends";
|
||||||
@import "../scss/init/mixins";
|
@import "../scss/init/mixins";
|
||||||
@import "../scss/partials/animation";
|
@import "../scss/partials/animation";
|
||||||
|
@import "../scss/partials/modal";
|
||||||
@import "../scss/pages/page";
|
@import "../scss/pages/page";
|
||||||
@import "../scss/pages/hook";
|
|
||||||
|
.hook {
|
||||||
|
.loader {
|
||||||
|
animation: spin 2s linear infinite;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-style: solid;
|
||||||
|
border-top-color: $teal;
|
||||||
|
|
||||||
|
&:not(.small):not(.tiny) {
|
||||||
|
width: 4rem; height: 4rem;
|
||||||
|
|
||||||
|
border-width: 6px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
width: 2rem; height: 2rem;
|
||||||
|
border-width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tiny {
|
||||||
|
width: 1rem; height: 1rem;
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.hook__navigation {
|
||||||
|
background-color: $black;
|
||||||
|
color: $white;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hook__navigation__step {
|
||||||
|
@media (min-width: 501px) {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&:not(:last-of-type) {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 3rem; height: 3rem;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 1rem; height: 1rem;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
line-height: 0.9rem;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.active) {
|
||||||
|
span {
|
||||||
|
border-color: rgba($white, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $teal;
|
||||||
|
|
||||||
|
span {
|
||||||
|
border-color: rgba($teal, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.hook__page {
|
||||||
|
@extend .page__content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hook__page__hero {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border-bottom: 1px solid rgba($black, 0.05);
|
||||||
|
|
||||||
|
h1, p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hook__page__hero__claim,
|
||||||
|
.hook__page__hero__support {
|
||||||
|
margin-bottom: 3rem; padding-left: 1rem;
|
||||||
|
|
||||||
|
background-color: $white;
|
||||||
|
border: 1px solid rgba($gray, 0.7);
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
@media (min-width: 501px) {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
@include clearfix;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, a {
|
||||||
|
line-height: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: rgba($black, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
border-left: 1px solid rgba($gray, 0.7);
|
||||||
|
color: $white;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.2s;
|
||||||
|
width: 6rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: calc(100% + 2px); height: calc(100% + 2px);
|
||||||
|
top: -1px; left: -1px;
|
||||||
|
|
||||||
|
border: 1px solid;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
transition: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:hover) {
|
||||||
|
background-color: $black;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-color: $black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $teal;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-color: $teal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hook__page__hero__claim input {
|
||||||
|
width: calc(100% - 10rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hook__page__hero__support {
|
||||||
|
input[type=number] {
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text] {
|
||||||
|
width: calc(100% - 11.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
line-height: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.hook__page__content::after {
|
||||||
|
@include clearfix;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hook__page__content__card {
|
||||||
|
margin-bottom: 1rem; padding: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 501px) {
|
||||||
|
float: left;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hook__page__content__meme {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
|
||||||
|
@media (min-width: 701px) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
|
||||||
|
background-color: rgba($teal, 0.3);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2.__metadata {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:not(:last-of-type) {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
color: rgba($black, 0.3);
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.05rem;
|
||||||
|
margin-bottom: 0.025rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type="checkbox"]):not([type="submit"]),
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
@media (min-width: 901px) {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
&:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
|
||||||
|
border-bottom: 2px solid;
|
||||||
|
padding-bottom: 0.15rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([type="file"]):not([type="submit"]) {
|
||||||
|
&:not(:hover):not(:active) {
|
||||||
|
border-color: $black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
border-color: $teal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[type="checkbox"] {
|
||||||
|
width: 1.25rem; height: 1.25rem;
|
||||||
|
|
||||||
|
border: 2px solid;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
position: relative;
|
||||||
|
top: 0.35rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
|
||||||
|
content: "✓";
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:checked)::after {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked::after {
|
||||||
|
color: $teal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
border-bottom: 2px solid;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:not(:hover):not(:active) {
|
||||||
|
border-color: $black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
border-color: $teal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
background-image: url("../media/svg/down.svg");
|
||||||
|
background-position: 99% center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
min-height: 100px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hook__page__content__meme__thumbnail {
|
||||||
|
width: 5rem; height: 5rem;
|
||||||
|
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: center;
|
||||||
|
|
||||||
|
&:not(:last-of-type) {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.selected) {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
border-color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hook__page__content__meme__uploader {
|
||||||
|
@extend .__button-black;
|
||||||
|
text-align: center;
|
||||||
|
width: 11rem;
|
||||||
|
|
||||||
|
> div:first-of-type {
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
top: 0; left: 0;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
top: 0; left: 0;
|
||||||
|
bottom: 0; right: 0;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,15 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div class="component--mission-statement">
|
<div class="component--mission-statement">
|
||||||
<strong class="component--mission-statement__title">Mission Statement</strong>
|
<strong class="component--mission-statement__title">Mission Statement</strong>
|
||||||
|
|
||||||
To create a market for accessing and publishing information<sup>1</sup> that is global<sup>2</sup>, decentralized<sup>3</sup>, robust<sup>4</sup>, optimal<sup>5</sup> and complete<sup>6</sup>.
|
To create a market for accessing and publishing information<sup>1</sup> that is global<sup>2</sup>, decentralized<sup>3</sup>, robust<sup>4</sup>, optimal<sup>5</sup> and complete<sup>6</sup>.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "../scss/init/colors";
|
@import "../scss/init/colors";
|
||||||
|
|
||||||
|
|
|
@ -1,24 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<ul id="sitemap">
|
<ul id="sitemap">
|
||||||
<li v-for="route in routes">
|
<li v-for="route in routes">
|
||||||
<router-link v-bind:to="route.path" :title="'Visit lbry.tech' + route.path">{{ route.path }}</router-link>
|
<router-link v-bind:to="route.path" :title="`Visit lbry.tech${route.path}`">{{ route.path }}</router-link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data: function() {
|
data: function () {
|
||||||
var routes = [];
|
const routes = [];
|
||||||
this.$router.options.routes.forEach(function(item) {
|
|
||||||
if(item.path != "/" && item.path != "*") {
|
this.$router.options.routes.forEach(item => {
|
||||||
routes.push(item);
|
if (item.path !== "/" && item.path !== "*") routes.push(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
routes: routes
|
||||||
}
|
}
|
||||||
});
|
},
|
||||||
return {
|
|
||||||
routes: routes
|
name: "Sitemap"
|
||||||
}
|
};
|
||||||
},
|
|
||||||
name: 'Sitemap'
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="hook__page" id="step1-page">
|
<section class="hook__page" id="step1-page">
|
||||||
|
|
||||||
<header class="hook__page__hero">
|
<header class="hook__page__hero">
|
||||||
<div class="inner-wrap">
|
<div class="inner-wrap">
|
||||||
<h1>Learn the LBRY protocol by examples</h1>
|
<h1>Learn the LBRY protocol by examples</h1>
|
||||||
<p>Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
|
<p>Let's start by getting the associated metadata for a claim.</p>
|
||||||
|
|
||||||
<div class="hook__page__hero__claim">
|
<div class="hook__page__hero__claim">
|
||||||
<span>lbry://</span><input type="text" v-model="address" placeholder=" Claim URI goes here"/>
|
<span>lbry://</span><input type="text" v-model="address" placeholder=" Claim URI goes here"/>
|
||||||
|
@ -13,124 +12,129 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="xs12" v-if="exampleCode != ''">
|
<div class="hook__page__content inner-wrap" v-if="exampleCode !== ''">
|
||||||
<pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></code></pre>
|
<pre><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="xs12" v-if="isLoading">
|
<div class="hook__page__content inner-wrap" v-if="isLoading">
|
||||||
<div class="loader"></div>
|
<div class="loader"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="xs12" v-if="jsonData">
|
<div class="hook__page__content inner-wrap" v-if="jsonData">
|
||||||
<p>Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
|
<p style="text-align: center;">Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
|
||||||
<pre><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
|
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
|
||||||
<a href="#" class="__button-black" v-on:click="goTo(2)" title="Proceed to step two">Go to next step</a>
|
<a href="#" class="__button-black" v-on:click.prevent="goTo(2)" title="Proceed to step two">Go to next step</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-if="!isLoading && !jsonData">
|
<template v-if="!isLoading && !jsonData">
|
||||||
<aside class="hook__page__content">
|
<div class="hook__page__content inner-wrap">
|
||||||
<div class="inner-wrap">
|
<p style="text-align: center;">…or select a live example from below</p>
|
||||||
<p style="text-align: center;">…or select a live example from below</p>
|
|
||||||
|
|
||||||
<div class="hook__page__content__card">
|
<div class="hook__page__content__card">
|
||||||
<img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('itsadisaster')">
|
<img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('itsadisaster')">
|
||||||
|
|
||||||
<div v-on:click="chooseClaim('itsadisaster')">
|
<div v-on:click="chooseClaim('itsadisaster')">
|
||||||
<h4>It's a Disaster</h4>
|
<h4>It's a Disaster</h4>
|
||||||
<p class="account">Anonymous</p>
|
<p class="account">Anonymous</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hook__page__content__card">
|
|
||||||
<img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('unbubbled1-1')">
|
|
||||||
|
|
||||||
<div v-on:click="chooseClaim('unbubbled1-1')">
|
|
||||||
<h4>Unbubbled with Jamie King, Ep1.1 — Bitcoin, Boom or Bust</h4>
|
|
||||||
<p class="account">@Unbubbled</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hook__page__content__card">
|
|
||||||
<img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
|
||||||
|
|
||||||
<div v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
|
||||||
<h4>FORTNITE TOP STREAM MOMENTS — Nickatnyte & GamingwithMolt</h4>
|
|
||||||
<p class="account">@nickatnyte</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hook__page__content__card">
|
|
||||||
<img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('six')">
|
|
||||||
|
|
||||||
<div v-on:click="chooseClaim('six')">
|
|
||||||
<h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
|
|
||||||
<p class="account">Anonymous</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
<div class="hook__page__content__card">
|
||||||
|
<img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('unbubbled1-1')">
|
||||||
|
|
||||||
|
<div v-on:click="chooseClaim('unbubbled1-1')">
|
||||||
|
<h4>Unbubbled with Jamie King, Ep1.1 — Bitcoin, Boom or Bust</h4>
|
||||||
|
<p class="account">@Unbubbled</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hook__page__content__card">
|
||||||
|
<img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
||||||
|
|
||||||
|
<div v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
||||||
|
<h4>FORTNITE TOP STREAM MOMENTS — Nickatnyte & GamingwithMolt</h4>
|
||||||
|
<p class="account">@nickatnyte</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hook__page__content__card">
|
||||||
|
<img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('six')">
|
||||||
|
|
||||||
|
<div v-on:click="chooseClaim('six')">
|
||||||
|
<h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
|
||||||
|
<p class="account">Anonymous</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import EventBus from '../event-bus';
|
import EventBus from "../event-bus";
|
||||||
import hljs from 'highlight.js';
|
import hljs from "highlight.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
address: '',
|
address: "",
|
||||||
jsonData: '',
|
exampleCode: "",
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
exampleCode: ''
|
jsonData: ""
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
|
||||||
|
|
||||||
if(typeof this.$route.query.url != 'undefined') {
|
created () {
|
||||||
this.address = this.$route.query.url;
|
if (typeof this.$route.query.url !== "undefined") {
|
||||||
this.fetchMetadata();
|
this.address = this.$route.query.url;
|
||||||
}
|
this.fetchMetadata();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
},
|
mounted () {
|
||||||
mounted () {
|
hljs.configure({
|
||||||
|
languages: ["bash", "json"]
|
||||||
hljs.configure({
|
|
||||||
languages: ['bash', 'json']
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
fetchMetadata () {
|
|
||||||
var component = this;
|
|
||||||
component.jsonData = '';
|
|
||||||
component.isLoading = true;
|
|
||||||
component.exampleCode = '# Example code using the daemon\ncurl \'http://localhost:5279\' --data \'{"method":"resolve","params":{"uri":"' + this.address + '"}}\'';
|
|
||||||
this.$http.post('https://lbry.tech/forward', {
|
|
||||||
method: 'resolve',
|
|
||||||
uri: this.address
|
|
||||||
}).then(function(response) {
|
|
||||||
component.isLoading = false;
|
|
||||||
component.jsonData = JSON.stringify(response.body, null, ' ');
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
chooseClaim (address) {
|
|
||||||
var component = this;
|
|
||||||
component.address = address;
|
|
||||||
component.fetchMetadata();
|
|
||||||
},
|
|
||||||
goTo (page) {
|
|
||||||
EventBus.$emit('HookStepUpdate', page);
|
|
||||||
},
|
|
||||||
highlight (language, text) {
|
|
||||||
return hljs.highlight(language, text).value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
name: 'Step1'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
methods: {
|
||||||
</style>
|
fetchMetadata () {
|
||||||
|
let component = this;
|
||||||
|
component.jsonData = "";
|
||||||
|
component.isLoading = true;
|
||||||
|
component.exampleCode = `
|
||||||
|
# Example code using the daemon
|
||||||
|
curl "http://localhost:5279" --data "{ "method": "resolve", "params": { "uri": "${this.address}" } }"
|
||||||
|
`;
|
||||||
|
|
||||||
|
this.$http.post("https://lbry.tech/forward", {
|
||||||
|
method: "resolve",
|
||||||
|
uri: this.address
|
||||||
|
}).then(response => {
|
||||||
|
component.isLoading = false;
|
||||||
|
component.jsonData = JSON.stringify(response.body, null, " ");
|
||||||
|
}).catch(error => {
|
||||||
|
component.isLoading = false;
|
||||||
|
component.jsonData = JSON.stringify(error, null, " ");
|
||||||
|
console.log("Error retrieving metadata for a claim:\n", error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
chooseClaim (address) {
|
||||||
|
const component = this;
|
||||||
|
component.address = address;
|
||||||
|
component.fetchMetadata();
|
||||||
|
},
|
||||||
|
|
||||||
|
goTo (page) {
|
||||||
|
EventBus.$emit("HookStepUpdate", page);
|
||||||
|
},
|
||||||
|
|
||||||
|
highlight (language, text) {
|
||||||
|
return hljs.highlight(language, text).value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
name: "Step1"
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
|
@ -1,258 +1,258 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="hook__page" id="step2-page">
|
<section class="hook__page" id="step2-page" v-images-loaded="imagesLoaded">
|
||||||
|
<header class="hook__page__hero">
|
||||||
|
<div class="inner-wrap">
|
||||||
|
<h1>Publish your content on the blockchain</h1>
|
||||||
|
<p>Upload an image to the blockchain and you are able to view it on the <a href="http://explorer.lbry.io" title="LBRY Blockchain Explorer" target="_blank" rel="noopener noreferrer">LBRY Blockchain Explorer</a>.</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<div v-images-loaded="imagesLoaded">
|
<div class="hook__page__content inner-wrap">
|
||||||
<header class="hook__page__hero">
|
<template v-if="!isLoading">
|
||||||
<div class="inner-wrap">
|
<div class="hook__page__content__meme left">
|
||||||
<h1>Publish your content on the blockchain</h1>
|
<img v-bind:src="backgroundImage" id="base-image" style="height: 0; visibility: hidden;" alt="Base image for LBRY meme creator"/>
|
||||||
<p>Upload an image to the blockchain and you are able to view it on the <a href="http://explorer.lbry.io" title="LBRY Blockchain Explorer" target="_blank" rel="noopener noreferrer">LBRY Blockchain Explorer</a>.</p>
|
<canvas id="meme-canvas" width="400" height="300">Sorry, canvas is not supported</canvas>
|
||||||
|
|
||||||
|
<img v-for="image in images" v-bind:src="image.src" v-on:click="chooseImage(image.src)" class="hook__page__content__meme__thumbnail" v-bind:class="{'selected': backgroundImage === image.src}" v-bind:alt="image.alt"/>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
|
||||||
|
|
||||||
<aside class="hook__page__content">
|
<form class="hook__page__content__meme right" v-on:submit.prevent="submit">
|
||||||
<div class="inner-wrap">
|
<h2>Image Text</h2>
|
||||||
|
|
||||||
<template v-if="!isLoading">
|
<fieldset>
|
||||||
|
<label for="meme-top-line">Top line</label>
|
||||||
|
<input name="meme-top-line" id="meme-top-line" type="text" v-model="topLine" placeholder="Top line" required/>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<div class="hook__page__content__meme left">
|
<fieldset>
|
||||||
<img v-bind:src="backgroundImage" id="base-image" alt="" />
|
<label for="meme-bottom-line">Bottom line</label>
|
||||||
<canvas id="meme-canvas" width="400" height="300">Sorry, canvas not supported</canvas>
|
<input name="meme-bottom-line" id="meme-bottom-line" type="text" v-model="bottomLine" placeholder="Bottom line" required/>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<img v-for="image in images" v-bind:src="image.src" v-on:click="chooseImage(image.src)" class="thumbnail" v-bind:class="{'selected': backgroundImage == image.src}" v-bind:alt="image.alt">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form class="hook__page__content__meme right" v-on:submit.prevent="submit">
|
<h2 class="__metadata">Metadata</h2>
|
||||||
|
|
||||||
<h2>Image Text</h2>
|
<fieldset>
|
||||||
|
<label for="meme-title">Title</label>
|
||||||
|
<input name="meme-title" id="meme-title" type="text" v-model="title" placeholder="Title" required/>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="meme-top-line">Top line</label>
|
<label for="meme-description">Description</label>
|
||||||
<input name="meme-top-line" id="meme-top-line" type="text" v-model="topLine" placeholder="Top line" required/>
|
<textarea name="meme-description" id="meme-description" type="text" v-model="description" placeholder="Description" spellcheck="false" required>{{ description }}</textarea>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="meme-bottom-line">Bottom line</label>
|
<label for="meme-language">Language</label>
|
||||||
<input name="meme-bottom-line" id="meme-bottom-line" type="text" v-model="bottomLine" placeholder="Bottom line" required/>
|
<select name="meme-language" id="meme-language" v-model="language">
|
||||||
</fieldset>
|
<option value="AR">Arabic</option>
|
||||||
|
<option value="ZH">Chinese (Mandarin)</option>
|
||||||
|
<option value="EN">English</option>
|
||||||
|
<option value="FR">French</option>
|
||||||
|
<option value="DE">German</option>
|
||||||
|
<option value="IT">Italian</option>
|
||||||
|
<option value="JP">Japanese</option>
|
||||||
|
<option value="RU">Russian</option>
|
||||||
|
<option value="ES">Spanish</option>
|
||||||
|
<option value="">Not specified</option>
|
||||||
|
</select>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<h2 class="metadata">Metadata</h2>
|
<fieldset>
|
||||||
|
<label for="meme-license">License</label>
|
||||||
|
<select name="meme-license" id="meme-license" v-model="license" required>
|
||||||
|
<option value="Public Domain">Public Domain</option>
|
||||||
|
<option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
|
||||||
|
<option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
|
||||||
|
<option value="Creative Commons Attribution-NoDerivatives 4.0 International">Creative Commons Attribution-NoDerivatives 4.0 International</option>
|
||||||
|
<option value="Creative Commons Attribution-NonCommercial 4.0 International">Creative Commons Attribution-NonCommercial 4.0 International</option>
|
||||||
|
<option value="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
|
||||||
|
<option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
|
||||||
|
<option value="None">None</option>
|
||||||
|
</select>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="meme-title">Title</label>
|
<label><input type="checkbox" v-model="nsfw" name="nsfw"/>NSFW</label>
|
||||||
<input name="meme-title" id="meme-title" type="text" v-model="title" placeholder="Title" required/>
|
</fieldset>
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="meme-description">Description</label>
|
<input type="submit" class="__button-black" value="Submit"/>
|
||||||
<textarea name="meme-description" id="meme-description" type="text" v-model="description" placeholder="Description" required>{{ description}}</textarea>
|
</fieldset>
|
||||||
</fieldset>
|
</form>
|
||||||
|
</template>
|
||||||
|
|
||||||
<fieldset>
|
<pre v-if="exampleCode !== ''" style="clear: both;"><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
|
||||||
<label for="meme-language">Language</label>
|
|
||||||
<select name="meme-language" id="meme-language" v-model="language">
|
|
||||||
<option value="EN">English</option>
|
|
||||||
<option value="FR">French</option>
|
|
||||||
<option value="ES">Spanish</option>
|
|
||||||
<option value="DE">German</option>
|
|
||||||
<option value="IT">Italian</option>
|
|
||||||
<option value="ZH">Chinese (Mandarin)</option>
|
|
||||||
<option value="AR">Arabic</option>
|
|
||||||
<option value="RU">Russian</option>
|
|
||||||
<option value="JP">Japanese</option>
|
|
||||||
<option value="">Not specified</option>
|
|
||||||
</select>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
<div class="loader" v-if="isLoading"></div>
|
||||||
<label for="meme-license">License</label>
|
|
||||||
<select name="meme-license" id="meme-license" v-model="license" required>
|
|
||||||
<option value="Public Domain">Public Domain</option>
|
|
||||||
<option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
|
|
||||||
<option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
|
|
||||||
<option value="Creative Commons Attribution-NoDerivatives 4.0 International">Creative Commons Attribution-NoDerivatives 4.0 International</option>
|
|
||||||
<option value="Creative Commons Attribution-NonCommercial 4.0 International">Creative Commons Attribution-NonCommercial 4.0 International</option>
|
|
||||||
<option value="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
|
|
||||||
<option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
|
|
||||||
<option value="None">None</option>
|
|
||||||
</select>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
<div v-if="jsonData">
|
||||||
<label><input type="checkbox" v-model="nsfw" name="nsfw"/>NSFW</label>
|
<p style="text-align: center;">Success! Here is the response:</p>
|
||||||
</fieldset>
|
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
|
||||||
|
</div>
|
||||||
<fieldset>
|
|
||||||
<input type="submit" class="__button-black" value="Submit"/>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="xs12" v-if="exampleCode != ''">
|
|
||||||
<pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="xs12" v-if="isLoading">
|
|
||||||
<div class="loader"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="xs12" v-if="jsonData">
|
|
||||||
<p>Success! Here is the response:</p>
|
|
||||||
<pre><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import imagesLoaded from 'vue-images-loaded'
|
import EventBus from "../event-bus";
|
||||||
import hljs from 'highlight.js'
|
import hljs from "highlight.js";
|
||||||
|
import imagesLoaded from "vue-images-loaded";
|
||||||
|
|
||||||
import EventBus from '../event-bus';
|
export default {
|
||||||
|
directives: {
|
||||||
export default {
|
imagesLoaded
|
||||||
directives: {
|
|
||||||
imagesLoaded
|
|
||||||
},
|
|
||||||
|
|
||||||
data () {
|
|
||||||
var images = [
|
|
||||||
{
|
|
||||||
src: './carlsagan2.jpg',
|
|
||||||
alt: 'Carl Sagan'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: './doge-meme.jpg',
|
|
||||||
alt: 'Doge'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: 'lbry-green.png',
|
|
||||||
alt: 'LBRY Logo With Green Background'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
return {
|
|
||||||
valid: false,
|
|
||||||
isLoading: false,
|
|
||||||
exampleCode: '',
|
|
||||||
jsonData: '',
|
|
||||||
loadingMessage: '',
|
|
||||||
topLine: 'This is an example meme',
|
|
||||||
bottomLine: 'that I made',
|
|
||||||
title: '',
|
|
||||||
description: 'Check out this image I published to LBRY via lbry.tech',
|
|
||||||
language: 'EN',
|
|
||||||
license: 'Public Domain',
|
|
||||||
nsfw: false,
|
|
||||||
images: images,
|
|
||||||
backgroundImage: images[0].src,
|
|
||||||
textFieldRules: [
|
|
||||||
v => !!v || 'Field is required'
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
|
|
||||||
hljs.configure({
|
|
||||||
languages: ['bash', 'json']
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateCanvas () {
|
|
||||||
var canvasWidth = 400;
|
|
||||||
var canvasHeight = 300;
|
|
||||||
var canvas = document.getElementById('meme-canvas');
|
|
||||||
var ctx = canvas.getContext('2d');
|
|
||||||
var img = document.getElementById('base-image');
|
|
||||||
|
|
||||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
||||||
|
|
||||||
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
|
|
||||||
|
|
||||||
ctx.lineWidth = 4;
|
|
||||||
ctx.font = 'bold 28px Karla';
|
|
||||||
ctx.strokeStyle = 'black';
|
|
||||||
ctx.fillStyle = 'white';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.textBaseline = 'top';
|
|
||||||
|
|
||||||
ctx.lineJoin = 'round';
|
|
||||||
|
|
||||||
ctx.strokeText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
|
|
||||||
ctx.fillText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
|
|
||||||
|
|
||||||
ctx.strokeText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
|
|
||||||
ctx.fillText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
|
|
||||||
},
|
},
|
||||||
submit () {
|
|
||||||
var component = this;
|
data () {
|
||||||
component.isLoading = true;
|
const images = [
|
||||||
component.exampleCode = '# Example code using the daemon\ncurl \'http://localhost:5279\' --data \'{"method":"publish","params":{"name":"' + component.title + '","bid":0.001, "file_path":"/path/to/your/file.jpg","title":"' + component.title + '", "description":"' + component.description + '","language":"' + component.language + '","license":"' + component.license + '","nsfw":' + component.nsfw + '}}\'';
|
{
|
||||||
component.$http.post('https://lbry.tech/upload-image', document.getElementById('meme-canvas').toDataURL('image/jpeg', 0.6), {
|
src: "./carlsagan2.jpg",
|
||||||
headers: {
|
alt: "Carl Sagan"
|
||||||
'Content-Type': 'text/plain'
|
},
|
||||||
|
{
|
||||||
|
src: "./doge-meme.jpg",
|
||||||
|
alt: "Doge"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "lbry-green.png",
|
||||||
|
alt: "LBRY Logo With Green Background"
|
||||||
}
|
}
|
||||||
}).then(function(response) {
|
];
|
||||||
if(response.status == 'error') {
|
|
||||||
component.isLoading = false;
|
return {
|
||||||
component.exampleCode = '';
|
backgroundImage: images[0].src,
|
||||||
} else {
|
bottomLine: "that I made",
|
||||||
component.$http.post('https://lbry.tech/forward', {
|
description: "Check out this image I published to LBRY via lbry.tech",
|
||||||
method: 'publish',
|
exampleCode: "",
|
||||||
name: component.title,
|
images: images,
|
||||||
|
isLoading: false,
|
||||||
|
jsonData: "",
|
||||||
|
language: "EN",
|
||||||
|
license: "Public Domain",
|
||||||
|
loadingMessage: "",
|
||||||
|
nsfw: false,
|
||||||
|
textFieldRules: [
|
||||||
|
v => !!v || "Field is required"
|
||||||
|
],
|
||||||
|
title: "",
|
||||||
|
topLine: "This is an example meme",
|
||||||
|
valid: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
hljs.configure({
|
||||||
|
languages: ["bash", "json"]
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
updateCanvas () {
|
||||||
|
const canvas = document.getElementById("meme-canvas");
|
||||||
|
const canvasWidth = 400;
|
||||||
|
const canvasHeight = 300;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const img = document.getElementById("base-image");
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||||
|
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
|
||||||
|
ctx.fillStyle = "white";
|
||||||
|
ctx.font = "bold 28px Karla";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
ctx.lineWidth = 4;
|
||||||
|
ctx.strokeStyle = "black";
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.textBaseline = "top";
|
||||||
|
ctx.strokeText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
|
||||||
|
ctx.strokeText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
|
||||||
|
ctx.fillText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
|
||||||
|
ctx.fillText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
|
||||||
|
},
|
||||||
|
|
||||||
|
submit () {
|
||||||
|
let component = this;
|
||||||
|
component.isLoading = true;
|
||||||
|
|
||||||
|
component.exampleCode = `
|
||||||
|
# Example code using the daemon
|
||||||
|
curl "http://localhost:5279" --data "{ "method": "publish", "params": { "name": "${component.title}", "bid": 0.001, "file_path": "/path/to/your/file.jpg", "title": "${component.title}", "description": "${component.description}", "language": "${component.language}", "license": "${component.license}", "nsfw": "${component.nsfw}" } }"
|
||||||
|
`;
|
||||||
|
|
||||||
|
component.$http.post("https://lbry.tech/upload-image", document.getElementById("meme-canvas").toDataURL("image/jpeg", 0.6), {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "text/plain"
|
||||||
|
}
|
||||||
|
}).then(uploadResponse => {
|
||||||
|
if (uploadResponse.status === "error") {
|
||||||
|
component.isLoading = false;
|
||||||
|
component.exampleCode = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
component.$http.post("https://lbry.tech/forward", {
|
||||||
bid: 0.001,
|
bid: 0.001,
|
||||||
file_path: response.filename,
|
|
||||||
title: component.title,
|
|
||||||
description: component.description,
|
description: component.description,
|
||||||
|
file_path: uploadResponse.filename,
|
||||||
language: component.language,
|
language: component.language,
|
||||||
license: component.license,
|
license: component.license,
|
||||||
nsfw: component.nsfw
|
method: "publish",
|
||||||
}).then(function(response) {
|
name: component.title,
|
||||||
|
nsfw: component.nsfw,
|
||||||
|
title: component.title
|
||||||
|
}).then(response => {
|
||||||
component.isLoading = false;
|
component.isLoading = false;
|
||||||
component.jsonData = JSON.stringify(response.body, null, ' ');
|
component.jsonData = JSON.stringify(response.body, null, " ");
|
||||||
EventBus.$emit('HookFileUploaded', response.body.txid);
|
EventBus.$emit("HookFileUploaded", response.body.txid);
|
||||||
|
}).catch(error => {
|
||||||
|
component.isLoading = false;
|
||||||
|
component.jsonData = JSON.stringify(error, null, " ");
|
||||||
|
console.log("Forwarding uploaded image failed:\n", error);
|
||||||
});
|
});
|
||||||
}
|
}).catch(uploadError => {
|
||||||
});
|
component.isLoading = false;
|
||||||
|
component.jsonData = JSON.stringify(uploadError, null, " ");
|
||||||
|
console.log("Image upload failed:\n", uploadError);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
},
|
imagesLoaded (instance) {
|
||||||
imagesLoaded (instance) {
|
const component = this;
|
||||||
var component = this;
|
document.fonts.load("bold 28px Karla").then(() => component.updateCanvas()); // Make sure the font is loaded
|
||||||
// Make sure the font is loaded
|
},
|
||||||
document.fonts.load('bold 28px Karla').then(function() {
|
|
||||||
|
chooseImage (src) {
|
||||||
|
const component = this;
|
||||||
|
component.backgroundImage = src;
|
||||||
component.updateCanvas();
|
component.updateCanvas();
|
||||||
});
|
},
|
||||||
|
|
||||||
|
setImage (file) {
|
||||||
|
const component = this;
|
||||||
|
document.getElementById("base-image").src = file;
|
||||||
|
|
||||||
|
// allow one second to load the image
|
||||||
|
setTimeout(component.updateCanvas, 1000);
|
||||||
|
},
|
||||||
|
|
||||||
|
highlight (language, text) {
|
||||||
|
return hljs.highlight(language, text).value;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
chooseImage (src) {
|
|
||||||
var component = this;
|
created () {
|
||||||
component.backgroundImage = src;
|
|
||||||
component.updateCanvas();
|
|
||||||
},
|
},
|
||||||
setImage (file) {
|
|
||||||
var component = this;
|
watch: {
|
||||||
document.getElementById('base-image').src = file;
|
topLine () {
|
||||||
// allow one second to load the image
|
this.updateCanvas();
|
||||||
setTimeout(component.updateCanvas, 1000);
|
},
|
||||||
|
bottomLine () {
|
||||||
|
this.updateCanvas();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
highlight (language, text) {
|
|
||||||
return hljs.highlight(language, text).value;
|
name: "Step2"
|
||||||
}
|
};
|
||||||
},
|
|
||||||
created () {
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
topLine () {
|
|
||||||
this.updateCanvas();
|
|
||||||
},
|
|
||||||
bottomLine () {
|
|
||||||
this.updateCanvas();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
name: 'Step2'
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="hook__page" id="step3-page">
|
<section class="hook__page" id="step3-page">
|
||||||
|
|
||||||
<header class="hook__page__hero">
|
<header class="hook__page__hero">
|
||||||
<div class="inner-wrap">
|
<div class="inner-wrap">
|
||||||
<h1>Support your favorite content creators with LBRY</h1>
|
<h1>Support your favorite content creators with LBRY</h1>
|
||||||
|
@ -9,32 +8,32 @@
|
||||||
|
|
||||||
<div class="hook__page__hero__support">
|
<div class="hook__page__hero__support">
|
||||||
<input type="text" v-model="claimId" placeholder="Claim ID goes here"/>
|
<input type="text" v-model="claimId" placeholder="Claim ID goes here"/>
|
||||||
<input type="number" v-model="amount" disabled title="You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01"><span>LBC</span>
|
<input type="number" v-model="amount" disabled title="You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01"/><span>LBC</span>
|
||||||
<a href="#" v-on:click="send" class="button" title="Execute claim">Execute</a>
|
<a href="#" v-on:click.prevent="send" class="button" title="Execute claim">Execute</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="xs12" v-if="exampleCode != ''">
|
<div class="hook__page__content inner-wrap" v-if="exampleCode !== ''">
|
||||||
<pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></code></pre>
|
<pre><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="xs12" v-if="isLoading">
|
<div class="hook__page__content inner-wrap" v-if="isLoading">
|
||||||
<div class="loader"></div>
|
<div class="loader"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="xs12" v-if="jsonData">
|
<div class="hook__page__content inner-wrap" v-if="jsonData">
|
||||||
<p>Success! Here is the response:</p>
|
<p style="text-align: center;">Success! Here is the response:</p>
|
||||||
<pre><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
|
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-if="!isLoading && !jsonData">
|
<template v-if="!isLoading && !jsonData">
|
||||||
<aside class="hook__page__content">
|
<aside class="hook__page__content">
|
||||||
<div class="inner-wrap">
|
<div class="inner-wrap">
|
||||||
<p style="text-align: center;">Click on below claims to support them!</p>
|
<p style="text-align: center;">Click on any of the claims below to support them!</p>
|
||||||
|
|
||||||
<div class="hook__page__content__card">
|
<div class="hook__page__content__card">
|
||||||
<img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
|
<img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')" alt=""/>
|
||||||
|
|
||||||
<div v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
|
<div v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
|
||||||
<h4>It's a Disaster</h4>
|
<h4>It's a Disaster</h4>
|
||||||
|
@ -43,7 +42,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hook__page__content__card">
|
<div class="hook__page__content__card">
|
||||||
<img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
|
<img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')" alt=""/>
|
||||||
|
|
||||||
<div v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
|
<div v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
|
||||||
<h4>Unbubbled with Jamie King, Ep1.1 — Bitcoin, Boom or Bust</h4>
|
<h4>Unbubbled with Jamie King, Ep1.1 — Bitcoin, Boom or Bust</h4>
|
||||||
|
@ -52,7 +51,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hook__page__content__card">
|
<div class="hook__page__content__card">
|
||||||
<img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
|
<img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')" alt=""/>
|
||||||
|
|
||||||
<div v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
|
<div v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
|
||||||
<h4>FORTNITE TOP STREAM MOMENTS — Nickatnyte & GamingwithMolt</h4>
|
<h4>FORTNITE TOP STREAM MOMENTS — Nickatnyte & GamingwithMolt</h4>
|
||||||
|
@ -61,7 +60,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hook__page__content__card">
|
<div class="hook__page__content__card">
|
||||||
<img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
|
<img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')" alt=""/>
|
||||||
|
|
||||||
<div v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
|
<div v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
|
||||||
<h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
|
<h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
|
||||||
|
@ -71,85 +70,70 @@
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import EventBus from '../event-bus';
|
import EventBus from "../event-bus";
|
||||||
import hljs from 'highlight.js';
|
import hljs from "highlight.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
claimId: '',
|
amount: 0.01,
|
||||||
amount: 0.01,
|
claimId: "",
|
||||||
exampleCode: '',
|
exampleCode: "",
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
jsonData: ''
|
jsonData: ""
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
|
||||||
|
|
||||||
hljs.configure({
|
mounted () {
|
||||||
languages: ['bash', 'json']
|
hljs.configure({
|
||||||
});
|
languages: ["bash", "json"]
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
send () {
|
|
||||||
var component = this;
|
|
||||||
component.jsonData = '';
|
|
||||||
component.isLoading = true;
|
|
||||||
component.exampleCode = '# Example code using the daemon\ncurl \'http://localhost:5279\' --data \'{"method":"wallet_send","params":{"claim_id":"' + this.address + '","amount":' + this.amount + '}}\'';
|
|
||||||
this.$http.post('https://lbry.tech/forward', {
|
|
||||||
method: 'wallet_send',
|
|
||||||
claim_id: this.address,
|
|
||||||
amount: this.amount
|
|
||||||
}).then(function(response) {
|
|
||||||
component.isLoading = false;
|
|
||||||
component.jsonData = JSON.stringify(response.body, null, ' ');
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
chooseClaim (address) {
|
|
||||||
var component = this;
|
methods: {
|
||||||
component.address = address;
|
send () {
|
||||||
component.send();
|
let component = this;
|
||||||
|
component.jsonData = "";
|
||||||
|
component.isLoading = true;
|
||||||
|
|
||||||
|
component.exampleCode = `
|
||||||
|
# Example code using the daemon
|
||||||
|
curl "http://localhost:5279" --data "{ "method": "wallet_send", "params": { "claim_id": "${this.address}", "amount": "${this.amount}" } }"
|
||||||
|
`;
|
||||||
|
|
||||||
|
component.$http.post("https://lbry.tech/forward", {
|
||||||
|
amount: component.amount,
|
||||||
|
claim_id: component.address,
|
||||||
|
method: "wallet_send"
|
||||||
|
}).then(response => {
|
||||||
|
component.isLoading = false;
|
||||||
|
component.jsonData = JSON.stringify(response.body, null, " ");
|
||||||
|
}).catch(error => {
|
||||||
|
component.isLoading = false;
|
||||||
|
component.jsonData = JSON.stringify(error, null, " ");
|
||||||
|
console.log("Sending of LBC failed:\n", error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
chooseClaim (address) {
|
||||||
|
const component = this;
|
||||||
|
component.address = address;
|
||||||
|
component.send();
|
||||||
|
},
|
||||||
|
|
||||||
|
goTo (page) {
|
||||||
|
EventBus.$emit("HookStepUpdate", page);
|
||||||
|
},
|
||||||
|
|
||||||
|
highlight (language, text) {
|
||||||
|
return hljs.highlight(language, text).value;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
goTo (page) {
|
|
||||||
EventBus.$emit('HookStepUpdate', page);
|
name: "Step3"
|
||||||
},
|
};
|
||||||
highlight (language, text) {
|
|
||||||
return hljs.highlight(language, text).value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
name: 'Step3'
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
|
|
||||||
@import '../scss/variables';
|
|
||||||
|
|
||||||
#step3-page {
|
|
||||||
.card {
|
|
||||||
.card__title {
|
|
||||||
height: 9rem;
|
|
||||||
h4 {
|
|
||||||
text-align: left;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.account {
|
|
||||||
color: $primary-color;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
background-color: $primary-color;
|
|
||||||
border-color: $primary-color;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -8,7 +8,7 @@ module.exports = {
|
||||||
],
|
],
|
||||||
themeConfig: {
|
themeConfig: {
|
||||||
repo: 'lbryio/lbry.tech',
|
repo: 'lbryio/lbry.tech',
|
||||||
docsBranch: 'master',
|
docsBranch: 'master/content',
|
||||||
editLinkText: 'Edit this page on Github'
|
editLinkText: 'Edit this page on Github'
|
||||||
},
|
},
|
||||||
ga: 'UA-60403362-1',
|
ga: 'UA-60403362-1',
|
||||||
|
|
3
content/.vuepress/media/svg/down.svg
Normal file
3
content/.vuepress/media/svg/down.svg
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" fill="#222">
|
||||||
|
<path d="M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 389 B |
|
@ -1,362 +0,0 @@
|
||||||
.hook {
|
|
||||||
.loader {
|
|
||||||
animation: spin 2s linear infinite;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-style: solid;
|
|
||||||
border-top-color: $teal;
|
|
||||||
|
|
||||||
&:not(.small) {
|
|
||||||
width: 4rem; height: 4rem;
|
|
||||||
|
|
||||||
border-width: 6px;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.small {
|
|
||||||
width: 2rem; height: 2rem;
|
|
||||||
border-width: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.hook__navigation {
|
|
||||||
background-color: $black;
|
|
||||||
color: $white;
|
|
||||||
font-size: 1rem;
|
|
||||||
padding-top: 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hook__navigation__step {
|
|
||||||
@media (min-width: 501px) {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
width: 3rem; height: 3rem;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
line-height: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
span {
|
|
||||||
width: 1rem; height: 1rem;
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
line-height: 0.9rem;
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.active) {
|
|
||||||
span {
|
|
||||||
border-color: rgba($white, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $teal;
|
|
||||||
|
|
||||||
span {
|
|
||||||
border-color: rgba($teal, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
border: 1px solid;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 0 auto 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.hook__page {
|
|
||||||
@extend .page__content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hook__page__hero {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
border-bottom: 1px solid rgba($black, 0.05);
|
|
||||||
|
|
||||||
h1, p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hook__page__hero__claim,
|
|
||||||
.hook__page__hero__support {
|
|
||||||
margin-bottom: 3rem; padding-left: 1rem;
|
|
||||||
|
|
||||||
background-color: $white;
|
|
||||||
border: 1px solid rgba($gray, 0.7);
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
@media (min-width: 501px) {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
@include clearfix;
|
|
||||||
}
|
|
||||||
|
|
||||||
input, a {
|
|
||||||
line-height: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: rgba($black, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
border-left: 1px solid rgba($gray, 0.7);
|
|
||||||
color: $white;
|
|
||||||
float: right;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
width: 6rem;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
width: calc(100% + 2px); height: calc(100% + 2px);
|
|
||||||
top: -1px; left: -1px;
|
|
||||||
|
|
||||||
border: 1px solid;
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
transition: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:hover) {
|
|
||||||
background-color: $black;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-color: $black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $teal;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-color: $teal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hook__page__hero__claim input {
|
|
||||||
width: calc(100% - 10rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hook__page__hero__support {
|
|
||||||
input[type=number] {
|
|
||||||
width: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=text] {
|
|
||||||
width: calc(100% - 11.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
line-height: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.hook__page__content::after {
|
|
||||||
@include clearfix;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hook__page__content__card {
|
|
||||||
margin-bottom: 1rem; padding: 1rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 501px) {
|
|
||||||
float: left;
|
|
||||||
vertical-align: top;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hook__page__content__meme {
|
|
||||||
padding-right: 1rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
|
|
||||||
@media (min-width: 701px) {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
#base-image {
|
|
||||||
height: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail {
|
|
||||||
width: 5rem;
|
|
||||||
height: 5rem;
|
|
||||||
object-fit: cover;
|
|
||||||
margin: 0 1rem 1rem 0;
|
|
||||||
border: 4px solid white;
|
|
||||||
border-radius: 1px;
|
|
||||||
&.selected {
|
|
||||||
border-color: black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
width: 100%; height: 100%;
|
|
||||||
background-color: rgba($teal, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
&.metadata {
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
color: rgba($black, 0.3);
|
|
||||||
display: block;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 0.05rem;
|
|
||||||
margin-bottom: 0.025rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
textarea,
|
|
||||||
select {
|
|
||||||
@media (min-width: 901px) {
|
|
||||||
&:not([type="checkbox"]):not([type="submit"]) {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
&:not([type="checkbox"]):not([type="submit"]) {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
|
|
||||||
border-bottom: 2px solid;
|
|
||||||
padding-bottom: 0.15rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not([type="file"]):not([type="submit"]) {
|
|
||||||
&:not(:hover):not(:active) {
|
|
||||||
border-color: $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
border-color: $teal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[type="checkbox"] {
|
|
||||||
width: 1.25rem; height: 1.25rem;
|
|
||||||
|
|
||||||
border: 2px solid;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
position: relative;
|
|
||||||
top: 0.35rem;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
width: 100%; height: 100%;
|
|
||||||
|
|
||||||
content: "✓";
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: 1rem;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:checked)::after {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked::after {
|
|
||||||
color: $teal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#meme-top-line,
|
|
||||||
#meme-bottom-line {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hook__page__content__meme__uploader {
|
|
||||||
@extend .__button-black;
|
|
||||||
text-align: center;
|
|
||||||
width: 11rem;
|
|
||||||
|
|
||||||
> div:first-of-type {
|
|
||||||
width: 100%; height: 100%;
|
|
||||||
top: 0; left: 0;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
top: 0; left: 0;
|
|
||||||
bottom: 0; right: 0;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -222,7 +222,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a:not(.button):not(.feature-link__title) {
|
a:not(.button):not(.__button-black):not(.feature-link__title):not(.newsletter-standalone__submit) {
|
||||||
color: $teal;
|
color: $teal;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
51
content/.vuepress/scss/partials/_modal.scss
Normal file
51
content/.vuepress/scss/partials/_modal.scss
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
.modal {
|
||||||
|
@include center;
|
||||||
|
top: 0; left: 0;
|
||||||
|
bottom: 0; right: 0;
|
||||||
|
|
||||||
|
background-color: rgba($black, 0.5);
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@media (min-width: 901px) {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
@media (min-width: 901px) {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1.33;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $teal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-wrap {
|
||||||
|
background-color: $white;
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
|
||||||
|
@media (min-width: 501px) {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue