initial commit
This commit is contained in:
commit
03cfba1238
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
46
README.md
Normal file
46
README.md
Normal file
@ -0,0 +1,46 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
|
||||
The page will reload if you make edits.\
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
18167
package-lock.json
generated
Normal file
18167
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
46
package.json
Normal file
46
package.json
Normal file
@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "blog_dracula",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/mdast": "^4.0.2",
|
||||
"@types/node": "^16.18.58",
|
||||
"@types/react": "^18.2.27",
|
||||
"@types/react-dom": "^18.2.12",
|
||||
"dracula-ui": "^1.0.6",
|
||||
"mdast-util-from-markdown": "^2.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
43
public/index.html
Normal file
43
public/index.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/logo192.png
Normal file
BIN
public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/logo512.png
Normal file
BIN
public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
25
public/manifest.json
Normal file
25
public/manifest.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
45
src/App.css
Normal file
45
src/App.css
Normal file
@ -0,0 +1,45 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: hsl(231, 15, 18);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
9
src/App.test.tsx
Normal file
9
src/App.test.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
26
src/App.tsx
Normal file
26
src/App.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import './App.css';
|
||||
import HomePage from './Pages/HomePage';
|
||||
import Footer from './Components/Footer';
|
||||
import TopBar from './Components/Topbar';
|
||||
import PageModel from './Pages/ManualBlogPages/PageModel';
|
||||
import { Box } from 'dracula-ui';
|
||||
function App() {
|
||||
return (
|
||||
<div >
|
||||
<TopBar/>
|
||||
<Box pb="lg" pl="lg" pr='lg' style={{
|
||||
display: "flex",
|
||||
gap: "1rem",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<HomePage/>
|
||||
</Box>
|
||||
<Footer/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
55
src/Components/Article.tsx
Normal file
55
src/Components/Article.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import {
|
||||
List,
|
||||
Avatar,
|
||||
Heading,
|
||||
Paragraph,
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
Divider,
|
||||
} from "dracula-ui";
|
||||
import "dracula-ui/styles/dracula-ui.css";
|
||||
import placehodler from "../Static/placeholder.svg";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Article() {
|
||||
const [hovering, setHovering] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
p="sm"
|
||||
display="flex"
|
||||
color={hovering ? "black" : "blackSecondary"}
|
||||
onMouseEnter={() => setHovering(true)}
|
||||
onMouseLeave={() => setHovering(false)}
|
||||
style={
|
||||
hovering
|
||||
? {
|
||||
cursor: "pointer",
|
||||
borderRadius: "1rem",
|
||||
transform: "scale(1.02)",
|
||||
transition: "all 0.2s",
|
||||
}
|
||||
: {
|
||||
borderRadius: "1rem",
|
||||
transition: "all 0.2s",
|
||||
}
|
||||
}
|
||||
>
|
||||
<img src={placehodler} alt="placeholder" width="250rem" />
|
||||
<Divider m="sm" color="purple" />
|
||||
<Box>
|
||||
<Heading size="lg">Titre de l'article</Heading>
|
||||
<Paragraph color="greySecondary">
|
||||
posté le 01/01/1970 par <b>Neotaku67</b>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Alors, de base il doit y avoir du texte ici mais comme
|
||||
le parser Markdown n'est pas encore fait, il n'y a rien.
|
||||
</Paragraph>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
71
src/Components/BlockQuote.tsx
Normal file
71
src/Components/BlockQuote.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import "dracula-ui/styles/dracula-ui.css"
|
||||
import { Box, Paragraph } from "dracula-ui"
|
||||
import { ObjectEncodingOptions } from "node:fs";
|
||||
|
||||
enum colors {
|
||||
blue = "#26337369",
|
||||
cyan = "#8BE9FD55",
|
||||
green = "green",
|
||||
orange = "orange",
|
||||
red = "#FF555555",
|
||||
purple = "purple",
|
||||
grey = "gray"
|
||||
}
|
||||
|
||||
|
||||
type colorIcon = {
|
||||
color:string;
|
||||
icon:string;
|
||||
}
|
||||
|
||||
type types = {
|
||||
[id:string] : {color:colors;icon : string}
|
||||
}
|
||||
|
||||
var types : types = {
|
||||
"note" : {color : colors.blue, icon : "🖊️"},
|
||||
"abstract" : {color : colors.cyan, icon : "📋"},
|
||||
"info" : {color : colors.blue, icon : "ℹ️"},
|
||||
"todo" : {color : colors.blue, icon : "✔️"},
|
||||
"tip" : {color : colors.cyan, icon : "🔥"},
|
||||
"success" : {color : colors.green, icon : "✅"},
|
||||
"question" : {color : colors.orange, icon : "🤨"},
|
||||
"warning" : {color : colors.orange, icon : "⚠️"},
|
||||
"failure" : {color : colors.red, icon : "❌"},
|
||||
"danger" : {color : colors.red, icon : "⚡"},
|
||||
"bug" : {color : colors.red, icon : "🐞"},
|
||||
"exemple" : {color : colors.purple, icon : "🗒️"},
|
||||
"quote" : {color : colors.grey, icon : "✒️"},
|
||||
}
|
||||
|
||||
|
||||
export function ColorBlockQuote({type,children}: {type : string ;children : React.ReactNode}){
|
||||
let currentType : colorIcon = types[type];
|
||||
return(
|
||||
<Box ml="md" style={{
|
||||
background: currentType.color,
|
||||
paddingLeft: "2rem",
|
||||
borderRadius: '4px'
|
||||
}}>
|
||||
<Paragraph> {currentType.icon} {type.charAt(0).toUpperCase() + type.slice(1)} </Paragraph>
|
||||
<Paragraph>
|
||||
{children}
|
||||
</Paragraph>
|
||||
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export function BlockQuote({children}: {children: React.ReactNode}) {
|
||||
return (
|
||||
<Box ml="md" style={{
|
||||
borderLeft: "0.2rem solid #F1FA8C",
|
||||
paddingLeft: "2rem" ,
|
||||
}}>
|
||||
<Paragraph color="yellow">
|
||||
{children}
|
||||
</Paragraph>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
9
src/Components/Bold.tsx
Normal file
9
src/Components/Bold.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import "dracula-ui/styles/dracula-ui.css"
|
||||
import { Paragraph } from "dracula-ui"
|
||||
|
||||
|
||||
export default function Bold({children}: {children: React.ReactNode}) {
|
||||
return (
|
||||
<Paragraph weight="bold" color="orange">{children}</Paragraph>
|
||||
)
|
||||
}
|
||||
19
src/Components/Footer.tsx
Normal file
19
src/Components/Footer.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { List , Avatar ,Heading ,Paragraph, Box, Button,Input, Divider } from 'dracula-ui'
|
||||
import 'dracula-ui/styles/dracula-ui.css'
|
||||
import placehodler from '../Static/placeholder.svg'
|
||||
import Link from "../Components/Link"
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<>
|
||||
<Divider color='purple' style={{
|
||||
width: "100vw",
|
||||
}}/>
|
||||
<Paragraph style={{
|
||||
textAlign: "center",
|
||||
}}>
|
||||
Fait avec <Link href='https://fr.react.dev'>React</Link> et la bibliotheque <Link href='https://ui.draculatheme.com'>Dracula ui</Link>, I use arch btw - 2023 Djalim Simaila
|
||||
</Paragraph>
|
||||
</>
|
||||
)
|
||||
}
|
||||
31
src/Components/Headers.tsx
Normal file
31
src/Components/Headers.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import "dracula-ui/styles/dracula-ui.css"
|
||||
import { Heading } from "dracula-ui"
|
||||
import React from "react";
|
||||
|
||||
|
||||
export default function Headers({level,children} : {level : string; children : React.ReactNode }) {
|
||||
let element : React.ReactNode;
|
||||
switch (level) {
|
||||
case "h1":
|
||||
element = <Heading size="2xl" color="pink">{children}</Heading>
|
||||
break;
|
||||
case "h2":
|
||||
element = <Heading size="xl" color="purple">{children}</Heading>
|
||||
break;
|
||||
case "h3":
|
||||
element = <Heading size="lg" color="cyan">{children}</Heading>
|
||||
break;
|
||||
case "h4":
|
||||
element = <Heading size="md" color="green">{children}</Heading>
|
||||
break;
|
||||
case "h5":
|
||||
element = <Heading size="sm" color="yellow">{children}</Heading>
|
||||
break;
|
||||
case "h6":
|
||||
element = <Heading size="sm" color="orange">{children}</Heading>
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<>{element}</>
|
||||
)
|
||||
}
|
||||
121
src/Components/Intro.tsx
Normal file
121
src/Components/Intro.tsx
Normal file
@ -0,0 +1,121 @@
|
||||
import { List , Avatar ,Heading ,Paragraph, Box,Card, Button,Input, Divider, textAligns } from 'dracula-ui'
|
||||
import Link from "../Components/Link"
|
||||
import mwa from '../Static/mwa.jpg'
|
||||
import cover from '../Static/coverplaceholder.jpg'
|
||||
import 'dracula-ui/styles/dracula-ui.css'
|
||||
|
||||
export default function Intro() {
|
||||
return (
|
||||
<Box display='flex' style={{
|
||||
borderRadius: "1rem",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}} >
|
||||
<Card variant='subtle' borderColor='purple' p="sm" color='blackSecondary'style={{
|
||||
borderRadius : "1rem",
|
||||
width: "100%",
|
||||
alignContent : "center"
|
||||
}} >
|
||||
<Heading p='sm' style={{textAlign: "center"}}>
|
||||
Bienvenue sur mon blog !
|
||||
</Heading>
|
||||
</Card>
|
||||
<Box mt="sm" mb="sm" display='flex'>
|
||||
<img src={mwa} alt="c mwa" width="300rem" style={{borderRadius: "1rem",}} />
|
||||
<Card variant='subtle' borderColor='purple' ml='sm' p="sm" color='blackSecondary'style={{borderRadius : "1rem"}} >
|
||||
<Paragraph>
|
||||
Je m'appelle <b>Djalim</b>, j'ai 21 ans et je suis un developpeur et etudiant en BUT Informatique à Aix en Provence.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Je suis passioné d'Informatique, je sais que c'est tres vague mais ça englobe tout ce que j'aime faire :
|
||||
</Paragraph>
|
||||
<List variant='unordered' color='white'>
|
||||
<li className="drac-text drac-text-white">
|
||||
Créer des logiciels (scripts, applications, jeux, you name it, I do it)
|
||||
</li>
|
||||
<li className="drac-text drac-text-white">
|
||||
Créer et configurer des serveurs/workstations Linux (Debian, Ubuntu, Arch, Manjaro, Fedora, CentOS, etc...)
|
||||
</li>
|
||||
<li className="drac-text drac-text-white" >
|
||||
Créer des api et des bases de données
|
||||
</li>
|
||||
</List>
|
||||
<Paragraph>
|
||||
Bref, je fais plein de trucs. Je suis aussi passioné par les mangas, les jeux vidéos et les animes.
|
||||
</Paragraph>
|
||||
</Card>
|
||||
</Box>
|
||||
<Box style={{
|
||||
display: "flex",
|
||||
flexDirection:'row',
|
||||
justifyContent : "space-between",
|
||||
width: "100%",
|
||||
}}>
|
||||
<Card variant='subtle' display="flex" borderColor='purple' p="sm" m="sm" color='blackSecondary' style={{
|
||||
borderRadius : "1rem",
|
||||
alignItems : "center",
|
||||
flex:1,
|
||||
}} >
|
||||
<Paragraph align='center' style={{
|
||||
width: "100%"
|
||||
}}>
|
||||
Current Machine : <br/><br/>
|
||||
Minisforum V3 <br/>
|
||||
CPU : AMD Ryzen 7 8840U <br/>
|
||||
GPU : Radeon 780M<br/>
|
||||
RAM : 32G<br/>
|
||||
RES : 2560x1440<br/>
|
||||
OS : Arch Linux <br/>
|
||||
</Paragraph>
|
||||
</Card>
|
||||
<Card variant='subtle' borderColor='purple' p="sm" m="sm" color='blackSecondary'style={{
|
||||
borderRadius : "1rem",
|
||||
alignContent : "center",
|
||||
flex:1
|
||||
}} >
|
||||
<Paragraph align='center' style={{
|
||||
width: "100%"
|
||||
}}>
|
||||
Currently active : <br/><br/>
|
||||
Laptop : No since 1d3h5m <br/>
|
||||
Phone : No since 1d3h5m <br/>
|
||||
Server : No since 1d3h5m <br/>
|
||||
</Paragraph>
|
||||
</Card>
|
||||
<Card variant='subtle' borderColor='purple' p="sm" m="sm" color='blackSecondary'style={{
|
||||
borderRadius : "1rem",
|
||||
alignContent : "center",
|
||||
flex:1
|
||||
}} >
|
||||
<Paragraph align='center' style={{
|
||||
width: "100%"
|
||||
}}>
|
||||
Most used languages : <br/><br/>
|
||||
Python : 34 Commits <br/>
|
||||
Python : 34 Commits <br/>
|
||||
Python : 34 Commits <br/>
|
||||
Python : 34 Commits <br/>
|
||||
Python : 34 Commits <br/>
|
||||
Python : 34 Commits <br/>
|
||||
</Paragraph>
|
||||
</Card>
|
||||
</Box>
|
||||
<Card variant='subtle' borderColor='purple' p="sm" mt='sm' color='blackSecondary'style={{
|
||||
borderRadius : "1rem",
|
||||
width: "100%",
|
||||
alignContent : "center"
|
||||
}} >
|
||||
<Paragraph style={{
|
||||
alignSelf: "center",
|
||||
textAlign: "center"
|
||||
}}>
|
||||
Discord : @neotaku67 |
|
||||
Twitter : <Link href="https://twitter.com/NeotakUwU" >@neotakUwU </Link> |
|
||||
Os : <Link href="https://osu.ppy.sh/users/8664491" > Arch Linux </Link> |
|
||||
Theme : <Link href="https://osu.ppy.sh/users/8664491" > Dracula </Link> |
|
||||
Hotel : <Link href="https://osu.ppy.sh/users/8664491" > Trivago </Link> |
|
||||
</Paragraph>
|
||||
</Card>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
11
src/Components/Italic.tsx
Normal file
11
src/Components/Italic.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import "dracula-ui/styles/dracula-ui.css"
|
||||
import { Paragraph } from "dracula-ui"
|
||||
|
||||
|
||||
export default function Italic({children}: {children: React.ReactNode}) {
|
||||
return (
|
||||
<Paragraph color="yellow">
|
||||
<i>{children}</i>
|
||||
</Paragraph>
|
||||
)
|
||||
}
|
||||
19
src/Components/Link.tsx
Normal file
19
src/Components/Link.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import {
|
||||
List,
|
||||
Avatar,
|
||||
Heading,
|
||||
Paragraph,
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
Divider,
|
||||
} from "dracula-ui";
|
||||
import "dracula-ui/styles/dracula-ui.css";
|
||||
|
||||
export default function Link({ href, children }: { href: string; children: React.ReactNode}) {
|
||||
return (
|
||||
<a href={href} className="drac-text drac-text-pink-purple" >
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
11
src/Components/StrikeThrough.tsx
Normal file
11
src/Components/StrikeThrough.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import "dracula-ui/styles/dracula-ui.css"
|
||||
import { Paragraph } from "dracula-ui"
|
||||
|
||||
|
||||
export default function Strike({children}: {children: React.ReactNode}) {
|
||||
return (
|
||||
<Paragraph>
|
||||
<s>{children}</s>
|
||||
</Paragraph>
|
||||
)
|
||||
}
|
||||
56
src/Components/Topbar.tsx
Normal file
56
src/Components/Topbar.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import 'dracula-ui/styles/dracula-ui.css'
|
||||
import { Paragraph, Box, Button,Input } from 'dracula-ui'
|
||||
|
||||
|
||||
export default function TopBar(){
|
||||
return (
|
||||
<Box color="animated" m="sm" p="sm" style={{
|
||||
borderRadius: "1rem",
|
||||
display: "flex",
|
||||
gap: "1rem",
|
||||
justifyContent: "center",
|
||||
width: "auto",
|
||||
|
||||
}}>
|
||||
<Button onClick={
|
||||
() => {
|
||||
window.location.href = "/"
|
||||
}
|
||||
} style={{
|
||||
backgroundColor:"hsl(232, 14%, 31%)",
|
||||
color: "#D1D1D1",
|
||||
}}>
|
||||
Accueil
|
||||
</Button>
|
||||
<Button onClick={
|
||||
() => {window.location.href = "https://gitea.simailadjalim.fr/DjalimSimaila"}
|
||||
} style={{
|
||||
backgroundColor:"hsl(232, 14%, 31%)",
|
||||
color: "#D1D1D1",
|
||||
}}>
|
||||
Mes projets
|
||||
</Button>
|
||||
<Button onClick={
|
||||
() => {window.location.href = "https://www.linkedin.com/in/djalim-simaila/"}
|
||||
} style={{
|
||||
backgroundColor:"hsl(232, 14%, 31%)",
|
||||
color: "#D1D1D1",
|
||||
}}>
|
||||
LinkedIn
|
||||
</Button>
|
||||
<Button onClick={
|
||||
() => {window.location.href = "mailto:contact@mail.simailadjalim.fr"}
|
||||
} style={{
|
||||
backgroundColor:"hsl(232, 14%, 31%)",
|
||||
color: "#D1D1D1",
|
||||
}}>
|
||||
Contactez moi
|
||||
</Button>
|
||||
<Button disabled={true} variant="outline" color="purple">
|
||||
Articles
|
||||
</Button>
|
||||
<Input color='purple' placeholder='Rechercher un article' style={{width: "25rem"}}>
|
||||
</Input>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
20
src/Components/WorkInProgress.tsx
Normal file
20
src/Components/WorkInProgress.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { List , Avatar ,Heading ,Paragraph, Box, Button,Input, Divider } from 'dracula-ui'
|
||||
import mwa from '../Static/mwa.jpg'
|
||||
import 'dracula-ui/styles/dracula-ui.css'
|
||||
|
||||
export default function WorkInProgress() {
|
||||
return (
|
||||
<Box display='flex' p="sm" color='blackSecondary' style={{
|
||||
borderRadius: "1rem",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}} >
|
||||
<Heading size='2xl' p='md' >
|
||||
🛠️ Site en construction 🛠️
|
||||
</Heading>
|
||||
<Paragraph mt='xxs'>
|
||||
Le site n'est pas encore terminé, mais vous pouvez déjà voir mes projets sur mon Gitea !
|
||||
</Paragraph>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
15
src/Pages/BlogPage.tsx
Normal file
15
src/Pages/BlogPage.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import parseMarkdown from '../Utils/MarkdownParser';
|
||||
export default function BlogPage() {
|
||||
const [page, setPage] = React.useState<JSX.Element[] | null>(null)
|
||||
React.useEffect(() => {
|
||||
parseMarkdown('src/Markdown/Example.md')
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
{page}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
40
src/Pages/HomePage.tsx
Normal file
40
src/Pages/HomePage.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import TopBar from '../Components/Topbar'
|
||||
import 'dracula-ui/styles/dracula-ui.css'
|
||||
import { List , Avatar ,Heading ,Paragraph, Box, Button,Input, Divider } from 'dracula-ui'
|
||||
import WorkInProgress from '../Components/WorkInProgress'
|
||||
import Intro from '../Components/Intro'
|
||||
import Article from '../Components/Article'
|
||||
import Footer from '../Components/Footer'
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<Box pb="lg" pl="lg" pr='lg' style={{
|
||||
display: "flex",
|
||||
gap: "1rem",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<Heading size='2xl' color='yellowPink' style={{
|
||||
textAlign: "center"
|
||||
}} >
|
||||
Le Blog perso d'un geek comme un autre
|
||||
</Heading>
|
||||
<WorkInProgress/>
|
||||
<Intro/>
|
||||
<Divider color='purple' style={{width: "100%"}}/>
|
||||
|
||||
<Heading size='2xl' color='yellowPink' style={{
|
||||
textAlign: "center"
|
||||
}} >
|
||||
Articles recents
|
||||
</Heading>
|
||||
<Article/>
|
||||
<Article/>
|
||||
<Article/>
|
||||
<Button disabled={true} variant="outline" color="purple" >
|
||||
voir plus d'articles
|
||||
</Button>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
71
src/Pages/ManualBlogPages/PageModel.tsx
Normal file
71
src/Pages/ManualBlogPages/PageModel.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import 'dracula-ui/styles/dracula-ui.css'
|
||||
import {Box, Paragraph } from "dracula-ui"
|
||||
import TopBar from '../../Components/Topbar'
|
||||
import Footer from '../../Components/Footer'
|
||||
import WorkInProgress from '../../Components/WorkInProgress'
|
||||
import Headers from '../../Components/Headers'
|
||||
import Link from '../../Components/Link'
|
||||
import Bold from '../../Components/Bold'
|
||||
import Italic from '../../Components/Italic'
|
||||
import Strike from '../../Components/StrikeThrough'
|
||||
import {BlockQuote,ColorBlockQuote} from '../../Components/BlockQuote'
|
||||
|
||||
|
||||
export default function PageModel() {
|
||||
return (
|
||||
<>
|
||||
<TopBar/>
|
||||
<WorkInProgress/>
|
||||
<Headers level="h1">h1 Heading</Headers>
|
||||
<Headers level="h2">h2 Heading</Headers>
|
||||
<Headers level="h3">h3 Heading</Headers>
|
||||
<Headers level="h4">h4 Heading</Headers>
|
||||
<Headers level="h5">h5 Heading</Headers>
|
||||
<Headers level="h6">h6 Heading</Headers>
|
||||
<Paragraph> This is default text </Paragraph>
|
||||
<Bold> This is bold </Bold>
|
||||
<Italic> This is italic </Italic>
|
||||
<Strike> This should be redacted </Strike>
|
||||
<BlockQuote>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et gravida diam, et varius magna. Proin `id felis quis nisl` gravida auctor a eu est. In viverra dui viverra placerat cursus. Curabitur non commodo mi. Mauris volutpat nisl vitae nulla efficitur condimentum. Nulla facilisi. Maecenas malesuada purus mi, eget fringilla quam ultrices sit amet.
|
||||
</BlockQuote>
|
||||
<ColorBlockQuote type="note">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="abstract">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="info">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="todo">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="tip">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="success">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="question">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="warning">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="failure">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="danger">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="exemple">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<ColorBlockQuote type="quote">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</ColorBlockQuote>
|
||||
<Footer/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
2
src/Pages/ManualBlogPages/analysemorphologique.tsx
Normal file
2
src/Pages/ManualBlogPages/analysemorphologique.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
export {};
|
||||
|
||||
127
src/Pages/MarkdownPages/markdown %26 sample2.md
Normal file
127
src/Pages/MarkdownPages/markdown %26 sample2.md
Normal file
@ -0,0 +1,127 @@
|
||||
# h1 Heading 8-)
|
||||
## h2 Heading
|
||||
### h3 Heading
|
||||
#### h4 Heading
|
||||
##### h5 Heading
|
||||
###### h6 Heading
|
||||
|
||||
|
||||
## Horizontal Rules
|
||||
|
||||
___
|
||||
|
||||
---
|
||||
#tag-test
|
||||
***
|
||||
|
||||
## Emphasis
|
||||
|
||||
**This is bold text**
|
||||
|
||||
__This is bold text__
|
||||
|
||||
*This is italic text*
|
||||
|
||||
_This is italic text_
|
||||
|
||||
~~Strikethrough~~
|
||||
|
||||
|
||||
## Lists
|
||||
|
||||
Unordered
|
||||
|
||||
+ Create a list by starting a line with `+`, `-`, or `*`
|
||||
+ Sub-lists are made by indenting 2 spaces:
|
||||
- Marker character change forces new list start:
|
||||
* Ac tristique libero volutpat at
|
||||
+ Facilisis in pretium nisl aliquet
|
||||
- Nulla volutpat aliquam velit
|
||||
+ Very easy!
|
||||
|
||||
Ordered
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
|
||||
|
||||
1. You can use sequential numbers...
|
||||
1. ...or keep all the numbers as `1.`
|
||||
|
||||
Start numbering with offset:
|
||||
|
||||
57. foo
|
||||
1. bar
|
||||
|
||||
## Blockquote
|
||||
|
||||
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et gravida diam, et varius magna. Proin id felis quis nisl gravida auctor a eu est. In viverra dui viverra placerat cursus. Curabitur non commodo mi. Mauris volutpat nisl vitae nulla efficitur condimentum. Nulla facilisi. Maecenas malesuada purus mi, eget fringilla quam ultrices sit amet.
|
||||
|
||||
## Code
|
||||
|
||||
Inline `code`
|
||||
|
||||
Indented code
|
||||
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
|
||||
|
||||
Block code "fences"
|
||||
|
||||
```
|
||||
Sample text here...
|
||||
```
|
||||
|
||||
Syntax highlighting
|
||||
|
||||
``` js
|
||||
var foo = function (bar) {
|
||||
return bar++;
|
||||
};
|
||||
|
||||
console.log(foo(5));
|
||||
```
|
||||
|
||||
## Tables
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
Right aligned columns
|
||||
|
||||
| Option | Description |
|
||||
| ------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
|
||||
## Links
|
||||
|
||||
[link text](http://dev.nodeca.com)
|
||||
|
||||
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
|
||||
|
||||
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
|
||||
|
||||
|
||||
## Images
|
||||
|
||||
|
||||
|
||||
|
||||
Like links, Images also have a footnote style syntax
|
||||
|
||||
![Alt text][id]
|
||||
|
||||
With a reference later in the document defining the URL location:
|
||||
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
170
src/Pages/MarkdownPages/markdown-sample.md
Normal file
170
src/Pages/MarkdownPages/markdown-sample.md
Normal file
@ -0,0 +1,170 @@
|
||||
Link to other Markdown file: [[markdown & sample2]]
|
||||
and Link to other Markdown file with a custom linke name: [[markdown & sample2|Custom Link Name]]
|
||||
Link to PDF: ![[pdf-test.pdf]]
|
||||
|
||||
Link to same document heading [[#Paragraphs | Custom Title]]
|
||||
Link to same document heading [[#Paragraphs]]
|
||||
|
||||
## LaTeX
|
||||
|
||||
|
||||
Inline math equations go in like so: $\omega = d\phi / dt$. Display
|
||||
math should get its own line and be put in in double-dollarsigns:
|
||||
|
||||
$$I = \int \rho R^{2} dV$$
|
||||
|
||||
And note that you can backslash-escape any punctuation characters
|
||||
which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Mermaid
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
id1[[This is the text in the box1]]
|
||||
```
|
||||
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
|
||||
## Paragraphs
|
||||
are separated by a blank line.
|
||||
|
||||
2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
|
||||
look like:
|
||||
|
||||
* this one
|
||||
* that one
|
||||
* the other one
|
||||
|
||||
Note that --- not considering the asterisk --- the actual text
|
||||
content starts at 4-columns in.
|
||||
|
||||
> Block quotes are
|
||||
> written like so.
|
||||
>
|
||||
> They can span multiple paragraphs,
|
||||
> if you like.
|
||||
|
||||
Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
|
||||
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
|
||||
Unicode is supported. ☺
|
||||
|
||||
|
||||
An h1 header
|
||||
============
|
||||
|
||||
An h2 header
|
||||
------------
|
||||
|
||||
|
||||
Here's a numbered list:
|
||||
|
||||
1. first item
|
||||
2. second item
|
||||
3. third item
|
||||
|
||||
Note again how the actual text starts at 4 columns in (4 characters
|
||||
from the left side). Here's a code sample:
|
||||
|
||||
# Let me re-iterate ...
|
||||
for i in 1 .. 10 { do-something(i) }
|
||||
|
||||
As you probably guessed, indented 4 spaces. By the way, instead of
|
||||
indenting the block, you can use delimited blocks, if you like:
|
||||
|
||||
~~~
|
||||
define foobar() {
|
||||
print "Welcome to flavor country!";
|
||||
}
|
||||
~~~
|
||||
|
||||
(which makes copying & pasting easier). You can optionally mark the
|
||||
delimited block for Pandoc to syntax highlight it:
|
||||
|
||||
~~~python
|
||||
import time
|
||||
# Quick, count to ten!
|
||||
for i in range(10):
|
||||
# (but not *too* quick)
|
||||
time.sleep(0.5)
|
||||
print i
|
||||
~~~
|
||||
|
||||
|
||||
|
||||
### An h3 header ###
|
||||
|
||||
Now a nested list:
|
||||
|
||||
1. First, get these ingredients:
|
||||
|
||||
* carrots
|
||||
* celery
|
||||
* lentils
|
||||
|
||||
2. Boil some water.
|
||||
|
||||
3. Dump everything in the pot and follow
|
||||
this algorithm:
|
||||
|
||||
find wooden spoon
|
||||
uncover pot
|
||||
stir
|
||||
cover pot
|
||||
balance wooden spoon precariously on pot handle
|
||||
wait 10 minutes
|
||||
goto first step (or shut off burner when done)
|
||||
|
||||
Do not bump wooden spoon or it will fall.
|
||||
|
||||
Notice again how text always lines up on 4-space indents (including
|
||||
that last line which continues item 3 above).
|
||||
|
||||
Here's a link to [a website](http://foo.bar)
|
||||
|
||||
|
||||
A horizontal rule follows.
|
||||
|
||||
***
|
||||
|
||||
Here's a definition list:
|
||||
|
||||
apples
|
||||
: Good for making applesauce.
|
||||
oranges
|
||||
: Citrus!
|
||||
tomatoes
|
||||
: There's no "e" in tomatoe.
|
||||
|
||||
Again, text is indented 4 spaces. (Put a blank line between each
|
||||
term/definition pair to spread things out more.)
|
||||
|
||||
|
||||
|
||||
59
src/Pages/MarkdownPages/markdown-sample3.md
Normal file
59
src/Pages/MarkdownPages/markdown-sample3.md
Normal file
@ -0,0 +1,59 @@
|
||||
---
|
||||
tags:
|
||||
- tag1
|
||||
- tag2
|
||||
- tag-test
|
||||
---
|
||||
|
||||
YAML front matter document
|
||||
|
||||
|
||||
Callout with title
|
||||
|
||||
|
||||
Regular blockquote
|
||||
|
||||
> Lorem ipsum
|
||||
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et gravida diam, et varius magna. Proin `id felis quis nisl` gravida auctor a eu est. In viverra dui viverra placerat cursus. Curabitur non commodo mi. Mauris volutpat nisl vitae nulla efficitur condimentum. Nulla facilisi. Maecenas malesuada purus mi, eget fringilla quam ultrices sit amet.
|
||||
|
||||
|
||||
> [!note]
|
||||
> Lorem ipsum dolor sit amet
|
||||
>> [!abstract]
|
||||
>> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!abstract]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!info]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!todo]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!tip]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!success]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!question]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!warning]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!failure]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!danger]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!bug]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!example]
|
||||
> Lorem ipsum dolor sit amet
|
||||
|
||||
> [!quote]
|
||||
> Lorem ipsum dolor sit amet
|
||||
BIN
src/Static/coverplaceholder.jpg
Normal file
BIN
src/Static/coverplaceholder.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
BIN
src/Static/mwa.jpg
Normal file
BIN
src/Static/mwa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
13
src/Static/placeholder.svg
Normal file
13
src/Static/placeholder.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="a" x1="49.571" x2="51.714" y1="52.714" y2="54.857" gradientTransform="matrix(2.3333,0,0,2.3333,-68.667,-72.001)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0"/>
|
||||
<stop stop-opacity="0" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="scale(1)">
|
||||
<rect x="8" y="4" width="48" height="56" ry="5" fill="#35677f" style="paint-order:stroke fill markers"/>
|
||||
<path d="m56 46-14 14h9c2.77 0 5-2.23 5-5z" fill="url(#a)" fill-rule="evenodd" opacity=".15" stroke-width="8.8191" style="paint-order:stroke fill markers"/>
|
||||
</g>
|
||||
<path d="m17 48.999v-2h20v2zm0-6.0001v-2h28v2zm0-6.0001v-2h28v2zm0-6.0001v-2h28v2z" enable-background="new" fill="#fff" stroke-width="3.7796"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 813 B |
53
src/Utils/MarkdownParser.tsx
Normal file
53
src/Utils/MarkdownParser.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import fs from 'node:fs/promises'
|
||||
import {fromMarkdown} from 'mdast-util-from-markdown'
|
||||
import React from 'react'
|
||||
|
||||
|
||||
export default async function parseMarkdown(filePath: string){
|
||||
const doc = await fs.readFile(filePath, 'utf-8')
|
||||
const tree = fromMarkdown(doc)
|
||||
const page = tree.children.map(parseMarkdownElement)
|
||||
return (
|
||||
<div>
|
||||
{page}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
function parseMarkdownElement(element: any){
|
||||
switch (element.type) {
|
||||
case 'heading':
|
||||
return <h1>{element.children.map(parseMarkdownElement)}</h1>
|
||||
case 'paragraph':
|
||||
return <p>{element.children.map(parseMarkdownElement)}</p>
|
||||
case 'text':
|
||||
return element.value
|
||||
case 'emphasis':
|
||||
return <em>{element.children.map(parseMarkdownElement)}</em>
|
||||
case 'strong':
|
||||
return <strong>{element.children.map(parseMarkdownElement)}</strong>
|
||||
case 'inlineCode':
|
||||
return <code>{element.value}</code>
|
||||
case 'link':
|
||||
return <a href={element.url}>{element.children.map(parseMarkdownElement)}</a>
|
||||
case 'list':
|
||||
if (element.ordered) {
|
||||
return <ol>{element.children.map(parseMarkdownElement)}</ol>
|
||||
} else {
|
||||
return <ul>{element.children.map(parseMarkdownElement)}</ul>
|
||||
}
|
||||
case 'listItem':
|
||||
return <li>{element.children.map(parseMarkdownElement)}</li>
|
||||
case 'image':
|
||||
return <img src={element.url} alt={element.alt} />
|
||||
case 'code':
|
||||
return <pre><code>{element.value}</code></pre>
|
||||
case 'blockquote':
|
||||
return <blockquote>{element.children.map(parseMarkdownElement)}</blockquote>
|
||||
case 'thematicBreak':
|
||||
return <hr />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
14
src/index.css
Normal file
14
src/index.css
Normal file
@ -0,0 +1,14 @@
|
||||
body {
|
||||
background-color: hsl(231, 15%, 18%);
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
19
src/index.tsx
Normal file
19
src/index.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
1
src/logo.svg
Normal file
1
src/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
1
src/react-app-env.d.ts
vendored
Normal file
1
src/react-app-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="react-scripts" />
|
||||
15
src/reportWebVitals.ts
Normal file
15
src/reportWebVitals.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { ReportHandler } from 'web-vitals';
|
||||
|
||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
5
src/setupTests.ts
Normal file
5
src/setupTests.ts
Normal file
@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
26
tsconfig.json
Normal file
26
tsconfig.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user