├── .nvmrc
├── .dockerignore
├── public
    ├── _redirects
    ├── favicon.ico
    ├── favicon.png
    └── index.html
├── .browserslistrc
├── src
    ├── assets
    │   ├── 404.png
    │   ├── logo.png
    │   └── logo.svg
    ├── plugins
    │   └── vuetify.js
    ├── components
    │   ├── Docs
    │   │   ├── Minicomment.vue
    │   │   ├── Apitable.vue
    │   │   └── Reqtable.vue
    │   ├── File.vue
    │   └── Navbar.vue
    ├── main.js
    ├── store
    │   └── index.js
    ├── App.vue
    ├── api.js
    ├── router
    │   └── index.js
    └── views
    │   ├── More.vue
    │   ├── Login.vue
    │   ├── Upload.vue
    │   ├── Grid.vue
    │   ├── Dashboard.vue
    │   └── Docs.vue
├── vue.config.js
├── babel.config.js
├── .env
├── docker-compose.yml
├── .editorconfig
├── .gitignore
├── Dockerfile
├── README.md
├── package.json
└── .eslintrc.js


/.nvmrc:
--------------------------------------------------------------------------------
1 | 12.18.0


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Waifu-pics/waifu-frontend/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Waifu-pics/waifu-frontend/HEAD/public/favicon.png


--------------------------------------------------------------------------------
/src/assets/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Waifu-pics/waifu-frontend/HEAD/src/assets/404.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Waifu-pics/waifu-frontend/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   transpileDependencies: [
3 |     'vuetify',
4 |   ],
5 | }
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | VUE_APP_API=http://api.waifu.pics/
2 | VUE_APP_CDN=https://i.waifu.pics/
3 | VUE_APP_ROOT_DOMAIN=waifu.pics


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3'
2 | services:
3 |   client:
4 |     build: .
5 |     ports:
6 |     - "8080:8082"


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuetify from 'vuetify/lib'
3 | 
4 | Vue.use(Vuetify)
5 | 
6 | export default new Vuetify({
7 | })
8 | 


--------------------------------------------------------------------------------
/src/components/Docs/Minicomment.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <i><p><slot></slot></p></i>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | div {
 9 |   font-size: 11px;
10 | }
11 | </style>
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | yarn.lock
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | .vscode
24 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM golang:alpine AS gobuilder
 2 | WORKDIR /app/server
 3 | COPY ./server /app/server
 4 | RUN cd /app/server && go build -o goapp
 5 | 
 6 | FROM node:lts-alpine AS vuebuilder
 7 | WORKDIR /app/client
 8 | COPY . .
 9 | RUN npm install
10 | RUN npm run build
11 | 
12 | FROM alpine
13 | WORKDIR /app
14 | COPY --from=gobuilder /app/server/goapp /app
15 | COPY --from=vuebuilder /app/client/dist /app/dist
16 | 
17 | ENTRYPOINT ./goapp


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # waifu.pics
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import vuetify from './plugins/vuetify'
 6 | import VueNotification from "@kugatsu/vuenotification"
 7 | 
 8 | Vue.config.productionTip = false
 9 | 
10 | Vue.use(VueNotification, {
11 |   timer: 4,
12 |   showLeftIcn: false,
13 | })
14 | 
15 | new Vue({
16 |   router,
17 |   store,
18 |   vuetify,
19 |   render: h => h(App),
20 | }).$mount('#app')
21 | 


--------------------------------------------------------------------------------
/src/components/Docs/Apitable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-simple-table>
 3 |     <thead>
 4 |       <tr>
 5 |         <th class="text-left">URL</th>
 6 |         <th class="text-left">Request Type</th>
 7 |       </tr>
 8 |     </thead>
 9 |     <tbody>
10 |       <tr>
11 |         <td><slot></slot></td>
12 |         <td>{{type}}</td>
13 |       </tr>
14 |     </tbody>
15 |   </v-simple-table>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   name: "apitable",
21 |   props: ["type"],
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import { api } from '@/api.js'
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | export default new Vuex.Store({
 8 |   state: {
 9 |     endpoints: [],
10 |   },
11 |   mutations: {
12 |     endpoints (state) {
13 |       api.getEndpoints((res) => {
14 |         state.endpoints = res
15 |       })
16 |     },
17 |   },
18 |   getters: {
19 |     endpoints (state) {
20 |       return state.endpoints
21 |     },
22 |   },
23 |   actions: {
24 |   },
25 |   modules: {
26 |   },
27 | })
28 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/Docs/Reqtable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-simple-table>
 3 |     <thead>
 4 |       <tr>
 5 |         <th class="text-left">Field</th>
 6 |         <th class="text-left">Data Type</th>
 7 |         <th class="text-left">Description</th>
 8 |       </tr>
 9 |     </thead>
10 |     <tbody>
11 |       <tr>
12 |         <td>{{field}}</td>
13 |         <td>{{type}}</td>
14 |         <td><slot></slot></td>
15 |       </tr>
16 |     </tbody>
17 |   </v-simple-table>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: "reqtable",
23 |   props: ["type", "field"],
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <Navbar></Navbar>
 4 |     <v-main v-if="this.$store.getters.endpoints != undefined">
 5 |       <router-view/>
 6 |     </v-main>
 7 |   </v-app>
 8 | </template>
 9 | 
10 | <style lang="scss">
11 | .centered {
12 |     position: relative;
13 |     top: 50%;
14 |     left: 50%;
15 |     transform: translate(-50%, -50%);
16 | }
17 | </style>
18 | 
19 | <script>
20 | import Navbar from './components/Navbar.vue'
21 | 
22 | export default {
23 |   name: 'App',
24 |   components: {
25 |     Navbar,
26 |   },
27 |   created () {
28 |     this.$store.commit('endpoints')
29 |     this.$vuetify.theme.dark = true
30 |   },
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/src/api.js:
--------------------------------------------------------------------------------
 1 | const { default: Axios } = require("axios")
 2 | 
 3 | export const api = {
 4 |   getEndpoints: (callback) => {
 5 |     Axios({
 6 |       method: "get",
 7 |       url: `${process.env.VUE_APP_API}endpoints`,
 8 |     }).then((res) => {
 9 |       callback(res.data)
10 |     })
11 |   },
12 |   checkLoggedIn: () => {
13 |     return Axios({
14 |       method: "post",
15 |       url: `${process.env.VUE_APP_API}admin/login`,
16 |       withCredentials: true,
17 |     })
18 |   },
19 |   getOne: (endpoint, nsfw, callback) => {
20 |     Axios({
21 |       method: "get",
22 |       url: `${process.env.VUE_APP_API}${nsfw ? "nsfw" : "sfw"}/${endpoint}`,
23 |     }).then((res) => {
24 |       callback(res.data)
25 |     })
26 |   },
27 | }
28 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import More from '@/views/More.vue'
 4 | import Grid from '@/views/Grid.vue'
 5 | import Docs from '@/views/Docs.vue'
 6 | import Login from '@/views/Login.vue'
 7 | import Upload from '@/views/Upload.vue'
 8 | import Dashboard from '@/views/Dashboard.vue'
 9 | 
10 | Vue.use(VueRouter)
11 | 
12 | const routes = [
13 |   {
14 |     path: '/',
15 |     name: 'Home',
16 |     component: Grid,
17 |   },
18 |   {
19 |     path: '/more',
20 |     name: 'More',
21 |     component: More,
22 |   },
23 |   {
24 |     path: '/docs',
25 |     name: 'Docs',
26 |     component: Docs,
27 |   },
28 |   {
29 |     path: '/upload',
30 |     name: 'Upload',
31 |     component: Upload,
32 |   },
33 |   {
34 |     path: '/admin/login',
35 |     name: 'Login',
36 |     component: Login,
37 |   },
38 |   {
39 |     path: '/admin',
40 |     name: 'Admin',
41 |     component: Dashboard,
42 |   },
43 |   {
44 |     path: '/:type',
45 |     name: 'Grid',
46 |     component: Grid,
47 |   },
48 |   {
49 |     path: '/:type/:endpoint',
50 |     name: 'Grid',
51 |     component: Grid,
52 |   },
53 | ]
54 | 
55 | const router = new VueRouter({
56 |   mode: 'history',
57 |   base: process.env.BASE_URL,
58 |   routes,
59 | })
60 | 
61 | export default router
62 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <meta name="theme-color" content="#72a9e8">
 8 | 
 9 |     <meta property="og:title" content="Waifu.pics"/>
10 |     <meta property="og:type" content="website"/>
11 |     <meta property="og:url" content="https://waifu.pics"/>
12 |     <meta property="og:description" content="A very large user controlled image database"/>
13 |     <meta property="og:image" content="https://waifu.pics/favicon.png"/>
14 |     <meta name="twitter:card" content="summary_large_image">
15 | 
16 |     <meta name="keywords" content="nekos, catgirl, nsfw, sfw, nyaa, images, lewd, neko images, meow, anime, manga, trap, anime, waifu, pics, discord, api">
17 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
18 |     <title><%= htmlWebpackPlugin.options.title %></title>
19 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
20 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
21 |   </head>
22 |   <body>
23 |     <noscript>
24 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
25 |     </noscript>
26 |     <div id="app"></div>
27 |     <!-- built files will be auto injected -->
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "waifu.pics",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@kugatsu/vuenotification": "^1.1.4",
12 |     "atob": "^2.1.2",
13 |     "axios": "^0.19.2",
14 |     "core-js": "^3.6.5",
15 |     "decode-uri-component": "^0.2.0",
16 |     "file-type": "^15.0.1",
17 |     "filepond": "^4.19.2",
18 |     "filepond-plugin-file-metadata": "^1.0.7",
19 |     "gsap": "^3.4.2",
20 |     "image-type": "^4.1.0",
21 |     "source-map-url": "^0.4.0",
22 |     "urix": "^0.1.0",
23 |     "vue": "^2.6.11",
24 |     "vue-filepond": "^6.0.2",
25 |     "vue-json-pretty": "^1.6.7",
26 |     "vue-notification": "^1.3.20",
27 |     "vue-router": "^3.2.0",
28 |     "vue-simple-markdown": "^1.1.4",
29 |     "vue2-dropzone": "^3.6.0",
30 |     "vuejs-noty": "^0.1.3",
31 |     "vuetify": "^2.2.11",
32 |     "vuex": "^3.4.0"
33 |   },
34 |   "devDependencies": {
35 |     "@vue/cli-plugin-babel": "~4.4.0",
36 |     "@vue/cli-plugin-eslint": "~4.4.0",
37 |     "@vue/cli-plugin-router": "~4.4.0",
38 |     "@vue/cli-plugin-vuex": "~4.4.0",
39 |     "@vue/cli-service": "~4.4.0",
40 |     "@vue/eslint-config-standard": "^5.1.2",
41 |     "babel-eslint": "^10.1.0",
42 |     "eslint": "^6.7.2",
43 |     "eslint-plugin-import": "^2.20.2",
44 |     "eslint-plugin-node": "^11.1.0",
45 |     "eslint-plugin-promise": "^4.2.1",
46 |     "eslint-plugin-standard": "^4.0.0",
47 |     "eslint-plugin-vue": "^6.2.2",
48 |     "sass": "^1.26.5",
49 |     "sass-loader": "^8.0.2",
50 |     "vue-cli-plugin-vuetify": "~2.0.7",
51 |     "vue-template-compiler": "^2.6.11",
52 |     "vuetify-loader": "^1.3.0"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/views/More.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about centered">
 3 |     <v-card class="mx-auto" max-width="400" outlined>
 4 |       <v-list-item three-line>
 5 |         <v-list-item-content>
 6 |           <v-list-item-title class="headline mb-1">Pages</v-list-item-title>
 7 |           <v-list-item-subtitle>Here are all the different pages you can explore.</v-list-item-subtitle>
 8 |         </v-list-item-content>
 9 |       </v-list-item>
10 |       <v-expansion-panels multiple>
11 |         <v-expansion-panel>
12 |           <v-expansion-panel-header>SFW</v-expansion-panel-header>
13 |           <v-expansion-panel-content>
14 |             <v-list-item class="bottom">
15 |               <v-btn outlined v-for="endpoint in this.$store.getters.endpoints.sfw" :key="endpoint" :to="`/sfw/${endpoint}`" text>{{endpoint}}</v-btn>
16 |             </v-list-item>
17 |           </v-expansion-panel-content>
18 |         </v-expansion-panel>
19 |         <v-expansion-panel>
20 |           <v-expansion-panel-header>NSFW</v-expansion-panel-header>
21 |           <v-expansion-panel-content>
22 |             <v-list-item class="bottom">
23 |               <v-btn outlined v-for="endpoint in this.$store.getters.endpoints.nsfw" :key="endpoint" :to="`/nsfw/${endpoint}`" text>{{endpoint}}</v-btn>
24 |             </v-list-item>
25 |           </v-expansion-panel-content>
26 |         </v-expansion-panel>
27 |       </v-expansion-panels>
28 |     </v-card>
29 |   </div>
30 | </template>
31 | 
32 | <style lang="scss" scoped>
33 | .v-card {
34 |   text-align: center;
35 | 
36 |   .v-list-item {
37 |     display: block;
38 |   }
39 | 
40 |   .v-btn {
41 |     width: 90px;
42 |     margin: 6px;
43 |   }
44 | 
45 |   .bottom {
46 |     margin-bottom: 20px;
47 |   }
48 | }
49 | </style>
50 | 
51 | <script>
52 | export default {
53 |   name: 'More',
54 | }
55 | </script>
56 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="show" class="centered">
 3 |     <v-card max-width="400" outlined>
 4 |       <div class="topbox">
 5 |         <h1 class="font-weight-light">Sign in</h1>
 6 |         <p>login to admin dashboard</p>
 7 |       </div>
 8 |       <v-form @submit.prevent="login">
 9 |         <v-card-text>
10 |           <v-text-field v-model="username" outlined label="Login" name="login" type="text"/>
11 |           <v-text-field v-model="password" outlined id="password" label="Password" name="password" type="password"/>
12 |         </v-card-text>
13 |         <v-btn class="centered" depressed type="submit">Login</v-btn>
14 |       </v-form>
15 |     </v-card>
16 |   </div>
17 | </template>
18 | 
19 | <style lang="scss" scoped>
20 | .v-btn {
21 |   margin-bottom: 5px;
22 | }
23 | .v-card {
24 |   margin: auto;
25 | }
26 | .topbox {
27 |   text-align: center;
28 |   margin-top: 20px;
29 | }
30 | </style>
31 | 
32 | <script>
33 | import Axios from 'axios'
34 | import { api } from '@/api.js'
35 | 
36 | export default {
37 |   data: function () {
38 |     return {
39 |       show: false,
40 |     }
41 |   },
42 |   methods: {
43 |     login: function () {
44 |       const { username, password } = this
45 |       
46 |       Axios({
47 |         method: "post",
48 |         url: `${process.env.VUE_APP_API}admin/login`,
49 |         data: {
50 |           username: username,
51 |           password: password,
52 |         },
53 |         withCredentials: true,
54 |       }).then(() => {
55 |         this.$notification.success("You have been logged in!")
56 |         this.$router.push('/admin')
57 |       }).catch(() => {
58 |         this.$notification.error("There was a problem logging in!")
59 |       })
60 |     },
61 |   },
62 |   mounted: function () {
63 |     api.checkLoggedIn().then(() => {
64 |       this.$router.push('/admin')
65 |     }).catch(() => {
66 |       this.show = true
67 |     })
68 |   },
69 | }
70 | </script>
71 | 


--------------------------------------------------------------------------------
/src/components/File.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-card>
 4 |       <v-img :src="file.url" class="white--text align-end" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)" height="250px">
 5 |         <v-card-title v-text="file.name"></v-card-title>
 6 |       </v-img>
 7 | 
 8 |       <v-card-actions>
 9 |         <v-checkbox style="margin-bottom: -20px; margin-top: -5px; margin-left: 5px;" v-model="$parent._data.deletelist" :value="file.name"></v-checkbox>
10 | 
11 |         <v-spacer></v-spacer>
12 | 
13 |         <v-btn icon v-on:click="open()">
14 |           <v-icon>mdi-launch</v-icon>
15 |         </v-btn>
16 | 
17 |         <v-btn icon v-on:click="verify(false)">
18 |           <v-icon>mdi-delete</v-icon>
19 |         </v-btn>
20 | 
21 |         <v-btn v-if="!verified" v-on:click="verify(true)" icon>
22 |           <v-icon>mdi-check</v-icon>
23 |         </v-btn>
24 |       </v-card-actions>
25 |     </v-card>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import Axios from 'axios'
31 | 
32 | export default {
33 |   name: 'Filebox',
34 |   props: {
35 |     file: Object,
36 |     verified: Boolean,
37 |   },
38 |   methods: {
39 |     verify: function (verify) {
40 |       let endpoint = verify ? "verify" : "delete"
41 |       let plural = verify ? "verified" : "deleted"
42 | 
43 |       Axios({
44 |         method: "post",
45 |         url: `${process.env.VUE_APP_API}admin/${endpoint}`,
46 |         data: {
47 |           files: [
48 |             this.file.name,
49 |           ],
50 |         },
51 |         withCredentials: true,
52 |       }).then((res) => {
53 |         this.$notification.success(`${this.file.name} was successfuly ${plural}!`)
54 | 
55 |         this.$parent.search()
56 |       }).catch(() => {
57 |         this.$notification.error(`${this.file.name} could not be ${plural}!`)
58 |       })
59 |     },
60 |     open: function () {
61 |       window.open(this.file.url)
62 |     },
63 |   },
64 | }
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-navigation-drawer v-model="drawer" app clipped >
 4 |       <v-list v-for="route in routes" :key="route" dense nav>
 5 |         <v-list-item link :to="route.link">
 6 |           <v-list-item-action>
 7 |             <v-icon>{{route.icon}}</v-icon>
 8 |           </v-list-item-action>
 9 |           <v-list-item-content>
10 |             <v-list-item-title>{{route.title}}</v-list-item-title>
11 |           </v-list-item-content>
12 |         </v-list-item>
13 |       </v-list>
14 |       <template v-slot:append>
15 |         <v-list v-for="route in bottomlink" :key="route" dense nav>
16 |           <v-list-item :href="route.link">
17 |             <v-list-item-action>
18 |               <v-icon>{{route.icon}}</v-icon>
19 |             </v-list-item-action>
20 |             <v-list-item-content>
21 |               <v-list-item-title>{{route.title}}</v-list-item-title>
22 |             </v-list-item-content>
23 |           </v-list-item>
24 |         </v-list>
25 |       </template>
26 |     </v-navigation-drawer>
27 | 
28 |     <v-app-bar app clipped-left>
29 |       <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
30 |       <v-toolbar-title>WAIFU.PICS</v-toolbar-title>
31 |     </v-app-bar>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | export default {
37 |   data: () => ({
38 |     drawer: false,
39 |     routes: [
40 |       {
41 |         title: "Home", 
42 |         link: "/",
43 |         icon: "mdi-home", 
44 |       },
45 |       {
46 |         title: "NSFW", 
47 |         link: "/nsfw/waifu",
48 |         icon: "mdi-domino-mask",
49 |       },
50 |       {
51 |         title: "More",
52 |         link: "/more",
53 |         icon: "mdi-dots-horizontal",
54 |       },
55 |       {
56 |         title: "Uploads",
57 |         link: "/upload",
58 |         icon: "mdi-upload",
59 |       },
60 |       {
61 |         title: "Docs",
62 |         link: "/docs",
63 |         icon: "mdi-api",
64 |       },
65 |       {
66 |         title: "Dashboard",
67 |         link: "/admin",
68 |         icon: "mdi-view-dashboard",
69 |       },
70 |     ],
71 |     bottomlink: [
72 |       {
73 |         title: "Github", 
74 |         link: "https://github.com/Riku32/waifu.pics",
75 |         icon: "mdi-github",
76 |       },
77 |     ],
78 |   }),
79 | }
80 | </script>
81 | 


--------------------------------------------------------------------------------
/src/views/Upload.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="centered">
  3 |     <v-container>
  4 |       <v-card class="mx-auto" max-width="500" outlined>
  5 |         <v-list-item three-line>
  6 |           <v-list-item-content>
  7 |             <v-list-item-title class="headline mb-1">Upload file</v-list-item-title>
  8 |             <v-select v-model="endpoint" dense outlined label="Endpoint" :items="endpoints"/>
  9 |             <v-checkbox label="NSFW" v-model="nsfw" @change="update" style="margin-left: 10px;"/>
 10 |             <file-pond
 11 |               name="upload"
 12 |               ref="pond"
 13 |               label-idle="Drop files here..."
 14 |               v-bind:allow-multiple="true"
 15 |               accepted-file-types="image/jpeg, image/png, image/gif"
 16 |               data-max-file-size="30MB"
 17 |               v-bind:server="server"
 18 |               v-on:initfile="handleFilePondInitFile"
 19 |             />
 20 |           </v-list-item-content>
 21 |         </v-list-item>
 22 |       </v-card>
 23 |     </v-container>
 24 |   </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | import vueFilePond from 'vue-filepond'
 29 | import 'filepond/dist/filepond.min.css'
 30 | import { api } from '@/api.js'
 31 | import FilePondPluginFileMetadata from "filepond-plugin-file-metadata"
 32 | 
 33 | const FilePond = vueFilePond(
 34 |   FilePondPluginFileMetadata,
 35 | )
 36 | 
 37 | export default {
 38 |   data () {
 39 |     return {
 40 |       endpoints: [],
 41 |       endpoint: "waifu",
 42 |       nsfw: false,
 43 |       server: {
 44 |         process: {
 45 |           url: `${process.env.VUE_APP_API}upload`,
 46 |           method: 'POST',
 47 |           withCredentials: true,
 48 |         },
 49 |       },
 50 |     }
 51 |   },
 52 |   mounted: function () {
 53 |     this.update()
 54 |   },
 55 |   methods: {
 56 |     update: function () {
 57 |       api.getEndpoints((res, err) => {
 58 |         this.endpoints = (this.nsfw ? res.nsfw : res.sfw)
 59 |         this.endpoint = this.endpoints[0]
 60 |       })
 61 |     },
 62 |     handleFilePondInitFile(item) {
 63 |       item.setMetadata("type", this.endpoint)
 64 |       item.setMetadata("nsfw", this.nsfw)
 65 |     },
 66 |   },
 67 |   components: {
 68 |     FilePond,
 69 |   },
 70 | }
 71 | </script>
 72 | 
 73 | <style lang="scss" scoped>
 74 | .centered {
 75 |   max-width: 500px;
 76 |   max-height: 500px;
 77 |   text-align: center;
 78 | }
 79 | .v-select {
 80 |   margin-top: 20px;
 81 | }
 82 | </style>
 83 | 
 84 | <style lang="scss">
 85 | .filepond--root {
 86 |   margin-top: -15px;
 87 |   max-height: 500px;
 88 |   max-width: 500px;
 89 | }
 90 | .filepond--drop-label {
 91 |   color: #eee;
 92 | }
 93 | .filepond--label-action {
 94 |   text-decoration-color: #aaa;
 95 | }
 96 | .filepond--panel-root {
 97 |   background-color: #1e1e1e;
 98 | }
 99 | .filepond--item-panel {
100 |   background-color: #3b3b3b;
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 | 
 4 |   env: {
 5 |     node: true,
 6 |   },
 7 | 
 8 |   parser: 'vue-eslint-parser',
 9 | 
10 |   parserOptions: {
11 |     sourceType: 'module',
12 |     parser: 'babel-eslint',
13 |     allowImportExportEverywhere: false,
14 |     ecmaVersion: 2020,
15 |   },
16 | 
17 |   rules: {
18 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
19 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
20 |     'semi': ['error', 'never'],
21 |     "indent": ["error", 2],
22 |     'array-bracket-newline': ['off', 'consistent'],
23 |     'array-element-newline': ['off', {
24 |       multiline: true,
25 |       minItems: 3, 
26 |     }],
27 |     'array-bracket-spacing': ['error', 'never'],
28 |     'block-spacing': ['error', 'always'],
29 |     'brace-style': ['error', '1tbs', { allowSingleLine: true }],
30 |     camelcase: ['error', {
31 |       properties: 'always',
32 |       ignoreDestructuring: true, 
33 |     }],
34 |     'eol-last': ['error', 'always'],
35 |     'function-call-argument-newline': ['off', 'consistent'],
36 |     'func-call-spacing': ['error', 'never'],
37 |     'newline-before-return': 'error',
38 |     'no-mixed-spaces-and-tabs': 'error',
39 |     'no-multi-assign': ['error'],
40 |     'no-multiple-empty-lines': ['error', {
41 |       max: 2,
42 |       maxBOF: 0,
43 |       maxEOF: 0, 
44 |     }],
45 |     'no-spaced-func': 'error',
46 |     'object-curly-spacing': ['error', 'always'],
47 |     'object-curly-newline': ['error', {
48 |       ObjectExpression: {
49 |         minProperties: 4,
50 |         multiline: true,
51 |         consistent: true,
52 |       },
53 |       ObjectPattern: {
54 |         minProperties: 4,
55 |         multiline: true,
56 |         consistent: true,
57 |       },
58 |       ImportDeclaration: {
59 |         minProperties: 2,
60 |         multiline: true,
61 |         consistent: true,
62 |       },
63 |       ExportDeclaration: {
64 |         minProperties: 2,
65 |         multiline: true,
66 |         consistent: true,
67 |       },
68 |     }],
69 |     'comma-dangle': ['error', {
70 |       arrays: 'always-multiline',
71 |       objects: 'always-multiline',
72 |       imports: 'always-multiline',
73 |       exports: 'always-multiline',
74 |       functions: 'always-multiline',
75 |     }],
76 |     'object-property-newline': ['error', {
77 |       allowAllPropertiesOnSameLine: false,
78 |     }],
79 |     'space-in-parens': ['error', 'never'],
80 |     'space-infix-ops': 'error',
81 |     'template-tag-spacing': ['error', 'always'],
82 |   },
83 | 
84 |   overrides: [
85 |     {
86 |       files: ["*.vue"],
87 |       extends: [
88 |         "plugin:vue/essential",
89 |       ],
90 |       rules: {
91 |         "indent": "off",
92 |         "vue/script-indent": ["error", 2, { baseIndent: 0 }],
93 |         "vue/html-indent": ["error", 2, { baseIndent: 1 }],
94 |         "vue/no-use-v-if-with-v-for": "off",
95 |       },
96 |     },
97 |   ],
98 | }
99 | 


--------------------------------------------------------------------------------
/src/views/Grid.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="is404" class="centered">
  3 |     <img src="@/assets/404.png">
  4 |     <h1>Are you lost?</h1>
  5 |     <v-btn outlined :to="'/'" text>Go Home!</v-btn>
  6 |   </div>
  7 |   <div v-else>
  8 |     <v-btn fab large dark fixed bottom right v-on:click="getImages(false)">
  9 |       <v-icon>mdi-refresh</v-icon>
 10 |     </v-btn>
 11 |     <div id="photos">
 12 |       <div v-for="image in images" v-bind:key="image">
 13 |         <img :src="image" @click="imagePreview(image)">
 14 |       </div>
 15 |     </div>
 16 |     <v-dialog v-model="ImageDialog.show" max-width="500px">
 17 |       <img class="preview-image" :src="ImageDialog.url" />
 18 |     </v-dialog>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import Axios from 'axios'
 24 | 
 25 | export default {
 26 |   data: function () {
 27 |     return {
 28 |       exclude: [],
 29 |       images: [],
 30 |       is404: false,
 31 |       ImageDialog: { 
 32 |         show: false,
 33 |         url: '', 
 34 |       },
 35 |     }
 36 |   },
 37 |   watch: {
 38 |     '$route.params.endpoint' () {
 39 |       this.is404 = false
 40 |       this.exclude = []
 41 |       this.getImages(true)
 42 |     },
 43 |     '$route.params.type' () {
 44 |       this.is404 = false
 45 |       this.exclude = []
 46 |       this.getImages(true)
 47 |     },
 48 |   },
 49 |   mounted: function () {
 50 |     this.getImages(true)
 51 |   },
 52 |   methods: {
 53 |     imagePreview: function(imageUrl){ 
 54 |       this.ImageDialog = {
 55 |         show: true,
 56 |         url: imageUrl,
 57 |       }
 58 |     },
 59 |     getImages: function (first) {
 60 |       const { type, endpoint } = this.$route.params
 61 | 
 62 |       Axios({
 63 |         method: "post",
 64 |         url: `${process.env.VUE_APP_API}many/${type === undefined ? 'sfw' : type}/${endpoint === undefined ? 'waifu' : endpoint}`,
 65 |         data: {
 66 |           exclude: this.exclude,
 67 |         },
 68 |       }).then((response) => {
 69 |         response.data.files.map((file) => {
 70 |           this.exclude.push(file)
 71 |         })
 72 |         this.images = response.data.files
 73 |       }).catch(() => {
 74 |         if (first) {
 75 |           this.is404 = true
 76 |         } else {
 77 |           this.exclude = []
 78 |           this.getImages(false)
 79 |         }
 80 |       })
 81 |     },
 82 |   },
 83 | }
 84 | </script>
 85 | 
 86 | <style lang="scss" scoped>
 87 | .centered {
 88 |   text-align: center;
 89 |   
 90 |   h1 {
 91 |     margin-bottom: 5px;
 92 |   }
 93 | }
 94 | #photos {
 95 |     line-height: 0;
 96 | 
 97 |     -webkit-column-count: 5;
 98 |     -webkit-column-gap:   0px;
 99 |     -moz-column-count:    5;
100 |     -moz-column-gap:      0px;
101 |     column-count:         5;
102 |     column-gap:           0px;
103 | 
104 |     img {
105 |       width: 100% !important;
106 |       height: auto !important;
107 |     }
108 | 
109 |     @media (max-width: 1200px) {
110 |       -moz-column-count:    4;
111 |       -webkit-column-count: 4;
112 |       column-count:         4;
113 |     }
114 |     @media (max-width: 1000px) {
115 |       -moz-column-count:    3;
116 |       -webkit-column-count: 3;
117 |       column-count:         3;
118 |     }
119 |     @media (max-width: 800px) {
120 |       -moz-column-count:    2;
121 |       -webkit-column-count: 2;
122 |       column-count:         2;
123 |     }
124 |     @media (max-width: 400px) {
125 |       -moz-column-count:    1;
126 |       -webkit-column-count: 1;
127 |       column-count:         1;
128 |     }
129 | }
130 | .preview-image {
131 |   max-width: calc(100vw - 2rem);
132 | }
133 | </style>
134 | 


--------------------------------------------------------------------------------
/src/views/Dashboard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="loggedin">
  3 |     <v-container>
  4 |       <v-card class="mx-auto" style="margin-top: 20px; margin-bottom: 10px;" max-width="400" outlined>
  5 |         <v-list-item three-line>
  6 |           <v-list-item-content>
  7 |             <v-text-field outlined dense v-model="query" label="Search"/>
  8 |             <v-checkbox style="margin-bottom:20px; margin-left:20px;" label="NSFW" v-model="nsfw" @change="update"/>
  9 |             <v-select v-model="endpoint" dense outlined label="Endpoint" :items="endpoints"/>
 10 |             <v-spacer/>
 11 |             <v-row justify="space-around">
 12 |               <v-checkbox label="Verified" class="vercheck" v-model="verbtn"/>
 13 |             </v-row>
 14 |             <v-btn v-on:click="search()" depressed>Search</v-btn>
 15 |           </v-list-item-content>
 16 |         </v-list-item>
 17 |       </v-card>
 18 |     </v-container>
 19 |     <div>
 20 |       <v-container fluid>
 21 |         <v-row dense justify="center">
 22 |           <v-col v-for="file in res" :key="file" style="max-width: 400px;">
 23 |             <Filebox :file="file.file" :verified="file.verified"></Filebox>
 24 |           </v-col>
 25 |         </v-row>
 26 |       </v-container>
 27 |     </div>
 28 | 
 29 |     <v-bottom-navigation v-if="deletelist.length > 0" :value="activeBtn" inset app>
 30 |       <v-btn v-on:click="verifymany(true)">
 31 |         <v-icon>mdi-check</v-icon>
 32 |       </v-btn>
 33 | 
 34 |       <v-btn v-on:click="verifymany(false)">
 35 |         <v-icon>mdi-delete</v-icon>
 36 |       </v-btn>
 37 | 
 38 |       <v-btn v-on:click="deletelist = []">
 39 |         <v-icon>mdi-select-off</v-icon>
 40 |       </v-btn>
 41 |     </v-bottom-navigation>
 42 | 
 43 |     <v-btn fab large dark fixed bottom right v-on:click="logout()">
 44 |       <v-icon>mdi-logout-variant</v-icon>
 45 |     </v-btn>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script>
 50 | import Axios from 'axios'
 51 | import { api } from '@/api.js'
 52 | import Filebox from '@/components/File.vue'
 53 | 
 54 | export default {
 55 |   data () {
 56 |     return {
 57 |       res: [],
 58 |       endpoints: [],
 59 |       deletelist: [],
 60 |       loggedin: false,
 61 |       endpoint: "waifu",
 62 |       nsfw: false,
 63 |       verified: false,
 64 |       verbtn: false,
 65 |       query: "",
 66 |     }
 67 |   },
 68 |   components: {
 69 |     Filebox,
 70 |   },
 71 |   methods: {
 72 |     verifymany: function (verify) {
 73 |       let endpoint = verify ? "verify" : "delete"
 74 | 
 75 |       Axios({
 76 |         method: "post",
 77 |         url: `${process.env.VUE_APP_API}admin/${endpoint}`,
 78 |         data: {
 79 |           files: this.deletelist,
 80 |         },
 81 |         withCredentials: true,
 82 |       }).then((res) => {
 83 |         this.$notification.success(res.data.message)
 84 | 
 85 |         this.deletelist = []
 86 | 
 87 |         this.search()
 88 |       }).catch((error) => {
 89 |         this.deletelist = []
 90 | 
 91 |         this.$notification.error(error.response.data.message)
 92 |       })
 93 |     },
 94 |     logout: function () {
 95 |       // Remove cookie
 96 |       this.loggedin = false
 97 |       document.cookie = `auth-token=; domain=.${process.env.VUE_APP_ROOT_DOMAIN}; expires=Thu, 01-Jan-70 00:00:01 GMT;`
 98 | 
 99 |       // Send notif and go to login
100 |       this.$notification.success("You have been logged out!")
101 |       this.$router.push('/admin/login')
102 |     },
103 |     search: function () {
104 |       Axios({
105 |         method: "post",
106 |         url: `${process.env.VUE_APP_API}admin/list`,
107 |         data: {
108 |           endpoint: this.endpoint,
109 |           nsfw: this.nsfw,
110 |           query: this.query,
111 |           verified: this.verbtn,
112 |         },
113 |         withCredentials: true,
114 |       }).then((response) => {
115 |         let query = []
116 |         this.verified = this.verbtn
117 | 
118 |         if (response.data.files) {
119 |           response.data.files.map(file => {
120 |             query.push({
121 |               file: {
122 |                 name: file.name,
123 |                 url: file.url,
124 |               },
125 |               verified: this.verified,
126 |             })
127 |           })
128 |         }
129 |         this.res = query
130 |       })
131 |     },
132 |     update: function () {
133 |       this.endpoints = (this.nsfw ? this.$store.getters.endpoints.nsfw : this.$store.getters.endpoints.sfw)
134 |       this.endpoint = this.endpoints[0]
135 |     },
136 |   },
137 |   mounted: function () {
138 |     api.checkLoggedIn().then(() => {
139 |       this.loggedin = true
140 |       this.update()
141 |       this.search()
142 |     }).catch(() => {
143 |       this.$router.push('/admin/login')
144 |     })
145 |   },
146 | }
147 | </script>
148 | 
149 | <style lang="scss" scoped>
150 | .vercheck {
151 |   margin-top: -5px;
152 | }
153 | </style>
154 | 


--------------------------------------------------------------------------------
/src/views/Docs.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container class="compact" style="margin-top: 50px;">
  3 |     <v-row class="mb-6 compact" justify="flex-start" no-gutters>
  4 |       <div>
  5 |         <div>
  6 |           <h1 class="font-weight-light">API Docs</h1>
  7 |           <p>The open and supported part of the waifu.pics api is incredibly easy to use. You can find more information about how to utilize this in your application below.</p>
  8 |         </div>
  9 |         <v-alert type="info" outlined>
 10 |           If you have any issues or questions with the API, please create a Github issue at <a href="https://github.com/Waifu-pics/waifu-api">https://github.com/Waifu-pics/waifu-api</a>
 11 |         </v-alert>
 12 |         <v-alert type="warning" outlined>
 13 |           Currently we have switched the API url to https://api.waifu.pics from https://waifu.pics/api. While that route does still work, you should switch any existing application to use the newer URL.
 14 |         </v-alert>
 15 |         <v-divider></v-divider>
 16 |       </div>
 17 |       
 18 |       <div>
 19 |         <h2 class="font-weight-light tab">Image Categories</h2>
 20 |         <v-tabs v-model="tab" dark class="compact">
 21 |           <v-tabs-slider></v-tabs-slider>
 22 |           <v-tab>sfw</v-tab>
 23 |           <v-tab>nsfw</v-tab>
 24 |           <v-tab-item>
 25 |             <v-list class="compact">
 26 |               <v-list-item v-for="end in this.$store.getters.endpoints.sfw" :key="end">
 27 |                 <v-list-item-content>
 28 |                   <v-list-item-title>{{end}}</v-list-item-title>
 29 |                 </v-list-item-content>
 30 |               </v-list-item>
 31 |             </v-list>
 32 |           </v-tab-item>
 33 |           <v-tab-item>
 34 |             <v-list class="compact">
 35 |               <v-list-item v-for="end in this.$store.getters.endpoints.nsfw" :key="end">
 36 |                 <v-list-item-content>
 37 |                   <v-list-item-title>{{end}}</v-list-item-title>
 38 |                 </v-list-item-content>
 39 |               </v-list-item>
 40 |             </v-list>
 41 |           </v-tab-item>
 42 |         </v-tabs>
 43 |         <v-divider style="margin-top:20px;"></v-divider>
 44 |       </div>
 45 | 
 46 |       <div class="compact">
 47 |         <div class="tab">
 48 |           <h2 class="font-weight-light">Get image</h2>
 49 |           <p>Recieve one image url from your endpoint of choice.</p>
 50 |         </div>
 51 |         <Apitable type="GET">
 52 |           {{api}}<span class="vararg">type</span>/<span class="vararg">category</span>
 53 |         </Apitable>
 54 |         <div class="tab">
 55 |           <Comment>The type field is the type classification. Valid types are <b>sfw</b> and <b>nsfw</b>.</Comment>
 56 |         </div>
 57 |         <div class="tab">
 58 |           <h3 class="font-weight-light">Response</h3>
 59 |           <p>Here is an example response for this endpoint</p>
 60 |           <vue-json-pretty :data="examples.one" />
 61 |         </div>
 62 |         <v-divider></v-divider>
 63 |       </div>
 64 | 
 65 |       <div class="compact">
 66 |         <div class="tab">
 67 |           <h2 class="font-weight-light">Get many images</h2>
 68 |           <p>Recieve 30 unique images from a specific endpoint or category</p>
 69 |         </div>
 70 |         <Apitable class="tab" type="POST">
 71 |           {{api}}many/<span class="vararg">type</span>/<span class="vararg">category</span>
 72 |         </Apitable>
 73 |         <div class="tab">
 74 |           <Comment>The type field is the type classification. Valid types are <b>sfw</b> and <b>nsfw</b>.</Comment>
 75 |         </div>
 76 |         <div class="tab">
 77 |           <h3 class="font-weight-light">Fields</h3>
 78 |           <p>Fields that can be sent to this endpoint</p>
 79 |           <Reqtable :field="'exclude'" :type="'String Array'">
 80 |             A list of URL's to not recieve from this endpoint.
 81 |           </Reqtable>
 82 |         </div>
 83 |         <div class="tab">
 84 |           <h3 class="font-weight-light">Response</h3>
 85 |           <p>Here is an example response for this endpoint</p>
 86 |           <vue-json-pretty :data="examples.many" />
 87 |         </div>
 88 |         <v-divider></v-divider>
 89 |       </div>
 90 |     </v-row>
 91 |   </v-container>
 92 | </template>
 93 | 
 94 | <script>
 95 | import Apitable from '@/components/Docs/Apitable.vue'
 96 | import Reqtable from '@/components/Docs/Reqtable.vue'
 97 | import Comment from '@/components/Docs/Minicomment.vue'
 98 | import VueJsonPretty from 'vue-json-pretty'
 99 | import 'vue-json-pretty/lib/styles.css'
100 | 
101 | export default {
102 |   name: 'More',
103 |   components: {
104 |     Apitable,
105 |     Comment,
106 |     VueJsonPretty,
107 |     Reqtable,
108 |   },
109 |   data () {
110 |     return {
111 |       api: process.env.VUE_APP_API,
112 |       examples: {
113 |         one: JSON.parse(`{"url": "${process.env.VUE_APP_CDN}Tj6Wzwo.png"}`),
114 |         many: JSON.parse(`{"files": ["${process.env.VUE_APP_CDN}qUY7BBo.jpg"]}`),
115 |       },
116 |     }
117 |   },
118 | }
119 | </script>
120 | 
121 | <style lang="scss" scoped>
122 | .compact {
123 |   min-width: 600px;
124 |   width: 600px;
125 | 
126 |   // ( ͡° ͜ʖ ͡°) responsive
127 |   @media only screen and (max-width: 600px) {
128 |     min-width: 100%;
129 |     width: 100%;
130 |   }
131 | }
132 | .tab {
133 |   margin: 10px;
134 | }
135 | .centered {
136 |   text-align: center;
137 | }
138 | .v-list{
139 |   height: 300px;
140 |   width: 350px;
141 |   overflow-y: auto;
142 |   text-align: start;
143 | }
144 | .bottom {
145 |   margin-bottom: 30px;
146 | }
147 | .vararg {
148 |   color: #f76868;
149 | }
150 | </style>
151 | 


--------------------------------------------------------------------------------