Full Code of wormwlrm/kwakcheolyong for AI

Repository: wormwlrm/kwakcheolyong
Branch: master
Commit: 7b3e7068e36e
Files: 17
Total size: 18.5 KB

Directory structure:
gitextract_6kxn01up/

├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── deploy.bat
├── deploy.sh
├── package.json
├── postcss.config.js
├── public/
│   └── index.html
├── src/
│   ├── App.vue
│   ├── images.js
│   ├── main.js
│   └── style/
│       └── variable.scss
└── vue.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .browserslistrc
================================================
> 1%
last 2 versions


================================================
FILE: .editorconfig
================================================
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100


================================================
FILE: .eslintrc.js
================================================
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', '@vue/airbnb', 'prettier', 'plugin:prettier/recommended'],
  plugins: ['prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        trailingComma: 'all',
        arrowParens: 'always',
      },
    ],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};


================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2019 wormwlrm

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.


================================================
FILE: README.md
================================================
# 🎴 곽철용 짤 생성기

![preview](/preview.gif)

*웹사이트에서 간편하게 곽철용 짤을 편집하고, 다운로드하여 친구들에게 전송할 수 있습니다.*

## 어이 젊은 친구, 개발자답게 클론해

```bash
git clone https://github.com/wormwlrm/kwakcheolyong.git
cd kwakcheolyong
npm install
npm run serve
```

## 화란아, 나도 블로그가 있다

> [이 곳](https://wormwlrm.github.io/2019/10/13/Kwakcheolyong-Image-Creator-Development-Story.html)에서 만들어진 스토리를 확인하실 수 있습니다.

## 관리자는 무너졌냐, 이 새끼야

- [wormwlrm](https://github.com/wormwlrm)

## 고니야, PR 한 번 찔러봐라

어떤 양식의 풀 리퀘스트도 환영합니다.

## 이 안에 도움을 받은 소스가 있다, 이게 내 결론이다

- [개비스콘 짤 생성기](https://github.com/rajephon/gvsc)
- [Velog 짤 생성기](https://velog.io/@godori/banner-maker)

## 묻고 MIT 라이센스로 가

MIT License


================================================
FILE: babel.config.js
================================================
module.exports = {
  presets: ['@vue/app'],
};


================================================
FILE: deploy.bat
================================================
REM build
call npm run build

REM navigate into the build output directory
cd dist

git init
git add -A
git commit -m 'deploy'

git push -f https://github.com/wormwlrm/kwakcheolyong.git master:gh-pages

cd ../

================================================
FILE: deploy.sh
================================================
#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:wormwlrm/kwakcheolyong.git master:gh-pages

cd -

================================================
FILE: package.json
================================================
{
  "name": "kwakcheolyong",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-theme-dark": "^1.0.3",
    "element-ui": "^2.12.0",
    "vue": "^2.6.10",
    "vue-google-adsense": "^1.7.0",
    "vue-script2": "^2.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^6.4.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.2.3",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.6.10"
  }
}


================================================
FILE: postcss.config.js
================================================
module.exports = {
  plugins: {
    autoprefixer: {},
  },
};


================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>곽철용 짤 생성기 - 재그지그</title>
  <meta property="og:title" content="곽철용 짤 생성기 - 재그지그">
  <meta name="description" content="어이, 젊은 친구! 신사답게 행동해.">
  <meta property="og:description" content="어이, 젊은 친구! 신사답게 행동해.">
  <meta property="og:image" content="<%= BASE_URL %>og.png">
  <meta property="og:url" content="https://wormwlrm.github.io/kwakcheolyong">
  <meta name="theme-color" content="#212529">
  <!-- Google Tag Manager -->
  <script>
    (function (w, d, s, l, i) {
      w[l] = w[l] || [];
      w[l].push({
        'gtm.start': new Date().getTime(),
        event: 'gtm.js'
      });
      var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s),
        dl = l != 'dataLayer' ? '&l=' + l : '';
      j.async = true;
      j.src =
        'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
      f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-TXHVWXL');
  </script>
  <!-- End Google Tag Manager -->
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-121984235-3"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-121984235-3');
  </script>

</head>

<body>
  <noscript>
    <strong>
      We're sorry but kwakcheolyong doesn't work properly without JavaScript enabled.
      Please enable it to continue.
    </strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>


================================================
FILE: src/App.vue
================================================
<template>
  <div id="app">
    <el-container>
      <el-header>
        <h2 class="kwakcheolyong__title">곽철용 짤 생성기</h2>
      </el-header>
      <el-main>
        <el-form :label-position="labelPosition" label-width="120px">
          <el-select
            class="kwakcheolyong__image-selector"
            :value="imageIndex"
            @input="onImageChanged($event)"
          >
            <el-option v-for="img in images" :value="img.id" :key="img.id" :label="img.name" />
          </el-select>
          <el-card shadow="none" class="kwakcheolyong__canvas-wrapper">
            <canvas id="canvas" ref="canvas" :width="1000" :height="427">
              이 브라우저는 HTML5의 canvas 요소를 지원하지 않습니다
            </canvas>
          </el-card>
          <el-form-item label="원본 대사">
            <blockquote v-html="images[imageIndex].original"></blockquote>
          </el-form-item>
          <el-form-item label="텍스트">
            <el-input
              type="textarea"
              class="kwakcheolyong--full-width"
              :value="option.text"
              @input="onValueChanged('text', $event)"
            />
          </el-form-item>
          <el-row>
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="폰트 종류">
                <el-select
                  :value="option.fontFamily"
                  @input="onValueChanged('fontFamily', $event)"
                  class="kwakcheolyong--full-width"
                >
                  <el-option value="Nanum Gothic">Nanum Gothic</el-option>
                  <el-option value="Gulim">Gulim</el-option>
                  <el-option value="Arial">Arial</el-option>
                  <el-option value="Helvetica">Helvetica</el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="폰트 사이즈">
                <el-select
                  :value="option.fontSize"
                  @input="onValueChanged('fontSize', $event)"
                  class="kwakcheolyong--full-width"
                >
                  <el-option :value="15">15</el-option>
                  <el-option :value="20">20</el-option>
                  <el-option :value="25">25</el-option>
                  <el-option :value="30">30</el-option>
                  <el-option :value="35">35</el-option>
                  <el-option :value="40">40</el-option>
                  <el-option :value="45">45</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="폰트 색상">
                <el-color-picker
                  :value="option.fontColor"
                  @input="onValueChanged('fontColor', $event)"
                />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="폰트 두께">
                <el-select
                  :value="option.fontWeight"
                  @input="onValueChanged('fontWeight', $event)"
                  class="kwakcheolyong--full-width"
                >
                  <el-option value="lighter" label="얇게"></el-option>
                  <el-option value="normal" label="보통"></el-option>
                  <el-option value="bolder" label="두껍게"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="폰트 테두리">
                <el-select
                  :value="option.textBorder"
                  @input="onValueChanged('textBorder', $event)"
                  class="kwakcheolyong--full-width"
                >
                  <el-option value="transparent" label="없음"></el-option>
                  <el-option value="black" label="검정색"></el-option>
                  <el-option value="white" label="흰색"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label>
            <el-button @click="downloadCanvas" id="download">다운로드</el-button>
          </el-form-item>
        </el-form>
      </el-main>
      <el-alert
        :title="
          `
          웹뷰(페이스북 앱 등)에서는 다운로드 버튼이 작동하지 않습니다.
          다른 브라우저를 이용하면 정상적으로 이용하실 수 있습니다.
          `
        "
        type="info"
        effect="dark"
      ></el-alert>
      <br />
      <Adsense data-ad-client="ca-pub-8996192158520412" data-ad-slot="5328204023"></Adsense>
      <el-footer>
        <p>
          Created by
          <el-link
            type="primary"
            :underline="false"
            target="_blank"
            href="https://github.com/wormwlrm"
          >
            재그지그
          </el-link>
          |
          <el-link
            type="primary"
            :underline="false"
            target="_blank"
            href="https://github.com/wormwlrm/kwakcheolyong"
          >
            Github
          </el-link>
          |
          <el-link
            type="primary"
            :underline="false"
            target="_blank"
            href="https://wormwlrm.github.io/2019/10/13/Kwakcheolyong-Image-Creator-Development-Story.html"
          >
            제작 과정 보러가기
          </el-link>
          |
          <el-link
            type="primary"
            :underline="false"
            target="_blank"
            href="mailto:wormwlrm@naver.com"
          >
            이슈 / 버그 제보
          </el-link>
        </p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import images from '@/images';

export default {
  name: 'app',

  data() {
    return {
      windowWidth: 0,
      imageIndex: 0,
      option: {
        fontFamily: 'Nanum Gothic',
        fontSize: 30,
        fontColor: '#FFFFFF',
        fontWeight: 'normal',
        text: '',
        textBorder: 'black',
      },
    };
  },

  computed: {
    images() {
      return images;
    },

    labelPosition() {
      return this.windowWidth > 768 ? 'right' : 'top';
    },
  },

  methods: {
    onValueChanged(key, value) {
      this.option[key] = value;
      this.updateCanvas();
    },

    onImageChanged(value) {
      this.imageIndex = value;
      this.updateCanvas();
    },

    updateCanvas() {
      if (!this.$refs.canvas) return;
      this.updateCanvasImage();
    },

    updateCanvasImage() {
      const { canvas } = this.$refs;
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = this.images[this.imageIndex].src;
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        this.updateCanvasText();
      };
    },

    updateCanvasText() {
      const { canvas } = this.$refs;

      const { text, fontFamily, fontSize, fontColor, fontWeight, textBorder } = this.option;

      const ctx = canvas.getContext('2d');

      ctx.textAlign = 'center'; // 가로 가운데 정렬
      ctx.textBaseline = 'middle'; // 세로 가운데 정렬
      ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;

      const lines = text.split('\n');

      lines.forEach((line, index) => {
        // ctx.shadowColor = 'black';
        // ctx.shadowBlur = 10;
        ctx.lineWidth = 5;
        ctx.strokeStyle = `${textBorder}`;
        ctx.strokeText(
          line,
          canvas.width / 2,
          canvas.height - fontSize * (lines.length - index) * 1.5,
        );

        ctx.fillStyle = fontColor;
        ctx.fillText(
          line,
          canvas.width / 2,
          canvas.height - fontSize * (lines.length - index) * 1.5,
        );
      });
    },

    downloadCanvas() {
      const url = this.$refs.canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `${this.images[this.imageIndex].name}.png`);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

    calculateWindowWidth() {
      this.windowWidth = window.innerWidth;
    },
  },

  mounted() {
    this.calculateWindowWidth();
    this.$nextTick(() => {
      window.addEventListener('resize', this.calculateWindowWidth);

      this.updateCanvas();
    });
  },
};
</script>

<style lang="scss">
@import '@/style/variable.scss';
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');

html,
body {
  margin: 0;
  padding: 0;
  background-color: $gray-900;
}

#app {
  position: relative;
  height: 100vh;
  width: 100vw;
  padding: 20px;
  box-sizing: border-box;

  .kwakcheolyong {
    &__title {
      text-align: center;
    }

    &__image-selector {
      width: 250px;
      left: 50%;
      transform: translateX(-50%);
    }

    &__canvas-wrapper {
      width: 100%;
      max-width: 1040px;
      margin: 20px auto;
    }

    &--full-width {
      width: 100%;
    }
  }

  #canvas {
    display: block;
    width: 100%;
    max-width: 1000px;
    border: 1px solid $black;
  }

  blockquote {
    border: 1px solid $gray-900;
    border-radius: 4px;
    background: $gray-800;
    border-left: 10px solid $gray-700;
    margin: 10px 0;
    padding: 0.5em 10px;
    color: $gray-200;
  }
}
</style>


================================================
FILE: src/images.js
================================================
import 내밑에서일할생각없냐 from '@/assets/내밑에서일할생각없냐.png';
import 늑대새끼가어떻게개밑으로들어갑니까 from '@/assets/늑대새끼가어떻게개밑으로들어갑니까.png';
import 달건이 from '@/assets/달건이.png';
import 담배하나찔러봐라 from '@/assets/담배하나찔러봐라.png';
import 또지면넌변사체가된다 from '@/assets/또지면넌변사체가된다.png';
import 묻고더블로가 from '@/assets/묻고더블로가.png';
import 신사답게행동해 from '@/assets/신사답게행동해.png';
import 마그때는깡패가되는거야 from '@/assets/마그때는깡패가되는거야.png';
import 어이젊은친구 from '@/assets/어이젊은친구.png';
import 마포대교 from '@/assets/마포대교.png';
import 이게내결론이다 from '@/assets/이게내결론이다.png';
import 이안에배신자가있다 from '@/assets/이안에배신자가있다.png';
import 퍽퍽 from '@/assets/퍽퍽.png';
import 한끗 from '@/assets/한끗.png';
import 한끗인데5억을태워 from '@/assets/한끗인데5억을태워.png';
import 화란아나도순정이있다 from '@/assets/화란아나도순정이있다.png';

export default [
  {
    id: 0,
    src: 어이젊은친구,
    name: '어이 젊은 친구',
    original: '어이 젊은 친구, 신사답게 행동해.',
  },
  {
    id: 1,
    src: 신사답게행동해,
    name: '신사답게 행동해',
    original: '어이 젊은 친구, 신사답게 행동해.',
  },
  {
    id: 2,
    src: 화란아나도순정이있다,
    name: '화란아, 나도 순정이 있다',
    original: '화란아, 나도 순정이 있다.',
  },
  {
    id: 3,
    src: 마그때는깡패가되는거야,
    name: '마 그때는 깡패가 되는 거야!',
    original: '니가 이런 식으로 내 순정을 짓밟으면은 마 그때는 깡패가 되는 거야!',
  },
  {
    id: 4,
    src: 또지면넌변사체가된다,
    name: '또 지면 넌 변사체가 된다',
    original: '무석아, 쟤 이길 수 있겠냐?<br>또 지면 넌 변사체가 된다',
  },
  {
    id: 5,
    src: 묻고더블로가,
    name: '묻고 더블로 가!',
    original: '묻고 더블로 가!',
  },
  {
    id: 6,
    src: 한끗,
    name: '한 끗?',
    original: '한 끗? 한 끗인데 5억을 태워?',
  },
  {
    id: 7,
    src: 한끗인데5억을태워,
    name: '한 끗인데 5억을 태워?',
    original: '한 끗? 한 끗인데 5억을 태워?',
  },
  {
    id: 8,
    src: 내밑에서일할생각없냐,
    name: '내 밑에서 일 할 생각 없냐?',
    original: '야! 너, 내 밑에서 일 할 생각 없냐?',
  },
  {
    id: 9,
    src: 늑대새끼가어떻게개밑으로들어갑니까,
    name: '늑대새끼가 어떻게 개 밑으로 들어갑니까',
    original: '아이~ 늑대새끼가 어떻게 개 밑으로 들어갑니까.',
  },
  {
    id: 10,
    src: 이안에배신자가있다,
    name: '이 안에 배신자가 있다',
    original: '카메라도 안 되고.. 약도 안 되고.. 이 안에 배신자가 있다.',
  },
  {
    id: 11,
    src: 이게내결론이다,
    name: '이게 내 결론이다',
    original: '이게 내 결론이다. 내 돈 어딨어? 아~ 잘 모르시지?',
  },
  {
    id: 12,
    src: 퍽퍽,
    name: '퍽퍽',
    original: '(배신한 박무성을 볼링핀으로 때리는 장면)',
  },
  {
    id: 13,
    src: 달건이,
    name: '내가 달건이 생활을 열일곱에 시작했다.',
    original:
      '내가 달건이 생활을 열일곱에 시작했다. 그 나이 때 달건이 시작한 놈들이 백 명이다 치면은.. 지금 나만큼 사는 놈은 나 혼자 뿐이야.<br>나는 어떻게 여기까지 왔느냐? 잘난 놈 제끼고. 못난 놈 보내고. 안경잽이같이 배신하는 새끼들... 다 죽였다.',
  },
  {
    id: 14,
    src: 담배하나찔러봐라,
    name: '고니야, 담배 하나 찔러봐라',
    original: '고니야, 담배 하나 찔러봐라',
  },
  {
    id: 15,
    src: 마포대교,
    name: '마포대교는 무너졌냐, 이 새끼야?',
    original: `회장님, 올림픽대로가 막힐 것 같습니다.<br>마포대교는 무너졌냐, 이 새끼야?`,
  },
];


================================================
FILE: src/main.js
================================================
import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/ko';
import Ads from 'vue-google-adsense';
import 'element-ui/lib/theme-chalk/index.css';
// eslint-disable-next-line
import 'element-theme-dark';

import App from './App.vue';

Vue.use(require('vue-script2'));

Vue.use(Ads.Adsense);

Vue.use(ElementUI, {
  locale,
});

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');


================================================
FILE: src/style/variable.scss
================================================
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

================================================
FILE: vue.config.js
================================================
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/kwakcheolyong/' : '/',
};