68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import Theater from './subcomponents/Theater';
|
|
import './css/Articles.css';
|
|
|
|
const Article = ({article}) => {
|
|
let articleFormatter = (text) => {
|
|
let output = [""];
|
|
let type = [];
|
|
let ind = 0;
|
|
let tick=false;
|
|
|
|
for (let i = 0; i < text.length; i++) { // Iterate through input
|
|
if (text[i] === '`') { // Detect Code Delimiter
|
|
if (tick) { // Close the code section
|
|
|
|
output[++ind] = ""
|
|
tick = false;
|
|
|
|
} else { // Start a new code section
|
|
|
|
type.push(1);
|
|
output[++ind] = ""
|
|
tick = true;
|
|
|
|
}
|
|
|
|
} else { // Append text to output
|
|
|
|
if (output.length > type.length) { // If this is the beggining of a default text type
|
|
type.push(0);
|
|
output[ind] = ""
|
|
}
|
|
|
|
output[ind] += text[i]
|
|
}
|
|
}
|
|
|
|
return [...output.keys()].map((i)=>{ // Format text and return as jsx
|
|
|
|
|
|
if (type[i] === 0){ // Return default text type
|
|
|
|
return <div key={i}>{output[i]}</div>;
|
|
|
|
} else if(type[i] === 1) { // Return Code text type
|
|
|
|
return <div className="code" key={i}>{output[i]}</div>;
|
|
|
|
} else {
|
|
return <div key={i}></div>;
|
|
}
|
|
});
|
|
|
|
};
|
|
|
|
return (
|
|
<div className="article">
|
|
<Theater
|
|
title={article.title}
|
|
description={article.desc}
|
|
extraClasses="h-50v"
|
|
/>
|
|
<div className="content">{articleFormatter(article.contents)}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Article; |