yisroelbaum/TIDE
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge frontend-scaffold

Browse source
This commit is contained in:
Yisroel Baum 2026-05-06 22:47:14 +03:00
commit 7b00fa5f68
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
27 changed files with 8376 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/blog_portal/.gitignore vendored Normal file
View file

@ -0,0 +1,39 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
.eslintcache
# Cypress
/cypress/videos/
/cypress/screenshots/
# Vitest
__screenshots__/
# Vite
*.timestamp-*-*.mjs

10
frontend/blog_portal/.oxlintrc.json Normal file
View file

@ -0,0 +1,10 @@
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
"env": {
"browser": true
},
"categories": {
"correctness": "error"
}
}

29
frontend/blog_portal/cypress.config.ts Normal file
View file

@ -0,0 +1,29 @@
import { defineConfig } from "cypress";
import { execSync } from "node:child_process";
import { resolve } from "node:path";
const backendDir = resolve(__dirname, "../../backend");
export default defineConfig({
e2e: {
baseUrl: "http://localhost:5173",
setupNodeEvents(on) {
on("task", {
"db:reset": function () {
execSync("php artisan migrate:fresh --force", {
cwd: backendDir,
stdio: "pipe",
});
return null;
},
"db:seed": function () {
execSync("php artisan db:seed --force", {
cwd: backendDir,
stdio: "pipe",
});
return null;
},
});
},
},
});

21
frontend/blog_portal/cypress/support/commands.ts Normal file
View file

@ -0,0 +1,21 @@
/// <reference types="cypress" />
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Cypress {
interface Chainable {
resetDb(): Chainable<null>;
seedDb(): Chainable<null>;
}
}
}
Cypress.Commands.add("resetDb", function () {
return cy.task<null>("db:reset");
});
Cypress.Commands.add("seedDb", function () {
return cy.task<null>("db:seed");
});
export {};

17
frontend/blog_portal/cypress/support/e2e.ts Normal file
View file

@ -0,0 +1,17 @@
// ***********************************************************
// This example support/e2e.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'

1
frontend/blog_portal/env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

26
frontend/blog_portal/eslint.config.ts Normal file
View file

@ -0,0 +1,26 @@
import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import pluginOxlint from 'eslint-plugin-oxlint'
import skipFormatting from 'eslint-config-prettier/flat'
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
export default defineConfigWithVueTs(
{
name: 'app/files-to-lint',
files: ['**/*.{vue,ts,mts,tsx}'],
},
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
...pluginVue.configs['flat/essential'],
vueTsConfigs.recommended,
...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
skipFormatting,
)

13
frontend/blog_portal/index.html Normal file
View file

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

7694
frontend/blog_portal/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

48
frontend/blog_portal/package.json Normal file
View file

@ -0,0 +1,48 @@
{
"name": "blog_portal",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "run-s lint:*",
"lint:oxlint": "oxlint . --fix",
"lint:eslint": "eslint . --fix --cache",
"format": "oxfmt src/",
"cypress:dev": "cypress open",
"cypress:run": "cypress run"
},
"dependencies": {
"pinia": "^3.0.4",
"vue": "^3.5.31",
"vue-router": "^5.0.4"
},
"devDependencies": {
"@tsconfig/node24": "^24.0.4",
"@types/node": "^24.12.0",
"@vitejs/plugin-vue": "^6.0.5",
"@vitejs/plugin-vue-jsx": "^5.1.5",
"@vue/eslint-config-typescript": "^14.7.0",
"@vue/tsconfig": "^0.9.1",
"cypress": "^15.13.1",
"eslint": "^10.1.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-oxlint": "~1.57.0",
"eslint-plugin-vue": "~10.8.0",
"jiti": "^2.6.1",
"npm-run-all2": "^8.0.4",
"oxfmt": "^0.42.0",
"oxlint": "~1.57.0",
"typescript": "~6.0.0",
"vite": "^8.0.3",
"vite-plugin-vue-devtools": "^8.1.1",
"vue-tsc": "^3.2.6"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
}
}

119
frontend/blog_portal/src/App.vue Normal file
View file

@ -0,0 +1,119 @@
<script setup lang="ts">
import AppHeader from "@/components/AppHeader.vue";
</script>
<template>
<div class="app">
<AppHeader />
<main class="app-main">
<router-view />
</main>
</div>
</template>
<style scoped>
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.app-main {
flex: 1;
min-width: 0;
padding: 24px;
max-width: 960px;
width: 100%;
margin: 0 auto;
}
</style>
<style>
:root {
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;
--color-text: #0a0a0a;
--color-secondary: #6b6b6b;
--color-border: #e5e5e5;
--color-accent: #0062ff;
--color-bg: #fff;
--color-button: #000;
--color-button-hover: #222;
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
}
* {
box-sizing: border-box;
}
a {
color: var(--color-accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
input,
button,
select,
textarea {
font: inherit;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
height: 36px;
padding: 0 12px;
border: 1px solid var(--color-border);
border-radius: 6px;
background: #fff;
color: var(--color-text);
}
input:focus {
outline: none;
border-color: #000;
}
button {
height: 36px;
padding: 0 16px;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-button);
color: #fff;
cursor: pointer;
}
button:hover:not(:disabled) {
background: var(--color-button-hover);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
button.secondary {
background: #fff;
color: var(--color-text);
}
button.secondary:hover:not(:disabled) {
background: #f5f5f5;
}
</style>

77
frontend/blog_portal/src/components/AppHeader.vue Normal file
View file

@ -0,0 +1,77 @@
<script setup lang="ts">
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
const auth = useAuthStore();
const router = useRouter();
async function handleLogout() {
await auth.logout();
router.push({ name: "home" });
}
</script>
<template>
<header class="app-header">
<div class="brand">
<router-link :to="{ name: 'home' }">TIDE</router-link>
</div>
<nav class="nav">
<template v-if="auth.user">
<router-link
:to="{
name: 'profile',
params: { displayName: auth.user.displayName },
}"
>
{{ auth.user.displayName }}
</router-link>
<button class="secondary" @click="handleLogout">Log out</button>
</template>
<template v-else>
<router-link :to="{ name: 'login' }">Log in</router-link>
<router-link :to="{ name: 'signup' }" class="signup-link"> Sign up </router-link>
</template>
</nav>
</header>
</template>
<style scoped>
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid var(--color-border);
background: #fff;
}
.brand a {
color: var(--color-text);
font-weight: 600;
font-size: 18px;
text-decoration: none;
}
.nav {
display: flex;
gap: 16px;
align-items: center;
}
.nav a {
color: var(--color-text);
}
.signup-link {
background: var(--color-button);
color: #fff !important;
padding: 6px 12px;
border-radius: 6px;
}
.signup-link:hover {
background: var(--color-button-hover);
text-decoration: none;
}
</style>

12
frontend/blog_portal/src/main.ts Normal file
View file

@ -0,0 +1,12 @@
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");

83
frontend/blog_portal/src/router/index.ts Normal file
View file

@ -0,0 +1,83 @@
import { createRouter, createWebHistory } from "vue-router";
import HomePage from "@/views/HomePage.vue";
import LoginPage from "@/views/LoginPage.vue";
import SignupPage from "@/views/SignupPage.vue";
import CheckEmailPage from "@/views/CheckEmailPage.vue";
import ConfirmEmailPage from "@/views/ConfirmEmailPage.vue";
import ProfilePage from "@/views/ProfilePage.vue";
import PostPage from "@/views/PostPage.vue";
import NewPostPage from "@/views/NewPostPage.vue";
import { useAuthStore } from "@/stores/auth";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{ path: "/", name: "home", component: HomePage },
{
path: "/login",
name: "login",
component: LoginPage,
beforeEnter: requireGuest,
},
{
path: "/signup",
name: "signup",
component: SignupPage,
beforeEnter: requireGuest,
},
{
path: "/check-email",
name: "check-email",
component: CheckEmailPage,
},
{
path: "/confirm-email",
name: "confirm-email",
component: ConfirmEmailPage,
beforeEnter: (to) => {
if (!to.query.token) return { name: "login" };
},
},
{
path: "/users/:displayName",
name: "profile",
component: ProfilePage,
props: true,
},
{
path: "/users/:displayName/posts/new",
name: "new-post",
component: NewPostPage,
props: true,
beforeEnter: requireAuth,
},
{
path: "/posts/:id",
name: "post",
component: PostPage,
props: true,
},
],
});
router.beforeEach(async () => {
const auth = useAuthStore();
if (!auth.checked) {
await auth.fetchMe();
}
auth.clearError();
});
async function requireGuest() {
const auth = useAuthStore();
if (!auth.checked) await auth.fetchMe();
if (auth.user) return { name: "home" };
}
async function requireAuth() {
const auth = useAuthStore();
if (!auth.checked) await auth.fetchMe();
if (!auth.user) return { name: "login" };
}
export default router;

37
frontend/blog_portal/src/stores/auth.ts Normal file
View file

@ -0,0 +1,37 @@
import { defineStore } from "pinia";
import { ref } from "vue";
export interface AuthUser {
id: number;
email: string;
displayName: string;
isAdmin: boolean;
}
export const useAuthStore = defineStore("auth", () => {
const user = ref<AuthUser | null>(null);
const checked = ref(false);
const error = ref<string | null>(null);
async function fetchMe(): Promise<boolean> {
checked.value = true;
return false;
}
async function logout(): Promise<void> {
user.value = null;
}
function clearError(): void {
error.value = null;
}
return {
user,
checked,
error,
fetchMe,
logout,
clearError,
};
});

7
frontend/blog_portal/src/views/CheckEmailPage.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts">
// CheckEmailPage - filled in by a later branch.
</script>
<template>
<section><h1>CheckEmailPage</h1></section>
</template>

7
frontend/blog_portal/src/views/ConfirmEmailPage.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts">
// ConfirmEmailPage - filled in by a later branch.
</script>
<template>
<section><h1>ConfirmEmailPage</h1></section>
</template>

22
frontend/blog_portal/src/views/HomePage.vue Normal file
View file

@ -0,0 +1,22 @@
<script setup lang="ts">
// Home page placeholder. Featured posts, recent posts and user
// search land here in a later branch.
</script>
<template>
<section class="home">
<h1>TIDE</h1>
<p class="lead">A blog. Sign up to start posting.</p>
</section>
</template>
<style scoped>
.home {
padding: 32px 0;
}
.lead {
color: var(--color-secondary);
font-size: 16px;
}
</style>

7
frontend/blog_portal/src/views/LoginPage.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts">
// LoginPage - filled in by a later branch.
</script>
<template>
<section><h1>LoginPage</h1></section>
</template>

7
frontend/blog_portal/src/views/NewPostPage.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts">
// NewPostPage - filled in by a later branch.
</script>
<template>
<section><h1>NewPostPage</h1></section>
</template>

7
frontend/blog_portal/src/views/PostPage.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts">
// PostPage - filled in by a later branch.
</script>
<template>
<section><h1>PostPage</h1></section>
</template>

7
frontend/blog_portal/src/views/ProfilePage.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts">
// ProfilePage - filled in by a later branch.
</script>
<template>
<section><h1>ProfilePage</h1></section>
</template>

7
frontend/blog_portal/src/views/SignupPage.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts">
// SignupPage - filled in by a later branch.
</script>
<template>
<section><h1>SignupPage</h1></section>
</template>

18
frontend/blog_portal/tsconfig.app.json Normal file
View file

@ -0,0 +1,18 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
// Extra safety for array and object lookups, but may have false positives.
"noUncheckedIndexedAccess": true,
// Path mapping for cleaner imports.
"paths": {
"@/*": ["./src/*"]
},
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
// Specified here to keep it out of the root directory.
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
}
}

14
frontend/blog_portal/tsconfig.json Normal file
View file

@ -0,0 +1,14 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
],
"compilerOptions": {
"ignoreDeprecations": "6.0"
}
}

27
frontend/blog_portal/tsconfig.node.json Normal file
View file

@ -0,0 +1,27 @@
// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
{
"extends": "@tsconfig/node24/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"playwright.config.*",
"eslint.config.*"
],
"compilerOptions": {
// Most tools use transpilation instead of Node.js's native type-stripping.
// Bundler mode provides a smoother developer experience.
"module": "preserve",
"moduleResolution": "bundler",
// Include Node.js types and avoid accidentally including other `@types/*` packages.
"types": ["node"],
// Disable emitting output during `vue-tsc --build`, which is used for type-checking only.
"noEmit": true,
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
// Specified here to keep it out of the root directory.
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
}
}

20
frontend/blog_portal/vite.config.ts Normal file
View file

@ -0,0 +1,20 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
vueDevTools(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})