commit
2f7ea4a99e
@ -0,0 +1,24 @@ |
||||
# 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? |
||||
@ -0,0 +1,10 @@ |
||||
# RBlockNote and NextGraph integration demo |
||||
|
||||
``` |
||||
npm i |
||||
npm run dev |
||||
``` |
||||
|
||||
you need to create a wallet at https://nextgraph.eu |
||||
|
||||
Standalone webapps do not work on Safari (yet). |
||||
@ -0,0 +1,28 @@ |
||||
import js from '@eslint/js' |
||||
import globals from 'globals' |
||||
import reactHooks from 'eslint-plugin-react-hooks' |
||||
import reactRefresh from 'eslint-plugin-react-refresh' |
||||
import tseslint from 'typescript-eslint' |
||||
|
||||
export default tseslint.config( |
||||
{ ignores: ['dist'] }, |
||||
{ |
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended], |
||||
files: ['**/*.{ts,tsx}'], |
||||
languageOptions: { |
||||
ecmaVersion: 2020, |
||||
globals: globals.browser, |
||||
}, |
||||
plugins: { |
||||
'react-hooks': reactHooks, |
||||
'react-refresh': reactRefresh, |
||||
}, |
||||
rules: { |
||||
...reactHooks.configs.recommended.rules, |
||||
'react-refresh/only-export-components': [ |
||||
'warn', |
||||
{ allowConstantExport: true }, |
||||
], |
||||
}, |
||||
}, |
||||
) |
||||
@ -0,0 +1,12 @@ |
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>BlockNote + NextGraph</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"></div> |
||||
<script type="module" src="/src/main.tsx"></script> |
||||
</body> |
||||
</html> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,43 @@ |
||||
{ |
||||
"name": "blocknote", |
||||
"private": true, |
||||
"version": "0.0.0", |
||||
"type": "module", |
||||
"scripts": { |
||||
"dev": "vite", |
||||
"build": "tsc -b && vite build", |
||||
"lint": "eslint .", |
||||
"preview": "vite preview" |
||||
}, |
||||
"dependencies": { |
||||
"@blocknote/core": "^0.31.1", |
||||
"@blocknote/mantine": "^0.31.1", |
||||
"@blocknote/react": "^0.31.1", |
||||
"@heroicons/react": "^2.2.0", |
||||
"lib0": "^0.2.108", |
||||
"nextgraph-react": "^0.1.1-alpha.3", |
||||
"nextgraphweb": "^0.1.1-alpha.4", |
||||
"react": "^19.1.0", |
||||
"react-dom": "^19.1.0", |
||||
"react-router": "^7.6.1", |
||||
"react-router-dom": "^7.6.1", |
||||
"tailwindcss": "^4.1.8", |
||||
"yjs": "^13.6.27" |
||||
}, |
||||
"devDependencies": { |
||||
"@eslint/js": "^9.25.0", |
||||
"@types/react": "^19.1.2", |
||||
"@types/react-dom": "^19.1.2", |
||||
"@vitejs/plugin-react": "^4.4.1", |
||||
"autoprefixer": "^10.4.21", |
||||
"eslint": "^9.25.0", |
||||
"eslint-plugin-react-hooks": "^5.2.0", |
||||
"eslint-plugin-react-refresh": "^0.4.19", |
||||
"globals": "^16.0.0", |
||||
"postcss": "^8.5.3", |
||||
"tailwindcss": "^3.4.17", |
||||
"typescript": "~5.8.3", |
||||
"typescript-eslint": "^8.30.1", |
||||
"vite": "^6.3.5" |
||||
} |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
export default { |
||||
plugins: { |
||||
tailwindcss: {}, |
||||
autoprefixer: {}, |
||||
}, |
||||
} |
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,53 @@ |
||||
.fullscreen { |
||||
top: 40px; |
||||
position:relative; |
||||
} |
||||
|
||||
.doc { |
||||
height: 100vh; |
||||
} |
||||
|
||||
.centered { |
||||
/*max-width: 1280px;*/ |
||||
margin: 0 auto; |
||||
padding: 0rem; |
||||
text-align: center; |
||||
width: fit-content; |
||||
} |
||||
|
||||
.contact { |
||||
width: 300px; |
||||
height: 300px; |
||||
background-color: #f6f6f6; |
||||
position: relative; |
||||
overflow-wrap: anywhere; |
||||
} |
||||
|
||||
.name { |
||||
padding: 5px; |
||||
height: 35px; |
||||
overflow: hidden; |
||||
background-color: #e0e0e0d0; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.email-logo { |
||||
|
||||
} |
||||
|
||||
.email { |
||||
padding: 5px; |
||||
overflow-wrap: anywhere; |
||||
} |
||||
|
||||
input { |
||||
margin: 5px; |
||||
} |
||||
|
||||
.button { |
||||
background-color:rgb(73, 114, 165); |
||||
color:white; |
||||
cursor:pointer; |
||||
} |
||||
@ -0,0 +1,28 @@ |
||||
import React, { FunctionComponent } from 'react'; |
||||
import { Header } from './Header'; |
||||
import { Doc } from './Doc'; |
||||
import { Home } from './Home'; |
||||
import { NextGraphAuthMethod } from './reactMethods'; |
||||
import { BrowserRouter, Routes, Route } from "react-router"; |
||||
|
||||
|
||||
import './App.css' |
||||
import "./styles.css"; |
||||
|
||||
const App: FunctionComponent = () => { |
||||
|
||||
return ( |
||||
<div className="App"> |
||||
<NextGraphAuthMethod> |
||||
<Header /> |
||||
<BrowserRouter> |
||||
<Routes> |
||||
<Route index element={<Home />} /> |
||||
<Route path=":nuri" element={<Doc />} /> |
||||
</Routes> |
||||
</BrowserRouter> |
||||
</NextGraphAuthMethod> |
||||
</div> |
||||
) |
||||
} |
||||
export default App |
||||
@ -0,0 +1,51 @@ |
||||
import "@blocknote/core/fonts/inter.css"; |
||||
import { default as React, FunctionComponent, useMemo } from "react"; |
||||
import { BlockNoteView } from "@blocknote/mantine"; |
||||
import "@blocknote/mantine/style.css"; |
||||
import { useCreateBlockNote } from "@blocknote/react"; |
||||
import * as Y from "yjs"; |
||||
import { NextGraphProvider } from "./provider"; |
||||
import { useNextGraphAuth } from './reactMethods'; |
||||
import { useParams } from "react-router"; |
||||
|
||||
export const Doc: FunctionComponent = () => { |
||||
const { session } = useNextGraphAuth(); |
||||
const params = useParams(); |
||||
|
||||
const [doc, provider] = useMemo(() => { |
||||
const doc = new Y.Doc(); |
||||
const provider = new NextGraphProvider(params.nuri, doc, session); |
||||
return [doc, provider]; |
||||
}, [params, session]); |
||||
|
||||
const editor = useCreateBlockNote({ |
||||
collaboration: { |
||||
// The Yjs Provider responsible for transporting updates:
|
||||
provider, |
||||
// Where to store BlockNote data in the Y.Doc:
|
||||
fragment: doc.getXmlFragment('document-store'), |
||||
// Information (name and color) for this user:
|
||||
user: { |
||||
name: "My Username", |
||||
color: "#ff0000", |
||||
}, |
||||
// When to show user labels on the collaboration cursor. Set by default to
|
||||
// "activity" (show when the cursor moves), but can also be set to "always".
|
||||
showCursorLabels: "activity" |
||||
}, |
||||
}, [params, session]) |
||||
|
||||
// Creates a new editor instance.
|
||||
|
||||
if (!session.sessionId) return <></>; |
||||
|
||||
// Renders the editor instance using a React component.
|
||||
return ( |
||||
<div className="doc"> |
||||
<div className="fullscreen"> |
||||
<BlockNoteView editor={editor} /> |
||||
</div> |
||||
</div> |
||||
); |
||||
|
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
import { FunctionComponent } from "react"; |
||||
import { useNextGraphAuth } from "./reactMethods"; |
||||
|
||||
export const Header: FunctionComponent = () => { |
||||
|
||||
const { session, login, logout } = useNextGraphAuth(); |
||||
|
||||
return ( |
||||
<div> |
||||
|
||||
{session.sessionId ? ( |
||||
// If the session is logged in
|
||||
<div className="p-1 text-white text-center fixed top-0 left-0 right-0" style={{zIndex:1000, height:'36px', backgroundColor:'rgb(73, 114, 165)'}}> |
||||
You are logged in. |
||||
{/* <span className="font-bold clickable" onClick={logout}> Log out</span> */} |
||||
</div> |
||||
) : ( |
||||
// If the session is not logged in
|
||||
<> |
||||
<h1 className="text-2xl text-center mb-10">Welcome to BlockNote + NextGraph demo</h1> |
||||
<div className="text-center text-xl p-1 text-white fixed top-0 left-0 right-0" style={{zIndex:1000, height:'36px', backgroundColor:'rgb(73, 114, 165)'}}> |
||||
Please <span className="font-bold clickable" onClick={login}> Log in</span> |
||||
</div> |
||||
|
||||
<div className="text-center max-w-6xl lg:px-8 mx-auto px-4 text-blue-800"> |
||||
|
||||
<svg onClick={login} |
||||
onKeyUp={login} className="cursor-pointer mt-10 h-16 w-16 mx-auto" data-slot="icon" fill="none" strokeWidth="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> |
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25"></path> |
||||
</svg> |
||||
|
||||
<button |
||||
onClick={login} |
||||
onKeyUp={login} |
||||
className="select-none ml-0 mt-2 mb-10 text-white bg-blue-800 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55" |
||||
> |
||||
Please Log in |
||||
</button> |
||||
</div> |
||||
</> |
||||
)} |
||||
</div> |
||||
); |
||||
}; |
||||
@ -0,0 +1,26 @@ |
||||
import { FunctionComponent } from "react"; |
||||
import { useNextGraphAuth } from "./reactMethods"; |
||||
import { DocumentPlusIcon } from '@heroicons/react/24/outline' |
||||
import { useNavigate } from "react-router-dom"; |
||||
|
||||
export const Home: FunctionComponent = () => { |
||||
const { session } = useNextGraphAuth(); |
||||
const navigate = useNavigate(); |
||||
|
||||
const create = () => { |
||||
session.ng.doc_create(session.sessionId, "YXml","post:blocknote","store").then((nuri) => { |
||||
console.log("new doc created",nuri) |
||||
navigate("/"+nuri); |
||||
}); |
||||
}; |
||||
|
||||
if (!session.sessionId) return <></>; |
||||
|
||||
return <> |
||||
<div className="centered"> |
||||
<div className="flex flex-wrap justify-center gap-5 mt-10 mb-10"> |
||||
<button onClick={create} className="button"><DocumentPlusIcon className="size-7 inline"/> Create Document</button> |
||||
</div> |
||||
</div> |
||||
</>; |
||||
}; |
||||
@ -0,0 +1,36 @@ |
||||
/* |
||||
* Base64URL-ArrayBuffer |
||||
* https://github.com/herrjemand/Base64URL-ArrayBuffer
|
||||
* |
||||
* Copyright (c) 2017 Yuriy Ackermann <ackermann.yuriy@gmail.com> |
||||
* Copyright (c) 2012 Niklas von Hertzen |
||||
* Licensed under the MIT license. |
||||
*
|
||||
*/ |
||||
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_"; |
||||
|
||||
// Use a lookup table to find the index.
|
||||
var lookup = new Uint8Array(256); |
||||
for (var i = 0; i < chars.length; i++) { |
||||
lookup[chars.charCodeAt(i)] = i; |
||||
} |
||||
|
||||
export const encode = function(arraybuffer) { |
||||
var bytes = new Uint8Array(arraybuffer), |
||||
i, len = bytes.length, base64 = ""; |
||||
|
||||
for (i = 0; i < len; i+=3) { |
||||
base64 += chars[bytes[i] >> 2]; |
||||
base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)]; |
||||
base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)]; |
||||
base64 += chars[bytes[i + 2] & 63]; |
||||
} |
||||
|
||||
if ((len % 3) === 2) { |
||||
base64 = base64.substring(0, base64.length - 1); |
||||
} else if (len % 3 === 1) { |
||||
base64 = base64.substring(0, base64.length - 2); |
||||
} |
||||
|
||||
return base64; |
||||
}; |
||||
@ -0,0 +1,3 @@ |
||||
@tailwind base; |
||||
@tailwind components; |
||||
@tailwind utilities; |
||||
@ -0,0 +1,10 @@ |
||||
//import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client' |
||||
import './index.css' |
||||
import App from './App.tsx' |
||||
|
||||
createRoot(document.getElementById('app')!).render( |
||||
// <StrictMode>
|
||||
<App /> |
||||
// </StrictMode>,
|
||||
) |
||||
@ -0,0 +1,93 @@ |
||||
import { ObservableV2 } from 'lib0/observable' |
||||
import { encode } from "./base64url"; |
||||
import * as Y from "yjs"; |
||||
|
||||
const digest_to_string = function(digest) { |
||||
let copy = [...digest.Blake3Digest32]; |
||||
copy.reverse(); |
||||
copy.push(0); |
||||
let buffer = Uint8Array.from(copy); |
||||
return encode(buffer.buffer); |
||||
}; |
||||
|
||||
export class NextGraphProvider extends ObservableV2 { |
||||
/** |
||||
* @param {string} nuri |
||||
* @param {Y.Doc} doc |
||||
* @param {Object} session |
||||
**/ |
||||
constructor (nuri, doc, session) { |
||||
super() |
||||
if (!session.ng) return; |
||||
this.nuri = nuri |
||||
this.doc = doc |
||||
this.session = session |
||||
this.heads = []; |
||||
this.shouldConnect = false |
||||
|
||||
/** |
||||
* Listens to Yjs updates and sends them to NextGraph |
||||
* @param {Uint8Array} update |
||||
* @param {any} origin |
||||
*/ |
||||
this._updateHandler = async (update, origin) => { |
||||
if (!origin.local) { |
||||
try { |
||||
await this.session.ng.discrete_update(this.session.sessionId, update, this.heads, "YXml", this.nuri); |
||||
} catch (e){ |
||||
console.log(e); |
||||
} |
||||
} |
||||
} |
||||
this.doc.on('update', this._updateHandler) |
||||
this.destroy = this.destroy.bind(this) |
||||
this.doc.on('destroy', this.destroy) |
||||
this.connect() |
||||
} |
||||
|
||||
destroy () { |
||||
this.disconnect() |
||||
//this.awareness.off('update', this._awarenessUpdateHandler)
|
||||
this.doc.off('update', this._updateHandler) |
||||
super.destroy() |
||||
} |
||||
|
||||
disconnect () { |
||||
this.shouldConnect = false |
||||
// TODO unsub
|
||||
} |
||||
|
||||
connect () { |
||||
console.log("connecting to doc",this.nuri.substring(0,53)) |
||||
if (this.shouldConnect) return; |
||||
|
||||
this.shouldConnect = true |
||||
this.session.ng.doc_subscribe(this.nuri.substring(0,53), this.session.sessionId,
|
||||
(response) => { |
||||
//console.log("GOT APP RESPONSE", response);
|
||||
if (response.V0.TabInfo) { |
||||
} else if (response.V0.State) { |
||||
if (response.V0.State.discrete) { |
||||
Y.applyUpdate(this.doc, response.V0.State.discrete.YXml, {local:true}) |
||||
} |
||||
for (const head of response.V0.State.heads) { |
||||
let commitId = digest_to_string(head); |
||||
this.heads.push(commitId); |
||||
} |
||||
} else if (response.V0.Patch) { |
||||
if (response.V0.Patch.discrete) { |
||||
Y.applyUpdate(this.doc, response.V0.Patch.discrete.YXml, {local:true}) |
||||
} |
||||
let i = this.heads.length; |
||||
while (i--) { |
||||
if (response.V0.Patch.commit_info.past.includes(this.heads[i])) { |
||||
this.heads.splice(i, 1); |
||||
} |
||||
} |
||||
this.heads.push(response.V0.Patch.commit_id); |
||||
|
||||
} |
||||
} |
||||
); // TODO .then keep unsub
|
||||
} |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
import { createNextGraphAuthMethod } from "nextgraph-react"; |
||||
|
||||
const methods = createNextGraphAuthMethod(); |
||||
|
||||
export const { NextGraphAuthMethod, useNextGraphAuth } = methods; |
||||
|
||||
@ -0,0 +1,226 @@ |
||||
/* |
||||
// Copyright (c) 2022-2025 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||
// All rights reserved. |
||||
// Licensed under the Apache License, Version 2.0 |
||||
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||
// at your option. All files in the project carrying such |
||||
// notice may not be copied, modified, or distributed except |
||||
// according to those terms. |
||||
*/ |
||||
|
||||
|
||||
/** To format paths, like Settings > Wallet > Generate Wallet QR */ |
||||
.path { |
||||
font-family: monospace; |
||||
background-color: rgba(73, 114, 165, 0.1); |
||||
} |
||||
/* .splash-loaded { |
||||
display: none; |
||||
} */ |
||||
|
||||
|
||||
.toggle * { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.error-popover h3 { |
||||
text-align: center; |
||||
color: rgb(200 30 30); |
||||
} |
||||
.error-popover > div:first-child { |
||||
background-color: rgb(200 30 30); |
||||
} |
||||
.error-popover > div:first-child > h3 { |
||||
color: white; |
||||
} |
||||
|
||||
|
||||
|
||||
.logo { |
||||
padding: 1.5em; |
||||
will-change: filter; |
||||
transition: 0.75s; |
||||
padding-bottom: 1em; |
||||
} |
||||
|
||||
@keyframes pulse-logo-color { |
||||
0%, |
||||
100% { |
||||
fill: rgb(73, 114, 165); |
||||
stroke: rgb(73, 114, 165); |
||||
} |
||||
50% { |
||||
/* Mid-transition color */ |
||||
stroke: #bbb; |
||||
fill: #bbb; |
||||
} |
||||
} |
||||
|
||||
.logo-pulse path { |
||||
animation: pulse-logo-color 2s infinite; |
||||
animation-timing-function: cubic-bezier(0.65, 0.01, 0.59, 0.83); |
||||
} |
||||
|
||||
.logo-gray path { |
||||
fill: #bbb; |
||||
stroke: #bbb; |
||||
} |
||||
|
||||
.logo-blue path { |
||||
fill: rgb(73, 114, 165); |
||||
stroke: rgb(73, 114, 165); |
||||
} |
||||
|
||||
.jse-absolute-popup-content { |
||||
left: 0 !important; |
||||
} |
||||
|
||||
.container3 { |
||||
margin: 0; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
text-align: center; |
||||
} |
||||
|
||||
.container3 aside { |
||||
width: 20rem !important; |
||||
} |
||||
|
||||
div[role="alert"] div { |
||||
display: block; |
||||
} |
||||
|
||||
.spinner-overlay button { |
||||
display: none; |
||||
} |
||||
|
||||
.choice-button { |
||||
min-width: 305px; |
||||
} |
||||
|
||||
.clickable { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.row { |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.deactivated-menu > svg { |
||||
color: rgb(156 163 175) !important; |
||||
} |
||||
|
||||
:root { |
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif; |
||||
font-size: 16px; |
||||
line-height: 24px; |
||||
font-weight: 400; |
||||
|
||||
color: #0f0f0f; |
||||
background-color: white; |
||||
|
||||
font-synthesis: none; |
||||
text-rendering: optimizeLegibility; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
-webkit-text-size-adjust: 100%; |
||||
} |
||||
|
||||
body { |
||||
margin: 0; |
||||
display: flex; |
||||
place-items: center; |
||||
min-width: 305px; |
||||
min-height: 100vh; |
||||
} |
||||
|
||||
#app { |
||||
width: 100%; |
||||
} |
||||
/* #app { |
||||
/*max-width: 1280px; |
||||
margin: 0 auto; |
||||
padding: 0rem; |
||||
text-align: center; |
||||
} */ |
||||
|
||||
/* .container2 { |
||||
padding-top: 10vh; |
||||
} */ |
||||
|
||||
a { |
||||
font-weight: 500; |
||||
color: #646cff; |
||||
text-decoration: inherit; |
||||
} |
||||
|
||||
a:hover { |
||||
color: #535bf2; |
||||
} |
||||
|
||||
.toast { |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
z-index: 49; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input, |
||||
button { |
||||
border-radius: 8px; |
||||
border: 1px solid transparent; |
||||
padding: 0.6em 1.2em; |
||||
font-size: 1em; |
||||
font-weight: 500; |
||||
font-family: inherit; |
||||
color: #0f0f0f; |
||||
background-color: #ffffff; |
||||
transition: border-color 0.25s; |
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
button { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
button:hover { |
||||
border-color: #396cd8; |
||||
} |
||||
button:active { |
||||
border-color: #396cd8; |
||||
background-color: #e8e8e8; |
||||
} |
||||
|
||||
/* input, |
||||
button { |
||||
outline: none; |
||||
} */ |
||||
|
||||
button:focus, |
||||
button:focus-visible { |
||||
outline: 4px auto -webkit-focus-ring-color; |
||||
} |
||||
|
||||
/* @media (prefers-color-scheme: dark) { |
||||
:root { |
||||
color: #f6f6f6; |
||||
background-color: #2f2f2f; |
||||
} |
||||
|
||||
a:hover { |
||||
color: #24c8db; |
||||
} |
||||
|
||||
input, |
||||
button { |
||||
color: #ffffff; |
||||
background-color: #0f0f0f98; |
||||
} |
||||
button:active { |
||||
background-color: #0f0f0f69; |
||||
} |
||||
} */ |
||||
@ -0,0 +1 @@ |
||||
/// <reference types="vite/client" />
|
||||
@ -0,0 +1,12 @@ |
||||
/** @type {import('tailwindcss').Config} */ |
||||
export default { |
||||
content: [ |
||||
"./index.html", |
||||
"./src/**/*.{js,jsx,ts,tsx}" |
||||
], |
||||
theme: { |
||||
extend: {}, |
||||
}, |
||||
plugins: [], |
||||
} |
||||
|
||||
@ -0,0 +1,26 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", |
||||
"target": "ES2020", |
||||
"useDefineForClassFields": true, |
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"], |
||||
"module": "ESNext", |
||||
"skipLibCheck": true, |
||||
|
||||
/* Bundler mode */ |
||||
"moduleResolution": "bundler", |
||||
"allowImportingTsExtensions": true, |
||||
"moduleDetection": "force", |
||||
"noEmit": true, |
||||
"jsx": "react-jsx", |
||||
|
||||
/* Linting */ |
||||
"strict": true, |
||||
"noUnusedLocals": true, |
||||
"noUnusedParameters": true, |
||||
"erasableSyntaxOnly": true, |
||||
"noFallthroughCasesInSwitch": true, |
||||
"noUncheckedSideEffectImports": true |
||||
}, |
||||
"include": ["src"] |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
{ |
||||
"files": [], |
||||
"references": [ |
||||
{ "path": "./tsconfig.app.json" }, |
||||
{ "path": "./tsconfig.node.json" } |
||||
] |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", |
||||
"target": "ES2022", |
||||
"lib": ["ES2023"], |
||||
"module": "ESNext", |
||||
"skipLibCheck": true, |
||||
|
||||
/* Bundler mode */ |
||||
"moduleResolution": "bundler", |
||||
"allowImportingTsExtensions": true, |
||||
"verbatimModuleSyntax": true, |
||||
"moduleDetection": "force", |
||||
"noEmit": true, |
||||
|
||||
/* Linting */ |
||||
"strict": true, |
||||
"noUnusedLocals": true, |
||||
"noUnusedParameters": true, |
||||
"erasableSyntaxOnly": true, |
||||
"noFallthroughCasesInSwitch": true, |
||||
"noUncheckedSideEffectImports": true |
||||
}, |
||||
"include": ["vite.config.ts"] |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import { defineConfig } from 'vite' |
||||
import react from '@vitejs/plugin-react' |
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({ |
||||
plugins: [react()], |
||||
}) |
||||
Loading…
Reference in new issue