2023.07.06

- (housekeeping) Update reqs
- (tweak) In-reader stylings
- (feature) Save webpages to md, add spinner component
- (housekeeping) gitignore

.gitignore

@@ -2,4 +2,5 @@
 *.pyc
 MarkdownLab.egg-info/
 .DS_Store
-Notes/
+Notes/
+*.db

mdlab/routes.py

@@ -1,6 +1,9 @@
 import datetime
+from bs4 import BeautifulSoup
 
 from flask import current_app, render_template, request
+import html2text
+import requests
 
 from mdlab.models import Note
 
@@ -37,6 +40,17 @@ def edit_note():
     return note_.to_dict()
 
 
+@current_app.post("/save_page")
+def save_page():
+    soup = BeautifulSoup(requests.get(request.json.get("url")).text, "html.parser")
+    title = soup.find("title").get_text()
+
+    note_ = Note.add(title)
+    note_.edit(html2text.html2text(str(soup), bodywidth=0))
+
+    return note_.to_dict()
+
+
 @current_app.post("/rename_note")
 def rename_note():
     note_ = Note(request.json.get("name"))

mdlab/static/App.css

@@ -109,3 +109,19 @@ textarea {
 .form-control {
   font-size: small;
 }
+
+#reader img {
+  max-width: 100%;
+}
+
+#reader a {
+  color: var(--btn-color);
+  text-decoration: underline;
+  font-weight: bold;
+}
+
+#reader code,
+#reader pre {
+  color: var(--btn-color);
+  font-family: monospace;
+}

mdlab/static/App.jsx

@@ -112,7 +112,9 @@ function Editor() {
       <div className="p-1" style={{ height: "500px", overflowY: "scroll" }}>
         {mode === "view" ? (
           <>
-            <div dangerouslySetInnerHTML={{ __html: note.content?.md }}></div>
+            <div
+              id="reader"
+              dangerouslySetInnerHTML={{ __html: note.content?.md }}></div>
           </>
         ) : (
           <>
@@ -184,6 +186,48 @@ function NoteItem({ item }) {
   );
 }
 
+function Spinner() {
+  return <span className="me-2 spinner-border spinner-border-sm"></span>;
+}
+
+function PageSaver() {
+  const [url, setUrl] = React.useState("");
+  const [, , getNotes] = React.useContext(NotesContext);
+  const [, setNote] = React.useContext(NoteContext);
+  const [loading, setLoading] = React.useState(false);
+
+  const onChangeUrl = (e) => setUrl(e.target.value);
+
+  const savePage = (e) => {
+    e.preventDefault();
+    setLoading(true);
+    apiCall("/save_page", { url: url }, (data) => {
+      getNotes();
+      setNote(data);
+      setLoading(false);
+      setUrl("");
+    });
+  };
+
+  return (
+    <>
+      <form onSubmit={savePage} className="input-group">
+        <input
+          autoComplete="off"
+          className="form-control"
+          placeholder="URL"
+          value={url}
+          onChange={onChangeUrl}
+        />
+        <button type="submit" className="btn">
+          {loading && <Spinner />}
+          Save
+        </button>
+      </form>
+    </>
+  );
+}
+
 function Search() {
   const [, setLoading] = React.useContext(LoadingContext);
   const [query, setQuery] = React.useState("");
@@ -260,6 +304,7 @@ function Notes() {
 
   return (
     <>
+      <PageSaver />
       <Search />
       <a className="btn w-100" onClick={() => addNote()}>
         <i className="me-2 bi bi-plus-lg"></i>New Note
@@ -294,7 +339,7 @@ function Nav() {
           {!loading ? (
             <i className="me-2 bi bi-markdown-fill"></i>
           ) : (
-            <span className="me-2 spinner-border spinner-border-sm"></span>
+            <Spinner />
           )}
           Markdown-Lab
         </a>

requirements.txt

@@ -1,6 +1,9 @@
+beautifulsoup4==4.12.0
 click==8.1.3
-Flask==2.0.0
+Flask==2.3.2
+html2text==2020.1.16
 Markdown==3.3.7
 python-dotenv==1.0.0
 python_frontmatter==1.0.0
+Requests==2.31.0
 setuptools==63.1.0

setup.py

@@ -2,7 +2,7 @@
 
 setuptools.setup(
     name="MarkdownLab",
-    version="2023.06.18",
+    version="2023.07.06",
     entry_points={"console_scripts": ["mdlab=mdlab.__main__:cli"]},
     long_description=open("README.md").read(),
     license=open("LICENSE.md").read(),