Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit6a3d33d

Browse files
committed
article fetching checks, article existing checks, markdown styling
1 parente32ce60 commit6a3d33d

File tree

3 files changed

+87
-21
lines changed

3 files changed

+87
-21
lines changed
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"title" :"Test article 2",
33
"author" :"The Author of test article 2",
4-
"date" :"1st July 2025 (date for test article 2)"
4+
"date" :"1st July 2025 (date for test article 2)",
5+
"tags" :"Article"
56
}

‎frontend/public/articles/test-article/content.md‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,37 @@
1-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia neque sit amet vulputate finibus. Donec faucibus nulla ut sapien congue consectetur. Aliquam sed diam ut enim ultrices viverra quis a lorem. Vestibulum pellentesque lorem eu justo viverra, eget porta elit dignissim. Curabitur ultricies sem quis dui rutrum porttitor. Ut molestie ultrices sapien, ut luctus eros consequat quis. Quisque vel ligula ligula. Duis at sagittis sapien, id pretium diam. Fusce ut sem sed enim consectetur condimentum ut vitae ligula. Fusce venenatis, metus quis feugiat tempus, mi massa pulvinar quam, non sagittis justo felis vitae nunc. Cras tincidunt lectus quis dui interdum, non finibus tortor pharetra. Etiam a magna erat. Maecenas imperdiet turpis aliquet, sagittis enim at, sollicitudin odio.
1+
#This is a heading
2+
##This is a heading 2
3+
###Heading 3
4+
5+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia neque sit amet vulputate finibus. Donec faucibus nulla ut sapien congue consectetur.**Aliquam sed diam ut enim ultrices viverra quis a lorem.** Vestibulum pellentesque lorem eu justo viverra, eget porta elit dignissim. Curabitur ultricies sem quis dui rutrum porttitor. Ut molestie ultrices sapien, ut luctus eros consequat quis. Quisque vel ligula ligula. Duis at sagittis sapien, id pretium diam. Fusce ut sem sed enim consectetur condimentum ut vitae ligula. Fusce venenatis, metus quis feugiat tempus, mi massa pulvinar quam,*non sagittis justo felis vitae nunc*. Cras tincidunt lectus quis dui interdum, non finibus tortor pharetra. Etiam a magna erat. Maecenas imperdiet turpis aliquet, sagittis enim at, sollicitudin odio.
6+
[Link text Here](https://link-url-here.org)
7+
8+
>this is a block quote
9+
10+
1. This is an ordered list
11+
2. Second item in this list
12+
3. Third**item**
13+
14+
`this is code in here`
15+
16+
![alt text](http://localhost:3000/articles/test-article/cover.png)
217

318
Morbi eu laoreet diam, ac tincidunt tortor. Quisque tincidunt maximus venenatis. Mauris auctor nec lectus a tincidunt. Morbi non ante libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi eu arcu eget leo vulputate volutpat nec nec massa. Maecenas tincidunt laoreet mauris, ut tincidunt neque venenatis at. Vivamus ut mollis enim. Vivamus varius tortor nec ex condimentum tincidunt. Pellentesque quis tempor dolor. Aliquam consequat mauris at nisl vehicula scelerisque. Sed fermentum tellus et augue tincidunt tempus.
419

20+
- this is an unordered list
21+
- second item in unOrdered liST
22+
23+
this should be above a divider
24+
25+
---
26+
this should be below a divider
27+
28+
```py
29+
# multiline code
30+
deffoo():
31+
pass
32+
print(f"hullo World!")
33+
```
34+
535
Integer nibh dolor, lacinia ut facilisis at, vehicula id mi. Integer mattis leo dui, nec malesuada nibh porta vel. Nullam sodales tempus porttitor. Nulla mollis a dolor eu egestas. Donec mollis nisl in leo placerat tempor. Praesent faucibus, odio sit amet facilisis faucibus, lorem ex tempor arcu, mollis suscipit quam nisi vitae purus. Cras sapien tellus, ornare ut condimentum dignissim, iaculis eget tellus. Sed accumsan a felis eget semper. Etiam lorem ex, bibendum fringilla blandit ac, tempus vitae urna. Duis sit amet molestie diam. Maecenas ut imperdiet dui, quis vulputate ligula. Nullam et mauris nisi. Proin sed imperdiet sem, vel finibus dolor.
636

737
Nam et dolor a urna imperdiet facilisis non vitae velit. Nulla porta turpis in mauris finibus, nec interdum sem mollis. Etiam sit amet dolor luctus, tincidunt quam id, elementum dui. Aenean et enim et nulla vestibulum varius. Curabitur molestie ligula nec dui bibendum efficitur. Quisque eget efficitur ipsum, at elementum quam. Nunc gravida lorem eget ex elementum, eget varius mauris semper. Quisque eu bibendum odio. Aliquam tristique ac risus ut malesuada. Phasellus sodales tortor pretium mattis eleifend. Sed tincidunt luctus libero quis vestibulum.

‎frontend/src/components/Media/article-template.tsx‎

Lines changed: 54 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
importReactMarkdownfrom'react-markdown'
22
importremarkGfmfrom'remark-gfm'
33
importReact,{useState,useEffect}from"react"
4+
importMarkdownfrom'react-markdown'
45

56
typeInfo={
67
title :string
@@ -10,48 +11,75 @@ type Info = {
1011

1112
exportdefaultfunctionArticle({articleName} :{articleName :string|string[]|undefined}){
1213

13-
//const fs = require("fs");
14+
//gets article name from URL, show 'fetching article' until URL is fetched
1415
letarticleUrl="/articles/"+articleName
15-
console.log("URL: "+articleUrl)
16-
1716
if(articleName==undefined){
1817
return(
1918
<div> fetching article...</div>
2019
)
2120
}
2221

23-
// if (fs.existsSync(articleUrl)) {
24-
// // Do something
25-
// }
26-
22+
// create variables markdown and infoStr, which hold data fetched from "/articles"
23+
// also create functions to update these constants
2724
const[markdown,setMarkdown]=useState("");
25+
const[infoStr,setInfo]=useState("");
2826
useEffect(()=>{
2927
fetch(`${articleUrl}/content.md`)
3028
.then((res)=>res.text())
3129
.then((text)=>setMarkdown(text));
3230
},[]);
33-
34-
console.log("MARKDOWN: "+markdown)
35-
36-
// infoObj here is not a string, but of type Info.
37-
const[infoObj,setInfo]=useState("");
3831
useEffect(()=>{
3932
fetch(`${articleUrl}/info.json`)
4033
.then((res)=>res.text())
41-
.then((text)=>JSON.parse(`${text}`))
4234
.then((object)=>setInfo(object));
4335
},[]);
36+
37+
// console logs for debugging
38+
// console.log("URL: " + articleUrl)
39+
// console.log("MARKDOWN: " + markdown)
40+
// console.log("INFO: " + infoStr)
41+
42+
// return loading until infoStr is fetched
43+
if(!infoStr){
44+
return(
45+
<div> fetching article info...</div>
46+
)
47+
}
48+
49+
// if article doesn't exist, return "article not found"
50+
if(infoStr.startsWith("<!DOCTYPE html>")){
51+
return(
52+
<div> article not found...</div>
53+
)
54+
}
55+
56+
// process infoStr into JSON object
57+
constinfoObj=JSON.parse(infoStr)
58+
59+
// react markdown styles
60+
constMarkdownLink=({ children} :{children :string})=>(
61+
<aclassName="underline text-cyan-200">{children}</a>
62+
);
63+
constMarkdownHeading1=({ children} :{children :string})=>(
64+
<h1className="text-5xl font-[1000]">{children}</h1>
65+
);
66+
constMarkdownHeading2=({ children} :{children :string})=>(
67+
<h2className="text-4xl font-black">{children}</h2>
68+
);
69+
constMarkdownHeading3=({ children} :{children :string})=>(
70+
<h3className="text-3xl font-extrabold">{children}</h3>
71+
);
4472

4573
return(
4674
<articleclassName="mt-[6px]">
47-
<headerclassName="mb-[6vmin] w-[100vmin] justify-self-center">
48-
<divclassName="mb-[6vmin] w-[120vmin] justify-self-center">
49-
<imgsrc={articleUrl+"/cover.png"}/>
75+
<headerclassName="mb-[3vmin] w-[100vmin] justify-self-center">
76+
<divclassName="mb-[6vmin] w-[120vmin] justify-self-center justify-items-center">
77+
<imgclassName="w-[120vmin]"src={articleUrl+"/cover.png"}/>
5078
</div>
5179
{/* title, author, date */}
5280
<divclassName="">
5381
<divclassName="mb-[16px]">
54-
Article
82+
{infoObj.tags}
5583
</div>
5684
<h1className="font-black xl:text-6xl text-xl">
5785
{infoObj.title}
@@ -72,8 +100,15 @@ export default function Article( {articleName} : {articleName : string | string[
72100
</div>
73101
</header>
74102
<sectionclassName="w-[100vmin] justify-self-center pb-[75px]">
75-
<aclassName="font l:text-3xl text-xl">
76-
<ReactMarkdown>
103+
<aclassName="font l:text-3xl text-xl whitespace-pre-wrap">
104+
<ReactMarkdown
105+
components={{
106+
a:MarkdownLink,
107+
h1:MarkdownHeading1,
108+
h2:MarkdownHeading2,
109+
h3:MarkdownHeading3,
110+
}}
111+
>
77112
{markdown}
78113
</ReactMarkdown>
79114
</a>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp