yudejp/yude.jp
1
0
Fork 0
mirror of https://github.com/yudejp/yude.jp.git synced 2025-01-23 04:57:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support markdown

Browse Source
This commit is contained in:
Sumire Isshiki 2024-03-05 18:38:41 +09:00
parent 15be8f8fdd
commit fd9db3a88d
3 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -16,6 +16,7 @@
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@heroicons/vue": "^2.1.1",
"@tailwindcss/typography": "^0.5.10",
"@types/react-katex": "^3.0.4",
"autoprefixer": "^10.4.16",
"date-fns": "^3.3.1",
@ -23,6 +24,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-katex": "^3.0.1",
"react-markdown": "^9.0.1",
"react-scroll-percentage": "^4.3.2",
"recoil": "^0.7.7",
"tailwindcss": "^3.4.1"

35
src/components/Chat.tsx
View File

@ -6,6 +6,7 @@ import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
import { formatDistance } from 'date-fns'
import { ja } from 'date-fns/locale/ja'
import { InlineMath } from 'react-katex';
import Markdown from 'react-markdown';
export default function Chat() {
const [page, _] = useRecoilState(currentPage);
@ -88,26 +89,32 @@ export default function Chat() {
{alert}
</div>
</div>
<div className="text-wrap">
<div className="text-wrap max-w-xl">
<div className="mb-5">
<label className="block mb-2 text-sm font-medium text-white">名前</label>
<input type="text" id="name" className="block p-4 border rounded-lg text-base bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" value={name} onChange={updateName} />
<label className="block mb-2 text-sm font-medium text-white">
名前{" "}
<span className="text-orange-400">*</span>
</label>
<input type="text" id="name" className="w-full block p-4 border rounded-lg text-base bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" value={name} onChange={updateName} placeholder="Hatsune Mike" />
</div>
<div className="mb-5">
<label className="block mb-2 text-sm font-medium text-white">本文</label>
<input type="text" id="body" className="block p-4 border rounded-lg text-base bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" value={body} onChange={updateBody} />
<label className="block mb-2 text-sm font-medium text-white">
本文{" "}
<span className="text-orange-400">*</span>
</label>
<textarea id="body" rows={4} className="font-serif text-2xl w-full block p-2.5 rounded-lg border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" placeholder="言い残したいことは？" value={body} onChange={updateBody}></textarea>
</div>
<button
onClick={submit}
type="button"
className={`text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-blue-600 hover:bg-blue-700 focus:ring-blue-800${ name === "" || body === "" ? " opacity-20" : ""}`}
className={`w-full text-xl text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-blue-600 hover:bg-blue-700 focus:ring-blue-800${ name === "" || body === "" ? " opacity-20" : ""}`}
disabled={name === "" || body === ""}
>
<FontAwesomeIcon icon={faPaperPlane} />{" "}送信
</button>
</div>
<div className="overflow-auto max-h-96 mt-5 rounded-lg max-w-2xl">
<div className="overflow-auto max-h-96 mt-5 rounded-lg max-w-xl">
{
messages &&
messages.map((message, index) => {
@ -120,9 +127,17 @@ export default function Chat() {
}
</p>
<p className="font-serif text-2xl">
{message.body.includes("$$") ? <InlineMath>
{message.body.replace(/\$\$/g, "")}
</InlineMath> : <>{message.body}</>}
{
message.body.includes("$$")
?
<InlineMath>
{message.body.replace(/\$\$/g, "")}
</InlineMath>
:
<Markdown className="prose prose-xl prose-invert">
{message.body}
</Markdown>
}
</p>
</div>
)

4
tailwind.config.js
View File

@ -7,5 +7,7 @@ export default {
theme: {
extend: {},
},
plugins: [],
plugins: [
require('@tailwindcss/typography'),
],
}