feat: init

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    "vue/setup-compiler-macros": true,
+  },
+  extends: [
+    "plugin:vue/vue3-recommended",
+    "@vue/typescript/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "vue/multi-word-component-names": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+  },
+};

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"semi": false,
+	"quoteProps": "as-needed",
+	"singleQuote": true,
+	"trailingComma": "all",
+	"arrowParens": "always",
+	"printWidth": 120
+}

README.md

@@ -0,0 +1,57 @@
+<div align="center">
+
+<h1>Capsule-Author Dashboard</h1>
+
+Front-End powering Capsule Social's author dashboard.
+
+</div>
+
+## Requirements
+
+- NodeJS v14.5.0 or higher.
+
+## Getting started
+
+### .env Setup
+
+```bash
+# Create .env with the credentials below
+
+VUE_CAPSULE_SERVER=https://payments.capsule.social/server
+VUE_CONTRACT_NAME=dev-1635323648697-81373157539648
+VUE_NEAR_NETWORK=testnet
+
+```
+
+### Deploy Web App
+
+```bash
+# install dependencies
+$ `yarn install`
+
+# Server with hot reload on http://localhost:3000
+$ `yarn dev`
+
+# Code Linting
+$ `yarn lint`
+
+# Code Formatting
+$ `yarn format`
+
+# Production build
+$ `yarn build`
+
+
+```
+
+# Vue 3 + Typescript + Vue-CLI
+
+This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

example.env

@@ -0,0 +1,6 @@
+# Create .env with the credentials below
+
+VUE_APP_CAPSULE_SERVER=https://payments.capsule.social/server
+VUE_APP_CONTRACT_NAME=dev-1635323648697-81373157539648
+VUE_APP_BASE_URL=https://payments.capsule.social
+NEAR_NETWORK=testnet

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "blogchain-dashboard",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "preview": "serve -s dist",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "format": "prettier .  --write"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "capsule-config": "^1.2.3",
+    "core-js": "^3.22.8",
+    "ipfs-core": "^0.14.3",
+    "libsodium-wrappers": "^0.7.10",
+    "near-api-js": "^0.44.2",
+    "pinia": "^2.0.14",
+    "pinia-plugin-persistedstate": "^1.6.1",
+    "toastify-js": "^1.11.2",
+    "util": "^0.12.4",
+    "vue": "^3.2.36",
+    "vue-router": "^4.0.15"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.5",
+    "@babel/eslint-parser": "^7.18.2",
+    "@types/libsodium-wrappers": "^0.7.9",
+    "@types/toastify-js": "^1.11.1",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "@vue/cli-plugin-babel": "~5.0.6",
+    "@vue/cli-plugin-eslint": "~5.0.6",
+    "@vue/cli-plugin-typescript": "~5.0.6",
+    "@vue/cli-service": "~5.0.6",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "autoprefixer": "^10.4.7",
+    "crypto-browserify": "^3.12.0",
+    "eslint": "^8.18.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^9.1.1",
+    "path-browserify": "^1.0.1",
+    "postcss": "^8.4.14",
+    "prettier": "^2.7.1",
+    "serve": "^13.0.2",
+    "stream-browserify": "^3.0.0",
+    "tailwindcss": "^3.1.4",
+    "typescript": "^4.7.2"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "not dead",
+    "not IE 11"
+  ]
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+import TopHeader from './components/TopHeader.vue'
+import SideNav from './components/SideNav.vue'
+import Footer from './components/Footer.vue'
+import Ressouces from './components/Ressources.vue'
+
+import { useStore } from './store/session'
+import { useStoreSettings } from './store/settings'
+import { initColors } from './plugins/colors'
+import { getBGImage } from './plugins/background'
+import { setColorMode } from './plugins/colormode'
+import ipfs, { initIPFS } from './backend/utilities/ipfs'
+import { onBeforeMount, ref } from 'vue'
+// import { useRouter } from 'vue-router'
+
+initIPFS()
+const store = useStore()
+const settings = useStoreSettings()
+const avatar = ref<string>(``)
+// const router = useRouter()
+
+// Methods
+function getAvatar(cid: string) {
+	if (cid === ``) {
+		return
+	}
+	ipfs()
+		.getData(cid)
+		.then((res) => {
+			avatar.value = res
+		})
+}
+// Run init methods
+onBeforeMount(() => {
+	store.login()
+	settings.sync()
+	setColorMode(settings.mode)
+	initColors()
+	getAvatar(store.$state.avatar)
+})
+
+// onMounted(async () => {
+// 	if (!store.$state.id) {
+// })
+</script>
+
+<template>
+	<!-- wrapper -->
+	<main
+		class="bg-img m-0 h-screen overflow-y-hidden p-0 bg-lightBG dark:bg-darkBG"
+		:style="{
+			backgroundImage: `url(` + getBGImage(store.background) + `)`,
+		}"
+	>
+		<!-- Wrapper -->
+		<div class="flex w-full justify-center">
+			<div class="flex flex-col w-full lg:w-11/12 xl:w-10/12 max-w-1220">
+				<TopHeader :name="store.name" :avatar="avatar" />
+				<!-- Body -->
+				<section class="modal-animation flex flex-row">
+					<div
+						class="lg:w-7.5 min-h-80 h-80 from-lightBGStart to-lightBGStop dark:from-darkBGStart dark:to-darkBGStop border border-lightBorder z-10 w-full overflow-y-auto rounded-t-lg bg-gradient-to-r p-6 pt-4 pb-0 shadow-lg"
+					>
+						<router-view :key="$route.path" />
+					</div>
+					<aside
+						class="w-5/12 -mr-5 -mt-4 hidden overflow-y-auto p-4 lg:block"
+						:style="`min-height: calc(100vh - 150px); height: calc(100vh - 80px)`"
+					>
+						<SideNav
+							class="from-lightBGStart to-lightBGStop dark:from-darkBGStart dark:to-darkBGStop border-lightBorder mb-5 overflow-hidden rounded-lg border bg-gradient-to-r shadow-lg"
+							style="backdrop-filter: blur(10px)"
+						/>
+						<Ressouces />
+						<Footer />
+					</aside>
+				</section>
+			</div>
+		</div>
+	</main>
+</template>