Skip to content

Commit

Permalink
🥑
Browse files Browse the repository at this point in the history
  • Loading branch information
@fozg
fozg committed Oct 3, 2021
1 parent e587a01 commit 757095d
Show file tree
Hide file tree
Showing 18 changed files with 1,892 additions and 1,468 deletions.
2 changes: 1 addition & 1 deletion .env
View file
@@ -1,2 +1,2 @@
REACT_APP_MICRO_APP_NAME=micro_app
REACT_APP_MICRO_APP_NAME=simple_note
GENERATE_SOURCEMAP=false
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -55,7 +55,7 @@
"react-app-polyfill": "^1.0.6",
"react-dev-utils": "^10.2.1",
"react-dom": "^16.13.1",
"react-light-state": "^0.0.12",
"react-light-state": "^0.0.15",
"react-router-dom": "^5.2.0",
"resolve": "1.15.0",
"resolve-url-loader": "3.1.1",
Expand Down
143 changes: 32 additions & 111 deletions src/Root.tsx
View file
@@ -1,122 +1,43 @@
import React, { useState } from "react";
import React from "react";
import styled from "styled-components";
import marked from "./marked/marked";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Editor from "./components/Editor";
import Sidebar from "./components/Sidebar";
import { useStore, notesSelector } from "./state";

export default function () {
const [md, setMd] = useState("");
const onInput = (e: any) => {
const html = e.target.value;
const plantText = html.replace(/\n\n/g, "\n").replace(/ /g, " ");
setMd(plantText);
};
const notes = useStore(notesSelector);
return (
<Overflow>
<Editor>
<Input
style={{
padding: 20,
fontFamily: "consolas",
fontSize: 16,
}}
spellCheck={false}
onInput={onInput}
value={md}
></Input>
<Display
style={{
width: 500,

fontFamily: "consolas",
padding: 20,
fontSize: 16,
margin: "auto",
}}
spellCheck={false}
dangerouslySetInnerHTML={{
__html: marked(md.replace(/\n/g, "\n\n")),
}}
></Display>
</Editor>
</Overflow>
<BrowserRouter
basename={
process.env.NODE_ENV === "production" ? "/simple-note/" : "/"
}
>
<Layout>
<Left>
<Sidebar notes={notes} />
</Left>
<Right>
<Switch>
<Route path="/new" component={Editor} />
<Route path="/:id" component={Editor} />
</Switch>
</Right>
</Layout>
</BrowserRouter>
);
}

const Overflow = styled.div`
overflow-y: auto;
overflow-x: hidden;
height: 500px;
width: 500px;
margin: auto;
`;
const Editor = styled.div`
position: relative;
width: 500px;
const Layout = styled.div`
display: flex;
height: 100%;
margin: auto;
span {
color: #ff572282;
}
code {
background: #eee;
border-radius: 5px;
color: #f44336;
margin: 0 -5px;
padding: 0 5px;
}
pre {
background: #eee;
border-radius: 5px;
}
h1,
h2,
h3,
h4,
h5 {
// display: inline;
font-size: 16px;
margin: 0;
padding: 0;
color: #f34d1a;
span {
color: #ff572282;
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
div {
display: inline;
}
color: #009688;
}
span.cb {
color: #ccc;
b {
color: red;
}
}
background: #f9f9f9;
`;
const Input = styled.textarea`
border: none;
position: absolute;
background: transparent;
outline: none;
color: rgba(0, 0, 0, 0);
caret-color: #000;
caret-width: 3px;
z-index: 10;
left: 0;
width: 100%;
resize: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
const Left = styled.div`
border-right: 1px solid #ececec;
width: 300px;
`;
const Display = styled.div`
position: relative;
z-index: 9;
const Right = styled.div`
padding: 20px;
height: 100%;
`;
123 changes: 123 additions & 0 deletions src/components/Editor.tsx
View file
@@ -0,0 +1,123 @@
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { useParams } from "react-router-dom";
import { getContent, updateContent } from "../state";
import marked from "../marked/marked";

export default function () {
const [md, setMd] = useState("");
const params = useParams<{ id: string }>();
const id = params.id;
useEffect(() => {
const note = getContent(id);
setMd(note?.note || "");
}, [id]);

const onInput = (e: any) => {
const html = e.target.value;
const plantText = html.replace(/\n\n/g, "\n").replace(/ /g, " ");
setMd(plantText);
updateContent(id, plantText);
};
return (
<Editor>
<Input
autoFocus
style={{
fontFamily: "consolas",
fontSize: 16,
}}
spellCheck={false}
onInput={onInput}
value={md}
></Input>
<Display
style={{
fontFamily: "consolas",
fontSize: 16,
}}
spellCheck={false}
dangerouslySetInnerHTML={{
__html: marked(md.replace(/\n/g, "\n\n")),
}}
></Display>
</Editor>
);
}

const Editor = styled.div`
position: relative;
width: 100%;
min-width: 500px;
height: 100%;
margin: auto;
span {
color: #ff572282;
}
code {
background: #eee;
border-radius: 5px;
color: #f44336;
}
pre {
background: #eee;
border-radius: 5px;
margin: 0;
}
h1,
h2,
h3,
h4,
h5 {
// display: inline;
font-size: 16px;
margin: 0;
padding: 0;
color: #f34d1a;
span {
color: #ff572282;
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
div {
display: inline;
}
color: #009688;
}
span.cb {
color: #ccc;
b {
color: red;
}
}
`;
const Input = styled.textarea`
border: none;
position: absolute;
background: transparent;
outline: none;
color: transparent;
caret-color: #000;
caret-width: 3px;
z-index: 10;
left: 0;
width: 100%;
resize: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
`;
const Display = styled.div`
border: 2px solid transparent;
position: relative;
z-index: 9;
width: 100%;
top: 0;
left: 0;
`;
92 changes: 92 additions & 0 deletions src/components/Sidebar.tsx
View file
@@ -0,0 +1,92 @@
import React from "react";
import styled from "styled-components";
import { useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { add, Note, deteteNote } from "../state";

export default ({
notes,
onSelect = () => {},
}: {
notes: Note[];
onSelect?: (_id: string) => void;
}) => {
const history = useHistory();
return (
<div>
<ButtonNew
onClick={() => {
const id = add();
setTimeout(() => {
history.push("/" + id);
}, 100);
}}
>
New
</ButtonNew>
{notes.map((note) => (
<Item key={note._id} to={`/${note._id}`}>
{note.title}
<X
onClick={() => {
if (window.confirm("Are you sure")) {
deteteNote(note._id!);
}
}}
>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path>
</svg>
</X>
</Item>
))}
</div>
);
};

const ButtonNew = styled.div`
display: block;
font-weight: 600;
color: #000;
text-decoration: none;
font-size: 12px;
background: #f6f6f6;
cursor: pointer;
text-align: center;
padding: 5px;
`;
const Item = styled(Link)`
padding: 10px;
font-family: consolas;
display: block;
text-decoration: none;
color: #555;
cursor: pointer;
border-top: 1px solid #ececec;
display: flex;
justify-content: space-between;
:last-of-type {
border-bottom: 1px solid #ececec;
}
:hover {
background: #f5f5f5;
}
`;
const X = styled.div`
border-radius: 5px;
font-size: 18px;
opacity: 0.3;
:hover {
opacity: 1;
color: #000;
background: #ccc;
}
`;
1 change: 1 addition & 0 deletions src/index.tsx
View file
Expand Up @@ -15,6 +15,7 @@ if (process.env.NODE_ENV !== "production") {
(function (AppManager) {
AppManager.register({
appId: process.env.REACT_APP_MICRO_APP_NAME,
root: true,
renderRoot: (elementId: string) => {
ReactDOM.render(<Root />, document.getElementById(elementId));
},
Expand Down

0 comments on commit 757095d

Please sign in to comment.