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 837f79c + c1b7474 commit 37d124a
Show file tree
Hide file tree
Showing 49 changed files with 983 additions and 418 deletions.
9 changes: 5 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
},
"dependencies": {
"@apollo/client": "^3.4.16",
"@taquito/beacon-wallet": "^12.0.3",
"@taquito/michel-codec": "^12.0.3",
"@taquito/michelson-encoder": "^12.0.3",
"@taquito/taquito": "^12.0.3",
"@taquito/beacon-wallet": "^13.0.1",
"@taquito/michel-codec": "^13.0.1",
"@taquito/michelson-encoder": "^13.0.1",
"@taquito/taquito": "^13.0.1",
"@types/fuzzy-search": "^2.1.1",
"@types/is-hotkey": "^0.1.7",
"@types/react-datepicker": "^4.3.4",
Expand Down Expand Up @@ -63,6 +63,7 @@
"remark-toc": "^8.0.0",
"remark-unwrap-images": "^3.0.1",
"sass": "^1.42.1",
"scriptjs": "^2.5.9",
"slate": "^0.81.0",
"slate-history": "^0.66.0",
"slate-react": "^0.81.0",
Expand Down
10 changes: 7 additions & 3 deletions src/components/Card/CardNFTArticle.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
bottom: 0;
left: 0;
right: 0;
z-index: 20;
z-index: 2;
}

.img-wrapper {
Expand Down Expand Up @@ -46,12 +46,12 @@

.author {
position: relative;
z-index: 50;
z-index: 3;
}

.date {
color: var(--color-gray);
margin-left: 10px;
margin-left: 20px;
}

.title {
Expand All @@ -65,6 +65,8 @@
.description {
flex: 1;
margin: $spacing 0;
font-family: "Noto Serif", serif !important;
font-size: 1.2rem;

p {
font-size: var(--font-size-big);
Expand All @@ -83,9 +85,11 @@
color: var(--color-white);
background: var(--color-gray);
}

.draft_container {
border-color: var(--color-gray);
}

.draft_img-wrapper {
border-color: var(--color-gray);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Card/CardNFTArticle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const _CardNftArticle = ({ article: { id, title, slug, thumbnailUri, description
<div className={style.infos_header}>
<UserBadge
hasLink
user={author}
user={author!}
size="regular"
className={cs(style.author)}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Card/CardSmallNFTArticle.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { memo, useContext, useMemo } from 'react';
import style from "./CardSmallNFTArticle.module.scss";
import { NFTArticle } from "../../types/Article";
import { NFTArticle } from "../../types/entities/Article";
import Image from "next/image";
import { ipfsGatewayUrl } from "../../services/Ipfs";
import { SettingsContext } from "../../context/Theme";
Expand Down Expand Up @@ -31,7 +31,7 @@ const _CardSmallNftArticle = ({ article: { title, slug, description, thumbnailUr
/>
</div>
<div className={style.infos}>
<UserBadge user={author} size="regular" />
<UserBadge user={author!} size="regular" />
<Link href={`/article/${slug}`}>
<a className={style.title}>
<h5>{title}</h5>
Expand Down
19 changes: 18 additions & 1 deletion src/components/NFTArticle/NFTArticle.module.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,21 @@
.article_wrapper {
h1 {
font-size: 2.5rem;
}

h2 {
font-size: 2.2rem;
}

p,
ul,
ol,
blockquote,
table,
figcaption {
font-family: "Noto Serif", serif;
font-size: 1.2rem;
}

p,
ul,
Expand Down Expand Up @@ -42,4 +59,4 @@
.article_wrapper_container {
width: min(900px, 100%);
margin: 0 auto;
}
}
5 changes: 3 additions & 2 deletions src/components/NFTArticle/NFTArticle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,11 @@ const _NftArticle = ({ markdown }: NftArticleProps) => {
};
getNFTArticle();
}, [markdown])

return (
<div>
<>
{content}
</div>
</>
);
};

Expand Down
3 changes: 2 additions & 1 deletion src/components/NFTArticle/SlateEditor/Elements/Blocks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ export const BlockDefinitions: Record<EArticleBlocks, IArticleBlockDefinition> =
instanciateElement: () => ({
type: "list",
ordered: false,
spread: false,
children: [{
type: "listItem",
children: [{
Expand Down Expand Up @@ -318,7 +319,7 @@ export const BlockDefinitions: Record<EArticleBlocks, IArticleBlockDefinition> =
buttonInstantiable: true,
render: ({ attributes, element, children }) => (
<div className={style.article_wrapper_container} {...attributes}>
{children}
{children}
<BlockKatexEditor slateElement={element}/>
</div>
),
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
import React, { memo, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
import Slate, { Transforms } from 'slate';
import style from "./BlockKatex.module.scss";
import { ReactEditor, RenderElementProps, useSlateStatic, useSelected } from "slate-react";
Expand All @@ -8,11 +8,10 @@ import cs from "classnames";
import useClickOutside from "../../../../hooks/useClickOutside";

interface BlockKatexEditorProps {
slateAttributes: RenderElementProps["attributes"]
slateAttributes?: RenderElementProps["attributes"]
slateElement: Slate.Element
children: any
}
const _BlockKatexEditor = ({ slateElement }: BlockKatexEditorProps) => {
const _BlockKatexEditor = ({ slateElement }: PropsWithChildren<BlockKatexEditorProps>) => {
const refTextArea = useRef<HTMLTextAreaElement>(null);
const refContainer = useRef<HTMLDivElement>(null);
const [isFocused, setIsFocused] = useState(false);
Expand Down Expand Up @@ -43,7 +42,7 @@ const _BlockKatexEditor = ({ slateElement }: BlockKatexEditorProps) => {
}, !isFocused)

useEffect(() => {
if(selected) {
if (selected && refTextArea.current) {
const end = refTextArea.current.value.length;
refTextArea.current.setSelectionRange(end, end);
refTextArea.current.focus();
Expand Down
11 changes: 10 additions & 1 deletion src/components/NFTArticle/elements/Embed/Embed.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,13 @@ p.not_found {
width: 100%;
height: 100%;
}
}
}

.twitter {
display: flex;
flex-direction: column;
align-items: center;
}
.twitter_loading {
margin-top: 16px;
}
2 changes: 1 addition & 1 deletion src/components/NFTArticle/elements/Embed/EmbedEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const EmbedEditor = memo(({ children, href, slateElement }: EmbedEditorProps) =>
at: path
})
setUrl(newUrl);
}, [])
}, [editor, path])

return (
<div contentEditable={false}>
Expand Down
18 changes: 11 additions & 7 deletions src/components/NFTArticle/elements/Embed/EmbedMedia.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,35 @@ import React, { memo, NamedExoticComponent, useMemo } from 'react';
import cs from "classnames"
import EmbedSpotify from "./EmbedSpotify";
import EmbedYoutube from "./EmbedYoutube";
import EmbedTwitter from "./EmbedTwitter";
import style from "./Embed.module.scss";
import text from "../../../../styles/Text.module.css"
import { getYoutubeCodeFromUrl } from "../../../../utils/embed";
import { getTweetIdFromUrl, getYoutubeCodeFromUrl } from "../../../../utils/embed";

export interface EmbedElementProps {
href: string
caption?: string
}
interface UrlPlayers {
[key: string]: {
check: (href: string) => boolean,
component: NamedExoticComponent<EmbedElementProps>,
}
interface UrlPlayer {
check: (href: string) => boolean,
component: NamedExoticComponent<EmbedElementProps>,
}
export const mediaPlayers: UrlPlayers = {
export const mediaPlayers: Record<string, UrlPlayer> = {
spotify: {
check: (href) => href.startsWith('https://open.spotify.com/'),
component: EmbedSpotify,
},
youtube: {
check: (href) => !!getYoutubeCodeFromUrl(href),
component: EmbedYoutube,
},
twitter: {
check: (href) => !!getTweetIdFromUrl(href),
component: EmbedTwitter,
}
}


interface EmbedMediaProps {
href: string,
showNotFound?: boolean
Expand Down
2 changes: 1 addition & 1 deletion src/components/NFTArticle/elements/Embed/EmbedSpotify.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const EmbedSpotify = memo<EmbedElementProps>(({ href }) => {
return path.startsWith('embed') ? href : `https://open.spotify.com/embed/${path}`
}, [href])
return (
<div contentEditable={false}>
<div contentEditable={false} className="embed_media">
<iframe
className={style.spotify}
src={src} width="660px"
Expand Down
70 changes: 70 additions & 0 deletions src/components/NFTArticle/elements/Embed/EmbedTwitter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React, { memo, useState, useEffect } from 'react';
import { EmbedElementProps } from "./EmbedMedia";
import { getTweetIdFromUrl } from "../../../../utils/embed";
import style from "./Embed.module.scss";
import { Error } from "../../../Error/Error";
import useInit from "../../../../hooks/useInit";
import Skeleton from "../../../Skeleton";
import { LoaderBlock } from "../../../Layout/LoaderBlock";

const twitterWidgetJs = 'https://platform.twitter.com/widgets.js';

declare global {
interface Window {
twttr: any;
}
}

const EmbedTwitter = memo<EmbedElementProps>(({ href}) => {
const ref = React.useRef<HTMLDivElement | null>(null);
const [isInit, setIsInit] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [hasTweetNotFound, setHasTweetNotFound] = useState(false);

useInit(() => {
const script = require('scriptjs');
script(twitterWidgetJs, 'twitter-embed', () => setIsInit(true));
})

useEffect(() => {
const loadTweet = async () => {
setIsLoading(true)
if (ref.current) {
ref.current?.replaceChildren();
}
const tweetElement = await window.twttr.widgets.createTweet(
tweetId,
ref?.current,
)
setIsLoading(false);
if (!tweetElement) {
setHasTweetNotFound(true);
}
};

if (!isInit) return ;
setHasTweetNotFound(false);
const tweetId = getTweetIdFromUrl(href);
if (!tweetId) return ;
if (!window.twttr) {
console.error('Failure to load window.twttr, aborting load');
return;
}
if (!window.twttr.widgets.createTweet) {
console.error(`Method createTweet is not present anymore in twttr.widget api`);
return;
}
loadTweet();
}, [href, isInit]);

return (
<>
{isLoading && <LoaderBlock className={style.twitter_loading} size="small" />}
<div className={style.twitter} ref={ref}/>
{hasTweetNotFound && <Error>No tweet found for this url</Error>}
</>
);
});

EmbedTwitter.displayName = 'EmbedTwitter';
export default EmbedTwitter;
10 changes: 7 additions & 3 deletions src/components/NFTArticle/elements/Embed/EmbedYoutube.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { memo, useMemo } from 'react';
import style from "./Embed.module.scss";
import React, { memo, useMemo } from 'react'
import style from "./Embed.module.scss"
import cs from "classnames"
import { getYoutubeCodeFromUrl } from "../../../../utils/embed";
import { EmbedElementProps } from "./EmbedMedia";

Expand All @@ -9,7 +10,10 @@ const EmbedYoutube = memo<EmbedElementProps>(({ href }) => {
return `https://www.youtube.com/embed/${code}`;
}, [href]);
return (
<div className={style.youtube} contentEditable={false}>
<div
className={cs(style.youtube, "embed_media")}
contentEditable={false}
>
<iframe
src={embedUrl}
title="YouTube video player"
Expand Down
Empty file.
25 changes: 25 additions & 0 deletions src/components/NFTArticle/elements/Medias/NFTArticleImage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import style from "./NFTArticleImage.module.scss"
import cs from "classnames"
import { ImagePolymorphic } from "../../../Medias/ImagePolymorphic"

interface Props {
src: string
alt: string
}
export function NFTArticleImage({
src,
alt,
}: Props) {
return (
<figure className="article_image">
<ImagePolymorphic
uri={src}
/>
{alt && (
<figcaption>
{alt}
</figcaption>
)}
</figure>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,16 @@

.table {
width: 100%;
border: 2px solid var(--color-black);
border: 2px solid var(--color-border);
background-color: var(--color-white);
border-collapse: collapse;
table-layout: fixed;
font-size: var(--font-size-small);

th,
td {
padding: $spacing-small;
border: 2px solid var(--color-black);
border: 2px solid var(--color-border);
}
}

Expand Down
Loading

0 comments on commit 37d124a

Please sign in to comment.