Skip to content

Commit

Permalink
Merge branch 'feature/articles' into feature/#219-transform-valid-mar…
Browse files Browse the repository at this point in the history
…kdown-to-nodes
  • Loading branch information
maerzhase authored Jul 30, 2022
2 parents fc4044d + 0ae8209 commit 88470bc
Show file tree
Hide file tree
Showing 25 changed files with 648 additions and 44 deletions.
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@taquito/taquito": "^13.0.1",
"@types/fuzzy-search": "^2.1.1",
"@types/is-hotkey": "^0.1.7",
"@types/prismjs": "^1.26.0",
"@types/react-datepicker": "^4.3.4",
"@vvo/tzdb": "^6.50.0",
"bignumber.js": "^9.0.2",
Expand All @@ -37,6 +38,7 @@
"next": "12.0.7",
"nextjs-progressbar": "^0.0.13",
"papaparse": "^5.3.2",
"prismjs": "^1.28.0",
"react": "17.0.2",
"react-chartjs-2": "^3.3.0",
"react-datepicker": "^4.7.0",
Expand All @@ -46,10 +48,12 @@
"react-json-view": "^1.21.3",
"react-nl2br": "^1.0.2",
"react-router-dom": "^5.3.0",
"react-simple-code-editor": "^0.11.2",
"react-textarea-autosize": "^8.3.4",
"rehype-format": "^4.0.0",
"rehype-highlight": "^5.0.0",
"rehype-katex": "^6.0.2",
"rehype-prism": "^2.1.3",
"rehype-react": "^7.1.1",
"rehype-slug": "^5.0.0",
"rehype-stringify": "^9.0.2",
Expand Down
122 changes: 122 additions & 0 deletions public/highlight/prism-dracula.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
/**
* Dracula Theme originally by Zeno Rocha [@zenorocha]
* https://draculatheme.com/
*
* Ported for PrismJS by Albert Vallverdu [@byverdu]
*/

code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #282a36;
}

/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #6272a4;
}

.token.punctuation {
color: #f8f8f2;
}

.namespace {
opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #ff79c6;
}

.token.boolean,
.token.number {
color: #bd93f9;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #50fa7b;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #f1fa8c;
}

.token.keyword {
color: #8be9fd;
}

.token.regex,
.token.important {
color: #ffb86c;
}

.token.important,
.token.bold {
font-weight: bold;
}

.token.italic {
font-style: italic;
}

.token.entity {
cursor: help;
}
29 changes: 26 additions & 3 deletions src/components/Card/CardNFTArticle.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,34 @@
}

.draft_banner {
padding: 12px;
text-align: center;
font-weight: bold;
color: var(--color-white);
background: var(--color-gray);
font-size: var(--font-size-small);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;

span {
display: block;
padding: 8px 12px;
}

button {
background-color: transparent;
border: none;
cursor: pointer;
z-index: 100;
position: relative;
color: var(--color-white);
height: 32px;
padding: 0 10px;

&:hover {
color: var(--color-error);
}
}
}

.draft_container {
Expand Down Expand Up @@ -124,4 +147,4 @@
.description {
font-size: var(--font-size-regular);
}
}
}
47 changes: 41 additions & 6 deletions src/components/Card/CardNFTArticle.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { memo, useContext, useMemo } from 'react';
import React, { memo, MouseEventHandler, useCallback, useContext, useMemo } from 'react';
import style from "./CardNFTArticle.module.scss";
import Image from "next/image";
import { NFTArticleInfos } from "../../types/entities/Article";
Expand All @@ -11,17 +11,42 @@ import Link from 'next/link';
import { Tags } from '../Tags/Tags';

interface CardNftArticleProps {
className?: string,
imagePriority?: boolean,
isDraft?: boolean,
className?: string
imagePriority?: boolean
isDraft?: boolean
article: NFTArticleInfos
onDelete?: (id: string) => void
}

const _CardNftArticle = ({ article: { id, title, slug, thumbnailUri, description, tags, author, createdAt }, isDraft, imagePriority, className }: CardNftArticleProps) => {
const _CardNftArticle = ({
article: {
id,
title,
slug,
thumbnailUri,
description,
tags,
author,
createdAt
},
isDraft,
imagePriority,
onDelete,
className
}: CardNftArticleProps) => {
const settings = useContext(SettingsContext)
const thumbnailUrl = useMemo(() => thumbnailUri && ipfsGatewayUrl(thumbnailUri), [thumbnailUri])
const dateCreatedAt = useMemo(() => new Date(createdAt), [createdAt]);
const urlArticle = isDraft ? `/article/editor/local/${id}` : `/article/${slug}`;

const onClickDelete = useCallback<MouseEventHandler>((event) => {
event.preventDefault()
event.stopPropagation()
if (window.confirm?.("Do you really want to delete this article ? It will be removed from your browser memory.")) {
onDelete?.(id as string)
}
}, [])

return (
<div className={cs(style.container, className, {
[style.hover_effect]: settings.hoverEffectCard,
Expand All @@ -30,7 +55,17 @@ const _CardNftArticle = ({ article: { id, title, slug, thumbnailUri, description
<Link href={urlArticle}>
<a className={cs(style.link_wrapper)}/>
</Link>
{isDraft && <div className={style.draft_banner}>DRAFT (saved locally)</div>}
{isDraft && (
<div className={style.draft_banner}>
<span>DRAFT (saved locally)</span>
<button
type="button"
onClick={onClickDelete}
>
<i className="fa-solid fa-trash" aria-hidden/>
</button>
</div>
)}
<div className={style.content}>
<div className={cs(style['img-wrapper'], {
[style['draft_img-wrapper']]: isDraft,
Expand Down
7 changes: 7 additions & 0 deletions src/components/NFTArticle/NFTArticle.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,13 @@
opacity: 1 !important;
}

code {
font-family: inherit;
background-color: var(--color-gray-vvlight);
border: 1px solid var(--color-gray-vlight);
padding: 0 4px;
border-radius: 4px;
}
}

.article_wrapper_container {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import cs from "classnames"
import { ReactNode } from "react"
import { ContextualMenuItems } from "../../../../Menus/ContextualMenuItems"
import { TEditAttributeComp } from "../Blocks"

interface ILanguageEntry {
name: string
value: string
icon: ReactNode
}

export const codeEditorLangs: ILanguageEntry[] = [
{
name: "Javascript",
value: "js",
icon: <i className="fa-brands fa-square-js" aria-hidden />
},
{
name: "GLSL",
value: "glsl",
icon: <i className="fa-regular fa-file-code" aria-hidden />
},
{
name: "HTML",
value: "html",
icon: <i className="fa-regular fa-file-code" aria-hidden />
},
{
name: "CSS",
value: "css",
icon: <i className="fa-brands fa-css3-alt" aria-hidden />
},
{
name: "JSON",
value: "json",
icon: <i className="fa-solid fa-brackets-curly" aria-hidden />
},
{
name: "Java",
value: "java",
icon: <i className="fa-regular fa-file-code" aria-hidden />
},
]

export function getCodeEditorLang(value: string): ILanguageEntry {
return codeEditorLangs.find(entry => entry.value === value) || codeEditorLangs[0]
}

export const CodeAttributeSettings: TEditAttributeComp = ({
element,
onEdit,
}) => {
return (
<ContextualMenuItems>
{codeEditorLangs.map((language) => (
<button
key={language.value}
type="button"
onClick={() => onEdit({
lang: language.value,
})}
className={cs({
selected: element.lang === language.value
})}
>
{language.icon}
<span>{language.name}</span>
</button>

))}
</ContextualMenuItems>
)
}
Loading

0 comments on commit 88470bc

Please sign in to comment.