feat: description

This commit is contained in:
Artemy 2023-02-09 17:15:34 +03:00
parent df877c6aa5
commit eb3fcec357
10 changed files with 53 additions and 41 deletions

View file

@ -9,6 +9,7 @@ import Notes from "./pages/notes";
import PubNote from "./pages/pubNote"; import PubNote from "./pages/pubNote";
import PubError from "./pages/pubError"; import PubError from "./pages/pubError";
import PubNoteSafe from "./pages/pubNoteSafe"; import PubNoteSafe from "./pages/pubNoteSafe";
import ReactMarkdown from "react-markdown";
function App() { function App() {
Storage.prototype.setObj = function (key, obj) { Storage.prototype.setObj = function (key, obj) {
@ -33,11 +34,20 @@ function App() {
<Route <Route
path="/about" path="/about"
element={ 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> </div>
} }
/> />

View file

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

View file

@ -1,4 +1,4 @@
import { Button, IconWithButton } from "./button"; import { Button, IconWithText } from "./button";
import { import {
MagnifyingGlassCircleIcon, MagnifyingGlassCircleIcon,
PencilIcon, PencilIcon,
@ -10,29 +10,29 @@ function Menu() {
return ( 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"> <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"> <Button href="/notes">
<IconWithButton <IconWithText
icon={ icon={
<MagnifyingGlassCircleIcon className="transform translate-z-0 h-7 w-7" /> <MagnifyingGlassCircleIcon className="transform translate-z-0 h-7 w-7" />
} }
> >
Заметки Заметки
</IconWithButton> </IconWithText>
</Button> </Button>
<Button href="/"> <Button href="/">
<IconWithButton <IconWithText
icon={<PencilIcon className="transform translate-z-0 h-7 w-7" />} icon={<PencilIcon className="transform translate-z-0 h-7 w-7" />}
> >
Написать Написать
</IconWithButton> </IconWithText>
</Button> </Button>
<Button href="/about"> <Button href="/about">
<IconWithButton <IconWithText
icon={ icon={
<ExclamationCircleIcon className="transform translate-z-0 h-7 w-7" /> <ExclamationCircleIcon className="transform translate-z-0 h-7 w-7" />
} }
> >
Подробнее Подробнее
</IconWithButton> </IconWithText>
</Button> </Button>
</div> </div>
); );

View file

@ -25,7 +25,7 @@
} }
.md blockquote{ .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 bg-zinc-200 border-zinc-400;
@apply dark:bg-zinc-800 dark:border-zinc-600; @apply dark:bg-zinc-800 dark:border-zinc-600;
} }
@ -35,19 +35,19 @@
} }
.md ul{ .md ul{
@apply list-disc list-inside; @apply list-disc list-inside ml-4;
} }
.md li ul { .md li ul {
@apply list-disc list-inside ml-2; @apply list-disc list-inside;
} }
.md ol{ .md ol{
@apply list-decimal list-inside; @apply list-decimal list-inside ml-4;
} }
.md li ol{ .md li ol{
@apply list-decimal list-inside ml-2; @apply list-decimal list-inside ml-4;
} }
.md code { .md code {
@ -64,4 +64,6 @@
.md img { .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; @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; }
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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