Set up Sveltekit app for ArcanaSync

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:svelte/recommended',
+    'prettier'
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte']
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true
+  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  ]
+};

.gitignore

@@ -173,3 +173,16 @@ $RECYCLE.BIN/
 
 # Built Visual Studio Code Extensions
 *.vsix
+
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte"],
+  "pluginSearchDirs": ["."],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
+  "svelte.enable-ts-plugin": true,
+  "svelte.plugin.svelte.defaultScriptLanguage": "ts",
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+}

.yarnrc.yml

@@ -0,0 +1,2 @@
+yarnPath: .yarn/releases/yarn-3.6.1.cjs
+nodeLinker: node-modules

DEVELOPMENT.md

@@ -0,0 +1,7 @@
+
+```bash
+yarn create svelte myapp
+cd myapp
+yarn set version 3.x
+yarn install
+```

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 YesMyDark Project contributors
+
+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.

README.md

@@ -0,0 +1,26 @@
+# ArcanaSync
+
+ArcanaSync is a streamlined application designed to amplify the YouTube video search experience through seamless tagging with timestamps. This tool is tailor-made for developers building YouTube video search apps, offering a straightforward mechanism to enhance the content indexing process.
+
+## Key Features
+
+- **Effortless Tagging:** With ArcanaSync, you can effortlessly tag specific words while watching YouTube videos. These tags are intelligently synced with corresponding timestamps, forming a rich tapestry of insights.
+- **Structured JSON Output:** All user entries, including tags and timestamps, are meticulously compiled into a well-structured JSON string. Alternatively, you can opt for a minified JSON string, both of which are readily compatible with various applications and databases.
+- **Developer-Centric:** ArcanaSync is aimed at developers crafting YouTube video search apps. It provides an intuitive solution to empower your application with enhanced search capabilities, revolutionizing the way users interact with video content.
+- **Public Video Support:** ArcanaSync exclusively supports public YouTube videos. It leverages the wealth of publicly available content to enrich the tagging and search experience.
+
+# Contributions
+
+Contributions to ArcanaSync are highly valued. If you have ideas for improvements or additional features, feel free to submit pull requests. For significant changes, initiating a discussion by opening an issue is recommended.
+
+# License
+
+MIT License
+
+## Acknowledgment
+
+This app includes the following open-source projects:
+
+- https://github.com/feross/yt-player
+- [**Microns**](https://www.s-ings.com/projects/microns-icon-font/): https://github.com/stephenhutchings/microns
+

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "myapp",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "devDependencies": {
+    "@fontsource/ibm-plex-sans-jp": "^5.0.7",
+    "@neoconfetti/svelte": "^1.0.0",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.20.4",
+    "@types/cookie": "^0.5.1",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "autoprefixer": "^10.4.14",
+    "dayjs": "^1.11.9",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "events": "^3.3.0",
+    "load-script2": "^2.0.6",
+    "postcss": "^8.4.27",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.10.1",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.3",
+    "tailwindcss": "^3.3.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2",
+    "vitest": "^0.33.0"
+  },
+  "type": "module",
+  "packageManager": "[email protected]"
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

src/lib/MinusIcon.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let className = '';
+</script>
+
+<svg class={className} viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"
+  ><title>minus</title><path d="M80 260l320 0 0-40-320 0 0 40z" /></svg
+>

src/lib/PlusIcon.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let className = '';
+</script>
+
+<svg class={className} viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"
+  ><title>plus</title><path
+    d="M220 400l40 0 0-140 140 0 0-40-140 0 0-140-40 0 0 140-140 0 0 40 140 0 0 140z"
+  /></svg
+>

src/lib/context.ts

@@ -0,0 +1,11 @@
+import type { Writable } from 'svelte/store';
+import type { ArcanaRecord } from './types';
+
+export const currentTimeContextKey = Symbol('currentTime');
+export type CurrentTimeContext = Writable<number>;
+
+export const showHoursContextKey = Symbol('showHours');
+export type ShowHoursContext = Writable<boolean>;
+
+export const recordsContextKey = Symbol('records');
+export type RecordsContext = Writable<ArcanaRecord[]>;

src/lib/types.ts

@@ -0,0 +1,4 @@
+export interface ArcanaRecord {
+  timestamp: number;
+  comment: string;
+}