yudejp/yude.jp
1
0
Fork 0
mirror of https://github.com/yudejp/yude.jp.git synced 2025-05-13 15:38:41 +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/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.0",
"@heroicons/vue": "^2.1.1", "@heroicons/vue": "^2.1.1",
"@tailwindcss/typography": "^0.5.10",
"@types/react-katex": "^3.0.4", "@types/react-katex": "^3.0.4",
"autoprefixer": "^10.4.16", "autoprefixer": "^10.4.16",
"date-fns": "^3.3.1", "date-fns": "^3.3.1",
@ -23,6 +24,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-katex": "^3.0.1", "react-katex": "^3.0.1",
"react-markdown": "^9.0.1",
"react-scroll-percentage": "^4.3.2", "react-scroll-percentage": "^4.3.2",
"recoil": "^0.7.7", "recoil": "^0.7.7",
"tailwindcss": "^3.4.1" "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 { formatDistance } from 'date-fns'
import { ja } from 'date-fns/locale/ja' import { ja } from 'date-fns/locale/ja'
import { InlineMath } from 'react-katex'; import { InlineMath } from 'react-katex';
import Markdown from 'react-markdown';
export default function Chat() { export default function Chat() {
const [page, _] = useRecoilState(currentPage); const [page, _] = useRecoilState(currentPage);
@ -88,26 +89,32 @@ export default function Chat() {
{alert} {alert}
</div> </div>
</div> </div>
<div className="text-wrap"> <div className="text-wrap max-w-xl">
<div className="mb-5"> <div className="mb-5">
<label className="block mb-2 text-sm font-medium text-white">名前</label> <label className="block mb-2 text-sm font-medium text-white">
<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} /> 名前{" "}
<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>
<div className="mb-5"> <div className="mb-5">
<label className="block mb-2 text-sm font-medium text-white">本文</label> <label className="block mb-2 text-sm font-medium text-white">
<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} /> 本文{" "}
<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> </div>
<button <button
onClick={submit} onClick={submit}
type="button" 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 === ""} disabled={name === "" || body === ""}
> >
<FontAwesomeIcon icon={faPaperPlane} />{" "}送信 <FontAwesomeIcon icon={faPaperPlane} />{" "}送信
</button> </button>
</div> </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 &&
messages.map((message, index) => { messages.map((message, index) => {
@ -120,9 +127,17 @@ export default function Chat() {
} }
</p> </p>
<p className="font-serif text-2xl"> <p className="font-serif text-2xl">
{message.body.includes("$$") ? <InlineMath> {
{message.body.replace(/\$\$/g, "")} message.body.includes("$$")
</InlineMath> : <>{message.body}</>} ?
<InlineMath>
{message.body.replace(/\$\$/g, "")}
</InlineMath>
:
<Markdown className="prose prose-xl prose-invert">
{message.body}
</Markdown>
}
</p> </p>
</div> </div>
) )

4
tailwind.config.js
View File

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