[
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
  },
  {
    "path": ".gitignore",
    "content": ".DS_Store\n.thumbs.db\nnode_modules\n\n# Quasar core related directories\n.quasar\n/dist\n\n# Cordova related directories and files\n/src-cordova/node_modules\n/src-cordova/platforms\n/src-cordova/plugins\n/src-cordova/www\n\n# Capacitor related directories and files\n/src-capacitor/www\n/src-capacitor/node_modules\n\n# BEX related directories and files\n/src-bex/www\n/src-bex/js/core\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n"
  },
  {
    "path": ".postcssrc.js",
    "content": "// https://github.com/michael-ciniawsky/postcss-load-config\n\nmodule.exports = {\n  plugins: [\n    // to edit target browsers: use \"browserslist\" field in package.json\n    require('autoprefixer')\n  ]\n}\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 Danny Connell\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Qwitter (qwitter)\n\nA Cross-Platrom Twitter Clone created with Quasar Framework, VueJS & Firebase\n\n## Setup Firebase\n- Create a new Firebase project named Qwitter\n- Create a Web App named Qwitter\n- Copy the config from the code sample that appears and add it to src/boot/firebase.js\n- Create a Cloud Firestore database - make sure you choose \"Start in test mode\"\n\n## Install the dependencies\n```bash\nnpm install\n```\n\n## Web Version\n\n### Start  in development mode\n```bash\nquasar dev\n```\n\n### Build for production\n```bash\nquasar build\n```\n\n## Desktop Version (Electron)\n\n### Start  in development mode\n```bash\nquasar dev -m electron\n```\n\n### Build for production\nTo build for different platforms, change the `electron > packager > platform` setting in `quasar.conf.js` to `win32`, `darwin`, `mas` or `linux` \n```bash\nquasar build -m electron\n```\n\n## iOS Version (Cordova)\n\n### Install Cordova globally\n```bash\nnpm install -g cordova\n```\nor\n```bash\nsudo npm install -g cordova\n```\n\n### Install Xcode\n\n[Install Xcode](https://developer.apple.com/download/more/)\n\n### Start  in development mode\n```bash\nquasar dev -m cordova -T ios\n```\n\n### Start on other Simulator Devices\n```bash\ncd src-cordova\ncordova run ios --list\ncd ..\nquasar dev -m cordova -T ios -e \"iPhone-12, 14.3\"\n```\n\n### Build for production\n```bash\nquasar build -m cordova -T ios\n```\n\n## Android Version (Cordova)\n\n### Install Cordova globally\n```bash\nnpm install -g cordova\n```\nor\n```bash\nsudo npm install -g cordova\n```\n\n### Follow all steps on Quasar site\n\n[Follow all steps on Quasar site](https://quasar.dev/quasar-cli/developing-cordova-apps/preparation#Android-setup)\n\n### Launch Android Virtual Device\nAndroid Studio > Configure > AVD Manager > Launch an AVD\n\n### Start  in development mode\n```bash\nquasar dev -m cordova -T android\n```\n\n### Build for production\n```bash\nquasar build -m cordova -T android\n```"
  },
  {
    "path": "babel.config.js",
    "content": "\nmodule.exports = {\n  presets: [\n    '@quasar/babel-preset-app'\n  ]\n}\n"
  },
  {
    "path": "jsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"src/*\": [\n        \"src/*\"\n      ],\n      \"app/*\": [\n        \"*\"\n      ],\n      \"components/*\": [\n        \"src/components/*\"\n      ],\n      \"layouts/*\": [\n        \"src/layouts/*\"\n      ],\n      \"pages/*\": [\n        \"src/pages/*\"\n      ],\n      \"assets/*\": [\n        \"src/assets/*\"\n      ],\n      \"boot/*\": [\n        \"src/boot/*\"\n      ],\n      \"vue$\": [\n        \"node_modules/vue/dist/vue.esm.js\"\n      ]\n    }\n  },\n  \"exclude\": [\n    \"dist\",\n    \".quasar\",\n    \"node_modules\"\n  ]\n}"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"qwitter\",\n  \"version\": \"0.0.1\",\n  \"description\": \"A Quasar Framework app\",\n  \"productName\": \"Qwitter\",\n  \"author\": \"Danny Connell\",\n  \"private\": true,\n  \"scripts\": {\n    \"test\": \"echo \\\"No test specified\\\" && exit 0\"\n  },\n  \"dependencies\": {\n    \"@quasar/extras\": \"^1.0.0\",\n    \"core-js\": \"^3.6.5\",\n    \"date-fns\": \"^2.16.1\",\n    \"firebase\": \"^8.2.4\",\n    \"quasar\": \"^1.0.0\"\n  },\n  \"devDependencies\": {\n    \"@quasar/app\": \"^2.0.0\",\n    \"devtron\": \"^1.4.0\",\n    \"electron\": \"^9.4.1\",\n    \"electron-debug\": \"^3.2.0\",\n    \"electron-devtools-installer\": \"^3.1.1\",\n    \"electron-packager\": \"^14.2.1\"\n  },\n  \"browserslist\": [\n    \"last 10 Chrome versions\",\n    \"last 10 Firefox versions\",\n    \"last 4 Edge versions\",\n    \"last 7 Safari versions\",\n    \"last 8 Android versions\",\n    \"last 8 ChromeAndroid versions\",\n    \"last 8 FirefoxAndroid versions\",\n    \"last 10 iOS versions\",\n    \"last 5 Opera versions\"\n  ],\n  \"engines\": {\n    \"node\": \">= 10.18.1\",\n    \"npm\": \">= 6.13.4\",\n    \"yarn\": \">= 1.21.1\"\n  }\n}\n"
  },
  {
    "path": "quasar.conf.js",
    "content": "/*\n * This file runs in a Node context (it's NOT transpiled by Babel), so use only\n * the ES6 features that are supported by your Node version. https://node.green/\n */\n\n// Configuration for your app\n// https://quasar.dev/quasar-cli/quasar-conf-js\n\nmodule.exports = function (/* ctx */) {\n  return {\n    // https://quasar.dev/quasar-cli/supporting-ts\n    supportTS: false,\n\n    // https://quasar.dev/quasar-cli/prefetch-feature\n    // preFetch: true,\n\n    // app boot file (/src/boot)\n    // --> boot files are part of \"main.js\"\n    // https://quasar.dev/quasar-cli/boot-files\n    boot: [\n      'firebase'\n    ],\n\n    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css\n    css: [\n      'app.sass'\n    ],\n\n    // https://github.com/quasarframework/quasar/tree/dev/extras\n    extras: [\n      // 'ionicons-v4',\n      // 'mdi-v5',\n      'fontawesome-v5',\n      // 'eva-icons',\n      // 'themify',\n      // 'line-awesome',\n      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!\n\n      'roboto-font', // optional, you are not bound to it\n      'material-icons', // optional, you are not bound to it\n    ],\n\n    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build\n    build: {\n      vueRouterMode: 'hash', // available values: 'hash', 'history'\n\n      // transpile: false,\n\n      // Add dependencies for transpiling with Babel (Array of string/regex)\n      // (from node_modules, which are by default not transpiled).\n      // Applies only if \"transpile\" is set to true.\n      // transpileDependencies: [],\n\n      // rtl: false, // https://quasar.dev/options/rtl-support\n      // preloadChunks: true,\n      // showProgress: false,\n      // gzip: true,\n      // analyze: true,\n\n      // Options below are automatically set depending on the env, set them if you want to override\n      // extractCSS: false,\n\n      // https://quasar.dev/quasar-cli/handling-webpack\n      extendWebpack (cfg) {\n      },\n    },\n\n    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer\n    devServer: {\n      https: false,\n      port: 8080,\n      open: true // opens browser window automatically\n    },\n\n    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework\n    framework: {\n      iconSet: 'material-icons', // Quasar icon set\n      lang: 'en-us', // Quasar language pack\n      config: {},\n\n      // Possible values for \"importStrategy\":\n      // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives\n      // * 'all'  - Manually specify what to import\n      importStrategy: 'auto',\n\n      // For special cases outside of where \"auto\" importStrategy can have an impact\n      // (like functional components as one of the examples),\n      // you can manually specify Quasar components/directives to be available everywhere:\n      //\n      // components: [],\n      // directives: [],\n\n      // Quasar plugins\n      plugins: []\n    },\n\n    // animations: 'all', // --- includes all animations\n    // https://quasar.dev/options/animations\n    animations: ['fadeIn', 'fadeOut'],\n\n    // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr\n    ssr: {\n      pwa: false\n    },\n\n    // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa\n    pwa: {\n      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'\n      workboxOptions: {}, // only for GenerateSW\n      manifest: {\n        name: `Qwitter`,\n        short_name: `Qwitter`,\n        description: `A Quasar Framework app`,\n        display: 'standalone',\n        orientation: 'portrait',\n        background_color: '#ffffff',\n        theme_color: '#027be3',\n        icons: [\n          {\n            src: 'icons/icon-128x128.png',\n            sizes: '128x128',\n            type: 'image/png'\n          },\n          {\n            src: 'icons/icon-192x192.png',\n            sizes: '192x192',\n            type: 'image/png'\n          },\n          {\n            src: 'icons/icon-256x256.png',\n            sizes: '256x256',\n            type: 'image/png'\n          },\n          {\n            src: 'icons/icon-384x384.png',\n            sizes: '384x384',\n            type: 'image/png'\n          },\n          {\n            src: 'icons/icon-512x512.png',\n            sizes: '512x512',\n            type: 'image/png'\n          }\n        ]\n      }\n    },\n\n    // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova\n    cordova: {\n      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing\n    },\n\n    // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor\n    capacitor: {\n      hideSplashscreen: true\n    },\n\n    // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron\n    electron: {\n      bundler: 'packager', // 'packager' or 'builder'\n\n      packager: {\n\n        // platform: 'win32'\n\n        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options\n\n        // OS X / Mac App Store\n        // appBundleId: '',\n        // appCategoryType: '',\n        // osxSign: '',\n        // protocol: 'myapp://path',\n\n        // Windows only\n        // win32metadata: { ... }\n      },\n\n      builder: {\n        // https://www.electron.build/configuration/configuration\n\n        appId: 'qwitter'\n      },\n\n      // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration\n      nodeIntegration: true,\n\n      extendWebpack (/* cfg */) {\n        // do something with Electron main process Webpack cfg\n        // chainWebpack also available besides this extendWebpack\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/App.vue",
    "content": "<template>\n  <div id=\"q-app\">\n    <router-view />\n  </div>\n</template>\n<script>\nexport default {\n  name: 'App'\n}\n</script>\n"
  },
  {
    "path": "src/boot/.gitkeep",
    "content": ""
  },
  {
    "path": "src/boot/firebase.js",
    "content": "import firebase from \"firebase/app\"\nimport \"firebase/firestore\"\n\nconst firebaseConfig = {\n  // YOUR CONFIG HERE\n}\n\nfirebase.initializeApp(firebaseConfig)\n\nlet db = firebase.firestore()\n\nexport default db"
  },
  {
    "path": "src/css/app.sass",
    "content": "// app global css in Sass form\n"
  },
  {
    "path": "src/css/quasar.variables.sass",
    "content": "// Quasar Sass (& SCSS) Variables\n// --------------------------------------------------\n// To customize the look and feel of this app, you can override\n// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.\n\n// Check documentation for full list of Quasar variables\n\n// Your own variables (that are declared here) and Quasar's own\n// ones will be available out of the box in your .vue/.scss/.sass files\n\n// It's highly recommended to change the default colors\n// to match your app's branding.\n// Tip: Use the \"Theme Builder\" on Quasar's documentation website.\n\n$primary   : #1da1f2\n$secondary : #26A69A\n$accent    : #9C27B0\n\n$dark      : #1D1D1D\n\n$positive  : #21BA45\n$negative  : #C10015\n$info      : #31CCEC\n$warning   : #F2C037\n"
  },
  {
    "path": "src/index.template.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title><%= productName %></title>\n\n    <meta charset=\"utf-8\">\n    <meta name=\"description\" content=\"<%= productDescription %>\">\n    <meta name=\"format-detection\" content=\"telephone=no\">\n    <meta name=\"msapplication-tap-highlight\" content=\"no\">\n    <meta name=\"viewport\" content=\"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>\">\n\n    <link rel=\"icon\" type=\"image/png\" sizes=\"128x128\" href=\"icons/favicon-128x128.png\">\n    <link rel=\"icon\" type=\"image/png\" sizes=\"96x96\" href=\"icons/favicon-96x96.png\">\n    <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"icons/favicon-32x32.png\">\n    <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"icons/favicon-16x16.png\">\n    <link rel=\"icon\" type=\"image/ico\" href=\"favicon.ico\">\n  </head>\n  <body>\n    <!-- DO NOT touch the following DIV -->\n    <div id=\"q-app\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/layouts/MainLayout.vue",
    "content": "<template>\n  <q-layout view=\"lHr lpR fFf\">\n\n    <q-header bordered class=\"bg-white text-black\">\n      <q-toolbar>\n        <q-btn dense flat round icon=\"menu\" @click=\"left = !left\" />\n\n        <q-toolbar-title class=\"text-weight-bold\">\n          <span class=\"gt-sm\">{{ $route.name }}</span>\n          <q-icon\n            class=\"header-icon q-pa-md lt-md\"\n            name=\"fas fa-dove\"\n            size=\"sm\"\n            color=\"primary\"\n          />\n        </q-toolbar-title>\n\n      </q-toolbar>\n    </q-header>\n\n    <q-drawer\n      v-model=\"left\"\n      side=\"left\"\n      :width=\"283\"\n      bordered\n      show-if-above\n    >\n      <q-icon\n        class=\"q-pa-md\"\n        name=\"fas fa-dove\"\n        size=\"lg\"\n        color=\"primary\"\n      />\n\n      <q-list>\n        <q-item\n          to=\"/\"\n          v-ripple\n          clickable\n          exact\n        >\n          <q-item-section avatar>\n            <q-icon name=\"home\" size=\"md\" />\n          </q-item-section>\n\n          <q-item-section class=\"text-h6 text-weight-bold\">Home</q-item-section>\n        </q-item>\n        <q-item\n          to=\"/about\"\n          v-ripple\n          clickable\n          exact\n        >\n          <q-item-section avatar>\n            <q-icon name=\"help\" size=\"md\" />\n          </q-item-section>\n\n          <q-item-section class=\"text-h6 text-weight-bold\">About</q-item-section>\n        </q-item>\n      </q-list>\n\n    </q-drawer>\n\n    <q-drawer show-if-above v-model=\"right\" side=\"right\" bordered>\n      <q-input\n        placeholder=\"Search Qwitter\"\n        class=\"q-ma-md\"\n        outlined\n        rounded\n        dense\n      >\n        <template v-slot:prepend>\n          <q-icon name=\"search\" />\n        </template>\n      </q-input>\n\n      <q-list\n        separator\n        padding\n      >\n        <q-item class=\"q-pa-md\">\n          <q-item-section>\n            <q-item-label overline class=\"text-grey\">Education</q-item-label>\n            <q-item-label class=\"text-weight-bold\">Something amazing happened!</q-item-label>\n            <q-item-label caption>Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.</q-item-label>\n          </q-item-section>\n\n          <q-item-section side top>\n            <q-item-label caption>5 min ago</q-item-label>\n          </q-item-section>\n        </q-item>\n        <q-item class=\"q-pa-md\">\n          <q-item-section>\n            <q-item-label overline class=\"text-grey\">Education</q-item-label>\n            <q-item-label class=\"text-weight-bold\">Something amazing happened!</q-item-label>\n            <q-item-label caption>Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.</q-item-label>\n          </q-item-section>\n\n          <q-item-section side top>\n            <q-item-label caption>5 min ago</q-item-label>\n          </q-item-section>\n        </q-item>\n        <q-item class=\"q-pa-md\">\n          <q-item-section>\n            <q-item-label overline class=\"text-grey\">Education</q-item-label>\n            <q-item-label class=\"text-weight-bold\">Something amazing happened!</q-item-label>\n            <q-item-label caption>Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.</q-item-label>\n          </q-item-section>\n\n          <q-item-section side top>\n            <q-item-label caption>5 min ago</q-item-label>\n          </q-item-section>\n        </q-item>\n      </q-list>\n    </q-drawer>\n\n    <q-page-container>\n      <keep-alive>\n        <router-view />\n      </keep-alive>\n    </q-page-container>\n\n  </q-layout>\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      left: false,\n      right: false\n    }\n  }\n}\n</script>\n\n<style lang=\"sass\">\n.header-icon\n  position: absolute\n  bottom: 0\n  left: 50%\n  transform: translateX(-50%)\n</style>"
  },
  {
    "path": "src/pages/Error404.vue",
    "content": "<template>\n  <div class=\"fullscreen bg-blue text-white text-center q-pa-md flex flex-center\">\n    <div>\n      <div style=\"font-size: 30vh\">\n        404\n      </div>\n\n      <div class=\"text-h2\" style=\"opacity:.4\">\n        Oops. Nothing here...\n      </div>\n\n      <q-btn\n        class=\"q-mt-xl\"\n        color=\"white\"\n        text-color=\"blue\"\n        unelevated\n        to=\"/\"\n        label=\"Go Home\"\n        no-caps\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'Error404'\n}\n</script>\n"
  },
  {
    "path": "src/pages/PageAbout.vue",
    "content": "<template>\n  <q-page class=\"q-pa-lg\">\n    <h4 class=\"q-mt-none q-mb-md text-weight-bold\">About Qwitter</h4>\n    <div class=\"text-body1\">\n      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt similique molestias dolore, ab libero eius? Voluptatum quaerat architecto ex blanditiis, perspiciatis dolor quisquam labore fuga repellendus minima! Maxime, provident est.</p>\n      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt similique molestias dolore, ab libero eius? Voluptatum quaerat architecto ex blanditiis, perspiciatis dolor quisquam labore fuga repellendus minima! Maxime, provident est.</p>\n    </div>\n  </q-page>\n</template>\n\n<script>\nexport default {\n  name: 'PageAbout'\n}\n</script>\n"
  },
  {
    "path": "src/pages/PageHome.vue",
    "content": "<template>\n  <q-page class=\"relative-position\">\n    <q-scroll-area class=\"absolute full-width full-height\">\n      <div class=\"q-py-lg q-px-md row items-end q-col-gutter-md\">\n        <div class=\"col\">\n          <q-input\n            v-model=\"newQweetContent\"\n            class=\"new-qweet\"\n            placeholder=\"What's happening?\"\n            maxlength=\"280\"\n            bottom-slots\n            counter\n            autogrow\n          >\n            <template v-slot:before>\n              <q-avatar size=\"xl\">\n                <img src=\"https://s.gravatar.com/avatar/ce7f3697e231df38b3ca6065848520da?s=80\">\n              </q-avatar>\n            </template>\n          </q-input>\n        </div>\n        <div class=\"col col-shrink\">\n          <q-btn\n            @click=\"addNewQweet\"\n            :disable=\"!newQweetContent\"\n            class=\"q-mb-lg\"\n            color=\"primary\"\n            label=\"Qweet\"\n            rounded\n            unelevated\n            no-caps\n          />\n        </div>\n      </div>\n\n      <q-separator\n        class=\"divider\"\n        color=\"grey-2\"\n        size=\"10px\"\n      />\n\n      <q-list separator>\n        <transition-group\n          appear\n          enter-active-class=\"animated fadeIn slow\"\n          leave-active-class=\"animated fadeOut slow\"\n        >\n          <q-item\n            v-for=\"qweet in qweets\"\n            :key=\"qweet.id\"\n            class=\"qweet q-py-md\"\n          >\n            <q-item-section avatar top>\n              <q-avatar size=\"xl\">\n                <img src=\"https://s.gravatar.com/avatar/ce7f3697e231df38b3ca6065848520da?s=80\">\n              </q-avatar>\n            </q-item-section>\n\n            <q-item-section>\n              <q-item-label class=\"text-subtitle1\">\n                <strong>Danny Connell</strong>\n                <span class=\"text-grey-7\">\n                  @danny__connell \n                  <br class=\"lt-md\">&bull; {{ qweet.date | relativeDate }}\n                </span>\n              </q-item-label>\n              <q-item-label class=\"qweet-content text-body1\">{{ qweet.content }}</q-item-label>\n              <div class=\"qweet-icons row justify-between q-mt-sm\">\n                <q-btn\n                  color=\"grey\"\n                  icon=\"far fa-comment\"\n                  size=\"sm\"\n                  flat\n                  round\n                />\n                <q-btn\n                  color=\"grey\"\n                  icon=\"fas fa-retweet\"\n                  size=\"sm\"\n                  flat\n                  round\n                />\n                <q-btn\n                  @click=\"toggleLiked(qweet)\"\n                  :color=\"qweet.liked ? 'pink' : 'grey'\"\n                  :icon=\"qweet.liked ? 'fas fa-heart' : 'far fa-heart'\"\n                  size=\"sm\"\n                  flat\n                  round\n                />\n                <q-btn\n                  @click=\"deleteQweet(qweet)\"\n                  color=\"grey\"\n                  icon=\"fas fa-trash\"\n                  size=\"sm\"\n                  flat\n                  round\n                />\n              </div>\n            </q-item-section>\n          </q-item>\n        </transition-group>\n      </q-list>\n    </q-scroll-area>\n  </q-page>\n</template>\n\n<script>\nimport db from 'src/boot/firebase'\nimport { formatDistance } from 'date-fns'\n\nexport default {\n  name: 'PageHome',\n  data() {\n    return {\n      newQweetContent: '',\n      qweets: [\n        // {\n        //   id: 'ID1',\n        //   content: 'Be your own hero, its cheaper than a movie ticket.',\n        //   date: 1611653238221,\n        //   liked: false\n        // },\n        // {\n        //   id: 'ID2',\n        //   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat justo id viverra consequat. Integer feugiat lorem faucibus est ornare scelerisque. Donec tempus, nunc vitae semper sagittis, odio magna semper ipsum, et laoreet sapien mauris vitae arcu.',\n        //   date: 1611653252444,\n        //   liked: true\n        // },\n      ]\n    }\n  },\n  methods: {\n    addNewQweet() {\n      let newQweet = {\n        content: this.newQweetContent,\n        date: Date.now(),\n        liked: false\n      }\n      // this.qweets.unshift(newQweet)\n      db.collection('qweets').add(newQweet).then(function(docRef) {\n        console.log('Document written with ID: ', docRef.id)\n      }).catch(function(error) {\n        console.error('Error adding document: ', error)\n      })\n      this.newQweetContent = ''\n    },\n    deleteQweet(qweet) {\n      db.collection('qweets').doc(qweet.id).delete().then(function() {\n        console.log('Document successfully deleted!');\n      }).catch(function(error) {\n        console.error('Error removing document: ', error);\n      })\n    },\n    toggleLiked(qweet) {\n      db.collection('qweets').doc(qweet.id).update({\n        liked: !qweet.liked\n      })\n      .then(function() {\n        console.log('Document successfully updated!')\n      })\n      .catch(function(error) {\n        // The document probably doesn't exist.\n        console.error('Error updating document: ', error)\n      })\n    }\n  },\n  filters: {\n    relativeDate(value) {\n      return formatDistance(value, new Date())\n    }\n  },\n  mounted() {\n    db.collection('qweets').orderBy('date').onSnapshot(snapshot => {\n      snapshot.docChanges().forEach(change => {\n        let qweetChange = change.doc.data()\n        qweetChange.id = change.doc.id\n        if (change.type === 'added') {\n          console.log('New qweet: ', qweetChange)\n          this.qweets.unshift(qweetChange)\n        }\n        if (change.type === 'modified') {\n          console.log('Modified qweet: ', qweetChange)\n          let index = this.qweets.findIndex(qweet => qweet.id === qweetChange.id)\n          Object.assign(this.qweets[index], qweetChange)\n        }\n        if (change.type === 'removed') {\n          console.log('Removed qweet: ', qweetChange)\n          let index = this.qweets.findIndex(qweet => qweet.id === qweetChange.id)\n          this.qweets.splice(index, 1)\n        }\n      })\n    })\n  }\n}\n</script>\n\n<style lang=\"sass\">\n.new-qweet\n  textarea\n    font-size: 19px\n    line-height: 1.4 !important\n.divider\n  border-top: 1px solid\n  border-bottom: 1px solid\n  border-color: $grey-4\n.qweet:not(:first-child)\n  border-top: 1px solid rgba(0, 0, 0, 0.12)\n.qweet-content\n  white-space: pre-line\n.qweet-icons\n  margin-left: -5px\n</style>\n"
  },
  {
    "path": "src/router/index.js",
    "content": "import Vue from 'vue'\nimport VueRouter from 'vue-router'\n\nimport routes from './routes'\n\nVue.use(VueRouter)\n\n/*\n * If not building with SSR mode, you can\n * directly export the Router instantiation;\n *\n * The function below can be async too; either use\n * async/await or return a Promise which resolves\n * with the Router instance.\n */\n\nexport default function (/* { store, ssrContext } */) {\n  const Router = new VueRouter({\n    scrollBehavior: () => ({ x: 0, y: 0 }),\n    routes,\n\n    // Leave these as they are and change in quasar.conf.js instead!\n    // quasar.conf.js -> build -> vueRouterMode\n    // quasar.conf.js -> build -> publicPath\n    mode: process.env.VUE_ROUTER_MODE,\n    base: process.env.VUE_ROUTER_BASE\n  })\n\n  return Router\n}\n"
  },
  {
    "path": "src/router/routes.js",
    "content": "\nconst routes = [\n  {\n    path: '/',\n    component: () => import('layouts/MainLayout.vue'),\n    children: [\n      {\n        path: '',\n        component: () => import('pages/PageHome.vue'),\n        name: 'Home'\n      },\n      { \n        path: '/about',\n        component: () => import('pages/PageAbout.vue'),\n        name: 'About'\n      }\n    ]\n  },\n\n  // Always leave this as last one,\n  // but you can also remove it\n  {\n    path: '*',\n    component: () => import('pages/Error404.vue')\n  }\n]\n\nexport default routes\n"
  },
  {
    "path": "src-cordova/.gitignore",
    "content": ".DS_Store\n\n# Generated by package manager\nnode_modules/\n\n# Generated by Cordova\n/plugins/\n/platforms/\n"
  },
  {
    "path": "src-cordova/config.xml",
    "content": "<?xml version='1.0' encoding='utf-8'?>\n<widget id=\"com.dannyconnell.qwitter\" version=\"0.0.1\" xmlns=\"http://www.w3.org/ns/widgets\" xmlns:cdv=\"http://cordova.apache.org/ns/1.0\">\n    <name>Qwitter</name>\n    <description>A Quasar Framework app</description>\n    <author email=\"dev@cordova.apache.org\" href=\"http://cordova.io\">\n        Apache Cordova Team\n    </author>\n    <content src=\"index.html\" />\n    <access origin=\"*\" />\n    <allow-intent href=\"http://*/*\" />\n    <allow-intent href=\"https://*/*\" />\n    <allow-intent href=\"tel:*\" />\n    <allow-intent href=\"sms:*\" />\n    <allow-intent href=\"mailto:*\" />\n    <allow-intent href=\"geo:*\" />\n    <platform name=\"android\">\n        <allow-intent href=\"market:*\" />\n    </platform>\n    <platform name=\"ios\">\n        <allow-intent href=\"itms:*\" />\n        <allow-intent href=\"itms-apps:*\" />\n        <preference name=\"ScrollEnabled\" value=\"true\" />\n    </platform>\n    <allow-navigation href=\"about:*\" />\n</widget>\n"
  },
  {
    "path": "src-cordova/cordova-flag.d.ts",
    "content": "// THIS FEATURE-FLAG FILE IS AUTOGENERATED,\n//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING\nimport \"quasar/dist/types/feature-flag\";\n\ndeclare module \"quasar/dist/types/feature-flag\" {\n  interface QuasarFeatureFlags {\n    cordova: true;\n  }\n}\n"
  },
  {
    "path": "src-cordova/package.json",
    "content": "{\n  \"name\": \"com.dannyconnell.qwitter\",\n  \"displayName\": \"Qwitter\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A sample Apache Cordova application that responds to the deviceready event.\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"keywords\": [\n    \"ecosystem:cordova\"\n  ],\n  \"author\": \"Apache Cordova Team\",\n  \"license\": \"Apache-2.0\",\n  \"devDependencies\": {\n    \"cordova-android\": \"^9.0.0\",\n    \"cordova-ios\": \"^6.1.1\",\n    \"cordova-plugin-ionic-webview\": \"^5.0.0\",\n    \"cordova-plugin-whitelist\": \"^1.3.4\"\n  },\n  \"cordova\": {\n    \"plugins\": {\n      \"cordova-plugin-whitelist\": {},\n      \"cordova-plugin-ionic-webview\": {}\n    },\n    \"platforms\": [\n      \"ios\",\n      \"android\"\n    ]\n  }\n}"
  },
  {
    "path": "src-electron/electron-flag.d.ts",
    "content": "// THIS FEATURE-FLAG FILE IS AUTOGENERATED,\n//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING\nimport \"quasar/dist/types/feature-flag\";\n\ndeclare module \"quasar/dist/types/feature-flag\" {\n  interface QuasarFeatureFlags {\n    electron: true;\n  }\n}\n"
  },
  {
    "path": "src-electron/main-process/electron-main.dev.js",
    "content": "/**\n * This file is used specifically and only for development. It installs\n * `electron-debug` & `vue-devtools`. There shouldn't be any need to\n *  modify this file, but it can be used to extend your development\n *  environment.\n */\n\nimport electronDebug from 'electron-debug'\nimport installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'\nimport { app, BrowserWindow } from 'electron'\n\napp.whenReady().then(() => {\n  // allow for a small delay for mainWindow to be created\n  setTimeout(() => {\n    // Install `electron-debug` with `devtron`\n    electronDebug({ showDevTools: false })\n\n    // Install vuejs devtools\n    installExtension(VUEJS_DEVTOOLS)\n      .then(name => {\n        console.log(`Added Extension: ${name}`)\n        // get main window\n        const win = BrowserWindow.getFocusedWindow()\n        if (win) {\n          win.webContents.on('did-frame-finish-load', () => {\n            win.webContents.once('devtools-opened', () => {\n              win.webContents.focus()\n            })\n            // open electron debug\n            console.log('Opening dev tools')\n            win.webContents.openDevTools()\n          })\n        }\n      })\n      .catch(err => {\n        console.log('An error occurred: ', err)\n      })\n  }, 250)\n})\n\nimport './electron-main'\n"
  },
  {
    "path": "src-electron/main-process/electron-main.js",
    "content": "import { app, BrowserWindow, nativeTheme } from 'electron'\n\ntry {\n  if (process.platform === 'win32' && nativeTheme.shouldUseDarkColors === true) {\n    require('fs').unlinkSync(require('path').join(app.getPath('userData'), 'DevTools Extensions'))\n  }\n} catch (_) { }\n\n/**\n * Set `__statics` path to static files in production;\n * The reason we are setting it here is that the path needs to be evaluated at runtime\n */\nif (process.env.PROD) {\n  global.__statics = __dirname\n}\n\nlet mainWindow\n\nfunction createWindow () {\n  /**\n   * Initial window options\n   */\n  mainWindow = new BrowserWindow({\n    width: 1024,\n    minWidth: 1024,\n    height: 600,\n    useContentSize: true,\n    webPreferences: {\n      // Change from /quasar.conf.js > electron > nodeIntegration;\n      // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration\n      nodeIntegration: process.env.QUASAR_NODE_INTEGRATION,\n      nodeIntegrationInWorker: process.env.QUASAR_NODE_INTEGRATION,\n\n      // More info: /quasar-cli/developing-electron-apps/electron-preload-script\n      // preload: path.resolve(__dirname, 'electron-preload.js')\n    }\n  })\n\n  mainWindow.loadURL(process.env.APP_URL)\n\n  mainWindow.on('closed', () => {\n    mainWindow = null\n  })\n}\n\napp.on('ready', createWindow)\n\napp.on('window-all-closed', () => {\n  if (process.platform !== 'darwin') {\n    app.quit()\n  }\n})\n\napp.on('activate', () => {\n  if (mainWindow === null) {\n    createWindow()\n  }\n})\n"
  }
]