garbage-heap/vulpine-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

slightly better status, internationalization

Browse source
This commit is contained in:
sam 2023-12-20 03:24:38 +01:00
parent 7c5acad535
commit a06dd22da4
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
22 changed files with 2416 additions and 1009 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
.eslintrc.cjs
View file

@ -1,15 +1,15 @@
/* eslint-env node */ /* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution') require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = { module.exports = {
root: true, root: true,
'extends': [ extends: [
'plugin:vue/vue3-essential', "plugin:vue/vue3-essential",
'eslint:recommended', "eslint:recommended",
'@vue/eslint-config-typescript', "@vue/eslint-config-typescript",
'@vue/eslint-config-prettier/skip-formatting' "@vue/eslint-config-prettier/skip-formatting",
], ],
parserOptions: { parserOptions: {
ecmaVersion: 'latest' ecmaVersion: "latest",
} },
} };

12
.prettierrc.json
View file

@ -1,8 +1,8 @@
{ {
"$schema": "https://json.schemastore.org/prettierrc", "$schema": "https://json.schemastore.org/prettierrc",
"semi": true, "semi": true,
"useTabs": true, "useTabs": true,
"singleQuote": false, "singleQuote": false,
"printWidth": 100, "printWidth": 100,
"trailingComma": "all" "trailingComma": "all"
} }

12
.vscode/extensions.json vendored
View file

@ -1,8 +1,8 @@
{ {
"recommendations": [ "recommendations": [
"Vue.volar", "Vue.volar",
"Vue.vscode-typescript-vue-plugin", "Vue.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint", "dbaeumer.vscode-eslint",
"esbenp.prettier-vscode" "esbenp.prettier-vscode"
] ]
} }

4
README.md
View file

@ -13,8 +13,8 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension 1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette 1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` 2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration ## Customize configuration

1
env.d.ts vendored
View file

@ -1 +1,2 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
/// <reference types="@modyfi/vite-plugin-yaml/modules" />

22
index.html
View file

@ -1,13 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

87
package.json
View file

@ -1,44 +1,47 @@
{ {
"name": "vulpine-fe", "name": "vulpine-fe",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "run-p type-check \"build-only {@}\" --", "build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview", "preview": "vite preview",
"build-only": "vite build", "build-only": "vite build",
"type-check": "vue-tsc --build --force", "type-check": "vue-tsc --build --force",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/" "format": "prettier --write ."
}, },
"dependencies": { "dependencies": {
"axios": "^1.6.2", "@tabler/icons-vue": "^2.44.0",
"flowbite": "^2.2.1", "axios": "^1.6.2",
"flowbite-vue": "^0.1.2", "flowbite": "^2.2.1",
"pinia": "^2.1.7", "flowbite-vue": "^0.1.2",
"sass": "^1.69.5", "pinia": "^2.1.7",
"swrv": "^1.0.4", "sass": "^1.69.5",
"vue": "^3.3.11", "swrv": "^1.0.4",
"vue-router": "^4.2.5" "vue": "^3.3.11",
}, "vue-i18n": "9",
"devDependencies": { "vue-router": "^4.2.5"
"@rushstack/eslint-patch": "^1.3.3", },
"@tsconfig/node18": "^18.2.2", "devDependencies": {
"@types/node": "^18.19.3", "@modyfi/vite-plugin-yaml": "^1.0.4",
"@vitejs/plugin-vue": "^4.5.2", "@rushstack/eslint-patch": "^1.3.3",
"@vue/eslint-config-prettier": "^8.0.0", "@tsconfig/node18": "^18.2.2",
"@vue/eslint-config-typescript": "^12.0.0", "@types/node": "^18.19.3",
"@vue/tsconfig": "^0.5.0", "@vitejs/plugin-vue": "^4.5.2",
"autoprefixer": "^10.4.16", "@vue/eslint-config-prettier": "^8.0.0",
"eslint": "^8.49.0", "@vue/eslint-config-typescript": "^12.0.0",
"eslint-plugin-vue": "^9.17.0", "@vue/tsconfig": "^0.5.0",
"npm-run-all2": "^6.1.1", "autoprefixer": "^10.4.16",
"postcss": "^8.4.32", "eslint": "^8.49.0",
"prettier": "^3.0.3", "eslint-plugin-vue": "^9.17.0",
"tailwindcss": "^3.3.7", "npm-run-all2": "^6.1.1",
"typescript": "~5.3.0", "postcss": "^8.4.32",
"vite": "^5.0.10", "prettier": "^3.0.3",
"vue-tsc": "^1.8.25" "tailwindcss": "^3.3.7",
} "typescript": "~5.3.0",
"vite": "^5.0.10",
"vue-tsc": "^1.8.25"
}
} }

2888
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

10
postcss.config.js
View file

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

40
src/components/status/VulStatus.vue
View file

@ -1,7 +1,36 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from "vue-i18n";
import type Activity from "@/lib/api/entities/activity"; import type Activity from "@/lib/api/entities/activity";
import { IconWorld, IconHome, IconLock, IconMail } from "@tabler/icons-vue";
const { t } = useI18n();
defineProps<{ status: Activity }>(); defineProps<{ status: Activity }>();
const statusScopeKey = ({ visibility }: Activity) => {
switch (visibility) {
case "direct":
return "status.visibility.directMessage";
case "private":
return "status.visibility.followersOnly";
case "unlisted":
return "status.visibility.unlisted";
case "public":
return "status.visibility.public";
}
};
const statusScopeIcon = ({ visibility }: Activity) => {
switch (visibility) {
case "direct":
return IconMail
case "private":
return IconLock
case "unlisted":
return IconHome
case "public":
return IconWorld
}
}
</script> </script>
<template> <template>
@ -12,8 +41,8 @@ defineProps<{ status: Activity }>();
class="rounded-full m-2" class="rounded-full m-2"
:src="status.account.avatar" :src="status.account.avatar"
width="64" width="64"
alt="Avatar for {{ status.account.acct }}" :alt="t('status.avatar', { name: status.account.acct })"
title="Avatar for {{ status.account.acct }}" :title="t('status.avatar', { name: status.account.acct })"
/> />
</RouterLink> </RouterLink>
<div class="flex flex-col my-1"> <div class="flex flex-col my-1">
@ -29,11 +58,10 @@ defineProps<{ status: Activity }>();
</div> </div>
<div class="my-1 flex flex-row"> <div class="my-1 flex flex-row">
<span> <span>
<span title="{t(statusScopeKey(status))}" aria-hidden="true"> <span :title="t(statusScopeKey(status))" aria-hidden="true">
<!-- <StatusScopeIcon status="{status}" /> --> <component :is="statusScopeIcon(status)" />
Public
</span> </span>
<span class="sr-only">{t(statusScopeKey(status))}</span> <span class="sr-only">{{ t(statusScopeKey(status)) }}</span>
</span> </span>
<RouterLink :to="`/@${status.account.acct}/statuses/${status.id}`"> <RouterLink :to="`/@${status.account.acct}/statuses/${status.id}`">
{humanizeDuration(time)} {humanizeDuration(time)}

35
src/i18n.ts Normal file
View file

@ -0,0 +1,35 @@
import { nextTick } from "vue";
import { createI18n } from "vue-i18n";
import en from "./locale/en.yaml";
export const supportedLocales = ["en", "en-PR"];
export const i18n = createI18n({
legacy: false,
locale: "en",
messages: {
en: en,
},
});
export function setLanguage(locale: string) {
// @ts-ignore
i18n.global.locale.value = locale;
document.querySelector("html")!.setAttribute("lang", locale);
}
export async function loadLocale(locale: string) {
// Check if the locale is already loaded. If not, return
// @ts-ignore
if (i18n.global.availableLocales.indexOf(locale) !== -1) return;
if (supportedLocales.indexOf(locale) === -1) throw `${locale} is not a valid locale`;
const messages = await locales[locale as keyof typeof locales]();
i18n.global.setLocaleMessage(locale, messages.default);
return nextTick();
}
const locales = {
"en-PR": () => import("./locale/en.pirate.yaml"),
};

90
src/lib/api/entities/account.ts
View file

@ -1,48 +1,48 @@
import type { CustomEmoji } from "./custom_emoji"; import type { CustomEmoji } from "./custom_emoji";
export interface Account { export interface Account {
id: string; id: string;
/** Username, not including domain */ /** Username, not including domain */
username: string; username: string;
/** Webfinger account URI */ /** Webfinger account URI */
acct: string; acct: string;
/** The user's profile page */ /** The user's profile page */
url: string; url: string;
/** The user's nickname/display name */ /** The user's nickname/display name */
display_name: string; display_name: string;
/** The user's bio */ /** The user's bio */
note: string; note: string;
/** The user's avatar URL */ /** The user's avatar URL */
avatar: string; avatar: string;
/** The user's avatar URL as a static image. Same as `avatar` if the avatar is not animated */ /** The user's avatar URL as a static image. Same as `avatar` if the avatar is not animated */
avatar_static: string; avatar_static: string;
/** The user's header URL */ /** The user's header URL */
header: string; header: string;
/** The user's header URL as a static image. Same as `header` if the header is not animated */ /** The user's header URL as a static image. Same as `header` if the header is not animated */
header_static: string; header_static: string;
/** Whether the account manually approves follow requests */ /** Whether the account manually approves follow requests */
locked: boolean; locked: boolean;
/** Additional metadata attached to a profile as name-value pairs */ /** Additional metadata attached to a profile as name-value pairs */
fields: Field[]; fields: Field[];
/** Custom emoji entities to be used when rendering the profile */ /** Custom emoji entities to be used when rendering the profile */
emojis: CustomEmoji[]; emojis: CustomEmoji[];
/** Indicates that the account may perform automated actions, may not be monitored, or identifies as a robot */ /** Indicates that the account may perform automated actions, may not be monitored, or identifies as a robot */
bot: boolean; bot: boolean;
/** When the account was created */ /** When the account was created */
created_at: string; created_at: string;
/** When the most recent status was posted */ /** When the most recent status was posted */
last_status_at: string | null; last_status_at: string | null;
/** How many statuses are attached to this account */ /** How many statuses are attached to this account */
statuses_count: number; statuses_count: number;
/** The reported followers of this profile */ /** The reported followers of this profile */
followers_count: number; followers_count: number;
/** The reported follows of this profile */ /** The reported follows of this profile */
following_count: number; following_count: number;
} }
export interface Field { export interface Field {
/** The key of a given field’s key-value pair */ /** The key of a given field’s key-value pair */
name: string; name: string;
/** The value associated with the name key */ /** The value associated with the name key */
value: string; value: string;
} }

32
src/locale/en.pirate.yaml Normal file
View file

@ -0,0 +1,32 @@
status:
avatar: "{name}'s mugshot"
characterCount: "{count} character | {count} characters"
showContent: "Show treasure ({@:status.characterCount})"
hideContent: "Hide treasure ({@:status.characterCount})"
visibility:
directMessage: Direct bottle
followersOnly: Only shown to their mateys
unlisted: Quietly thrown in the sea
public: Free as the wind
navbar:
homeTimeine: Yar friends' bottles
localTimeline: Ship's bottles
bubbleTimeline: Fleet's bottles
globalTimeline: The seven seas
settings: Yar pref'rences
login: Report fer duty
logout: Go to sleep
settings:
darkTheme: Like the moon's out
lightTheme: Like the sun's out
sidebar:
postbox:
placeholder: What be happening on deck?
postButton: Roll up an' send
directMessage: Direct bottle
followersOnly: Only send to yer mateys
unlisted: Quietly throw in the sea
public: Post free as the wind
emojiButton: Draw lil' faces
pollButton: Start a vote
fileButton: Draw images

32
src/locale/en.yaml Normal file
View file

@ -0,0 +1,32 @@
status:
avatar: "{name}'s avatar"
characterCount: "{count} character | {count} characters"
showContent: "Show content ({@:status.characterCount})"
hideContent: "Hide content ({@:status.characterCount})"
visibility:
directMessage: Direct message
followersOnly: Followers only
unlisted: Unlisted
public: Public
navbar:
homeTimeine: Home timeline
localTimeline: Local timeline
bubbleTimeline: Bubble timeline
globalTimeline: Global timeline
settings: Settings
login: Log in
logout: Log out
settings:
darkTheme: Dark theme
lightTheme: Light theme
sidebar:
postbox:
placeholder: What's going on?
postButton: Post
directMessage: Direct message
followersOnly: Followers only
unlisted: Unlisted
public: Public
emojiButton: Emoji
pollButton: Create poll
fileButton: Attach a file

2
src/main.ts
View file

@ -2,6 +2,7 @@ import "./assets/style.css";
import { createApp } from "vue"; import { createApp } from "vue";
import { createPinia } from "pinia"; import { createPinia } from "pinia";
import { i18n } from "./i18n";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
@ -10,5 +11,6 @@ const app = createApp(App);
app.use(createPinia()); app.use(createPinia());
app.use(router); app.use(router);
app.use(i18n);
app.mount("#app"); app.mount("#app");

36
src/stores/application.ts
View file

@ -6,24 +6,24 @@ import { ref } from "vue";
const localStorageKey = "vulpine-oauth-app"; const localStorageKey = "vulpine-oauth-app";
export const useAppStore = defineStore("oauth-app", () => { export const useAppStore = defineStore("oauth-app", () => {
const json = localStorage.getItem(localStorageKey) const json = localStorage.getItem(localStorageKey);
const app = ref<Application>(json ? JSON.parse(json) : undefined); const app = ref<Application>(json ? JSON.parse(json) : undefined);
async function getApp() { async function getApp() {
if (app.value) return app.value; if (app.value) return app.value;
const resp = await apiFetch<Application>("/api/v1/apps", { const resp = await apiFetch<Application>("/api/v1/apps", {
method: "POST", method: "POST",
body: { body: {
client_name: "vulpine-fe", client_name: "vulpine-fe",
redirect_uris: `${window.location.origin}/auth/callback`, redirect_uris: `${window.location.origin}/auth/callback`,
scopes: "read write follow push", scopes: "read write follow push",
} },
}) });
app.value = resp; app.value = resp;
localStorage.setItem(localStorageKey, JSON.stringify(resp)); localStorage.setItem(localStorageKey, JSON.stringify(resp));
return app.value; return app.value;
} }
return { app, getApp } return { app, getApp };
}) });

1
src/views/StatusView.vue
View file

@ -35,6 +35,7 @@ watch(
}, },
); );
</script> </script>
<template> <template>
<div v-if="error">Failed to load: {{ error }}</div> <div v-if="error">Failed to load: {{ error }}</div>
<FwbSpinner v-else-if="!data" size="10" /> <FwbSpinner v-else-if="!data" size="10" />

24
tailwind.config.js
View file

@ -1,14 +1,14 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
darkMode: "class", darkMode: "class",
content: [ content: [
"./index.html", "./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}", "./src/**/*.{vue,js,ts,jsx,tsx}",
'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}', "node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}",
'node_modules/flowbite/**/*.{js,jsx,ts,tsx}', "node_modules/flowbite/**/*.{js,jsx,ts,tsx}",
], ],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [import('flowbite/plugin')], plugins: [import("flowbite/plugin")],
} };

22
tsconfig.app.json
View file

@ -1,13 +1,13 @@
{ {
"extends": "@vue/tsconfig/tsconfig.dom.json", "extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"], "exclude": ["src/**/__tests__/*"],
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"noEmit": true, "noEmit": true,
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./src/*"] "@/*": ["./src/*"]
} }
} }
} }

18
tsconfig.json
View file

@ -1,11 +1,11 @@
{ {
"files": [], "files": [],
"references": [ "references": [
{ {
"path": "./tsconfig.node.json" "path": "./tsconfig.node.json"
}, },
{ {
"path": "./tsconfig.app.json" "path": "./tsconfig.app.json"
} }
] ]
} }

30
tsconfig.node.json
View file

@ -1,17 +1,17 @@
{ {
"extends": "@tsconfig/node18/tsconfig.json", "extends": "@tsconfig/node18/tsconfig.json",
"include": [ "include": [
"vite.config.*", "vite.config.*",
"vitest.config.*", "vitest.config.*",
"cypress.config.*", "cypress.config.*",
"nightwatch.conf.*", "nightwatch.conf.*",
"playwright.config.*" "playwright.config.*"
], ],
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"noEmit": true, "noEmit": true,
"module": "ESNext", "module": "ESNext",
"moduleResolution": "Bundler", "moduleResolution": "Bundler",
"types": ["node"] "types": ["node"]
} }
} }

3
vite.config.ts
View file

@ -2,13 +2,14 @@ import { fileURLToPath, URL } from "node:url";
import { loadEnv, defineConfig } from "vite"; import { loadEnv, defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"; import vue from "@vitejs/plugin-vue";
import yaml from "@modyfi/vite-plugin-yaml";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig(({ mode }) => { export default defineConfig(({ mode }) => {
const { INSTANCE } = loadEnv(mode, process.cwd(), ""); const { INSTANCE } = loadEnv(mode, process.cwd(), "");
return { return {
plugins: [vue()], plugins: [vue(), yaml()],
resolve: { resolve: {
alias: { alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)), "@": fileURLToPath(new URL("./src", import.meta.url)),