feat: description

src/App.jsx

@@ -9,6 +9,7 @@ import Notes from "./pages/notes";
 import PubNote from "./pages/pubNote";
 import PubError from "./pages/pubError";
 import PubNoteSafe from "./pages/pubNoteSafe";
+import ReactMarkdown from "react-markdown";
 
 function App() {
   Storage.prototype.setObj = function (key, obj) {
@@ -33,11 +34,20 @@ function App() {
           <Route
             path="/about"
             element={
-              <div className="col-span-4">
+              <div className="col-span-4 md">
-                AnoPaper позволяет анонимно сохранять и опубликовывать заметки.
+                <ReactMarkdown>
-                Заметки поддерживают формат markdown. Публичные заметки доступны
+                  {`## Anopaper - сервис анонимных записок
-                только по ссылке. Записки которые не публичны записываются
+                  \rAnoPaper позволяет анонимно сохранять и публиковать заметки.  
-                только локально и не отправляются на сервер.
+                  \r-----
+                  \r### Функционал:  
+                  
+                  \r* Заметки поддерживают формат markdown. Например запись:  \`### Заголовок 3-го уровня\` будет выглядеть так:  
+                  \r> ### Заголовок 3-го уровня
+               
+                  \r* Публичные заметки доступны только по ссылке.
+                  \r* При переходе по ссылке заметка исчезает, прочесть ее можно только один раз.
+                  \r* Не публичные заметки сохраняются локально и не отправляются на сервер.`}
+                </ReactMarkdown>
               </div>
             }
           />

src/components/button.jsx

@@ -13,7 +13,7 @@ function Button(props) {
   );
 }
 
-function IconWithButton(props) {
+function IconWithText(props) {
   if (props.reverse) {
     return (
       <div className="grid place-content-end grid-cols-2">
@@ -30,4 +30,4 @@ function IconWithButton(props) {
   );
 }
 
-export { Button, IconWithButton };
+export { Button, IconWithText };

src/components/menu.jsx

@@ -1,4 +1,4 @@
-import { Button, IconWithButton } from "./button";
+import { Button, IconWithText } from "./button";
 import {
   MagnifyingGlassCircleIcon,
   PencilIcon,
@@ -10,29 +10,29 @@ function Menu() {
   return (
     <div className="grid grid-cols-1 col-span-4 lg:col-span-1 gap-2 m-4 place-content-start justify-self-center justify-center">
       <Button href="/notes">
-        <IconWithButton
+        <IconWithText
           icon={
             <MagnifyingGlassCircleIcon className="transform translate-z-0 h-7 w-7" />
           }
         >
           Заметки
-        </IconWithButton>
+        </IconWithText>
       </Button>
       <Button href="/">
-        <IconWithButton
+        <IconWithText
           icon={<PencilIcon className="transform translate-z-0 h-7 w-7" />}
         >
           Написать
-        </IconWithButton>
+        </IconWithText>
       </Button>
       <Button href="/about">
-        <IconWithButton
+        <IconWithText
           icon={
             <ExclamationCircleIcon className="transform translate-z-0 h-7 w-7" />
           }
         >
           Подробнее
-        </IconWithButton>
+        </IconWithText>
       </Button>
     </div>
   );

src/index.css

@@ -25,7 +25,7 @@
   }
 
   .md blockquote{
-    @apply border-l-4 pl-2 rounded-lg;
+    @apply border-l-4 pl-2 rounded-lg ml-4 mt-2 mb-2;
     @apply bg-zinc-200 border-zinc-400;
     @apply dark:bg-zinc-800 dark:border-zinc-600;
   }
@@ -35,19 +35,19 @@
   }
 
   .md ul{
-    @apply list-disc list-inside;
+    @apply list-disc list-inside ml-4;
   }
 
   .md li ul {
-    @apply list-disc list-inside ml-2;
+    @apply list-disc list-inside;
   }
 
   .md ol{
-    @apply list-decimal list-inside;
+    @apply list-decimal list-inside ml-4;
   }
 
   .md li ol{
-    @apply list-decimal list-inside ml-2;
+    @apply list-decimal list-inside ml-4;
   }
 
   .md code {
@@ -64,4 +64,6 @@
   .md img {
     @apply w-96 ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105 rounded-2xl hover:drop-shadow-2xl transition duration-500 lg:ml-5;
   }
+
+  .md p { display: inline; }
 }

src/pages/create.jsx

@@ -1,4 +1,4 @@
-import { Button, IconWithButton } from "../components/button";
+import { Button, IconWithText } from "../components/button";
 import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { CheckBox } from "../components/checkbox";
 import { useState } from "react";
@@ -74,14 +74,14 @@ function CreateNote() {
             className="m-5"
             href={publicState ? "/notes/save-local" : "/notes/publish"}
           >
-            <IconWithButton
+            <IconWithText
               reverse={true}
               icon={
                 <ChevronDoubleRightIcon className="transform translate-z-0 h-7 w-7" />
               }
             >
               Отправить
-            </IconWithButton>
+            </IconWithText>
           </Button>
         </div>
       </div>

src/pages/note.jsx

@@ -2,7 +2,7 @@ import ReactMarkdown from "react-markdown";
 import { useParams } from "react-router-dom";
 import printDate from "../components/utils";
 import { ChevronDoubleLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { Button, IconWithButton } from "../components/button";
+import { Button, IconWithText } from "../components/button";
 
 function Note() {
   let params = useParams();
@@ -13,13 +13,13 @@ function Note() {
     return (
       <div className="">
         <Button className="mb-4" href="/notes">
-          <IconWithButton
+          <IconWithText
             icon={
               <ChevronDoubleLeftIcon className="transform translate-z-0 h-7 w-7" />
             }
           >
             Заметки
-          </IconWithButton>
+          </IconWithText>
         </Button>
 
         <div className="border border-blue-300 rounded-lg p-4">
@@ -48,11 +48,11 @@ function Note() {
                 localStorage.setObj("Notes", notesObj);
               }}
             >
-              <IconWithButton
+              <IconWithText
                 icon={<TrashIcon className="transform translate-z-0 h-7 w-7" />}
               >
                 Удалить
-              </IconWithButton>
+              </IconWithText>
             </Button>
           </div>
         </div>
@@ -62,13 +62,13 @@ function Note() {
     return (
       <div>
         <Button className="mb-4" href="/notes">
-          <IconWithButton
+          <IconWithText
             icon={
               <ChevronDoubleLeftIcon className="transform translate-z-0 h-7 w-7" />
             }
           >
             Заметки
-          </IconWithButton>
+          </IconWithText>
         </Button>
         <div>Заметки не существует.</div>
       </div>

src/pages/notes.jsx

@@ -1,4 +1,4 @@
-import { Button, IconWithButton } from "../components/button";
+import { Button, IconWithText } from "../components/button";
 import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import printDate from "../components/utils";
 
@@ -22,14 +22,14 @@ function Notes() {
                 <div className="text-center">{printDate(val[1].time)}</div>
                 <div className="">
                   <Button className="" href={`/notes/${val[0]}`}>
-                    <IconWithButton
+                    <IconWithText
                       reverse={true}
                       icon={
                         <ChevronDoubleRightIcon className="transform translate-z-0 h-7 w-7" />
                       }
                     >
                       Перейти
-                    </IconWithButton>
+                    </IconWithText>
                   </Button>
                 </div>
               </div>

src/pages/pubError.jsx

@@ -1,18 +1,18 @@
 import printDate from "../components/utils";
 import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
-import { Button, IconWithButton } from "../components/button";
+import { Button, IconWithText } from "../components/button";
 
 function PubError() {
   return (
     <div className="">
       <Button className="mb-4" href="/">
-        <IconWithButton
+        <IconWithText
           icon={
             <ChevronDoubleLeftIcon className="transform translate-z-0 h-7 w-7" />
           }
         >
           Вернуться
-        </IconWithButton>
+        </IconWithText>
       </Button>
       <div className="border border-blue-300 rounded-lg p-4">
         <div className="grid grid-cols-1 lg:grid-cols-2">

src/pages/pubNote.jsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useParams } from "react-router-dom";
 import printDate from "../components/utils";
 import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
-import { Button, IconWithButton } from "../components/button";
+import { Button, IconWithText } from "../components/button";
 
 function PubNote() {
   let params = useParams();
@@ -37,13 +37,13 @@ function PubNote() {
   return (
     <div className="">
       <Button className="mb-4" href="/">
-        <IconWithButton
+        <IconWithText
           icon={
             <ChevronDoubleLeftIcon className="transform translate-z-0 h-7 w-7" />
           }
         >
           Писать
-        </IconWithButton>
+        </IconWithText>
       </Button>
       <div className="border border-blue-300 rounded-lg p-4">
         <div className="grid grid-cols-1 lg:grid-cols-2">

src/pages/pubNoteSafe.jsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useParams } from "react-router-dom";
 import printDate from "../components/utils";
 import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
-import { Button, IconWithButton } from "../components/button";
+import { Button, IconWithText } from "../components/button";
 import { CopyToClipboard } from "../components/copytocb";
 
 function PubNoteSafe() {
@@ -41,13 +41,13 @@ function PubNoteSafe() {
   return (
     <div className="">
       <Button className="mb-4" href="/">
-        <IconWithButton
+        <IconWithText
           icon={
             <ChevronDoubleLeftIcon className="transform translate-z-0 h-7 w-7" />
           }
         >
           Писать
-        </IconWithButton>
+        </IconWithText>
       </Button>
 
       {note?.code === 1 && (