├── cypress.json
├── store
    └── index.js
├── static
    ├── rick.gif
    ├── snail.png
    ├── trophy.png
    ├── favicon.ico
    └── purple-heart.png
├── plugins
    └── vercel.js
├── layouts
    ├── empty.vue
    └── default.vue
├── .prettierrc
├── pages
    ├── login
    │   └── index.vue
    ├── redirect.vue
    ├── cheeky.vue
    ├── s
    │   └── _slug.vue
    ├── index.vue
    ├── leaderboard
    │   └── index.vue
    └── mysnails
    │   └── index.vue
├── vercel.json
├── .editorconfig
├── .babelrc
├── .eslintrc.js
├── components
    ├── AppFooter.vue
    ├── AppBody.vue
    ├── LeaderboardCard.vue
    ├── SnailDisplay.vue
    ├── SnailCard.vue
    ├── SnailCreation.vue
    └── AppHeader.vue
├── utils
    ├── icons.js
    └── validators.ts
├── jest.config.js
├── tsconfig.json
├── api
    ├── owners
    │   └── index.ts
    ├── index.ts
    ├── jwtCheck
    │   └── index.ts
    ├── generateRandomSlug
    │   └── index.ts
    ├── rateLimiter
    │   └── index.ts
    └── snails
    │   └── index.ts
├── LICENSE
├── README.md
├── .gitignore
├── cypress
    └── integration
    │   └── main
    │       └── main.spec.js
├── .prettierignore
├── package.json
└── nuxt.config.js


/cypress.json:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
1 | // activate the store
2 | 


--------------------------------------------------------------------------------
/static/rick.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pedrozaalex/tiny_snails/HEAD/static/rick.gif


--------------------------------------------------------------------------------
/static/snail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pedrozaalex/tiny_snails/HEAD/static/snail.png


--------------------------------------------------------------------------------
/static/trophy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pedrozaalex/tiny_snails/HEAD/static/trophy.png


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pedrozaalex/tiny_snails/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/static/purple-heart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pedrozaalex/tiny_snails/HEAD/static/purple-heart.png


--------------------------------------------------------------------------------
/plugins/vercel.js:
--------------------------------------------------------------------------------
1 | import { inject } from '@vercel/analytics';
2 | 
3 | export default () => {
4 |   inject();
5 | };
6 | 


--------------------------------------------------------------------------------
/layouts/empty.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Nuxt />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'EmptyLayout'
 8 | }
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "useTabs": false,
3 |   "printWidth": 80,
4 |   "tabWidth": 2,
5 |   "singleQuote": true,
6 |   "trailingComma": "none",
7 |   "semi": true
8 | }
9 | 


--------------------------------------------------------------------------------
/pages/login/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CBox text-align="center">Signing in...</CBox>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'LoginPage',
 8 | }
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 2,
 3 |   "builds": [
 4 |     {
 5 |       "src": "nuxt.config.js",
 6 |       "use": "@nuxtjs/vercel-builder",
 7 |       "config": {
 8 |         "serverFiles": ["api/**", "utils/**"]
 9 |       }
10 |     }
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "test": {
 4 |       "presets": [
 5 |         [
 6 |           "@babel/preset-env",
 7 |           {
 8 |             "targets": {
 9 |               "node": "current"
10 |             }
11 |           }
12 |         ]
13 |       ]
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/pages/redirect.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">Redirecting...</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'RedirectPage',
 8 |   layout: 'empty'
 9 | };
10 | </script>
11 | 
12 | <style scoped>
13 | .container {
14 |   overflow: hidden;
15 | }
16 | </style>
17 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   extends: [
 8 |     '@nuxtjs/eslint-config-typescript',
 9 |     'plugin:nuxt/recommended',
10 |     'prettier'
11 |   ],
12 |   plugins: [],
13 |   // add your custom rules here
14 |   rules: {}
15 | };
16 | 


--------------------------------------------------------------------------------
/components/AppFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CStack as="footer" :spacing="4" mt="{12}" justify-content="center" is-inline>
 3 |   </CStack>
 4 | </template>
 5 | 
 6 | <style>
 7 | .nameLink {
 8 |   text-decoration: underline;
 9 | }
10 | 
11 | .nameLink:hover {
12 |   text-decoration: none;
13 |   background-color: #7425f3;
14 |   color: #fff;
15 | }
16 | </style>
17 | 


--------------------------------------------------------------------------------
/pages/cheeky.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CBox>
 3 |     <CHeading as="h2" size="lg" text-align="center"
 4 |       >You are one cheeky bastard!</CHeading
 5 |     >
 6 |     <CImage src="rick.gif" alt="You are one cheeky bastard!" m="2rem auto" />
 7 |   </CBox>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'CheekyBastardPage',
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/utils/icons.js:
--------------------------------------------------------------------------------
1 | export const extend = {
2 |   github: {
3 |     path: '<path fill="currentColor" d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>',
4 |     viewBox: '0 0 24 24'
5 |   }
6 | };
7 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleNameMapper: {
 3 |     '^@/(.*)$': '<rootDir>/$1',
 4 |     '^~/(.*)$': '<rootDir>/$1',
 5 |     '^vue$': 'vue/dist/vue.common.js'
 6 |   },
 7 |   moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
 8 |   transform: {
 9 |     '^.+\\.ts$': 'ts-jest',
10 |     '^.+\\.js$': 'babel-jest',
11 |     '.*\\.(vue)$': 'vue-jest'
12 |   },
13 |   collectCoverage: true,
14 |   collectCoverageFrom: [
15 |     '<rootDir>/components/**/*.vue',
16 |     '<rootDir>/pages/**/*.vue'
17 |   ],
18 |   testEnvironment: 'jsdom'
19 | };
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2018",
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
 7 |     "esModuleInterop": true,
 8 |     "allowJs": true,
 9 |     "sourceMap": true,
10 |     "strict": true,
11 |     "noEmit": true,
12 |     "experimentalDecorators": true,
13 |     "baseUrl": ".",
14 |     "paths": {
15 |       "~/*": ["./*"],
16 |       "@/*": ["./*"]
17 |     },
18 |     "types": ["@nuxt/types", "@types/node", "@nuxtjs/axios"]
19 |   },
20 |   "exclude": ["node_modules", ".nuxt", "dist"]
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/s/_slug.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>Redirecting...</h1>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   async fetch({ params: { slug }, redirect, $axios }, _$config) {
 8 |     let url;
 9 |     try {
10 |       url = (await $axios.get(`/api/snails/${slug}`)).data.url;
11 |     } catch (error) {
12 |       return redirect('/404');
13 |     }
14 | 
15 |     if (
16 |       /tny-snls.xyz\/s\/\w+/.test(url ?? '') ||
17 |       /tny-snls.xyz\/s\/\w+/.test(decodeURI(url ?? ''))
18 |     ) {
19 |       return redirect('/cheeky');
20 |     }
21 | 
22 |     return redirect(url);
23 |   },
24 |   fetchOnServer: false
25 | };
26 | </script>
27 | 


--------------------------------------------------------------------------------
/api/owners/index.ts:
--------------------------------------------------------------------------------
 1 | import { Router } from 'express';
 2 | import faunadb, { query as q } from 'faunadb';
 3 | import jwtCheck from '../jwtCheck';
 4 | 
 5 | const router = Router();
 6 | const faunaClient = new faunadb.Client({
 7 |   secret: process.env.FAUNA_SECRET_KEY ?? ''
 8 | });
 9 | 
10 | // returns all of an owner's snails
11 | router.get('/', jwtCheck(), async (req: any, res) => {
12 |   console.debug(req);
13 |   console.debug(res);
14 | 
15 |   try {
16 |     const docs: any = await faunaClient.query(
17 |       q.Map(
18 |         q.Paginate(q.Match(q.Index('alias_by_owner'), req.user.sub)),
19 |         q.Lambda('alias', q.Get(q.Var('alias')))
20 |       )
21 |     );
22 |     res.status(200).send(docs.data);
23 |   } catch (error) {
24 |     console.error(error);
25 |     res.status(400).send("Couldn't find your snails :(");
26 |   }
27 | });
28 | 
29 | export default router;
30 | 


--------------------------------------------------------------------------------
/api/index.ts:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import morgan from 'morgan';
 3 | import helmet from 'helmet';
 4 | import rateLimiter from './rateLimiter';
 5 | 
 6 | // routers
 7 | import snails from './snails';
 8 | import owners from './owners';
 9 | 
10 | const app = express();
11 | 
12 | app.use(helmet());
13 | app.use(express.json());
14 | app.use(morgan('dev'));
15 | 
16 | app.use(rateLimiter);
17 | 
18 | app.use('/snails', snails);
19 | app.use('/owners', owners);
20 | 
21 | app.use(
22 |   (
23 |     err: { message: any; stack: any },
24 |     _req: any,
25 |     res: { json: (arg0: { message: any; stack: any }) => void },
26 |     _next: any
27 |   ) => {
28 |     res.json({
29 |       message: err.message,
30 |       stack: process.env.NODE_ENV === 'production' ? '🥞' : err.stack
31 |     });
32 |   }
33 | );
34 | 
35 | export default {
36 |   path: '/api',
37 |   handler: app
38 | };
39 | 


--------------------------------------------------------------------------------
/components/AppBody.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CBox
 3 |     v-bind="mainStyles[colorMode]"
 4 |     class="appBody"
 5 |     d="flex"
 6 |     w="100%"
 7 |     h="100%"
 8 |     flex-dir="column"
 9 |     justify-content="center"
10 |     position="relative"
11 |   >
12 |     <AppHeader />
13 |     <slot />
14 |     <AppFooter />
15 |   </CBox>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   inject: ['$chakraColorMode'],
21 |   data() {
22 |     return {
23 |       mainStyles: {
24 |         dark: {
25 |           bg: 'gray.700',
26 |           color: 'whiteAlpha.900'
27 |         },
28 |         light: {
29 |           bg: 'white',
30 |           color: 'gray.900'
31 |         }
32 |       }
33 |     };
34 |   },
35 |   computed: {
36 |     colorMode() {
37 |       return this.$chakraColorMode();
38 |     },
39 |     theme() {
40 |       return this.$chakraTheme();
41 |     }
42 |   }
43 | };
44 | </script>
45 | 


--------------------------------------------------------------------------------
/api/jwtCheck/index.ts:
--------------------------------------------------------------------------------
 1 | import { expressjwt, GetVerificationKey } from 'express-jwt';
 2 | import { expressJwtSecret } from 'jwks-rsa';
 3 | 
 4 | /**
 5 |  *  Returns a middleware function that will check the authorization header
 6 |  * The middleware will call next() if the authorization header is valid
 7 |  * If credentialsRequired is set to false, the middleware will call next(),
 8 |  * even if the authorization header is not present
 9 |  * */
10 | const jwtCheck = (credentialsRequired = true) =>
11 |   expressjwt({
12 |     secret: expressJwtSecret({
13 |       cache: true,
14 |       rateLimit: true,
15 |       jwksRequestsPerMinute: 5,
16 |       jwksUri: 'https://dev-vz68qmuc.us.auth0.com/.well-known/jwks.json'
17 |     }) as GetVerificationKey,
18 |     audience: 'https://tny-snls.xyz/api/',
19 |     issuer: 'https://dev-vz68qmuc.us.auth0.com/',
20 |     algorithms: ['RS256'],
21 |     credentialsRequired
22 |   });
23 | 
24 | export default jwtCheck;
25 | 


--------------------------------------------------------------------------------
/api/generateRandomSlug/index.ts:
--------------------------------------------------------------------------------
 1 | import faunadb, { query as q } from 'faunadb';
 2 | 
 3 | const faunaClient = new faunadb.Client({
 4 |   secret: process.env.FAUNA_SECRET_KEY ?? ''
 5 | });
 6 | 
 7 | const slugExists = async (s: string) =>
 8 |   await faunaClient.query(q.Exists(q.Match(q.Index('aliases'), s)));
 9 | 
10 | const generateRandomSlug = async (tries: number = 0): Promise<string> => {
11 |   const chars = process.env.SLUG_CHARS ?? 'abcdefghijklmnopqrstuvwxyz';
12 |   const length = process.env.SLUG_LENGTH ?? 6;
13 |   const maxTries = process.env.SLUG_MAX_TRIES ?? 5;
14 | 
15 |   const slug = [...Array(length).keys()]
16 |     .map(() => chars[Math.floor(Math.random() * chars.length)])
17 |     .join('');
18 | 
19 |   const exists = await slugExists(slug);
20 | 
21 |   if (!exists) return slug;
22 |   else if (tries < maxTries) return generateRandomSlug(tries + 1);
23 | 
24 |   throw new Error('Could not generate unique slug');
25 | };
26 | 
27 | export default generateRandomSlug;
28 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CThemeProvider>
 3 |     <CColorModeProvider>
 4 |       <div class="container">
 5 |         <CBox font-family="body" as="main">
 6 |           <CReset />
 7 |           <app-body>
 8 |             <Nuxt />
 9 |           </app-body>
10 |         </CBox>
11 |       </div>
12 |     </CColorModeProvider>
13 |   </CThemeProvider>
14 | </template>
15 | <script>
16 | import {
17 |   CBox,
18 |   CColorModeProvider,
19 |   CReset,
20 |   CThemeProvider
21 | } from '@chakra-ui/vue';
22 | import AppBody from '~/components/AppBody.vue';
23 | 
24 | export default {
25 |   name: 'App',
26 |   components: {
27 |     CThemeProvider,
28 |     CColorModeProvider,
29 |     CReset,
30 |     CBox,
31 |     AppBody
32 |   }
33 | };
34 | </script>
35 | 
36 | <style>
37 | html,
38 | body,
39 | #__nuxt,
40 | #__layout,
41 | .container,
42 | #__chakra-app {
43 |   height: 100%; /* Allow percentage-based heights in the application */
44 | }
45 | 
46 | main {
47 |   height: 100%;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <transition name="slide-fade" mode="out-in">
 4 |       <!-- if no snail data present, show input fields -->
 5 |       <snail-creation v-if="!snailData" @snail-created="snailData = $event" />
 6 | 
 7 |       <!-- else, display the snail data -->
 8 |       <snail-display v-else :snail="snailData" @reset="snailData = null" />
 9 |     </transition>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'App',
16 |   data() {
17 |     return {
18 |       snailData: null
19 |     };
20 |   }
21 | };
22 | </script>
23 | 
24 | <style scoped>
25 | .container {
26 |   overflow: hidden;
27 | }
28 | .slide-fade-enter-active {
29 |   transition: all 0.1s ease;
30 | }
31 | .slide-fade-leave-active {
32 |   transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
33 | }
34 | .slide-fade-enter, .slide-fade-leave-to
35 | /* .slide-fade-leave-active below version 2.1.8 */ {
36 |   transform: translateX(100px);
37 |   opacity: 0;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Alexandre Pedroza
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/utils/validators.ts:
--------------------------------------------------------------------------------
 1 | import { string } from 'yup';
 2 | 
 3 | export default function containsBaseUrl(url?: string | null) {
 4 |   return (
 5 |     /tny-snls.xyz\/s\/\w+/.test(url ?? '') ||
 6 |     /tny-snls.xyz\/s\/\w+/.test(decodeURI(url ?? ''))
 7 |   );
 8 | }
 9 | 
10 | const containsSlur = (alias?: string | null) => {
11 |   return /(fag(g|got|tard)?\b|cocks?sucker(s|ing)?|ni((g{2,}|q)+|[gq]{2,})[e3r]+(s|z)?|mudslime?s?|kikes?|\bspi(c|k)s?\b|\bchinks?|gooks?|bitch(es|ing|y)?|whor(es?|ing)|\btr(a|@)nn?(y|ies?)|\b(b|re|r)tard(ed)?s?)/i.test(alias ?? '');
12 | };
13 | 
14 | export const urlValidator = string()
15 |   .trim()
16 |   .url()
17 |   .required()
18 |   .nullable()
19 |   .test(
20 |     'base url',
21 |     "you can't create a recursive url, you cheeky bastard",
22 |     (url) => !containsBaseUrl(url)
23 |   );
24 | 
25 | export const snailOwnerValidator = string().trim().nullable();
26 | 
27 | export const aliasValidator = string()
28 |   .trim()
29 |   .matches(
30 |     /^[\w-]+$/i,
31 |     'slug can only contain letters, numbers, hyphens (-) and underscores (_)'
32 |   )
33 |   .nullable()
34 |   .min(3)
35 |   .max(20)
36 |   .test('slur', "don't use slurs", (alias) => !containsSlur(alias));
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">
 2 | 	tiny snails <img
 3 | 		width="40"
 4 | 		alt="tiny snails"
 5 | 		src="https://github.com/pedrozaalex/tiny_snails/raw/master/static/snail.png">
 6 | </h1>
 7 | 
 8 | <h3 align="center">
 9 | 	generate links with tiny slugs for your links!
10 | </h3>
11 | 
12 | <p align="center">
13 | 	<strong>
14 | 		<a href="https://tny-snls.xyz/">Website</a>
15 | 	</strong>
16 | </p>
17 | 
18 | ## Overview
19 | 
20 | - **Unique URLs.** Use a custom shortened URL for your URL, or use a generated one.
21 | - **Leaderboard.** View the top links clicked on.
22 | - **Accounts.** Sign in and have all of your URLs in one place.
23 | - **Dark mode.** Create and manage your shortened URLs in the dark.
24 | 
25 | ## Build setup
26 | 
27 | [Node.js](https://nodejs.org/) and the [Yarn package manager](https://yarnpkg.com/) are required.
28 | 
29 | ```sh
30 | # install dependencies
31 | yarn
32 | 
33 | # server with hot reload on port 3000
34 | yarn dev
35 | 
36 | # build for production and launch the server
37 | yarn build
38 | yarn start
39 | ```
40 | 
41 | The final product is also hosted temporarily [here](https://tny-snls.xyz/).
42 | 
43 | ## To-do
44 | 
45 | - Test components separately (unit tests)
46 | - Write more end-to-end tests
47 | 
48 | Right now the basic functionality of creating shortened urls is tested. Other functionalities like login and leaderboard couldn't be tested in time.
49 | 


--------------------------------------------------------------------------------
/api/rateLimiter/index.ts:
--------------------------------------------------------------------------------
 1 | import { NextFunction, Request, Response } from 'express';
 2 | import LRU from 'lru-cache';
 3 | 
 4 | const tokenCache = new LRU({
 5 |   max: parseInt(process.env.UNIQUE_TOKEN_PER_INTERVAL ?? '') || 500,
 6 |   maxAge: parseInt(process.env.RATE_LIMIT_INTERVAL ?? '') || 60 * 1000
 7 | });
 8 | 
 9 | const rateLimit = () => ({
10 |     check: (res: Response, limit: number, token: string) =>
11 |       new Promise<void>((resolve, reject) => {
12 |         console.log('check', token);
13 |         const tokenCount = (tokenCache.get(token) || [0]) as number[];
14 |         if (tokenCount[0] === 0) {
15 |           tokenCache.set(token, tokenCount);
16 |           console.log('token set');
17 |         }
18 |         tokenCount[0] += 1;
19 | 
20 |         const currentUsage = tokenCount[0];
21 |         const isRateLimited = currentUsage >= limit;
22 |         res.setHeader('X-RateLimit-Limit', limit);
23 |         res.setHeader(
24 |           'X-RateLimit-Remaining',
25 |           isRateLimited ? 0 : limit - currentUsage
26 |         );
27 | 
28 |         return isRateLimited ? reject() : resolve();
29 |       })
30 |   });
31 | 
32 | export default async function rateLimiter(
33 |   req: Request,
34 |   res: Response,
35 |   next: NextFunction
36 | ) {
37 |   try {
38 |     await rateLimit().check(
39 |       res,
40 |       parseInt(process.env.RATE_LIMIT_REQUESTS_PER_INTERVAL ?? '') || 10,
41 |       req.ip
42 |     );
43 |     next();
44 |   } catch {
45 |     return res.status(429).json({ error: 'Too many requests' });
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/cypress/integration/main/main.spec.js:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | 
 3 | describe('home page', () => {
 4 |   beforeEach(() => {
 5 |     // Cypress starts out with a blank slate for each test
 6 |     // so we must tell it to visit our website with the `cy.visit()` command.
 7 |     // Since we want to visit the same URL at the start of all our tests,
 8 |     // we include it in our beforeEach function so that it runs before each test
 9 |     cy.visit('http://localhost:3000');
10 |   });
11 | 
12 |   it('displays two inputs by default', () => {
13 |     // the two inputs for the user to enter the url and slug
14 |     cy.get('input').should('have.length', 2);
15 | 
16 |     cy.get('input')
17 |       .first()
18 |       .invoke('attr', 'placeholder')
19 |       .should('contain', 'URL');
20 |     // slug should start empty
21 |     cy.get('input').last().should('have.value', '');
22 |   });
23 | 
24 |   describe('can add new snails', () => {
25 |     it('without provided slug', () => {
26 |       const url = 'https://www.google.com';
27 | 
28 |       cy.get('input').first().type(url);
29 | 
30 |       cy.get('button').contains('shorten it').click();
31 | 
32 |       cy.contains('success');
33 |     });
34 |     it('with provided slug', () => {
35 |       const url = 'https://www.google.com';
36 |       // generate random string of length 20
37 |       const slug = Math.random().toString(36).substring(2, 22);
38 | 
39 |       cy.get('input').first().type(url);
40 |       cy.get('input').last().type(slug);
41 | 
42 |       cy.get('button').contains('shorten it').click();
43 | 
44 |       cy.contains('success');
45 |       cy.contains(slug);
46 |     });
47 |   });
48 | });
49 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tiny_snails",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt --hostname 0.0.0.0",
 7 |     "build": "nuxt build",
 8 |     "start": "nuxt start",
 9 |     "generate": "nuxt generate",
10 |     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
11 |     "lint": "yarn lint:js",
12 |     "test": "jest",
13 |     "e2e": "cypress open"
14 |   },
15 |   "dependencies": {
16 |     "@chakra-ui/nuxt": "^0.5.0",
17 |     "@nuxtjs/auth-next": "5.0.0-1643791578.532b3d6",
18 |     "@nuxtjs/axios": "^5.13.6",
19 |     "@nuxtjs/emotion": "^0.1.0",
20 |     "@vercel/analytics": "^0.1.5",
21 |     "cookie-parser": "^1.4.6",
22 |     "core-js": "^3.22.0",
23 |     "express": "^4.18.0",
24 |     "express-jwt": "^7.7.7",
25 |     "faunadb": "^4.5.4",
26 |     "helmet": "^5.0.2",
27 |     "jwks-rsa": "^3.0.0",
28 |     "morgan": "^1.10.0",
29 |     "npm-check-updates": "^12.5.7",
30 |     "nuxt": "^2.15.8",
31 |     "vue-cookies": "^1.7.5",
32 |     "yup": "^0.32.11"
33 |   },
34 |   "devDependencies": {
35 |     "@babel/eslint-parser": "^7.17.0",
36 |     "@nuxt/types": "^2.15.8",
37 |     "@nuxt/typescript-build": "^2.1.0",
38 |     "@nuxtjs/eslint-config-typescript": "^8.0.0",
39 |     "@nuxtjs/eslint-module": "^3.0.2",
40 |     "@nuxtjs/google-fonts": "^1.3.0",
41 |     "@types/cookie-parser": "^1.4.3",
42 |     "@types/lru-cache": "^5.1.1",
43 |     "@types/morgan": "^1.9.3",
44 |     "@vue/test-utils": "^2.0.0-rc.17",
45 |     "babel-core": "7.0.0-bridge.0",
46 |     "babel-jest": "^27.5.1",
47 |     "cypress": "^9.5.0",
48 |     "eslint": "^8.9.0",
49 |     "eslint-config-prettier": "^8.4.0",
50 |     "eslint-plugin-nuxt": "^3.1.0",
51 |     "eslint-plugin-vue": "^8.4.1",
52 |     "jest": "^27.5.1",
53 |     "prettier": "^2.5.1",
54 |     "ts-jest": "^27.1.3",
55 |     "vue-jest": "^3.0.7"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/components/LeaderboardCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CListItem class="leaderboardCard">
 3 |     <CText w="10%">{{ rank }}</CText>
 4 |     <CLink class="alias" w="35%" :href="$config.baseURL + '/s/' + snail.alias">
 5 |       {{ snail.alias }}
 6 |     </CLink>
 7 |     <CLink class="url" :title="snail.url" w="35%" :href="snail.url">
 8 |       {{ removeUrlProtocol(snail.url) }}
 9 |     </CLink>
10 |     <CText w="20%" text-align="right">
11 |       {{ snail.clicks }}
12 |     </CText>
13 |   </CListItem>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   props: {
19 |     snail: {
20 |       type: Object,
21 |       required: true
22 |     },
23 |     rank: {
24 |       type: Number,
25 |       required: true
26 |     }
27 |   },
28 |   methods: {
29 |     removeUrlProtocol(url) {
30 |       return url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '');
31 |     }
32 |   }
33 | };
34 | </script>
35 | 
36 | <style scoped>
37 | .leaderboardCard {
38 |   font-family: 'Roboto Condensed', sans-serif;
39 |   width: 100%;
40 |   display: flex;
41 |   padding: 0.6rem 0.8rem 0.6rem 0;
42 | }
43 | 
44 | @media screen and (max-width: 768px) {
45 |   .leaderboardCard {
46 |     padding-right: 0;
47 |     padding-left: 0;
48 |   }
49 | }
50 | 
51 | .leaderboardCard p {
52 |   font-family: inherit;
53 | }
54 | 
55 | .leaderboardCard p,
56 | a {
57 |   white-space: nowrap;
58 |   overflow: hidden;
59 |   text-overflow: ellipsis;
60 |   display: inline-block;
61 | }
62 | 
63 | .leaderboardCard p:first-child {
64 |   margin-left: 0.5rem;
65 | }
66 | 
67 | .leaderboardCard p:last-child {
68 |   margin-right: 0.5rem;
69 | }
70 | 
71 | .leaderboardCard:not(:last-child) {
72 |   border-bottom: 1px solid #afbed2;
73 | }
74 | 
75 | @media screen and (min-width: 400px) {
76 |   .alias {
77 |     width: 25%;
78 |   }
79 | 
80 |   .url {
81 |     width: 45%;
82 |   }
83 | }
84 | @media screen and (min-width: 600px) {
85 |   .alias {
86 |     width: 20%;
87 |   }
88 | 
89 |   .url {
90 |     width: 50%;
91 |   }
92 | }
93 | </style>
94 | >
95 | 


--------------------------------------------------------------------------------
/components/SnailDisplay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CFlex direction="column" align="center" justify="center" h="100%">
 3 |     <CHeading>success!</CHeading>
 4 | 
 5 |     <CText> your shortened url: </CText>
 6 | 
 7 |     <CFlex
 8 |       text-align="center"
 9 |       rounded="md"
10 |       border-color="indigo.200"
11 |       border-width="md"
12 |       border-style="solid"
13 |       p="2"
14 |       px="4"
15 |       align-items="baseline"
16 |       w="fit-content"
17 |     >
18 |       <CText mr="2"> {{ $config.baseURL }}/s/{{ snail.alias }} </CText>
19 |       <CButton variant-color="indigo" p="1" @click="copyUrl"> 📋 </CButton>
20 |     </CFlex>
21 |     <CLink as="div" @click="reset">create another one</CLink>
22 |   </CFlex>
23 | </template>
24 | 
25 | <script>
26 | import { CText, CHeading, CFlex } from '@chakra-ui/vue';
27 | 
28 | export default {
29 |   components: { CText, CHeading, CFlex },
30 |   props: {
31 |     snail: {
32 |       type: Object,
33 |       required: true
34 |     }
35 |   },
36 |   methods: {
37 |     reset() {
38 |       this.$emit('reset');
39 |     },
40 |     copyUrl() {
41 |       const textToCopy = `${this.$config.baseURL}/s/${this.snail.alias}`;
42 |       if (navigator.clipboard) {
43 |         navigator.clipboard
44 |           .writeText(textToCopy)
45 |           .then(function () {
46 |             alert('Url copied to clipboard');
47 |           })
48 |           .catch(function () {
49 |             alert('err');
50 |           });
51 |       } else {
52 |         const el = document.createElement('textarea');
53 |         el.value = textToCopy;
54 |         el.setAttribute('readonly', '');
55 |         el.style.position = 'absolute';
56 |         el.style.left = '-9999px';
57 |         document.body.appendChild(el);
58 |         const selected =
59 |           document.getSelection().rangeCount > 0
60 |             ? document.getSelection().getRangeAt(0)
61 |             : false;
62 |         el.select();
63 |         document.execCommand('copy');
64 |         document.body.removeChild(el);
65 |         if (selected) {
66 |           document.getSelection().removeAllRanges();
67 |           document.getSelection().addRange(selected);
68 |         }
69 |       }
70 |     }
71 |   }
72 | };
73 | </script>
74 | 


--------------------------------------------------------------------------------
/components/SnailCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CStack is-inline spacing="5" class="snailCardRow" as="li">
 3 |     <CBox class="alias">
 4 |       <CLink :href="$config.baseURL + '/s/' + snail.alias">{{
 5 |         snail.alias
 6 |       }}</CLink>
 7 |     </CBox>
 8 |     <CBox class="url">
 9 |       <CLink :href="snail.url">{{ removeUrlProtocol(snail.url) }}</CLink>
10 |     </CBox>
11 |     <CBox class="clicks">
12 |       {{ snail.clicks }}
13 |     </CBox>
14 |     <CButton p="0" variant-color="red" :disabled="loading" @click="deleteSnail">
15 |       <div v-if="loading"><CSpinner size="sm" /></div>
16 |       <div v-else><CIcon name="close" /></div>
17 |     </CButton>
18 |   </CStack>
19 | </template>
20 | 
21 | <script>
22 | import axios from 'axios';
23 | export default {
24 |   props: {
25 |     snail: {
26 |       type: Object,
27 |       required: true
28 |     }
29 |   },
30 |   data() {
31 |     return {
32 |       loading: false
33 |     };
34 |   },
35 |   methods: {
36 |     async deleteSnail() {
37 |       this.loading = true;
38 |       const token = await this.$auth.strategy.token.get();
39 |       try {
40 |         await axios.delete(`/api/snails/${this.snail.alias}`, {
41 |           headers: {
42 |             // note: the token already has the Bearer prefix
43 |             Authorization: token // send the access token through the 'Authorization' header
44 |           }
45 |         });
46 |         this.$emit('deleted', this.snail);
47 |       } catch (error) {
48 |         alert(error.response.data.message);
49 |       } finally {
50 |         this.loading = false;
51 |       }
52 |     },
53 |     removeUrlProtocol(url) {
54 |       return url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '');
55 |     }
56 |   }
57 | };
58 | </script>
59 | 
60 | <style>
61 | .snailCardRow {
62 |   display: flex;
63 |   flex-direction: row;
64 |   align-items: center;
65 |   justify-content: space-between;
66 |   padding: 0.5rem;
67 | }
68 | 
69 | .snailCardRow:not(:last-child) {
70 |   border-bottom: 1px solid #ccc;
71 | }
72 | 
73 | .snailCardRow div {
74 |   white-space: nowrap;
75 |   overflow: hidden;
76 |   text-overflow: ellipsis;
77 | }
78 | 
79 | .snailCardRow .alias {
80 |   width: 30%;
81 | }
82 | 
83 | .snailCardRow .url {
84 |   width: 60%;
85 | }
86 | 
87 | .snailCardRow .clicks {
88 |   width: 10%;
89 |   text-overflow: clip;
90 | }
91 | </style>
92 | >
93 | 


--------------------------------------------------------------------------------
/pages/leaderboard/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CBox text-align="center">
 3 |     <CFlex direction="column" align="center">
 4 |       <CHeading as="h2" size="lg">
 5 |         top snails
 6 |         <CImage src="trophy.png" ml="1" d="inline-block" size="10" />
 7 |       </CHeading>
 8 |       <CFlex direction="column" class="leaderboard">
 9 |         <CFlex
10 |           class="leaderboardHeader"
11 |           justify="space-between"
12 |           font-weight="600"
13 |           p="4"
14 |           border-bottom="1px solid #aaa"
15 |         >
16 |           <CText ml="10%">alias</CText>
17 |           <CText>url</CText>
18 |           <CText>clicks</CText>
19 |         </CFlex>
20 |         <CFlex overflow="hidden" direction="column" flex-grow="1">
21 |           <CSpinner v-if="loading" color="orange.300" margin="auto" />
22 | 
23 |           <CList v-else overflow="auto" list-style="none" class="snailList">
24 |             <leaderboard-card
25 |               v-for="(snail, index) in mySnails"
26 |               :key="snail.alias"
27 |               :snail="snail"
28 |               :rank="index + 1"
29 |             />
30 |           </CList>
31 |         </CFlex>
32 |       </CFlex>
33 |     </CFlex>
34 |   </CBox>
35 | </template>
36 | 
37 | <script>
38 | import axios from 'axios';
39 | 
40 | export default {
41 |   name: 'LeaderboardPage',
42 |   data() {
43 |     return {
44 |       loading: true,
45 |       mySnails: []
46 |     };
47 |   },
48 |   async mounted() {
49 |     await this.fetchSnails();
50 |   },
51 |   methods: {
52 |     async fetchSnails() {
53 |       const { data } = await axios.get('/api/snails');
54 |       this.mySnails = data;
55 |       this.loading = false;
56 |     }
57 |   }
58 | };
59 | </script>
60 | 
61 | <style scoped>
62 | .leaderboard {
63 |   margin: 1rem auto;
64 |   width: 70vmin;
65 |   text-align: justify;
66 |   border-radius: 5px;
67 |   border: 1px solid rgba(204, 204, 204, 0.664);
68 |   background-color: #0000001e;
69 |   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
70 |   height: 50vh;
71 |   max-height: 50vh;
72 |   overflow: hidden;
73 |   padding-bottom: 0.5rem;
74 | }
75 | 
76 | @media only screen and (max-width: 768px) {
77 |   .leaderboard {
78 |     width: 100vw;
79 |     border-radius: 0;
80 |     border: none;
81 |     box-shadow: none;
82 |   }
83 | }
84 | 
85 | .snailList {
86 |   padding-left: 0.5rem;
87 |   padding-right: 0.5rem;
88 | }
89 | 
90 | @media only screen and (max-width: 768px) {
91 |   .snailList {
92 |     padding-left: 0;
93 |     padding-right: 0;
94 |   }
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/pages/mysnails/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CBox text-align="center">
 3 |     <CBox v-if="error">
 4 |       <CHeading>An error occurred when trying to access your snails :(</CHeading>
 5 |       <CText>{{ error }}</CText>
 6 |     </CBox>
 7 | 
 8 |     <CHeading v-else-if="!loading && mySnails.length === 0">
 9 |       You have no snails :(
10 |     </CHeading>
11 | 
12 |     <CBox v-else>
13 |       <CHeading>your snails:</CHeading>
14 |       <CSpinner v-if="loading" color="orange.300" />
15 |       <CBox v-else>
16 |         <CBox overflow-y="auto" max-height="50%" class="snailList" as="ul">
17 |           <snail-card
18 |             v-for="snail in mySnails"
19 |             :key="snail.alias"
20 |             :snail="snail"
21 |             @deleted="deleteSnail($event)"
22 |           />
23 |         </CBox>
24 |       </CBox>
25 |     </CBox>
26 |   </CBox>
27 | </template>
28 | 
29 | <script>
30 | import axios from 'axios';
31 | 
32 | export default {
33 |     name: "MySnailsPage",
34 |     middleware: "auth",
35 |     data() {
36 |         return {
37 |             mySnails: [],
38 |             loading: true,
39 |             error: null
40 |         };
41 |     },
42 |     async fetch() {
43 |         // Get the access token from the auth wrapper
44 |         const token = await this.$auth.strategy.token.get();
45 |         try {
46 |             const result = await axios.get("/api/owners", {
47 |                 headers: {
48 |                     // note: the token already has the Bearer prefix
49 |                     Authorization: token // send the access token through the 'Authorization' header
50 |                 }
51 |             });
52 |             this.mySnails = result.data.map((s) => s.data);
53 |             this.loading = false;
54 |         }
55 |         catch (error) {
56 |             this.error = error;
57 |         }
58 |     },
59 |     methods: {
60 |         deleteSnail(snail) {
61 |             this.mySnails = this.mySnails.filter((s) => s.alias !== snail.alias);
62 |         }
63 |     },
64 |     fetchOnServer: false,
65 | };
66 | </script>
67 | 
68 | <style scoped>
69 | .snailList {
70 |   margin: 5px auto;
71 |   padding: 5px;
72 |   max-height: 50vh;
73 |   width: 90%;
74 |   max-width: 50rem;
75 |   overflow: auto;
76 |   text-align: justify;
77 |   border-radius: 5px;
78 |   border: 1px solid rgba(204, 204, 204, 0.664);
79 |   background-color: #0000000e;
80 |   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
81 | }
82 | 
83 | @media screen and (max-width: 768px) {
84 |   .snailList {
85 |     width: 100%;
86 |     border-radius: 0;
87 |     max-height: 70vh;
88 |   }
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
  1 | import { extend } from './utils/icons';
  2 | 
  3 | export default {
  4 |   target: 'static',
  5 |   ssr: false,
  6 | 
  7 |   server: {
  8 |     host: '0'
  9 |   },
 10 | 
 11 |   generate: {
 12 |     fallback: 'redirect.html'
 13 |   },
 14 | 
 15 |   serverMiddleware: {
 16 |     '/api': '~/api'
 17 |   },
 18 |   // Global page headers: https://go.nuxtjs.dev/config-head
 19 |   head: {
 20 |     title: 'tiny snails',
 21 |     htmlAttrs: {
 22 |       lang: 'en'
 23 |     },
 24 |     meta: [
 25 |       { charset: 'utf-8' },
 26 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 27 |       { hid: 'description', name: 'description', content: '' },
 28 |       { name: 'format-detection', content: 'telephone=no' }
 29 |     ],
 30 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
 31 |   },
 32 | 
 33 |   // Global CSS: https://go.nuxtjs.dev/config-css
 34 |   css: [],
 35 | 
 36 |   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
 37 |   plugins: [{ src: '~/plugins/vercel.js', mode: 'client' }],
 38 | 
 39 |   // Auto import components: https://go.nuxtjs.dev/config-components
 40 |   components: true,
 41 | 
 42 |   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
 43 |   buildModules: [
 44 |     // https://go.nuxtjs.dev/typescript
 45 |     '@nuxt/typescript-build',
 46 |     [
 47 |       '@nuxtjs/google-fonts',
 48 |       {
 49 |         families: {
 50 |           Poppins: [400, 600, 700],
 51 |           'Roboto Condensed': [400]
 52 |         },
 53 |         display: 'swap'
 54 |       }
 55 |     ]
 56 |   ],
 57 | 
 58 |   // Modules: https://go.nuxtjs.dev/config-modules
 59 |   modules: [
 60 |     '@chakra-ui/nuxt',
 61 |     '@nuxtjs/emotion',
 62 |     '@nuxtjs/axios',
 63 |     '@nuxtjs/auth-next'
 64 |   ],
 65 | 
 66 |   auth: {
 67 |     redirect: {
 68 |       login: '/',
 69 |       logout: '/'
 70 |     },
 71 |     strategies: {
 72 |       auth0: {
 73 |         domain: 'dev-vz68qmuc.us.auth0.com',
 74 |         clientId: '1PnxykiF5ILPFMoMdFLkCJhN5gGmXT4g',
 75 |         audience: 'https://tny-snls.xyz/api/'
 76 |       }
 77 |     }
 78 |   },
 79 | 
 80 |   publicRuntimeConfig: {
 81 |     baseURL: process.env.BASE_URL,
 82 |     slugChars: 'abcdefghijklmnopqrstuvwxyz',
 83 |     slugLength: 4
 84 |   },
 85 | 
 86 |   // Build Configuration: https://go.nuxtjs.dev/config-build
 87 |   build: {},
 88 | 
 89 |   axios: {
 90 |     baseURL: process.env.BASE_URL
 91 |   },
 92 | 
 93 |   chakra: {
 94 |     icons: {
 95 |       extend
 96 |     },
 97 |     extendTheme: {
 98 |       fonts: {
 99 |         heading: 'Poppins',
100 |         body: 'Poppins'
101 |       }
102 |     }
103 |   }
104 | };
105 | 


--------------------------------------------------------------------------------
/api/snails/index.ts:
--------------------------------------------------------------------------------
  1 | import { Router } from 'express';
  2 | import faunadb, { query as q } from 'faunadb';
  3 | import { object } from 'yup';
  4 | import generateRandomSlug from '../generateRandomSlug';
  5 | import jwtCheck from '../jwtCheck';
  6 | import {
  7 |   aliasValidator,
  8 |   snailOwnerValidator,
  9 |   urlValidator
 10 | } from '../../utils/validators';
 11 | 
 12 | const router = Router();
 13 | const faunaClient = new faunadb.Client({
 14 |   secret: process.env.FAUNA_SECRET_KEY ?? ''
 15 | });
 16 | 
 17 | type topAliasesIndexResponse = { data: [number, string, string][] };
 18 | 
 19 | // return 50 most popular urls for leaderboard
 20 | router.get('/', async (_req, res, _next) => {
 21 |   try {
 22 |     const query = await faunaClient.query<topAliasesIndexResponse>(
 23 |       q.Paginate(q.Match(q.Index('top_aliases_by_clicks_new')), { size: 50 })
 24 |     );
 25 |     const result = query.data.map((item) => {
 26 |       return {
 27 |         clicks: item[0],
 28 |         alias: item[1],
 29 |         url: item[2]
 30 |       };
 31 |     });
 32 |     res.json(result);
 33 |   } catch (error) {
 34 |     res.json(error);
 35 |   }
 36 | });
 37 | 
 38 | const schema = object().shape({
 39 |   owner: snailOwnerValidator,
 40 |   url: urlValidator,
 41 |   alias: aliasValidator
 42 | });
 43 | 
 44 | // create a new shortened url
 45 | router.post('/', jwtCheck(false), async (req: any, res, _next) => {
 46 |   const { url: urlFromRequest, slug: aliasFromRequest } = req.body;
 47 |   const owner = req.user?.sub ?? '';
 48 | 
 49 |   const url = decodeURI(urlFromRequest);
 50 |   const alias = aliasFromRequest ?? (await generateRandomSlug());
 51 | 
 52 |   try {
 53 |     await schema.validate({ owner, url, alias });
 54 |   } catch (error) {
 55 |     return res.status(400).json({ error: 'invalid data' });
 56 |   }
 57 | 
 58 |   // TODO auto generate sdk from fauna so we don't have to do "any"
 59 |   try {
 60 |     const { data }: any = await faunaClient.query(
 61 |       q.Create(q.Collection('snails'), {
 62 |         data: {
 63 |           url,
 64 |           alias,
 65 |           owner,
 66 |           clicks: 0
 67 |         }
 68 |       })
 69 |     );
 70 |     res.json(data);
 71 |   } catch (error: any) {
 72 |     if (error.requestResult?.statusCode === 400)
 73 |       return res.status(400).json({ error: 'alias already exists' });
 74 | 
 75 |     return res.status(500).json({ error });
 76 |   }
 77 | });
 78 | 
 79 | // get the url for a given alias
 80 | router.get('/:alias', async (req, res, _next) => {
 81 |   const alias = req.params.alias;
 82 |   const doc: any = await faunaClient.query(
 83 |     q.Get(q.Match(q.Index('aliases'), alias))
 84 |   );
 85 | 
 86 |   if (!doc.data) return res.status(404).json({ error: 'not found' });
 87 | 
 88 |   faunaClient.query(
 89 |     q.Update(q.Ref(doc.ref), { data: { clicks: doc.data.clicks + 1 } })
 90 |   );
 91 | 
 92 |   res.json(doc.data);
 93 | });
 94 | 
 95 | // destroy a shortened url
 96 | router.delete('/:alias', jwtCheck(), async (req: any, res, _next) => {
 97 |   const alias = req.params.alias;
 98 |   const doc: any = await faunaClient.query(
 99 |     q.Get(q.Match(q.Index('aliases'), alias))
100 |   );
101 | 
102 |   if (doc.data.owner === req.user.sub) {
103 |     await faunaClient.query(q.Delete(q.Ref(doc.ref)));
104 | 
105 |     res.json({ success: true });
106 |   } else {
107 |     res.status(403).json({ success: false, error: 'not authorized' });
108 |   }
109 | });
110 | 
111 | export default router;
112 | 


--------------------------------------------------------------------------------
/components/SnailCreation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <CFlex justify="center" direction="column" align="center" h="100%">
  3 |     <CFormControl
  4 |       text-align="center"
  5 |       max-w="80%"
  6 |       :is-invalid="request.error != null"
  7 |       @submit="createSnail"
  8 |       @keyup.enter="createSnail"
  9 |     >
 10 |       <CFormLabel for="url">your url:</CFormLabel>
 11 |       <CInput
 12 |         id="url"
 13 |         v-model="inputUrl"
 14 |         type="url"
 15 |         aria-describedby="url-helper-text"
 16 |         aria-placeholder="URL to shorten"
 17 |         placeholder="URL to shorten"
 18 |         focus-border-color="indigo.100"
 19 |         @keyup.enter="createSnail"
 20 |       />
 21 |       <br />
 22 |       <CFormLabel for="slug">shortened url:</CFormLabel>
 23 |       <CInputGroup @keyup.enter="createSnail">
 24 |         <CInputLeftAddon color="orange.300">
 25 |           {{ $config.baseURL }}/s/
 26 |         </CInputLeftAddon>
 27 |         <CInput
 28 |           id="slug"
 29 |           v-model="inputSlug"
 30 |           type="text"
 31 |           aria-describedby="slug-helper-text"
 32 |           aria-placeholder="Shortened URL"
 33 |           placeholder="slug"
 34 |           focus-border-color="indigo.100"
 35 |           rounded-left="0"
 36 |           @keyup.enter="createSnail"
 37 |         />
 38 |       </CInputGroup>
 39 |       <CFormHelperText id="slug-helper-text">
 40 |         leave it blank to get a random one
 41 |       </CFormHelperText>
 42 |       <CFormErrorMessage>
 43 |         {{ request.error }}
 44 |       </CFormErrorMessage>
 45 |       <br />
 46 |       <CButton
 47 |         mt="2"
 48 |         variant-color="indigo"
 49 |         :is-loading="request.loading"
 50 |         font-weight="bold"
 51 |         @click="createSnail"
 52 |       >
 53 |         shorten it!
 54 |       </CButton>
 55 |     </CFormControl>
 56 |   </CFlex>
 57 | </template>
 58 | 
 59 | <script>
 60 | import axios from 'axios';
 61 | import { object } from 'yup';
 62 | import { aliasValidator, urlValidator } from '@/utils/validators';
 63 | 
 64 | const schema = object().shape({
 65 |   url: urlValidator,
 66 |   slug: aliasValidator
 67 | });
 68 | 
 69 | export default {
 70 |   name: 'App',
 71 |   data() {
 72 |     return {
 73 |       inputUrl: '',
 74 |       inputSlug: '',
 75 |       request: {
 76 |         error: null,
 77 |         loading: false,
 78 |         success: null,
 79 |         data: null
 80 |       },
 81 |       placeholderSlug: ''
 82 |     };
 83 |   },
 84 |   methods: {
 85 |     // send the data from the form to the server
 86 |     async createSnail() {
 87 |       const url = this.inputUrl;
 88 |       const slug = this.inputSlug;
 89 | 
 90 |       try {
 91 |         const toBeValidated = slug ? { url, slug } : { url };
 92 |         await schema.validate(toBeValidated, { abortEarly: false });
 93 |       } catch (error) {
 94 |         this.request.error = error.errors.join(', ');
 95 |         return;
 96 |       }
 97 | 
 98 |       this.request.loading = true;
 99 |       this.request.error = null;
100 |       this.request.success = null;
101 |       this.request.data = null;
102 | 
103 |       try {
104 |         const body = {
105 |           url,
106 |           slug: slug || null
107 |         };
108 |         const params = {};
109 |         if (this.$auth.loggedIn)
110 |           params.headers = {
111 |             // note: the token already has the Bearer prefix
112 |             Authorization: await this.$auth.strategy.token.get()
113 |           };
114 | 
115 |         const { data } = await axios.post('/api/snails', body, params);
116 | 
117 |         this.request.loading = false;
118 |         this.request.success = true;
119 | 
120 |         this.$emit('snail-created', data);
121 |       } catch (error) {
122 |         if (error.response?.status === 400)
123 |           this.request.error = 'invalid url or alias';
124 |         else this.request.error = 'something went wrong';
125 | 
126 |         this.request.loading = false;
127 |       }
128 |     }
129 |   }
130 | };
131 | </script>
132 | 
133 | <style></style>
134 | 


--------------------------------------------------------------------------------
/components/AppHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <CFlex justify="space-between" pos="absolute" top="0" w="100%" p="3">
  3 |     <nuxt-link to="/">
  4 |       <CHeading as="h1">
  5 |         tiny snails
  6 |         <CImage src="snail.png" ml="1" d="inline-block" size="10" />
  7 |       </CHeading>
  8 |     </nuxt-link>
  9 |     <nav>
 10 |       <CFlex align="center" class="navLinks">
 11 |         <CLink
 12 |           display="inline-block"
 13 |           href="https://github.com/pedrozaalex/tiny_snails/"
 14 |           aria-label="GitHub"
 15 |           is-external
 16 |         >
 17 |           <CIcon name="github" size="24px" />
 18 |         </CLink>
 19 | 
 20 |         <!-- Leaderboard -->
 21 |         <CLink as="nuxt-link" to="/leaderboard" class="leaderboard"
 22 |           >leaderboard
 23 |         </CLink>
 24 | 
 25 |         <!-- Unlogged user -->
 26 |         <CLink
 27 |           v-if="!$auth.loggedIn"
 28 |           mr="2"
 29 |           class="signin"
 30 |           @click="$auth.loginWith('auth0')"
 31 |         >
 32 |           sign in
 33 |         </CLink>
 34 | 
 35 |         <!-- Logged user -->
 36 |         <CLink
 37 |           v-if="$auth.loggedIn"
 38 |           as="nuxt-link"
 39 |           to="/mysnails"
 40 |           class="mysnails"
 41 |         >
 42 |           my snails
 43 |         </CLink>
 44 |         <CLink v-if="$auth.loggedIn" class="signout" @click="$auth.logout()">
 45 |           sign out
 46 |         </CLink>
 47 | 
 48 |         <!-- Toggle dark mode -->
 49 |         <CIconButton
 50 |           :icon="colorMode === 'light' ? 'moon' : 'sun'"
 51 |           :aria-label="`Switch to ${
 52 |             colorMode === 'light' ? 'dark' : 'light'
 53 |           } mode`"
 54 |           @click="toggleColorMode"
 55 |         />
 56 |       </CFlex>
 57 | 
 58 |       <!-- drawer for mobile -->
 59 |       <CIconButton
 60 |         id="drawerButton"
 61 |         icon="chevron-left"
 62 |         aria-label="Open drawer"
 63 |         @click="openDrawer"
 64 |       />
 65 |       <CDrawer
 66 |         :is-open="isDrawerOpen"
 67 |         placement="right"
 68 |         :on-close="closeDrawer"
 69 |       >
 70 |         <CDrawerOverlay />
 71 |         <CDrawerContent max-width="60vw">
 72 |           <CDrawerCloseButton />
 73 |           <CDrawerBody>
 74 |             <CStack direction="column" spacing="5" align="start">
 75 |               <!-- Toggle dark mode -->
 76 |               <CIconButton
 77 |                 :icon="colorMode === 'light' ? 'moon' : 'sun'"
 78 |                 :aria-label="`Switch to ${
 79 |                   colorMode === 'light' ? 'dark' : 'light'
 80 |                 } mode`"
 81 |                 :title="`Switch to ${
 82 |                   colorMode === 'light' ? 'dark' : 'light'
 83 |                 } mode`"
 84 |                 @click="toggleColorMode"
 85 |               />
 86 | 
 87 |               <!-- Leaderboard -->
 88 |               <CLink as="nuxt-link" to="/leaderboard" class="leaderboard"
 89 |                 >leaderboard
 90 |               </CLink>
 91 | 
 92 |               <!-- Unlogged user -->
 93 |               <CLink
 94 |                 v-if="!$auth.loggedIn"
 95 |                 mr="2"
 96 |                 class="signin"
 97 |                 @click="$auth.loginWith('auth0')"
 98 |               >
 99 |                 sign in
100 |               </CLink>
101 | 
102 |               <!-- Logged user -->
103 |               <CLink
104 |                 v-if="$auth.loggedIn"
105 |                 as="nuxt-link"
106 |                 to="/mysnails"
107 |                 class="mysnails"
108 |               >
109 |                 my snails
110 |               </CLink>
111 |               <CLink
112 |                 v-if="$auth.loggedIn"
113 |                 class="signout"
114 |                 @click="$auth.logout()"
115 |               >
116 |                 sign out
117 |               </CLink>
118 | 
119 |               <CLink
120 |                 display="inline-block"
121 |                 href="https://github.com/pedrozaalex/tiny_snails/"
122 |                 aria-label="GitHub"
123 |                 is-external
124 |               >
125 |                 <CIcon name="github" size="24px" />
126 |               </CLink>
127 |             </CStack>
128 |           </CDrawerBody>
129 |         </CDrawerContent>
130 |       </CDrawer>
131 |     </nav>
132 |   </CFlex>
133 | </template>
134 | 
135 | <script>
136 | export default {
137 |   inject: ['$chakraColorMode', '$toggleColorMode'],
138 |   data() {
139 |     return {
140 |       isDrawerOpen: false
141 |     };
142 |   },
143 |   computed: {
144 |     toggleColorMode() {
145 |       return this.$toggleColorMode;
146 |     },
147 |     colorMode() {
148 |       return this.$chakraColorMode();
149 |     }
150 |   },
151 |   watch: {
152 |     colorMode() {
153 |       if (!process.client) {
154 |         return;
155 |       }
156 |       window.$cookies.set('theme', this.$chakraColorMode(), 63072000);
157 |     }
158 |   },
159 |   created() {
160 |     if (!process.client) return;
161 |     // eslint-disable-next-line nuxt/no-globals-in-created
162 |     const savedColorMode = window?.$cookies?.get('theme');
163 |     if (!savedColorMode) return;
164 |     if (savedColorMode && this.colorMode && this.colorMode !== savedColorMode) {
165 |       this.$toggleColorMode();
166 |     }
167 |   },
168 |   methods: {
169 |     openDrawer() {
170 |       this.isDrawerOpen = true;
171 |     },
172 |     closeDrawer() {
173 |       this.isDrawerOpen = false;
174 |     }
175 |   }
176 | };
177 | </script>
178 | <style scoped>
179 | .navLinks a {
180 |   padding-right: 0.5rem;
181 |   padding-left: 0.5rem;
182 | }
183 | 
184 | #drawerButton {
185 |   display: none;
186 | }
187 | 
188 | @media screen and (max-width: 768px) {
189 |   .navLinks {
190 |     display: none;
191 |   }
192 | 
193 |   #drawerButton {
194 |     display: block;
195 |   }
196 | }
197 | </style>
198 | 


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