theis.gaedigk/Cookbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

added more structure

Browse Source
This commit is contained in:
theis.gaedigk
2025-06-09 15:52:05 +02:00
parent c29077988e
commit 924e94eace
7 changed files with 1224 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/README.md
View File

@@ -1,3 +1,26 @@
# Dev infos
Here are all infos that are important for the developers. You can find here for example how a installed module works.
## How to markdown
### Necesarry syntax for import
```ts
<script type="module">
import Markdown from 'https://esm.sh/react-markdown@10?bundle'
</script>;
import Markdown from "react-markdown";
```
This syntax is important when you want to use markdown on the website!
### How to call markdown
```ts
<Markdown>{markdown}</Markdown>
```
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
@@ -24,31 +47,31 @@ export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
tsconfigRootDir: import.meta.dirname,
},
},
})
});
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";
export default tseslint.config({
plugins: {
// Add the react-x and react-dom plugins
'react-x': reactX,
'react-dom': reactDom,
"react-x": reactX,
"react-dom": reactDom,
},
rules: {
// other rules...
// Enable its recommended typescript rules
...reactX.configs['recommended-typescript'].rules,
...reactX.configs["recommended-typescript"].rules,
...reactDom.configs.recommended.rules,
},
})
});
```

2
frontend/index.html
View File

@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

1182
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
frontend/package.json
View File

@@ -11,7 +11,8 @@
},
"dependencies": {
"react": "^19.1.0",
"react-dom": "^19.1.0"
"react-dom": "^19.1.0",
"react-markdown": "^10.1.0"
},
"devDependencies": {
"@eslint/js": "^9.25.0",

38
frontend/src/App.tsx
View File

@@ -1,35 +1,17 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import "./App.css";
<script type="module">
import Markdown from 'https://esm.sh/react-markdown@10?bundle'
</script>;
import Markdown from "react-markdown";
const markdown = "# Hi, *Pluto*!";
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
<button>Sync recipes</button>
<Markdown>{markdown}</Markdown>
</>
)
);
}
export default App
export default App;