Issue #1 Conversion to Threejs

.eslintrc.cjs

@@ -1,40 +1,88 @@
+const { resolve } = require('path');
 module.exports = {
+  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
+  // This option interrupts the configuration hierarchy at this file
+  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
+  root: true,
+
+  // https://eslint.vuejs.org/user-guide/#how-to-use-custom-parser
+  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
+  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
+  parserOptions: {
+    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#configuration
+    // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#eslint
+    // Needed to make the parser take into account 'vue' files
+    extraFileExtensions: ['.vue'],
+    parser: '@typescript-eslint/parser',
+    project: resolve(__dirname, './tsconfig.json'),
+    tsconfigRootDir: __dirname,
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module' // Allows for the use of imports
+  },
+
   env: {
-    browser: true,
-    es2021: true,
-    jquery: true
+    browser: true
   },
-  extends: 'airbnb-base',
-  overrides: [
-    {
-      env: {
-        node: true
-      },
-      files: [
-        '.eslintrc.{js,cjs}'
-      ],
-      parserOptions: {
-        sourceType: 'script'
-      }
-    }
+
+  ignorePatterns: [
+    'vite.config.js'
   ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module'
-  },
+
+  // Rules order is important, please avoid shuffling them
+  extends: [
+    // Base ESLint recommended rules
+    // 'eslint:recommended',
+
+    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
+    // ESLint typescript rules
+    'plugin:@typescript-eslint/recommended',
+    // consider disabling this class of rules if linting takes too long
+    'plugin:@typescript-eslint/recommended-requiring-type-checking'
+  ],
+
+  plugins: [
+    // required to apply rules which need type information
+    '@typescript-eslint',
+    'import'
+  ],
+
+  // add your custom rules here
   rules: {
-    'no-plusplus': 'off',
-    'comma-dangle': ['error', 'never'],
-    'no-console': 'warn',
-    'max-len': ['error', { code: 130 }],
-    'no-else-return': 'warn',
-    'no-param-reassign': 'off',
-    'prefer-destructuring': 'off',
-    'prefer-template': 'warn',
-    'no-continue': 'off',
-    'space-before-function-paren': ['error', { anonymous: 'never', named: 'always' }],
-    'no-await-in-loop': 'off',
-    'class-methods-use-this': 'off',
-    indent: ['error', 2]
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow paren-less arrow functions
+    'arrow-parens': 'off',
+    'one-var': 'off',
+    'no-void': 'off',
+    'multiline-ternary': 'off',
+
+    'import/first': 'off',
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'prefer-promise-reject-errors': 'off',
+    'space-before-function-paren': 'error',
+    semi: [2, 'always'],
+    indent: ['error', 2],
+
+    // TypeScript
+    quotes: ['warn', 'single', { avoidEscape: true }],
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unnecessary-type-assertion': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    '@typescript-eslint/no-misused-promises': 'off',
+    '@typescript-eslint/no-unsafe-argument': 'off',
+
+
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   }
 };

.github/workflows/deploy.yml

@@ -19,6 +19,8 @@ jobs:
 
       - name: Setup Node
         uses: actions/setup-node@v3
+        with:
+          node-version: '16.20'
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

.gitignore

@@ -2,6 +2,7 @@ node_modules
 .DS_Store
 logs/
 *.env
+.cookiejar
 
 # Devenv
 .direnv

bin/fetch-tle.sh

@@ -0,0 +1,37 @@
+#!/bin/sh
+
+basepath=`dirname "$0"`
+cd "$basepath"
+
+identity=$SPACETRACK_IDENTITY
+password=$SPACETRACK_PASSWORD
+
+if [ -z "$SPACETRACK_IDENTITY" ] || [ -z "$SPACETRACK_PASSWORD" ]
+then
+  echo 'ensure both "SPACETRACK_IDENTITY" and "SPACETRACK_PASSWORD" are set'
+fi
+
+source_url="https://www.space-track.org/basicspacedata/query/class/tle_latest/ORDINAL/1/EPOCH/%3Enow-30/orderby/NORAD_CAT_ID/format/json"
+tle_file="../public/data/TLE.json"
+output_file="../public/data/attributed-TLE.json"
+current_date=`date -u +"%Y-%m-%dT%H:%M:%SZ"`
+cookie_jar="/tmp/$USER-cookiejar"
+
+echo "Downloading TLE data"
+curl -c $cookie_jar -b $cookie_jar https://www.space-track.org/ajaxauth/login \
+   -d "identity=$identity&password=$password"
+
+curl ---limit-rate 100K -cookie $cookie_jar "${source_url}" > $tle_file
+
+echo "Generating Attributed TLE file"
+echo "{
+  \"source\": {
+    \"name\": \"Space-Track.org\",
+    \"url\": \"https://www.space-track.org/\"
+  },
+  \"date\": \"$current_date\",
+  \"data\":
+" > $output_file
+
+cat $tle_file >> $output_file
+echo "\n}\n" >> $output_file

index.html

@@ -5,13 +5,27 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Stuff in Space" />
+    <meta property="og:site_name" content="Stuff in Space" />
+    <meta property="og:locale" content="en_GB" />
+    <meta property="og:description" content="Viewer for satellites and space debris" />
+    <meta property="og:url" content="https://ajmas.github.io/StuffInSpace/" />
+    <meta property="og:image" content="https://ajmas.github.io/StuffInSpace/images/preview.png" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Stuff in Space" />
+    <meta name="twitter:description" content="Viewer for satellites and space debris" />
+    <meta name="twitter:image" content="https://ajmas.github.io/StuffInSpace/images/preview.png" />
+    <meta name="twitter:url" content="https://ajmas.github.io/StuffInSpace/" />
+    <meta name="twitter:site" content="https://ajmas.github.io/StuffInSpace/" />
+
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans" type="text/css">
     <link rel="stylesheet" href="styles/icomoon.css" type="text/css">
-    <link rel="stylesheet" href="styles/perfect-scrollbar.min.css" type="text/css">
     <link rel="stylesheet" href="styles/style.css" type="text/css">
 
-    <script type="module" src="src/main.ts"></script>
+    <script type="module" src="src/index.ts"></script>
 
     <title>Stuff in Space</title>
   </head>
@@ -20,7 +34,7 @@
     Stuff in Space requires <a href="https://caniuse.com/#feat=webgl">WebGL</a> and <a href="https://caniuse.com/#feat=webworkers">Web Worker</a> support.
   </div>
   <div id="canvas-holder">
-    <canvas id="canvas"></canvas>
+    <div class="viewer"></div>
 
     <div id="mobile-hamburger"><span class="material-symbols-outlined">menu</span></div>