feat: description

2024-11-05 20:43:57 +03:00 · 2023-02-09 17:15:34 +03:00 · 2023-02-09 17:15:34 +03:00 · eb3fcec357
commit eb3fcec357
parent df877c6aa5
10 changed files with 53 additions and 41 deletions
--- a/src/App.jsx
+++ b/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">
-                AnoPaper позволяет анонимно сохранять и опубликовывать заметки.
-                Заметки поддерживают формат markdown. Публичные заметки доступны
-                только по ссылке. Записки которые не публичны записываются
-                только локально и не отправляются на сервер.
+              <div className="col-span-4 md">
+                <ReactMarkdown>
+                  {`## Anopaper - сервис анонимных записок
+                  \rAnoPaper позволяет анонимно сохранять и публиковать заметки.  
+                  \r-----
+                  \r### Функционал:  
+                  
+                  \r* Заметки поддерживают формат markdown. Например запись:  \`### Заголовок 3-го уровня\` будет выглядеть так:  
+                  \r> ### Заголовок 3-го уровня
+               
+                  \r* Публичные заметки доступны только по ссылке.
+                  \r* При переходе по ссылке заметка исчезает, прочесть ее можно только один раз.
+                  \r* Не публичные заметки сохраняются локально и не отправляются на сервер.`}
+                </ReactMarkdown>
              </div>
            }
          />
--- a/src/components/button.jsx
+++ b/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 };
--- a/src/components/menu.jsx
+++ b/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>
  );
--- a/src/index.css
+++ b/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; }
 }
--- a/src/pages/create.jsx
+++ b/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>
--- a/src/pages/note.jsx
+++ b/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>
--- a/src/pages/notes.jsx
+++ b/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>
--- a/src/pages/pubError.jsx
+++ b/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">
--- a/src/pages/pubNote.jsx
+++ b/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">
--- a/src/pages/pubNoteSafe.jsx
+++ b/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 && (