{"id":16118475,"url":"https://github.com/thekicker/rocket-downrange","last_synced_at":"2026-02-25T22:04:41.496Z","repository":{"id":38538794,"uuid":"265686508","full_name":"TheKicker/rocket-downrange","owner":"TheKicker","description":"Rocket Downrange is a site I am developing to showcase the advancements of humanity in regards to the exploration of outer space. While the core Vue.JS is my own writing (please be patient as I continue to learn), all data you see on the site is returned from various API's. ","archived":false,"fork":false,"pushed_at":"2025-08-14T00:25:32.000Z","size":58863,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-02T13:50:08.377Z","etag":null,"topics":["api","astronomy","help-welcome","javascript","launch","nasa","open-source","outer-space","rocket","rocketlab","side-project","space","spacex","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://www.rocketdownrange.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheKicker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://www.buymeacoffee.com/cavlemasters"]}},"created_at":"2020-05-20T21:08:57.000Z","updated_at":"2025-08-14T00:25:29.000Z","dependencies_parsed_at":"2023-02-12T02:45:27.649Z","dependency_job_id":"1c4a6902-62d6-44d5-944f-bdabb1117713","html_url":"https://github.com/TheKicker/rocket-downrange","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TheKicker/rocket-downrange","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheKicker%2Frocket-downrange","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheKicker%2Frocket-downrange/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheKicker%2Frocket-downrange/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheKicker%2Frocket-downrange/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheKicker","download_url":"https://codeload.github.com/TheKicker/rocket-downrange/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheKicker%2Frocket-downrange/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29842897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T21:18:31.832Z","status":"ssl_error","status_checked_at":"2026-02-25T21:18:29.265Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","astronomy","help-welcome","javascript","launch","nasa","open-source","outer-space","rocket","rocketlab","side-project","space","spacex","vue","vuejs"],"created_at":"2024-10-09T20:49:38.116Z","updated_at":"2026-02-25T22:04:41.480Z","avatar_url":"https://github.com/TheKicker.png","language":"Vue","funding_links":["https://www.buymeacoffee.com/cavlemasters"],"categories":[],"sub_categories":[],"readme":"# Rocket Downrange 🚀\n[![Netlify Status](https://api.netlify.com/api/v1/badges/192c5a3a-340b-4e0c-ae7b-870e0f221ebc/deploy-status)](https://app.netlify.com/sites/trusting-goldwasser-e71a14/deploys)\n\nRocket Downrange is a side project site I am working on to showcase the advancements of humanity in regards to the exploration of outer space.  While the core Vue.JS is my own writing (please be patient as I continue to learn), all data you see on the site is returned from various API's.  A vast majority of the site is fully dynamic and changes daily, based on data from other sources.  Thus, the site should continue to be a fun  and interesting way of keeping updated on the industry at large.\n\nMost of the data and images you see - especially those of planets are taken/owned by NASA.  Other media may be directly from Unsplash, Adobe Creative Cloud, SpaceX, RocketLab, or other organizations and API's featured on the site.  \u003cstrong\u003eI claim no ownership of these items and am only using them as assets of learning.\u003c/strong\u003e  If you see something that needs proper attribution or I can shout out something amazing of yours - please send me a message! I love cheering on others in the industry! \n\nI hope the site serves you well and I am always open to thoughts and opinions, \n\n \u003ca href=\"https://www.cavlemasters.com/contact\" target=\"_blank\"\u003e- Cav Lemasters ( @TheKicker ) \u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ch3\u003eSupport the project and \u003ca href=\"https://www.buymeacoffee.com/cavlemasters\"\u003eBuy Me a Coffee ☕️\u003c/a\u003e\u003c/h3\u003e\n\u003c/br\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n\u003chr\u003e\nAll mission data belongs to corresponding company or the API I am receiving it from.  Rocket Downrange will remain free to access and an open learning resource for the curious! \n\u003c/br\u003e\n\u003c/br\u003e\nHosted on Netlify, built with Vue.js, Axios, Vue-Meta, Bootstrap 4 and more! Note, this site also uses Google Analytics, AdSense, SEMRUSH as I strive to master those platforms as well. \n\u003c/hr\u003e\n\u003chr\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n\u003cbr\u003e\n\u003chr\u003e\n\u003cdiv align=\"center\"\u003e\n\u003ch2\u003eDeveloper Notes:\u003c/h2\u003e\n\u003c/div\u003e\n\u003chr\u003e\n\nRemove the url # issue - simple fix is to add mode:`history` to the Vue Router. \n```\n// router/index.js\n\nconst router = new VueRouter({\n\troutes, mode: 'history'\n});\n\n```\n\u003c/br\u003e\n\u003chr\u003e\n\u003c/br\u003e\n\nAdded \u003cstrong\u003eVue-Meta\u003c/strong\u003e for SEO enhancements/meta tags.  Purely experimental :) \u003ca href=\"https://alligator.io/vuejs/vue-seo-tips/\" target=\"_blank\" rel=\"noopener\"\u003eVue Meta article \u003c/a\u003e\n```\nnpm install vue-meta\n```\n```\n// main.js file\n\nimport Meta from 'vue-meta';\n\nVue.use(Meta);\n\n```\n\nSo far, extremely happy with this.  Super easy to implement, super easy to use, works perfectly thus far. \n\n\u003c/br\u003e\n\u003chr\u003e\n\u003c/br\u003e\n\nURLs were not working properly. So for example, rocketdownrange.com/spacex was returning a 404. Solved this by adding netlify.toml file and slight alteration to routes. \n```\n// netlify.toml\n\n[[redirects]]\n  from = \"/*\"\n  to = \"/index.html\"\n  status = 200\n  force = false\n\n```\n\n\u003c/br\u003e\n\u003chr\u003e\n\u003c/br\u003e\n\nHad an issue where the site was displaying an unsecure connection.  Mistakenly thought this was a bad SSL Certificate but realized it was due to the API response data.  Specifically the Opportunity and Curiousity API's would supply an unsecure link for the images. Fixed the issue by adding a computed property to check if https is enabled, if not add an s to the supplied url.\n\n```\n// src/components/Opportunity.vue \u0026 Curiousity.vue\n\ncomputed:{\n  secureURL: function(){\n    var baseURL = this.results.photos[0].img_src;\n      if (baseURL.slice(0, 5) != \"https\") {\n        var secure_url = baseURL.slice(0, 4) + \"s\" + baseURL.slice(4);\n        return secure_url;\n      } else {\n        return baseURL;\n      }\n  }\n}\n\n// then call secureURL within the image tag\n\n\u003cimg :src=\"secureURL\" class=\"image-fluid\"/\u003e\n\n```\n\n\u003c/br\u003e\n\u003chr\u003e\n\u003c/br\u003e\n\n\nAdded a form to the index page of the site for comments/suggestions, etc. Had an issue where the form wasnt working - per \u003ca href=\"https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/\" target=\"_blank\"\u003ethis article\u003c/a\u003e it's related to the default way Vue renders client side but the Netlify post processing bots expect HTML on site deploy.  Any \u003ccode\u003e netlify \u003c/code\u003e form attribute tags included in a Vue app would only be inserted into the DOM client-side, rather than in the HTML and thereby runs the risk of being totally overlooked by the build bots.\n\nIn the process of solving this by adding a static form for the Netlify build bots. Form does work - honestly no idea what I did but I think the issue was related to my honey-pot.  Rewrote that section and it became functional.  \n\n```\n// public/index.html\n\n \u003c!-- A little help for the Netlify post-processing bots --\u003e\n  \u003cform method=\"POST\" name=\"Contact\" netlify-honeypot=\"bot-field\" data-netlify=\"true\" hidden\u003e\n    \u003cinput type=\"text\" id=\"name\" name=\"name\" required /\u003e\n    \u003cinput type=\"text\" id=\"subject\" name=\"subject\" required /\u003e\n    \u003ctextarea name=\"message\" id=\"message\" required\u003e\u003c/textarea\u003e\n    \u003cp class=\"ohnohoney\"\u003eAre you happy:\u003cinput type=\"hidden\" name=\"bot-field\" value=\"Contact\" /\u003e\u003c/p\u003e\n    \u003cbutton type=\"submit\" name=\"submit\"\u003esubmit\u003c/button\u003e\n  \u003c/form\u003e\n\n```\n\n```\n// @/src/components/Contact/vue\n\n\u003cform\u003e\n  Line 13-93\n\u003c/form\u003e\n```\n\n\u003c/br\u003e\n\u003chr\u003e\n\u003c/br\u003e\n\nAdded \u003cstrong\u003evue-scrollto\u003c/strong\u003e for UI Enhancement, testing on the solar system page.  Purely experimental :) \u003ca href=\"https://vue-scrollto.netlify.app/docs/\" target=\"_blank\" rel=\"noopener\"\u003evue-scrollto documentation\u003c/a\u003e\n```\nnpm install --save vue-scrollto\n```\n```\n// main.js file\n\nimport VueScrollTo from 'vue-scrollto';\n\n// Instruct Vue to use these parameters\n// Default duration was 500, set to 1500 at launch\n\nVue.use(VueScrollTo, {\n\tcontainer: \"body\",\n\tduration: 1500,\n\teasing: \"ease\",\n\toffset: 0,\n\tforce: true,\n\tcancelable: true,\n\tonStart: false,\n\tonDone: false,\n\tonCancel: false,\n\tx: false,\n\ty: true\n})\n\n```\n\nSo far, super happy with how easy it was to implement and how well it works.  Going to continue testing. \n\n\u003chr\u003e\n\u003cbr\u003e\n\u003cstrong\u003eUnsecure images from NASA API\u003c/strong\u003e - Had an issue on the 'Home' page of the site where an error in the console is logged for both Oppy and Curiousity API's.\n\nI think I have tracked this down to how I am calling bits of information out of the endpoints for the JSON response.  The browser does not like the [0] added to return the first photo/details from the array.  I cannot however remove the zero because then the entire component vanishes. \n\n\u003c/br\u003e For example, when I call \u003ci\u003e this.results.photos[0].img_src \u003c/i\u003e\n\n```\n\u003e Type Error: Cannot read property '0' of undefined\n      at (file-1.js:1)\n      at (file-2.js:1)\n      at (file-3.js:1)\n      at (file-4.js:1)\n      at (file-5.js:1)\n\n```\n\nSolving this issue with conditional (ternary) operator when I receive the API data as such, check if this paragraph returns a null or undefined endpoint, if it does return a placeholder, else return the endpoint.\n\n```\n  \u003cp\u003e{{ this.results.paragraph != null || undefined ? this.results.paragraph : placeholder.paragraph }}\u003c/p\u003e\n\n```\n\u003c/br\u003e\n\n\u003c/br\u003e\n\u003chr\u003e\n\u003c/br\u003e\n\n\u003cstrong\u003e Installed Depcheck to remove unused dependencies \u003c/strong\u003e - Using this article as a reference (\u003ca href=\"https://dev.to/manitej/remove-unused-npm-modules-in-less-than-30-seconds-4g8k\"\u003elink\u003c/a\u003e) wanted to slim down my package.json using \u003ca href=\"https://www.npmjs.com/package/depcheck\"\u003edepcheck.\u003c/a\u003e\n\n```\nnpx depcheck\n\n# generates a list of unused dependencies\n\nnpm uninstall \u003cpackage\u003e\n```\n\n\u003c/br\u003e\n\u003chr\u003e\n\u003c/br\u003e\n\n\u003cstrong\u003e Installed Vue2-datepicker to begin work on a component where you can look up historical APODs. \u003c/strong\u003e - Using this page as a reference (\u003ca href=\"https://www.npmjs.com/package/vue2-datepicker\"\u003elink\u003c/a\u003e)\u003c/a\u003e\n\n```\nnpm install vue2-datepicker \n\n# generates a calendar date picker\n\n\u003cscript\u003e\n  import DatePicker from 'vue2-datepicker';\n  import 'vue2-datepicker/index.css';\n\n  export default {\n    components: { DatePicker },\n    data() {\n      return {\n        time1: null,\n        time2: null,\n        time3: null,\n      };\n    },\n  };\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdate-picker v-model=\"time1\" valueType=\"format\"\u003e\u003c/date-picker\u003e\n    \u003cdate-picker v-model=\"time2\" type=\"datetime\"\u003e\u003c/date-picker\u003e\n    \u003cdate-picker v-model=\"time3\" range\u003e\u003c/date-picker\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n\n\u003c/br\u003e\n\u003chr\u003e\n\u003c/br\u003e\n\n\u003cstrong\u003e Installed v-lazy-image to lazy load images \u003c/strong\u003e - Using this page as a reference (\u003ca href=\"https://vuedose.tips/lazy-loading-images-with-v-lazy-image\"\u003elink\u003c/a\u003e). Here is the official page on NPM (\u003ca href=\"https://www.npmjs.com/package/v-lazy-image\"\u003elink\u003c/a\u003e)\n\n```\nnpm install v-lazy-image \n\nimport VLazyImage from \"v-lazy-image/v2\";\n\nexport default {\n  components: {\n    VLazyImage\n  }\n};\n\n\u003ctemplate\u003e\n  \u003cv-lazy-image src=\"http://lorempixel.com/400/200/\" /\u003e\n\u003c/template\u003e\n\n```\n\n\u003c/br\u003e\n\u003chr\u003e\n\u003c/br\u003e\n\n\u003cstrong\u003e Added Finnhub for company stock information \u003c/strong\u003e - Using this page as a reference (\u003ca href=\"https://finnhub.io/docs/api/quote\"\u003elink\u003c/a\u003e), you must get an API key (for free) from the site before using the API. Here is the official Finnhub website (\u003ca href=\"https://finnhub.io/\"\u003elink\u003c/a\u003e) to sign up for an account. \n\n```\nimport Stock from \"@/components/Stock-Price.vue\";\n\ncomponents: { Stock }\n\n\u003ctemplate\u003e\n\n  \u003cStock \n      ORG=\"Rocket Downrange\" \n      TICKER=\"RKDR\" \n      LINK=\"https://www.nasdaq.com/market-activity/stocks/rkdr\" \n      FINN=\"https://widget.finnhub.io/widgets/stocks/chart?symbol=RKDR\u0026amp;watermarkColor=%231db954\u0026amp;backgroundColor=%23222222\u0026amp;textColor=white\"\n  \n  /\u003e\n\n\u003c/template\u003e\n\n```\n\n\u003c/br\u003e\n\u003chr\u003e\n\u003c/br\u003e\n\n\u003cstrong\u003e Added Leaflet JS for Launch Location Maps \u003c/strong\u003e - Using this page as a reference (\u003ca href=\"https://vue2-leaflet.netlify.app/examples/feature-group.html\"\u003elink\u003c/a\u003e). Here is the official Vue2-Leaflet github (\u003ca href=\"https://github.com/vue-leaflet/Vue2Leaflet\"\u003elink\u003c/a\u003e).\n\nMain.js\n\n```\nnpm i leaflet\nnpm i vue2-leaflet\n\nimport { Icon }  from 'leaflet'\nimport \"leaflet/dist/leaflet.css\";\n\n// this part resolves an issue where the markers would not appear\ndelete Icon.Default.prototype._getIconUrl;\n\nIcon.Default.mergeOptions({\n    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),\n    iconUrl: require('leaflet/dist/images/marker-icon.png'),\n    shadowUrl: require('leaflet/dist/images/marker-shadow.png')\n});\n\n```\n\nActual template\n\n```\n \u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cl-map style=\"height: 500px\" :zoom=\"zoom\" :center=\"center\"\u003e\n      \u003cl-tile-layer :url=\"url\" :attribution=\"attribution\"\u003e\u003c/l-tile-layer\u003e\n      \u003cl-marker :lat-lng=\"markerLatLng\"\u003e\u003cl-popup\u003e{{ content }}\u003c/l-popup\u003e\u003c/l-marker\u003e\n    \u003c/l-map\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { LMap, LTileLayer, LMarker, LPopup } from \"vue2-leaflet\";\n\nexport default {\n    name: \"LaunchLocations\",\n    components: {\n        LMap,\n        LTileLayer,\n        LMarker,\n        LPopup\n    },\n    props:{\n        x: String,\n        y: String,\n        z: String,\n        content: String\n    },\n    data() {\n        return {\n        url: \"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",\n        attribution:'\u0026copy; \u003ca target=\"_blank\" href=\"http://osm.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors',\n        zoom: this.z,\n        center: [this.x, this.y],\n        markerLatLng: [this.x, this.y],\n        };\n    },\n    };\n\u003c/script\u003e\n\n\n```\n\n\n\u003c/br\u003e\n\u003chr\u003e\n\u003cdiv align=\"center\"\u003e\n\u003ch2\u003eKnown Issues (Work in Progress):\u003c/h2\u003e\n\u003c/div\u003e\n\u003chr\u003e\n\u003cbr\u003e\nHey! No known issues to show! :) If you found something, send me a message on the site!\n\n\u003c/br\u003e\n\u003chr\u003e\n\u003cdiv align=\"center\"\u003e\n\u003ch2\u003eMar 2025\u003c/h2\u003e\nUpdates from Vue 2 to Vue 3 finally coming!\n\n- Uninstalled v-lazy-load/v2\n- Installed v-lazy-load (https://www.npmjs.com/package/v-lazy-image)\n- Uninstalled Leaflet  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekicker%2Frocket-downrange","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthekicker%2Frocket-downrange","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekicker%2Frocket-downrange/lists"}