Comparer les révisions

...

Pas de révisions en commun. "master" et "gh-pages" ont des historiques entièrement différents.

29 fichiers modifiés avec 50 ajouts et 10591 suppressions

Voir le fichier

@ -1,13 +0,0 @@
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

Voir le fichier

@ -1,16 +0,0 @@
module.exports = {
root: true,
env: {
browser: true,
node: true
},
extends: [
'@nuxtjs/eslint-config-typescript',
'plugin:nuxt/recommended',
'prettier'
],
plugins: [
],
// add your custom rules here
rules: {}
}

Voir le fichier

@ -1,36 +0,0 @@
name: cd
on: [push]
jobs:
cd:
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest]
node: [14]
steps:
- name: Checkout
uses: actions/checkout@master
- name: Setup node env
uses: actions/setup-node@v2.1.2
with:
node-version: ${{ matrix.node }}
- name: Install dependencies
run: yarn
- name: Generate
run: yarn generate
- name: Copy CNAME
run: cp ./CNAME ./dist/CNAME
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist

90
.gitignore externe
Voir le fichier

@ -1,90 +0,0 @@
# Created by .ignore support plugin (hsz.mobi)
### Node template
# Logs
/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# Nuxt generate
dist
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
# IDE / Editor
.idea
# Service worker
sw.*
# macOS
.DS_Store
# Vim swap files
*.swp

0
.nojekyll Fichier normal
Voir le fichier

Voir le fichier

@ -1,6 +0,0 @@
{
"semi": true,
"singleQuote": true,
"printWidth": 180,
"bracketSameLine": true
}

9
200.html Fichier normal
Voir le fichier

@ -0,0 +1,9 @@
<!doctype html>
<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
<head>
<title>NFT Avatar</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" name="description" content="Give your profile picture a hexagonal shape without having an NFT!"><meta data-n-head="1" name="keywords" content="NFT, twitter, avatar, maker, hexagon"><meta data-n-head="1" name="theme-color" content="#ffffff"><meta data-n-head="1" name="og:url" content="https://nftavatar.thijs.gg"><meta data-n-head="1" name="og:image" content="/logo.png"><meta data-n-head="1" name="twitter:image:src" content="/logo.png"><meta data-n-head="1" name="twitter:card" content="summary_large_image"><meta data-n-head="1" name="format-detection" content="telephone=no"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/ee14414.js" as="script"><link rel="preload" href="/_nuxt/56a85f2.js" as="script"><link rel="preload" href="/_nuxt/cba400b.js" as="script"><link rel="preload" href="/_nuxt/edfff06.js" as="script">
</head>
<body>
<div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/",assetsPath:"/_nuxt/",cdnURL:null}}}</script>
<script src="/_nuxt/ee14414.js"></script><script src="/_nuxt/56a85f2.js"></script><script src="/_nuxt/cba400b.js"></script><script src="/_nuxt/edfff06.js"></script></body>
</html>

21
LICENSE
Voir le fichier

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2021 Coding#0001
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Voir le fichier

@ -1,11 +0,0 @@
<p align="center"><img width="400" alt="NFT Avatar Logo" src="https://user-images.githubusercontent.com/28990589/142560237-32c2e04d-0db7-4d66-8a71-c549f1f09dad.png"></p>
<h1 align="center">Fake Twitter NFT Avatar</h1>
<h3 align="center">Give your profile picture a hexagonal shape!</h3><br>
<p align="center">
<strong><a href="https://nftavatar.thijs.gg" target="_blank">🔗 https://nftavatar.thijs.gg</a><br><br></strong>
Using Canvas, this website converts normal avatars to a hexagonal shape.<br>
This makes them appear as NFT avatars, an upcoming Twitter feature.<br><br>
<strong>Example:</strong><br>
<img width="200" alt="Example" src="https://user-images.githubusercontent.com/28990589/142560737-55295010-3b34-4fee-ac58-a95b42c58e2b.png">
</p>

1
_nuxt/1cfbba1.js Fichier normal
Voir le fichier

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{220:function(e,t,o){"use strict";o.r(t);o(26),o(67);var n={data:function(){return{image:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=",hexagon:null}},mounted:function(){var image=new Image;image.src="/hexagon.png",this.hexagon=image;var e=this.$refs.outputCanvas.getContext("2d");image.onload=function(){e.drawImage(image,0,0,250,250)}},methods:{imageChange:function(e){var t=this,o=this,n=e.target.files||e.dataTransfer.files;if(n.length){var r=n[0],l=new FileReader;l.onload=function(e){o.image=e.target.result,t.generateImage()},l.readAsDataURL(r)}},generateImage:function(){var e=this.$refs.outputCanvas.getContext("2d");e.globalCompositeOperation="source-over",e.drawImage(this.hexagon,0,0,250,250),e.globalCompositeOperation="source-in";var image=new Image;image.onload=function(){e.drawImage(image,0,0,250,250)},image.src=this.image},downloadImage:function(){var e=this.$refs.outputCanvas.toDataURL("image/png").replace("image/png","image/octet-stream"),link=document.createElement("a");link.download="nft-avatar.png",link.href=e,link.click()}}},r=o(51),component=Object(r.a)(n,(function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"flex flex-col md:flex-row items-center justify-center"},[o("div",{staticClass:"flex flex-col justify-center items-center px-4"},[o("p",{staticClass:"text-yellow-400 font-semibold text-xl mb-2"},[e._v("upload")]),e._v(" "),o("div",{staticClass:"border border-dashed border-yellow-300 p-5 md:mx-8 text-white rounded-md w-96 bg-gray-800"},[o("div",{staticClass:"container flex flex-col items-center"},[o("img",{ref:"uploadPreview",staticClass:"w-32 h-32 object-contain mb-4 rounded-full",attrs:{src:e.image}}),e._v(" "),o("input",{ref:"uploadFile",staticClass:"flex flex-row items-center justify-center",attrs:{type:"file",accept:"image/*"},on:{change:e.imageChange}})])])]),e._v(" "),o("div",{staticClass:"flex flex-col justify-center items-center px-4 mt-8 md:mt-0"},[o("p",{staticClass:"text-yellow-400 font-semibold text-xl mb-2"},[e._v("output")]),e._v(" "),o("div",{staticClass:"border border-dashed border-yellow-300 p-5 md:mx-8 text-white rounded-md w-96 bg-gray-800"},[o("div",{staticClass:"container flex flex-col items-center"},[o("canvas",{ref:"outputCanvas",staticClass:"mb-4 w-32 h-32",attrs:{width:"250",height:"250"}}),e._v(" "),o("a",{ref:"downloadButton",staticClass:"border-yellow-300 border-2 rounded-lg py-1 px-2 duration-200 hover:bg-yellow-300 hover:text-black font-semibold cursor-pointer",on:{click:e.downloadImage}},[e._v("Download Image")])])])])])}),[],!1,null,null,null);t.default=component.exports}}]);

2
_nuxt/56a85f2.js Fichier normal

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

1
_nuxt/766da64.js Fichier normal
Voir le fichier

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3,2],{219:function(t,e,n){var content=n(222);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,n(69).default)("bad8e090",content,!0,{sourceMap:!1})},220:function(t,e,n){"use strict";n.r(e);n(26),n(67);var o={data:function(){return{image:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=",hexagon:null}},mounted:function(){var image=new Image;image.src="/hexagon.png",this.hexagon=image;var t=this.$refs.outputCanvas.getContext("2d");image.onload=function(){t.drawImage(image,0,0,250,250)}},methods:{imageChange:function(t){var e=this,n=this,o=t.target.files||t.dataTransfer.files;if(o.length){var r=o[0],l=new FileReader;l.onload=function(t){n.image=t.target.result,e.generateImage()},l.readAsDataURL(r)}},generateImage:function(){var t=this.$refs.outputCanvas.getContext("2d");t.globalCompositeOperation="source-over",t.drawImage(this.hexagon,0,0,250,250),t.globalCompositeOperation="source-in";var image=new Image;image.onload=function(){t.drawImage(image,0,0,250,250)},image.src=this.image},downloadImage:function(){var t=this.$refs.outputCanvas.toDataURL("image/png").replace("image/png","image/octet-stream"),link=document.createElement("a");link.download="nft-avatar.png",link.href=t,link.click()}}},r=n(51),component=Object(r.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"flex flex-col md:flex-row items-center justify-center"},[n("div",{staticClass:"flex flex-col justify-center items-center px-4"},[n("p",{staticClass:"text-yellow-400 font-semibold text-xl mb-2"},[t._v("upload")]),t._v(" "),n("div",{staticClass:"border border-dashed border-yellow-300 p-5 md:mx-8 text-white rounded-md w-96 bg-gray-800"},[n("div",{staticClass:"container flex flex-col items-center"},[n("img",{ref:"uploadPreview",staticClass:"w-32 h-32 object-contain mb-4 rounded-full",attrs:{src:t.image}}),t._v(" "),n("input",{ref:"uploadFile",staticClass:"flex flex-row items-center justify-center",attrs:{type:"file",accept:"image/*"},on:{change:t.imageChange}})])])]),t._v(" "),n("div",{staticClass:"flex flex-col justify-center items-center px-4 mt-8 md:mt-0"},[n("p",{staticClass:"text-yellow-400 font-semibold text-xl mb-2"},[t._v("output")]),t._v(" "),n("div",{staticClass:"border border-dashed border-yellow-300 p-5 md:mx-8 text-white rounded-md w-96 bg-gray-800"},[n("div",{staticClass:"container flex flex-col items-center"},[n("canvas",{ref:"outputCanvas",staticClass:"mb-4 w-32 h-32",attrs:{width:"250",height:"250"}}),t._v(" "),n("a",{ref:"downloadButton",staticClass:"border-yellow-300 border-2 rounded-lg py-1 px-2 duration-200 hover:bg-yellow-300 hover:text-black font-semibold cursor-pointer",on:{click:t.downloadImage}},[t._v("Download Image")])])])])])}),[],!1,null,null,null);e.default=component.exports},221:function(t,e,n){"use strict";n(219)},222:function(t,e,n){var o=n(68)((function(i){return i[1]}));o.push([t.i,'/*purgecss start ignore*/\nbody{\n background:#15202b;\n font-family:"Roboto",sans-serif\n}\n\n/*purgecss end ignore*/',""]),o.locals={},t.exports=o},223:function(t,e,n){"use strict";n.r(e);var o=n(2).a.extend({}),r=(n(221),n(51)),component=Object(r.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"mb-8"},[n("div",{staticClass:"max-w-5xl mx-auto mt-12"},[t._m(0),t._v(" "),n("ImageEditor")],1)])])}),[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"text-white text-center mb-8"},[n("img",{staticClass:"mx-auto h-24 mb-4",attrs:{src:"/logo.png"}}),t._v(" "),n("h1",{staticClass:"font-bold text-4xl"},[t._v("Twitter NFT Avatar")]),t._v(" "),n("p",{staticClass:"font-semibold text-xl"},[t._v("Give your profile picture a hexagonal shape without an NFT!")]),t._v(" "),n("p",{staticClass:"text-md mt-1"},[t._v("\n Open source on "),n("a",{staticClass:"text-blue-500 hover:text-blue-600 transition duration-50",attrs:{href:"https://github.com/tandpfun/nft-avatar",target:"_blank"}},[t._v("GitHub")]),t._v(". Made by\n "),n("a",{staticClass:"text-blue-500 hover:text-blue-600 transition duration-50",attrs:{href:"https://twitter.com/cdngdev",target:"_blank"}},[t._v("@cdngdev")]),t._v(".\n ")])])}],!1,null,null,null);e.default=component.exports;installComponents(component,{ImageEditor:n(220).default})}}]);

24
_nuxt/LICENSES Fichier normal
Voir le fichier

@ -0,0 +1,24 @@
/*!
* vue-router v3.5.3
* (c) 2021 Evan You
* @license MIT
*/
/*!
* Vue.js v2.6.14
* (c) 2014-2021 Evan You
* Released under the MIT License.
*/
/*!
* vue-client-only v0.0.0-semantic-release
* (c) 2021-present egoist <0x142857@gmail.com>
* Released under the MIT License.
*/
/*!
* vue-no-ssr v1.1.1
* (c) 2018-present egoist <0x142857@gmail.com>
* Released under the MIT License.
*/

2
_nuxt/cba400b.js Fichier normal

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

1
_nuxt/edfff06.js Fichier normal

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

1
_nuxt/ee14414.js Fichier normal
Voir le fichier

@ -0,0 +1 @@
!function(e){function r(data){for(var r,n,l=data[0],f=data[1],d=data[2],i=0,h=[];i<l.length;i++)n=l[i],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&h.push(o[n][0]),o[n]=0;for(r in f)Object.prototype.hasOwnProperty.call(f,r)&&(e[r]=f[r]);for(v&&v(data);h.length;)h.shift()();return c.push.apply(c,d||[]),t()}function t(){for(var e,i=0;i<c.length;i++){for(var r=c[i],t=!0,n=1;n<r.length;n++){var f=r[n];0!==o[f]&&(t=!1)}t&&(c.splice(i--,1),e=l(l.s=r[0]))}return e}var n={},o={4:0},c=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var c,script=document.createElement("script");script.charset="utf-8",script.timeout=120,l.nc&&script.setAttribute("nonce",l.nc),script.src=function(e){return l.p+""+{2:"1cfbba1",3:"766da64"}[e]+".js"}(e);var f=new Error;c=function(r){script.onerror=script.onload=null,clearTimeout(d);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;f.message="Loading chunk "+e+" failed.\n("+n+": "+c+")",f.name="ChunkLoadError",f.type=n,f.request=c,t[1](f)}o[e]=void 0}};var d=setTimeout((function(){c({type:"timeout",target:script})}),12e4);script.onerror=script.onload=c,document.head.appendChild(script)}return Promise.all(r)},l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},l.p="/_nuxt/",l.oe=function(e){throw console.error(e),e};var f=window.webpackJsonp=window.webpackJsonp||[],d=f.push.bind(f);f.push=r,f=f.slice();for(var i=0;i<f.length;i++)r(f[i]);var v=d;t()}([]);

Voir le fichier

@ -1,252 +0,0 @@
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Voir le fichier

@ -1,88 +0,0 @@
<template>
<div class="flex flex-col md:flex-row items-center justify-center">
<div class="flex flex-col justify-center items-center px-4">
<p class="text-yellow-400 font-semibold text-xl mb-2">upload</p>
<div class="border border-dashed border-yellow-300 p-5 md:mx-8 text-white rounded-md w-96 bg-gray-800">
<div class="container flex flex-col items-center">
<img ref="uploadPreview" class="w-32 h-32 object-contain mb-4 rounded-full" :src="image" />
<input ref="uploadFile" class="flex flex-row items-center justify-center" type="file" accept="image/*" @change="imageChange" />
</div>
</div>
</div>
<div class="flex flex-col justify-center items-center px-4 mt-8 md:mt-0">
<p class="text-yellow-400 font-semibold text-xl mb-2">output</p>
<div class="border border-dashed border-yellow-300 p-5 md:mx-8 text-white rounded-md w-96 bg-gray-800">
<div class="container flex flex-col items-center">
<canvas ref="outputCanvas" class="mb-4 w-32 h-32" width="250" height="250"></canvas>
<a
ref="downloadButton"
class="border-yellow-300 border-2 rounded-lg py-1 px-2 duration-200 hover:bg-yellow-300 hover:text-black font-semibold cursor-pointer"
@click="downloadImage"
>Download Image</a
>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=',
hexagon: null,
};
},
mounted() {
const image = new Image();
image.src = '/hexagon.png';
this.hexagon = image;
const canvas = this.$refs.outputCanvas;
const ctx = canvas.getContext('2d');
image.onload = function () {
ctx.drawImage(image, 0, 0, 250, 250);
};
},
methods: {
imageChange(event) {
const _this = this;
const files = event.target.files || event.dataTransfer.files;
if (!files.length) return;
const file = files[0];
const reader = new FileReader();
reader.onload = (e) => {
_this.image = e.target.result;
this.generateImage();
};
reader.readAsDataURL(file);
},
generateImage() {
const canvas = this.$refs.outputCanvas;
const ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'source-over';
ctx.drawImage(this.hexagon, 0, 0, 250, 250);
ctx.globalCompositeOperation = 'source-in';
const image = new Image();
image.onload = function () {
ctx.drawImage(image, 0, 0, 250, 250);
};
image.src = this.image;
},
downloadImage() {
const canvas = this.$refs.outputCanvas;
const imageUrl = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
const link = document.createElement('a');
link.download = 'nft-avatar.png';
link.href = imageUrl;
link.click();
},
},
};
</script>

Voir le fichier

Avant

Largeur:  |  Hauteur:  |  Taille: 252 KiB

Après

Largeur:  |  Hauteur:  |  Taille: 252 KiB

Voir le fichier

Avant

Largeur:  |  Hauteur:  |  Taille: 8.3 KiB

Après

Largeur:  |  Hauteur:  |  Taille: 8.3 KiB

Voir le fichier

Avant

Largeur:  |  Hauteur:  |  Taille: 5.0 KiB

Après

Largeur:  |  Hauteur:  |  Taille: 5.0 KiB

9
index.html Fichier normal
Voir le fichier

@ -0,0 +1,9 @@
<!doctype html>
<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
<head>
<title>NFT Avatar</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" name="description" content="Give your profile picture a hexagonal shape without having an NFT!"><meta data-n-head="1" name="keywords" content="NFT, twitter, avatar, maker, hexagon"><meta data-n-head="1" name="theme-color" content="#ffffff"><meta data-n-head="1" name="og:url" content="https://nftavatar.thijs.gg"><meta data-n-head="1" name="og:image" content="/logo.png"><meta data-n-head="1" name="twitter:image:src" content="/logo.png"><meta data-n-head="1" name="twitter:card" content="summary_large_image"><meta data-n-head="1" name="format-detection" content="telephone=no"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/ee14414.js" as="script"><link rel="preload" href="/_nuxt/56a85f2.js" as="script"><link rel="preload" href="/_nuxt/cba400b.js" as="script"><link rel="preload" href="/_nuxt/edfff06.js" as="script">
</head>
<body>
<div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/",assetsPath:"/_nuxt/",cdnURL:null}}}</script>
<script src="/_nuxt/ee14414.js"></script><script src="/_nuxt/56a85f2.js"></script><script src="/_nuxt/cba400b.js"></script><script src="/_nuxt/edfff06.js"></script></body>
</html>

Voir le fichier

Avant

Largeur:  |  Hauteur:  |  Taille: 3.9 KiB

Après

Largeur:  |  Hauteur:  |  Taille: 3.9 KiB

Voir le fichier

@ -1,51 +0,0 @@
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'NFT Avatar',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'description', content: 'Give your profile picture a hexagonal shape without having an NFT!' },
{ name: 'keywords', content: 'NFT, twitter, avatar, maker, hexagon' },
{ name: 'theme-color', content: '#ffffff' },
{ name: 'og:url', content: 'https://nftavatar.thijs.gg' },
{ name: 'og:image', content: '/logo.png' },
{ name: 'twitter:image:src', content: '/logo.png' },
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['@/assets/css/fonts.css'],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
};

Voir le fichier

@ -1,33 +0,0 @@
{
"name": "nft-avatar",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "yarn lint:js",
"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},
"dependencies": {
"core-js": "^3.15.1",
"nuxt": "^2.15.7"
},
"devDependencies": {
"@babel/eslint-parser": "^7.14.7",
"@nuxt/types": "^2.15.7",
"@nuxt/typescript-build": "^2.1.0",
"@nuxtjs/eslint-config-typescript": "^6.0.1",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/tailwindcss": "^4.2.0",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-vue": "^7.12.1",
"postcss": "^8.3.5",
"prettier": "^2.3.2",
"push-dir": "^0.4.1"
}
}

Voir le fichier

@ -1,31 +0,0 @@
<template>
<div>
<div class="mb-8">
<div class="max-w-5xl mx-auto mt-12">
<div class="text-white text-center mb-8">
<img src="/logo.png" class="mx-auto h-24 mb-4" />
<h1 class="font-bold text-4xl">Twitter NFT Avatar</h1>
<p class="font-semibold text-xl">Give your profile picture a hexagonal shape without an NFT!</p>
<p class="text-md mt-1">
Open source on <a class="text-blue-500 hover:text-blue-600 transition duration-50" href="https://github.com/tandpfun/nft-avatar" target="_blank">GitHub</a>. Made by
<a class="text-blue-500 hover:text-blue-600 transition duration-50" href="https://twitter.com/cdngdev" target="_blank">@cdngdev</a>.
</p>
</div>
<ImageEditor />
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({});
</script>
<style>
body {
background: #15202b;
font-family: 'Roboto', sans-serif;
}
</style>

Voir le fichier

@ -1,11 +0,0 @@
module.exports = {
purge: {},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};

Voir le fichier

@ -1,36 +0,0 @@
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@nuxt/types",
"@types/node"
]
},
"exclude": [
"node_modules",
".nuxt",
"dist"
]
}

9896
yarn.lock

Fichier diff supprimé car celui-ci est trop grand Voir la Diff