Initial commit generated from template.

cosmicds · Apr 16, 2024 · 63039c6 · 63039c6
commit 63039c6
Show file tree

Hide file tree

Showing 20 changed files with 6,831 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,62 @@
+module.exports = {
+  root: true,
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    extraFileExtensions: ['.vue']
+  },
+  plugins: [
+    '@typescript-eslint',
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/essential',
+    '@vue/typescript/recommended'
+  ],
+  rules: {
+    "indent": ["error", 2],
+    "@typescript-eslint/naming-convention": [
+      "error", {
+        selector: ["variable", "memberLike", "function"],
+        format: ["camelCase"],
+        leadingUnderscore: "allow"
+      },
+      {
+        selector: ["variable"],
+        modifiers: ["global", "const"],
+        format: ["camelCase", "UPPER_CASE"],
+        leadingUnderscore: "allow"
+      },
+      {
+        selector: "typeLike",
+        format: ["PascalCase"],
+        leadingUnderscore: "allow"
+      },
+      {
+        selector: [
+          "classProperty",
+          "objectLiteralProperty",
+          "typeProperty",
+          "classMethod",
+          "objectLiteralMethod",
+          "typeMethod",
+          "accessor",
+          "enumMember"
+        ],
+        format: null,
+        modifiers: ["requiresQuotes"]
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error", {
+        "args": "all",
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/semi": "error",
+    "vue/multi-word-component-names": "off"
+  }
+};
diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
@@ -0,0 +1,64 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches:
+      main
+
+jobs:
+  build:
+    if: ${{ github.repository_owner == 'cosmicds' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.17.1'
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build
+        run: yarn build
+
+          # - name: BrowserStack env setup
+          #   uses: browserstack/github-actions/setup-env@master
+          #   with:
+          #     username:  ${{ secrets.BROWSERSTACK_USERNAME }}
+          #     access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+
+          # - name: BrowserStack local tunnel setup
+          #   uses: browserstack/github-actions/setup-local@master
+          #   with:
+          #     local-testing: start
+          #     local-identifier: random
+
+          # - name: Run BrowserStack tests
+          #   run: |
+          #     set -xeuo pipefail
+          #     yarn serve &
+          #     sleep 10
+          #     yarn test-bslocal -e default,firefox,edge,safari -o reports
+
+      - name: Check for draft flag
+        uses: sergeysova/jq-action@v2
+        id: draft
+        with:
+          cmd: cat package.json | jq -r '.draft // false'
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        if: ${{ steps.draft.outputs.value }} == 'true'
+        with:
+          branch: gh-pages
+          folder: dist
+          ssh-key: ${{ secrets.DEPLOY_KEY }}
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,56 @@
+name: Build
+
+on:
+  pull_request_target:
+    branches:
+      main
+
+permissions: read-all
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.17.1'
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build
+        run: yarn build
+
+          # - name: BrowserStack env setup
+          #   uses: browserstack/github-actions/setup-env@master
+          #   with:
+          #     username:  ${{ secrets.BROWSERSTACK_USERNAME }}
+          #     access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+
+          # - name: 'BrowserStack local tunnel setup'
+          #   uses: browserstack/github-actions/setup-local@master
+          #   with:
+          #     local-testing: start
+          #     local-identifier: random
+
+          # - name: Run BrowserStack tests
+          #   run: |
+          #     set -xeuo pipefail
+          #     yarn serve &
+          #     sleep 10
+          #     yarn test-bslocal -e default,firefox,edge,safari -o reports
+
+          # - name: 'BrowserStackLocal Stop'  # Terminating the BrowserStackLocal tunnel connection
+          #   uses: browserstack/github-actions/setup-local@master
+          #   with:
+          #     local-testing: stop
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+**/dist/*
+!./dist/index.html
+
+node_modules/
+tsconfig.tsbuildinfo
+/.vs/
+*.log
+
+**/.yarn/*
+!**/.yarn/releases
+!**/.yarn/patches
+!**/.yarn/plugins
+!**/.yarn/sdks
+!**/.yarn/versions
+
+.pnp.*
+.DS_Store
+
+.DS_Store
+*/.DS_Store
+*/*/.DS_Store
+.vscode/settings.json
+
+**/tests_output/**
+
+*.env
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 cosmicds
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,32 @@
+# Vue Data Story Template
+
+This repository contains a template for setting up a purely Vue-based Cosmic Data Story using WorldWide Telescope. This template is built using components from [`@cosmicds/vue-toolkit`](https://github.com/cosmicds/vue-toolkit), which is included here as a dependency. This template sets up the basic infrastructure for a story - integrating the WorldWide Telescope component, providing some basic HTML scaffolding for placing controls in the main component, and generally providing the overall Vue project structure.
+
+## Usage
+
+To start creating your own data story, you can use the following steps.
+
+* First, clone the repository, setting the name of the destination folder as appropriate for your story
+```
+git clone https://github.com/cosmicds/vue-ds-template.git <my-story-name>
+```
+* Next, you can run the setup script to do some basic renaming for you. You should give the story name in `kebab-case`. Where conventions dictate, the script will automatically rename using `PascalCase` and `camelCase`.
+```
+cd <my-story-name>
+scripts/setup.sh
+```
+If you get complaints that the script isn't executable, make it so by running `chmod +x scripts/setup.sh`.
+
+* That's it! You're now ready to start creating your story. As mentioned above, we provide some basic layout scaffolding in the main component template, but feel free to remove whatever doesn't fit your story's needs.
+    - To preview the story using the development server, run `yarn serve`
+    - To build the story for production use, run `yarn build`
+
+## Deployment and Github Actions
+
+The built story is just a set of HTML/CSS/JS + any assets that you add, so it should be easy to host anywhere. One simple way to host a story is using Github Pages, which provides a free static site hosting service for public repositories. This repository provides two workflows (see the `.github/workflows` directory) to help with this:
+* `build.yml` - on a pull request, build the PR version of the story (to test that it at least builds successfully)
+* `build-deploy.yml` - on a commit to main, build the story and push the built version to the `gh-pages` branch. This built version can then be deployed to Github Pages in the repository settings: `Settings > Pages`, then choose `Deploy from a branch` and use the `gh-pages` branch.
+
+## BrowserStack testing - CosmicDS team
+
+If you're a member of the CosmicDS team, we can perform E2E testing (both locally and in Github Actions) using BrowserStack. To activate this testing, uncomment the relevant pieces in the provided workflows. Note that you'll need to have our BrowserStack username and access key for this to work correctly. (If the repository that you're working on is part of the CosmicDS organization, you shouldn't need to add these at the repository level).
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "draft": true,
+  "version": "0.0.0",
+  "dependencies": {
+    "@cosmicds/vue-toolkit": "^0.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@wwtelescope/engine-pinia": "^0.9.0",
+    "vue": "^3.4.15",
+    "vuetify": "^3.4.11",
+    "webpack-plugin-vuetify": "^2.0.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/typescript-estree": "^6.19.0",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.4.15",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.20.1",
+    "less": "^4.2.0",
+    "less-loader": "^12.0.0",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0"
+  },
+  "scripts": {
+    "build": "vue-cli-service build",
+    "clean": "rimraf dist",
+    "lint": "vue-cli-service lint src --no-fix",
+    "serve": "vue-cli-service serve"
+  },
+  "name": "@cosmicds/tempo-lite"
+}
diff --git a/plugins/vuetify.ts b/plugins/vuetify.ts
@@ -0,0 +1,36 @@
+import { aliases, mdi } from 'vuetify/iconsets/mdi';
+import { createVuetify } from 'vuetify';
+
+// For test use. Do not include createVuetify()
+// see https://next.vuetifyjs.com/en/features/treeshaking/
+//import * as components from 'vuetify/components';
+//import * as directives from 'vuetify/directives';
+
+// Translations provided by Vuetify
+import { en } from 'vuetify/locale';
+
+// Styles
+import 'vuetify/styles';
+import '@mdi/font/css/materialdesignicons.css';
+
+export default createVuetify({
+  // Icon Fonts
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi,
+    },
+  },
+  locale: {
+    locale: 'en',
+    fallback: 'en',
+    messages: { en },
+  },
+  theme: {
+    defaultTheme: 'dark',
+  },
+});
+
+// Export for test.
+//export { components, directives };
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-C2ELSYY9VC"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-C2ELSYY9VC');
+  </script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://projects.cosmicds.cfa.harvard.edu/vue-ds-template/">
+  <meta property="og:title" content="Tempo Lite">
+  <meta property="og:description" content="Tempo Lite">
+  <meta property="og:site_name" content="Tempo Lite">
+  <meta property="og:image" content="https://projects.cosmicds.cfa.harvard.edu/vue-ds-template/preview.png">
+  <meta property="og:image:secure_url" content="https://projects.cosmicds.cfa.harvard.edu/vue-ds-template/preview.png">
+  <meta property="og:image:type" content="image/jpeg">
+  <meta property="og:image:width" content="596">
+  <meta property="og:image:height" content="886">
+  <meta property="og:image:alt" content="Story preview image">
+  <meta name="twitter:site" content="@CosmicDataStory">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:creator" content="@CosmicDataStory">
+  <meta name="twitter:image" content="https://projects.cosmicds.cfa.harvard.edu/vue-ds-template/preview.png">
+  <link rel="icon" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon.png">
+  <link rel="apple-touch-icon" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon-57.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon-72.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon-114.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon-144.png">
+  <link rel="shortcut icon" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon.ico">
+  <meta name="apple-mobile-web-app-title" content="Tempo Lite">
+  <link rel="manifest" href="site.webmanifest">
+  <title>Tempo Lite</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>WorldWide Telescope requires JavaScript to run.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,4 @@
+{
+  "name": "Cosmic Data Stories: Tempo Lite",
+  "short_name": "Tempo Lite"
+}