├── acrons-demo.png
├── public
    ├── logo.png
    └── index.html
├── vue.config.js
├── src
    ├── assets
    │   └── logo.png
    ├── router
    │   └── index.js
    ├── main.js
    ├── id_techronym_data.json
    ├── components
    │   ├── AppHeader.vue
    │   └── AppFooter.vue
    ├── App.vue
    ├── views
    │   ├── ID.vue
    │   └── Home.vue
    └── techronym_data.json
├── babel.config.js
├── .gitignore
├── scripts
    └── gh-pages-deploy.js
├── LICENSE
├── package.json
└── README.md


/acrons-demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkfeuhrer/acrons/HEAD/acrons-demo.png


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkfeuhrer/acrons/HEAD/public/logo.png


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | // module.exports = {
2 | //   publicPath: "/acrons/",
3 | // };
4 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkfeuhrer/acrons/HEAD/src/assets/logo.png


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


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


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import Home from "../views/Home.vue";
 4 | import ID from "../views/ID.vue"
 5 | import VueMeta from "vue-meta";
 6 | 
 7 | Vue.use(VueRouter);
 8 | Vue.use(VueMeta);
 9 | 
10 | const routes = [
11 |   {
12 |     path: "/",
13 |     name: "Home",
14 |     component: Home,
15 |   },
16 |   {
17 |     path: "/id",
18 |     name: "ID",
19 |     component: ID,
20 |   }
21 | ];
22 | 
23 | const router = new VueRouter({
24 |   routes,
25 | });
26 | 
27 | export default router;
28 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import VueAnalytics from "vue-analytics";
 4 | import VuePageTransition from "vue-page-transition";
 5 | import VueMeta from "vue-meta";
 6 | 
 7 | import "@fortawesome/fontawesome-free/css/all.css";
 8 | import "@fortawesome/fontawesome-free/js/all.js";
 9 | import "bootstrap/dist/css/bootstrap.css";
10 | import "bootstrap-vue/dist/bootstrap-vue.css";
11 | import router from "./router";
12 | 
13 | Vue.config.productionTip = false;
14 | Vue.use(VuePageTransition);
15 | Vue.use(VueMeta);
16 | 
17 | Vue.use(VueAnalytics, {
18 |   id: "UA-131120430-3",
19 |   router,
20 | });
21 | 
22 | new Vue({
23 |   router,
24 |   render: (h) => h(App),
25 | }).$mount("#app");
26 | 


--------------------------------------------------------------------------------
/src/id_techronym_data.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "acronym": "ManTul",
 4 |     "expanded_version": "Mantap Betul"
 5 |   },
 6 |   {
 7 |     "acronym": "JaPri",
 8 |     "expanded_version": "Jalur Pribadi"
 9 |   },
10 |   {
11 |     "acronym": "RekBer",
12 |     "expanded_version": "Rekening Bersama"
13 |   },
14 |   {
15 |     "acronym": "TTDJ",
16 |     "expanded_version": "Hati-hati di jalan"
17 |   },
18 |   {
19 |     "acronym": "GerCep",
20 |     "expanded_version": "Gerak Cepat"
21 |   },
22 |   {
23 |     "acronym": "MaGer",
24 |     "expanded_version": "Malas Gerak"
25 |   },
26 |   {
27 |     "acronym": "GaJe",
28 |     "expanded_version": "Gak Jelas"
29 |   },
30 |   {
31 |     "acronym": "GaBut",
32 |     "expanded_version": "Gaji Buta"
33 |   },
34 |   {
35 |     "acronym": "CurCol",
36 |     "expanded_version": "Curhat Colongan"
37 |   },
38 |   {
39 |     "acronym": "GPL",
40 |     "expanded_version": "Gak Pake Lama"
41 |   }
42 | ]
43 | 


--------------------------------------------------------------------------------
/scripts/gh-pages-deploy.js:
--------------------------------------------------------------------------------
 1 | const execa = require("execa");
 2 | const fs = require("fs");
 3 | 
 4 | (async () => {
 5 |   try {
 6 |     await execa("git", ["checkout", "--orphan", "gh-pages"]);
 7 |     console.log("Building...");
 8 |     await execa("npm", ["run", "build"]);
 9 |     // Understand if it's dist or build folder
10 |     const folderName = fs.existsSync("dist") ? "dist" : "build";
11 |     await execa("git", ["--work-tree", folderName, "add", "--all"]);
12 |     await execa("git", ["--work-tree", folderName, "commit", "-m", "gh-pages"]);
13 |     console.log("Pushing to gh-pages...");
14 |     await execa("git", ["push", "origin", "HEAD:gh-pages", "--force"]);
15 |     await execa("rm", ["-r", folderName]);
16 |     await execa("git", ["checkout", "-f", "master"]);
17 |     await execa("git", ["branch", "-D", "gh-pages"]);
18 |     console.log("Successfully deployed");
19 |   } catch (e) {
20 |     console.log(e.message);
21 |     process.exit(1);
22 |   }
23 | })();
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Mohit Khare
 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 | 


--------------------------------------------------------------------------------
/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 |     <link rel="icon" href="<%= BASE_URL %>logo.png" />
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <script
10 |       data-name="BMC-Widget"
11 |       src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
12 |       data-id="chHAzigTb"
13 |       data-description="Thanks for visiting? Support me ✌️"
14 |       data-message="Like the content? Buy me a coffee ❤️️"
15 |       data-color="#FF813F"
16 |       data-position=""
17 |       data-x_margin="18"
18 |       data-y_margin="18"
19 |     ></script>
20 |   </head>
21 |   <body>
22 |     <noscript>
23 |       <strong
24 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
25 |         properly without JavaScript enabled. Please enable it to
26 |         continue.</strong
27 |       >
28 |     </noscript>
29 |     <div id="app"></div>
30 |     <!-- built files will be auto injected -->
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/src/components/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="header">
 3 |     <div>
 4 |       <div class="logo">
 5 |         <img style="margin-right: 5px;" src="../assets/logo.png" width="60" height="60" alt />
 6 |         <h1>Acrons</h1>
 7 |         <router-link to="/" class="routes">English</router-link>|
 8 |         <router-link to="/id" class="routes">Bahasa</router-link>
 9 |       </div>
10 |       <div class="subheading">
11 |         <p>
12 |           One stop solution for finding acronyms.
13 |           <br />Now understand what these abbrevations stand for
14 |         </p>
15 |       </div>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {};
22 | </script>
23 | 
24 | <style scoped>
25 | .header {
26 |   padding-top: 1rem;
27 | }
28 | 
29 | .header div h1 {
30 |   font-size: 52px;
31 |   font-weight: bolder;
32 | }
33 | 
34 | .subheading {
35 |   margin-top: 10px;
36 | }
37 | 
38 | .subheading p {
39 |   font-size: 20px;
40 |   font-weight: normal;
41 | }
42 | 
43 | .logo {
44 |   align-self: center;
45 | }
46 | 
47 | .routes {
48 |   margin: 0 5px;
49 |   font-weight: bold;
50 |   font-size: 18px;
51 |   color: #666;
52 |   border-bottom: 3px solid #fcc047;
53 | }
54 | 
55 | .routes:hover {
56 |   margin: 0 5px;
57 |   font-weight: bold;
58 |   font-size: 18px;
59 |   color: #fcc047;
60 |   text-decoration: none;
61 |   border-bottom: 3px solid #333;
62 | }
63 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "acrons",
 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 |     "gh-pages-deploy": "node scripts/gh-pages-deploy.js"
10 |   },
11 |   "dependencies": {
12 |     "@fortawesome/fontawesome-free": "^5.13.0",
13 |     "bootstrap": "^4.5.0",
14 |     "bootstrap-vue": "^2.14.0",
15 |     "core-js": "^3.6.4",
16 |     "vue": "^2.6.11",
17 |     "vue-analytics": "^5.22.1",
18 |     "vue-meta": "^2.3.3",
19 |     "vue-page-transition": "^0.2.2",
20 |     "vue-router": "^3.1.6"
21 |   },
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "~4.3.0",
24 |     "@vue/cli-plugin-eslint": "~4.3.0",
25 |     "@vue/cli-plugin-router": "^4.3.1",
26 |     "@vue/cli-plugin-vuex": "^4.3.1",
27 |     "@vue/cli-service": "~4.3.0",
28 |     "babel-eslint": "^10.1.0",
29 |     "eslint": "^6.7.2",
30 |     "eslint-plugin-vue": "^6.2.2",
31 |     "vue-template-compiler": "^2.6.11"
32 |   },
33 |   "eslintConfig": {
34 |     "root": true,
35 |     "env": {
36 |       "node": true
37 |     },
38 |     "extends": [
39 |       "plugin:vue/essential",
40 |       "eslint:recommended"
41 |     ],
42 |     "parserOptions": {
43 |       "parser": "babel-eslint"
44 |     },
45 |     "rules": {}
46 |   },
47 |   "browserslist": [
48 |     "> 1%",
49 |     "last 2 versions",
50 |     "not dead"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <vue-page-transition name="fade">
 4 |       <router-view />
 5 |     </vue-page-transition>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: "App",
12 |   meta: [
13 |     {
14 |       name: "keywords",
15 |       content: "acrons, acron, acronymns, short form, long form, abbrevations"
16 |     },
17 |     {
18 |       name: "description",
19 |       content: "One stop solution for finding the acronyms"
20 |     },
21 |     { name: "subject", content: "One stop solution for finding acronyms" },
22 |     { name: "author", content: "@mkfeuhrer" },
23 |     { name: "url", content: "https://mohitkhare.me/acrons" },
24 |     { name: "og:title", content: "Acrons" },
25 |     { name: "og:site_name", content: "Acrons" },
26 |     { name: "og:type", content: "website" },
27 |     { name: "og:url", content: "https://mohitkhare.me/acrons" },
28 |     {
29 |       name: "og:description",
30 |       content:
31 |         "One stop solution for finding acronyms.Now understand what these abbrevations stand for!"
32 |     }
33 |   ]
34 | };
35 | </script>
36 | 
37 | <style>
38 | #app {
39 |   font-family: Roboto, Helvetica, Arial, sans-serif;
40 |   -webkit-font-smoothing: antialiased;
41 |   -moz-osx-font-smoothing: grayscale;
42 |   text-align: center;
43 |   color: #2c3e50;
44 | }
45 | 
46 | #nav {
47 |   padding: 30px;
48 | }
49 | 
50 | #nav a {
51 |   font-weight: bold;
52 |   color: #2c3e50;
53 | }
54 | 
55 | #nav a.router-link-exact-active {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/AppFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="footer">
 3 |     <div class="socialShare">
 4 |       <span class="socialIcons">
 5 |         <a
 6 |           href="https://twitter.com/intent/tweet?url=https://mohitkhare.me/acrons&text=Find the most used acronyms.Check out Acrons by @mkfeuhrer"
 7 |           target="_blank"
 8 |         >
 9 |           <i style="color: #38A1F3" class="fab fa-2x fa-twitter" aria-hidden="true"></i>
10 |         </a>
11 |       </span>
12 | 
13 |       <span class="socialIcons">
14 |         <a href="https://www.facebook.com/sharer/sharer.php?u=mohitkhare.me/acrons" target="_blank">
15 |           <i class="fab fa-2x fa-facebook-f" aria-hidden="true" target="_blank"></i>
16 |         </a>
17 |       </span>
18 |       <span class="socialIcons">
19 |         <a
20 |           target="_blank"
21 |           style="color: #0e76a8;"
22 |           href="https://www.linkedin.com/shareArticle?mini=true&url=https://mohitkhare.me/acrons"
23 |           onclick="window.open(this.href, 'width=550,height=435');return false;"
24 |         >
25 |           <i class="fab fa-2x fa-linkedin-in" aria-hidden="true"></i>
26 |         </a>
27 |       </span>
28 |     </div>
29 |     <p class="name">
30 |       Made with
31 |       <i class="fas fa-heart heartIcon"></i> by
32 |       <a href="https://mohitkhare.me" target="blank">Mohit</a>
33 |     </p>
34 |   </div>
35 | </template>
36 | 
37 | <script>
38 | export default {};
39 | </script>
40 | 
41 | <style scoped>
42 | .heartIcon {
43 |   color: red;
44 | }
45 | 
46 | a {
47 |   font-weight: bold;
48 | }
49 | 
50 | .footer {
51 |   font-size: 1em;
52 |   padding: 0.5em;
53 | }
54 | 
55 | .socialIcons {
56 |   padding: 1em;
57 |   font-size: 0.85em;
58 | }
59 | 
60 | .socialShare {
61 |   margin: 1em;
62 | }
63 | 
64 | .name {
65 |   font-size: 18px;
66 | }
67 | 
68 | .name a {
69 |   font-weight: 500;
70 |   color: #000;
71 | }
72 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Acrons
 2 | 
 3 | <p align="center">
 4 | <img alt="acrons" title="Acrons" src="https://raw.githubusercontent.com/mkfeuhrer/acrons/master/acrons-demo.png" width="700" height="auto" />
 5 | </p>
 6 | 
 7 | One stop solution for finding acronyms.
 8 | 
 9 | Now understand what these abbrevations stand for
10 | 
11 | Live here - [Acrons](https://acrons.vercel.app)
12 | 
13 | <a href="https://www.producthunt.com/posts/acrons?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-acrons" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=200817&theme=light" alt="Acrons - One stop solution for finding cool, crazy & popular acronyms | Product Hunt Embed" style="width: 250px; height: 54px;" width="250px" height="54px" /></a>
14 | 
15 | ## Project setup
16 | 
17 | ```
18 | npm install
19 | ```
20 | 
21 | ### Compiles and hot-reloads for development
22 | 
23 | ```
24 | npm run serve
25 | ```
26 | 
27 | ### Compiles and minifies for production
28 | 
29 | ```
30 | npm run build
31 | ```
32 | 
33 | ### Lints and fixes files
34 | 
35 | ```
36 | npm run lint
37 | ```
38 | 
39 | ### Customize configuration
40 | 
41 | See [Configuration Reference](https://cli.vuejs.org/config/).
42 | 
43 | ## Contribute
44 | 
45 | This is a fun and easy to contribute project. Feel free to add new acronyms by modifying the `technronyms_data.json` file under `src` directory.
46 | 
47 | 1. Please ensure the abbrevations aren't duplicated.
48 | 2. Follow the json format.
49 | 3. Avoid acronyms with less than 3 characters.
50 | 
51 | Also, in case you want to add some functionality or improve UI, raise a Issue/PR.
52 | 
53 | Star and share!
54 | 
55 | <a href="https://www.buymeacoffee.com/chHAzigTb" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
56 | 
57 | ## Author
58 | 
59 | - [Mohit Khare](https://mohitkhare.com)
60 | 


--------------------------------------------------------------------------------
/src/views/ID.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home container">
  3 |     <AppHeader />
  4 |     <div class="parent">
  5 |       <div class="searchBox">
  6 |         <input v-show="!popular" type="search" v-model="search" placeholder="Enter acronym" />
  7 |       </div>
  8 |       <div class="buttons">
  9 |         <button @click="showPopular" class="btn buttonSelection">Popular</button>
 10 |         <button @click="showAll" class="btn btn-outline-dark buttonSelection">Show me All</button>
 11 |         <a
 12 |           href="https://github.com/mkfeuhrer/acrons/issues"
 13 |           class="btn buttonSelection"
 14 |           target="blank"
 15 |         >Contribute</a>
 16 |       </div>
 17 | 
 18 |       <div class="product-hunt">
 19 |         <a
 20 |           href="https://www.producthunt.com/posts/acrons?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-acrons"
 21 |           target="_blank"
 22 |         >
 23 |           <img
 24 |             src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=200817&theme=light"
 25 |             alt="Acrons - One stop solution for finding cool, crazy & popular acronyms | Product Hunt Embed"
 26 |             style="width: 250px; height: 54px;"
 27 |             width="250px"
 28 |             height="54px"
 29 |           />
 30 |         </a>
 31 |       </div>
 32 | 
 33 |       <div
 34 |         v-show="!popular"
 35 |         class="searchResult"
 36 |         v-for="(value, index) in filteredList"
 37 |         :key="index"
 38 |       >
 39 |         <div class="grid">
 40 |           <div class="left" :class="{'grayHighlight': index % 2 !== 0 }">{{ value.acronym }}</div>
 41 |           <div
 42 |             class="right"
 43 |             :class="{'grayHighlight': index % 2 !== 0 }"
 44 |           >{{ value.expanded_version}}</div>
 45 |         </div>
 46 |       </div>
 47 |       <div
 48 |         v-show="popular"
 49 |         class="searchResult"
 50 |         v-for="(value, index) in popularList"
 51 |         :key="10000 + index"
 52 |       >
 53 |         <div class="grid">
 54 |           <div class="left" :class="{'grayHighlight': index % 2 !== 0 }">{{ value.acronym }}</div>
 55 |           <div
 56 |             class="right"
 57 |             :class="{'grayHighlight': index % 2 !== 0 }"
 58 |           >{{ value.expanded_version}}</div>
 59 |         </div>
 60 |       </div>
 61 |     </div>
 62 |     <AppFooter />
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script>
 67 | import json from "../id_techronym_data.json";
 68 | import AppHeader from "@/components/AppHeader.vue";
 69 | import AppFooter from "@/components/AppFooter.vue";
 70 | 
 71 | export default {
 72 |   name: "Home",
 73 |   data() {
 74 |     return {
 75 |       search: "",
 76 |       acronymList: json,
 77 |       popular: false,
 78 |       popularList: [
 79 |         {
 80 |           acronym: "ManTul",
 81 |           expanded_version: "Mantap Betul",
 82 |         },
 83 |         {
 84 |           acronym: "RekBer",
 85 |           expanded_version: "Rekening Bersama",
 86 |         },
 87 |         {
 88 |           acronym: "JaPri",
 89 |           expanded_version: "Jalur Pribadi",
 90 |         },
 91 |         {
 92 |           acronym: "MaGer",
 93 |           expanded_version: "Males Gerak",
 94 |         },
 95 |         {
 96 |           acronym: "GaJe",
 97 |           expanded_version: "Gak Jelas",
 98 |         },
 99 |       ],
100 |     };
101 |   },
102 |   created() {
103 |     this.popularList = this.popularList.sort((a, b) =>
104 |       a.acronym > b.acronym ? 1 : -1
105 |     );
106 |   },
107 |   computed: {
108 |     filteredList() {
109 |       return this.acronymList
110 |         .filter((obj) => {
111 |           return obj.acronym.toLowerCase().includes(this.search.toLowerCase());
112 |         })
113 |         .sort((a, b) => (a.acronym > b.acronym ? 1 : -1));
114 |     },
115 |   },
116 |   methods: {
117 |     showPopular() {
118 |       this.popular = true;
119 |       return this.popularList.sort((a, b) => (a.acronym > b.acronym ? 1 : -1));
120 |     },
121 |     showAll() {
122 |       this.popular = false;
123 |     },
124 |   },
125 |   components: {
126 |     AppHeader,
127 |     AppFooter,
128 |   },
129 | };
130 | </script>
131 | 
132 | 
133 | <style scoped>
134 | .parent {
135 |   margin: 10px;
136 | }
137 | 
138 | .searchResult {
139 |   margin: 20px;
140 | }
141 | 
142 | .parent input {
143 |   height: 40px;
144 |   width: 400px;
145 |   padding-top: 5px;
146 |   padding-bottom: 5px;
147 |   padding-left: 10px;
148 |   border: 2px solid lightgray;
149 |   border-radius: 5px;
150 | }
151 | 
152 | @media all and (max-width: 768px) {
153 |   .parent input {
154 |     height: 40px;
155 |     width: 300px;
156 |     padding-top: 5px;
157 |     padding-bottom: 5px;
158 |     padding-left: 10px;
159 |     border: 2px solid lightgray;
160 |     border-radius: 5px;
161 |   }
162 | }
163 | 
164 | .parent input:focus-within {
165 |   outline: none !important;
166 |   border: 2px solid #666;
167 | }
168 | 
169 | .searchBox {
170 |   margin-bottom: 20px;
171 | }
172 | 
173 | .searchBox input {
174 |   padding-left: 10px;
175 |   padding-right: 10px;
176 | }
177 | 
178 | .grid {
179 |   display: flex;
180 |   width: 100%;
181 |   flex-direction: row;
182 |   flex-wrap: wrap;
183 |   justify-content: space-around;
184 |   padding-left: 10px;
185 | }
186 | 
187 | .left {
188 |   width: 30%;
189 |   padding: 10px;
190 |   border: 1px solid black;
191 |   font-weight: bold;
192 | }
193 | 
194 | .right {
195 |   width: 70%;
196 |   padding: 10px;
197 |   border: 1px solid black;
198 |   font-weight: 500;
199 | }
200 | 
201 | .grayHighlight {
202 |   background-color: rgb(240, 240, 240);
203 | }
204 | 
205 | .buttons {
206 |   display: flex;
207 |   flex-wrap: wrap;
208 |   justify-content: center;
209 | }
210 | 
211 | .buttonSelection {
212 |   margin-left: 10px;
213 |   margin-right: 10px;
214 |   margin-top: 5px;
215 |   margin-bottom: 5px;
216 |   font-weight: bold;
217 |   border: 2px solid #fcc047;
218 | }
219 | 
220 | .buttonSelection:hover {
221 |   background-color: #fcc047;
222 |   font-weight: bold;
223 |   color: black;
224 |   border: 2px solid black;
225 | }
226 | 
227 | .buttonSelection:focus {
228 |   box-shadow: none;
229 | }
230 | 
231 | .contribute {
232 |   font-size: 18px;
233 |   margin-top: 20px;
234 | }
235 | 
236 | .contribute a {
237 |   color: #000;
238 |   margin-top: 5px;
239 |   font-weight: bold;
240 | }
241 | 
242 | .product-hunt {
243 |   margin: 20px;
244 | }
245 | </style>


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home container">
  3 |     <AppHeader />
  4 |     <div class="parent">
  5 |       <div class="searchBox">
  6 |         <input v-show="!popular" type="search" v-model="search" placeholder="Enter acronym" />
  7 |       </div>
  8 |       <div class="buttons">
  9 |         <button @click="showPopular" class="btn buttonSelection">Popular</button>
 10 |         <button @click="showAll" class="btn btn-outline-dark buttonSelection">Show me All</button>
 11 |         <a
 12 |           href="https://github.com/mkfeuhrer/acrons/issues"
 13 |           class="btn buttonSelection"
 14 |           target="blank"
 15 |         >Contribute</a>
 16 |       </div>
 17 | 
 18 |       <div class="product-hunt">
 19 |         <a
 20 |           href="https://www.producthunt.com/posts/acrons?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-acrons"
 21 |           target="_blank"
 22 |         >
 23 |           <img
 24 |             src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=200817&theme=light"
 25 |             alt="Acrons - One stop solution for finding cool, crazy & popular acronyms | Product Hunt Embed"
 26 |             style="width: 250px; height: 54px;"
 27 |             width="250px"
 28 |             height="54px"
 29 |           />
 30 |         </a>
 31 |       </div>
 32 | 
 33 |       <div
 34 |         v-show="!popular"
 35 |         class="searchResult"
 36 |         v-for="(value, index) in filteredList"
 37 |         :key="index"
 38 |       >
 39 |         <div class="grid">
 40 |           <div class="left" :class="{'grayHighlight': index % 2 !== 0 }">{{ value.acronym }}</div>
 41 |           <div
 42 |             class="right"
 43 |             :class="{'grayHighlight': index % 2 !== 0 }"
 44 |           >{{ value.expanded_version}}</div>
 45 |         </div>
 46 |       </div>
 47 |       <div
 48 |         v-show="popular"
 49 |         class="searchResult"
 50 |         v-for="(value, index) in popularList"
 51 |         :key="10000 + index"
 52 |       >
 53 |         <div class="grid">
 54 |           <div class="left" :class="{'grayHighlight': index % 2 !== 0 }">{{ value.acronym }}</div>
 55 |           <div
 56 |             class="right"
 57 |             :class="{'grayHighlight': index % 2 !== 0 }"
 58 |           >{{ value.expanded_version}}</div>
 59 |         </div>
 60 |       </div>
 61 |     </div>
 62 |     <AppFooter />
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script>
 67 | import json from "../techronym_data.json";
 68 | import AppHeader from "@/components/AppHeader.vue";
 69 | import AppFooter from "@/components/AppFooter.vue";
 70 | 
 71 | export default {
 72 |   name: "Home",
 73 |   data() {
 74 |     return {
 75 |       search: "",
 76 |       acronymList: json,
 77 |       popular: false,
 78 |       popularList: [
 79 |         {
 80 |           acronym: "AFK ",
 81 |           expanded_version: "Away From Keyboard",
 82 |         },
 83 |         {
 84 |           acronym: "BRB ",
 85 |           expanded_version: "Be Right Back",
 86 |         },
 87 |         {
 88 |           acronym: "PHAT ",
 89 |           expanded_version: "Pretty Hot And Tempting",
 90 |         },
 91 |         {
 92 |           acronym: "TTYL ",
 93 |           expanded_version: "Talk To You Later",
 94 |         },
 95 |         {
 96 |           acronym: "DIY ",
 97 |           expanded_version: "Do It Yourself",
 98 |         },
 99 |         {
100 |           acronym: "DND ",
101 |           expanded_version: "Do Not Disturb",
102 |         },
103 |         {
104 |           acronym: "WFH",
105 |           expanded_version: "Work From Home",
106 |         },
107 |         {
108 |           acronym: "YOLO",
109 |           expanded_version: "You Only Live Once",
110 |         },
111 |         {
112 |           acronym: "FOMO",
113 |           expanded_version: "Fear Of Missing Out",
114 |         },
115 |       ],
116 |     };
117 |   },
118 |   created() {
119 |     this.popularList = this.popularList.sort((a, b) =>
120 |       a.acronym > b.acronym ? 1 : -1
121 |     );
122 |   },
123 |   computed: {
124 |     filteredList() {
125 |       return this.acronymList
126 |         .filter((obj) => {
127 |           return obj.acronym.toLowerCase().includes(this.search.toLowerCase());
128 |         })
129 |         .sort((a, b) => (a.acronym > b.acronym ? 1 : -1));
130 |     },
131 |   },
132 |   methods: {
133 |     showPopular() {
134 |       this.popular = true;
135 |       return this.popularList.sort((a, b) => (a.acronym > b.acronym ? 1 : -1));
136 |     },
137 |     showAll() {
138 |       this.popular = false;
139 |     },
140 |   },
141 |   components: {
142 |     AppHeader,
143 |     AppFooter,
144 |   },
145 | };
146 | </script>
147 | 
148 | 
149 | <style scoped>
150 | .parent {
151 |   margin: 10px;
152 | }
153 | 
154 | .searchResult {
155 |   margin: 20px;
156 | }
157 | 
158 | .parent input {
159 |   height: 40px;
160 |   width: 400px;
161 |   padding-top: 5px;
162 |   padding-bottom: 5px;
163 |   padding-left: 10px;
164 |   border: 2px solid lightgray;
165 |   border-radius: 5px;
166 | }
167 | 
168 | @media all and (max-width: 768px) {
169 |   .parent input {
170 |     height: 40px;
171 |     width: 300px;
172 |     padding-top: 5px;
173 |     padding-bottom: 5px;
174 |     padding-left: 10px;
175 |     border: 2px solid lightgray;
176 |     border-radius: 5px;
177 |   }
178 | }
179 | 
180 | .parent input:focus-within {
181 |   outline: none !important;
182 |   border: 2px solid #666;
183 | }
184 | 
185 | .searchBox {
186 |   margin-bottom: 20px;
187 | }
188 | 
189 | .searchBox input {
190 |   padding-left: 10px;
191 |   padding-right: 10px;
192 | }
193 | 
194 | .grid {
195 |   display: flex;
196 |   width: 100%;
197 |   flex-direction: row;
198 |   flex-wrap: wrap;
199 |   justify-content: space-around;
200 |   padding-left: 10px;
201 | }
202 | 
203 | .left {
204 |   width: 30%;
205 |   padding: 10px;
206 |   border: 1px solid black;
207 |   font-weight: bold;
208 | }
209 | 
210 | .right {
211 |   width: 70%;
212 |   padding: 10px;
213 |   border: 1px solid black;
214 |   font-weight: 500;
215 | }
216 | 
217 | .grayHighlight {
218 |   background-color: rgb(240, 240, 240);
219 | }
220 | 
221 | .buttons {
222 |   display: flex;
223 |   flex-wrap: wrap;
224 |   justify-content: center;
225 | }
226 | 
227 | .buttonSelection {
228 |   margin-left: 10px;
229 |   margin-right: 10px;
230 |   margin-top: 5px;
231 |   margin-bottom: 5px;
232 |   font-weight: bold;
233 |   border: 2px solid #fcc047;
234 | }
235 | 
236 | .buttonSelection:hover {
237 |   background-color: #fcc047;
238 |   font-weight: bold;
239 |   color: black;
240 |   border: 2px solid black;
241 | }
242 | 
243 | .buttonSelection:focus {
244 |   box-shadow: none;
245 | }
246 | 
247 | .contribute {
248 |   font-size: 18px;
249 |   margin-top: 20px;
250 | }
251 | 
252 | .contribute a {
253 |   color: #000;
254 |   margin-top: 5px;
255 |   font-weight: bold;
256 | }
257 | 
258 | .product-hunt {
259 |   margin: 20px;
260 | }
261 | </style>


--------------------------------------------------------------------------------
/src/techronym_data.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "acronym": "ACC",
  4 |     "expanded_version": "Anyone can come"
  5 |   },
  6 |   {
  7 |     "acronym": "AFAIK ",
  8 |     "expanded_version": "As Far As I Know"
  9 |   },
 10 |   {
 11 |     "acronym": "AFK ",
 12 |     "expanded_version": "Away From Keyboard"
 13 |   },
 14 |   {
 15 |     "acronym": "AKA ",
 16 |     "expanded_version": "Also Known As"
 17 |   },
 18 |   {
 19 |     "acronym": "AMA",
 20 |     "expanded_version": "Ask Me Anything"
 21 |   },
 22 |   {
 23 |     "acronym": "ASAP ",
 24 |     "expanded_version": "As Soon As Possible"
 25 |   },
 26 |   {
 27 |     "acronym": "AWOL ",
 28 |     "expanded_version": "Absent Without Leave"
 29 |   },
 30 |   {
 31 |     "acronym": "BAE ",
 32 |     "expanded_version": "Before Anyone Else"
 33 |   },
 34 |   {
 35 |     "acronym": "BBIAB ",
 36 |     "expanded_version": "Be Back In A Bit"
 37 |   },
 38 |   {
 39 |     "acronym": "BBL ",
 40 |     "expanded_version": "Be Back Later"
 41 |   },
 42 |   {
 43 |     "acronym": "BBS ",
 44 |     "expanded_version": "Be Back Soon"
 45 |   },
 46 |   {
 47 |     "acronym": "BEG ",
 48 |     "expanded_version": "Big Evil Grin"
 49 |   },
 50 |   {
 51 |     "acronym": "BOL",
 52 |     "expanded_version": "Best Of Luck"
 53 |   },
 54 |   {
 55 |     "acronym": "BOT",
 56 |     "expanded_version": "Back on topic"
 57 |   },
 58 |   {
 59 |     "acronym": "BRB ",
 60 |     "expanded_version": "Be Right Back"
 61 |   },
 62 |   {
 63 |     "acronym": "BTW ",
 64 |     "expanded_version": "By The Way"
 65 |   },
 66 |   {
 67 |     "acronym": "BYOB",
 68 |     "expanded_version": "Bring Your Own Beer"
 69 |   },
 70 |   {
 71 |     "acronym": "BYOD",
 72 |     "expanded_version": "Bring Your Own Device"
 73 |   },
 74 |   {
 75 |     "acronym": "BYTM",
 76 |     "expanded_version": "Better You Than Me"
 77 |   },
 78 |   {
 79 |     "acronym": "CMIIW",
 80 |     "expanded_version": "Correct Me If I'm Wrong"
 81 |   },
 82 |   {
 83 |     "acronym": "CMV",
 84 |     "expanded_version": "Change My View"
 85 |   },
 86 |   {
 87 |     "acronym": "CTA",
 88 |     "expanded_version": "Call To Action"
 89 |   },
 90 |   {
 91 |     "acronym": "CYE",
 92 |     "expanded_version": "Check Your Email"
 93 |   },
 94 |   {
 95 |     "acronym": "CYL",
 96 |     "expanded_version": "Call You Later"
 97 |   },
 98 |   {
 99 |     "acronym": "DAE",
100 |     "expanded_version": "Does Anyone Else"
101 |   },
102 |   {
103 |     "acronym": "DBA ",
104 |     "expanded_version": "Doing Business As"
105 |   },
106 |   {
107 |     "acronym": "DIY ",
108 |     "expanded_version": "Do It Yourself"
109 |   },
110 |   {
111 |     "acronym": "DND ",
112 |     "expanded_version": "Do Not Disturb"
113 |   },
114 |   {
115 |     "acronym": "DOA ",
116 |     "expanded_version": "Dead On Arrival"
117 |   },
118 |   {
119 |     "acronym": "DOB ",
120 |     "expanded_version": "Date Of Birth"
121 |   },
122 |   {
123 |     "acronym": "DRY",
124 |     "expanded_version": "Don't Repeat Yourself"
125 |   },
126 |   {
127 |     "acronym" : "ELI5",
128 |     "expanded_version": "Explain Like I'm 5 (years old)"
129 |   },
130 |   {
131 |     "acronym": "EOD ",
132 |     "expanded_version": "End of Day"
133 |   },
134 |   {
135 |     "acronym": "EOM",
136 |     "expanded_version": "End Of Mail"
137 |   },
138 |   {
139 |     "acronym": "ETA ",
140 |     "expanded_version": "Estimated Time of Arrival"
141 |   },
142 |   {
143 |     "acronym": "FAQ ",
144 |     "expanded_version": "Frequently Asked Questions"
145 |   },
146 |   {
147 |     "acronym": "FISH ",
148 |     "expanded_version": "First In Still Here"
149 |   },
150 |   {
151 |     "acronym": "FML",
152 |     "expanded_version": "F*** My Life"
153 |   },
154 |   {
155 |     "acronym": "FOMO",
156 |     "expanded_version": "Fear Of Missing Out"
157 |   },
158 |   {
159 |     "acronym": "FTFY ",
160 |     "expanded_version": "Fixed That For You"
161 |   },
162 |   {
163 |     "acronym": "FTW",
164 |     "expanded_version": "For The Win"
165 |   },
166 |   {
167 |     "acronym": "FYI",
168 |     "expanded_version": "For Your Information"
169 |   },
170 |   {
171 |     "acronym": "GG",
172 |     "expanded_version": "Good Game"
173 |   },
174 |   {
175 |     "acronym": "GGWP",
176 |     "expanded_version": "Good Game Well Played"
177 |   },
178 |   {
179 |     "acronym": "IDK",
180 |     "expanded_version": "I Don't Know"
181 |   },
182 |   {
183 |     "acronym": "IIRC",
184 |     "expanded_version": "If I Remember Correctly"
185 |   },
186 |   {
187 |     "acronym": "IIUC",
188 |     "expanded_version": "If I Understand Correctly"
189 |   },
190 |   {
191 |     "acronym": "IMHO ",
192 |     "expanded_version": "in my Honest opinion"
193 |   },
194 |   {
195 |     "acronym": "IMO ",
196 |     "expanded_version": "In My Opinion"
197 |   },
198 |   {
199 |     "acronym": "IMS",
200 |     "expanded_version": "I Am Sorry"
201 |   },
202 |   {
203 |     "acronym": "IRL ",
204 |     "expanded_version": "In Real Life"
205 |   },
206 |   {
207 |     "acronym": "IYKWIM",
208 |     "expanded_version": "If You Know What I Mean"
209 |   },
210 |   {
211 |     "acronym": "KISS ",
212 |     "expanded_version": "Keep It Simple Stupid"
213 |   },
214 |   {
215 |     "acronym": "KPI",
216 |     "expanded_version": "Key Performance Indicator"
217 |   },
218 |   {
219 |     "acronym": "LGTM",
220 |     "expanded_version": "looks good to me"
221 |   },
222 |   {
223 |     "acronym": "LMAO",
224 |     "expanded_version": "Laughing My A** Off"
225 |   },
226 |   {
227 |     "acronym": "LMK",
228 |     "expanded_version": "Let me know"
229 |   },
230 |   {
231 |     "acronym": "LOL ",
232 |     "expanded_version": "Laughing Out Loud"
233 |   },
234 |   {
235 |     "acronym": "NGL",
236 |     "expanded_version": "Not Gonna Lie"
237 |   },
238 |   {
239 |     "acronym": "NP ",
240 |     "expanded_version": "No Problem"
241 |   },
242 |   {
243 |     "acronym": "NSFL",
244 |     "expanded_version": "Not Safe For Life"
245 |   },
246 |   {
247 |     "acronym": "NSFW",
248 |     "expanded_version": "Not Safe For Work"
249 |   },
250 |   {
251 |     "acronym": "NWR",
252 |     "expanded_version": "Not Work Related"
253 |   },
254 |   {
255 |     "acronym": "NYOB ",
256 |     "expanded_version": "None of Your Business"
257 |   },
258 |   {
259 |     "acronym": "OMG ",
260 |     "expanded_version": "Oh My God"
261 |   },
262 |   {
263 |     "acronym": "OMW ",
264 |     "expanded_version": "On My Way"
265 |   },
266 |   {
267 |     "acronym": "OOO",
268 |     "expanded_version": "Out Of Office"
269 |   },
270 |   {
271 |     "acronym": "OOT",
272 |     "expanded_version": "Out Of Topic"
273 |   },
274 |   {
275 |     "acronym": "OOTD",
276 |     "expanded_version": "Outfit Of The Day"
277 |   },
278 |   {
279 |     "acronym": "OT ",
280 |     "expanded_version": "Overtime"
281 |   },
282 |   {
283 |     "acronym": "OTW ",
284 |     "expanded_version": "On The Way"
285 |   },
286 |   {
287 |     "acronym": "PANS ",
288 |     "expanded_version": "Pretty Awesome New Stuff"
289 |   },
290 |   {
291 |     "acronym": "PCM",
292 |     "expanded_version": "Plese Call Me"
293 |   },
294 |   {
295 |     "acronym": "PHAT ",
296 |     "expanded_version": "Pretty Hot And Tempting"
297 |   },
298 |   {
299 |     "acronym": "POC ",
300 |     "expanded_version": "Point Of Contact"
301 |   },
302 |   {
303 |     "acronym": "POS ",
304 |     "expanded_version": "Point Of Service"
305 |   },
306 |   {
307 |     "acronym": "RFC ",
308 |     "expanded_version": "Request for Comments"
309 |   },
310 |   {
311 |     "acronym": "RN",
312 |     "expanded_version": "Right now"
313 |   },
314 |   {
315 |     "acronym": "ROFL ",
316 |     "expanded_version": "Roll On the Floor Laughing"
317 |   },
318 |   {
319 |     "acronym": "SMART ",
320 |     "expanded_version": "Specific Measurable Attainable Realistic Time"
321 |   },
322 |   {
323 |     "acronym": "SOT",
324 |     "expanded_version": "Short Of time"
325 |   },
326 |   {
327 |     "acronym": "STFW",
328 |     "expanded_version": "search the f***ing web"
329 |   },
330 |   {
331 |     "acronym": "SWOT ",
332 |     "expanded_version": "Strengths Weaknesses Opportunities Threats"
333 |   },
334 |   {
335 |     "acronym": "TBH ",
336 |     "expanded_version": "To Be Honest"
337 |   },
338 |   {
339 |     "acronym": "TED",
340 |     "expanded_version": "Tell me Explain to me Describe to me (Talk)"
341 |   },
342 |   {
343 |     "acronym": "TFW",
344 |     "expanded_version": "That Feeling When"
345 |   },
346 |   {
347 |     "acronym": "TGFY",
348 |     "expanded_version": "Too Good For You"
349 |   },
350 |   {
351 |     "acronym": "TGIF",
352 |     "expanded_version": "Thank God It's Friday"
353 |   },
354 |   {
355 |     "acronym": "TIL",
356 |     "expanded_version": "Today I Learned"
357 |   },
358 |   {
359 |     "acronym": "TLDR",
360 |     "expanded_version": "Too Long, Didn't Read"
361 |   },
362 |   {
363 |     "acronym": "TLTR",
364 |     "expanded_version": "Too long to read"
365 |   },
366 |   {
367 |     "acronym": "TOS",
368 |     "expanded_version": "Terms of service"
369 |   },
370 |   {
371 |     "acronym": "TOU",
372 |     "expanded_version": "Thinking Of You"
373 |   },
374 |   {
375 |     "acronym": "TTYL ",
376 |     "expanded_version": "Talk To You Later"
377 |   },
378 |   {
379 |     "acronym": "TYSM",
380 |     "expanded_version": "Thank You So Much"
381 |   },
382 |   {
383 |     "acronym": "TYT",
384 |     "expanded_version": "Take your time"
385 |   },
386 |   {
387 |     "acronym": "WBS",
388 |     "expanded_version": "Write Back Soon"
389 |   },
390 |   {
391 |     "acronym": "WFH",
392 |     "expanded_version": "Work From Home"
393 |   },
394 |   {
395 |     "acronym": "WFM ",
396 |     "expanded_version": "Works for me"
397 |   },
398 |   {
399 |     "acronym": "WIP ",
400 |     "expanded_version": " Work in progress"
401 |   },
402 |   {
403 |     "acronym": "WP",
404 |     "expanded_version": "Well Played"
405 |   },
406 |   {
407 |     "acronym": "WTH",
408 |     "expanded_version": "What The Hell"
409 |   },
410 |   {
411 |     "acronym": "WYSIWYG",
412 |     "expanded_version": "What You See Is What You Get"
413 |   },
414 |   {
415 |     "acronym": "YAGNI",
416 |     "expanded_version": "You Aren't Gonna Need It "
417 |   },
418 |   {
419 |     "acronym": "YMMV",
420 |     "expanded_version": "Your Mileage May Vary"
421 |   },
422 |   {
423 |     "acronym": "YOLO",
424 |     "expanded_version": "You Only Live Once"
425 |   },
426 |   {
427 |     "acronym": "YSK",
428 |     "expanded_version": "You Should Know"
429 |   }
430 | ]
431 | 


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