Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

changed markdown parser #809

Merged
merged 1 commit into from
Apr 12, 2018
Merged

changed markdown parser #809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions components/HomePageComponents/HomePageSlider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from "react";
import Slider from "react-slick";
import Link from "next/link";
import ReactMarkdown from "react-markdown";

import { NextArrow, PrevArrow } from "components/shared/CarouselNavArrows";

import { stylesheet, classNames } from "./HomePageSlider.css";
import { classNames as breakpoints } from "css/breakpoints.css";

const markdownit = require("markdown-it")({ html: true });
const moreLinkChevron = "static/images/chevron-thick-orange.svg";
const moreLinkChevronBlue = "static/images/chevron-thick-blue.svg";
const largeChevron = "static/images/chevron-thin.svg";
Expand Down Expand Up @@ -81,11 +81,11 @@ const HomePageSlider = ({
}}
/>
</div>
<div
dangerouslySetInnerHTML={{
__html: markdownit.renderInline(name)
}}
<ReactMarkdown
className={classNames.itemText}
source={name}
allowedTypes={["emphasis"]}
unwrapDisallowed
/>
</a>
</Link>
Expand Down
6 changes: 1 addition & 5 deletions components/ItemComponents/BreadcrumbsModule/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import { UNTITLED_TEXT } from "constants/site";
import { stylesheet, classNames } from "./BreadcrumbsModule.css";
import { classNames as utilClassNames } from "css/utils.css";

const markdownit = require("markdown-it")({ html: true });

const { container } = utilClassNames;
const chevron = "/static/images/chevron-thick-orange.svg";

Expand Down Expand Up @@ -105,9 +103,7 @@ const BreadcrumbsModule = ({
<Breadcrumbs
breadcrumbs={breadcrumbs.map(breadcrumb =>
Object.assign({}, breadcrumb, {
title: breadcrumb.title
? markdownit.renderInline(breadcrumb.title)
: UNTITLED_TEXT
title: breadcrumb.title ? breadcrumb.title : UNTITLED_TEXT
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just sanity checking - you don't want rendered markdown in breadcrumbs?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm passing the title as-is and markdownifying it in the breadcrumbs module

})
)}
/>
Expand Down
11 changes: 5 additions & 6 deletions components/PrimarySourceSetsComponents/AllSets/components/SetsList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import Link from "next/link";
import ReactMarkdown from "react-markdown";

import { extractSourceSetSlug, removeQueryParams } from "utilFunctions/";
import {
Expand All @@ -9,8 +10,6 @@ import {

import { classNames, stylesheet } from "./SetsList.css";

const markdownit = require("markdown-it")({ html: true });

const SetsList = ({ sets, route }) =>
<div className={`${classNames.setsWrapper} site-max-width`}>
<ul className="row">
Expand Down Expand Up @@ -59,10 +58,10 @@ const SetsList = ({ sets, route }) =>
className={`${classNames.title} hover-underline`}
title={set.name}
>
<div
dangerouslySetInnerHTML={{
__html: markdownit.renderInline(set.name)
}}
<ReactMarkdown
source={set.name}
allowedTypes={["emphasis"]}
unwrapDisallowed
/>
</a>
</Link>
Expand Down
3 changes: 1 addition & 2 deletions components/PrimarySourceSetsComponents/BreadcrumbsModule/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from "react";
const markdownit = require("markdown-it")({ html: true });

import Breadcrumbs from "shared/Breadcrumbs";

Expand All @@ -13,7 +12,7 @@ const BreadcrumbsModule = ({ route, breadcrumbs }) =>
<Breadcrumbs
breadcrumbs={breadcrumbs.map(breadcrumb =>
Object.assign({}, breadcrumb, {
title: markdownit.renderInline(breadcrumb.title)
title: breadcrumb.title
})
)}
/>
Expand Down
10 changes: 5 additions & 5 deletions components/PrimarySourceSetsComponents/SingleSet/RelatedSets/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import Link from "next/link";
import Slider from "react-slick";
import ReactMarkdown from "react-markdown";

import { NextArrow, PrevArrow } from "components/shared/CarouselNavArrows";

Expand All @@ -11,7 +12,6 @@ import { classNames as utilClassNames } from "css/utils.css";
import { classNames as breakpoints } from "css/breakpoints.css";
import { stylesheet as navArrowStyles } from "components/shared/CarouselNavArrows/CarouselNavArrows.css";

const markdownit = require("markdown-it")({ html: true });
const { container } = utilClassNames;

const RelatedSets = ({ sets }) => {
Expand Down Expand Up @@ -56,11 +56,11 @@ const RelatedSets = ({ sets }) => {
src={set.repImageUrl || set.thumbnailUrl}
className={classNames.setImage}
/>
<p
<ReactMarkdown
source={set.name}
className={classNames.title}
dangerouslySetInnerHTML={{
__html: markdownit.renderInline(set.name)
}}
allowedTypes={["emphasis"]}
unwrapDisallowed
/>
</a>
</Link>
Expand Down
126 changes: 58 additions & 68 deletions components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import Link from "next/link";
import ReactMarkdown from "react-markdown";

import {
mapTimePeriodNameToSlug,
Expand All @@ -11,7 +12,6 @@ import CiteButton from "components/shared/CiteButton";
import { stylesheet, classNames } from "./SourceSetInfo.css";
import { classNames as utilClassNames } from "css/utils.css";

const markdownit = require("markdown-it")({ html: true });
const { container } = utilClassNames;

// Only the time period has a sameAs field
Expand Down Expand Up @@ -49,34 +49,22 @@ class SourceSetInfo extends React.Component {
}}
/>
<div className={classNames.bannerTextWrapper}>
<h1
dangerouslySetInnerHTML={{
__html: markdownit.renderInline(set.name)
}}
className={classNames.bannerTitle}
/>
<h1 className={classNames.bannerTitle}>
<ReactMarkdown
source={set.name}
allowedTypes={["emphasis"]}
unwrapDisallowed
/>
</h1>
</div>
</div>
<div
<ReactMarkdown
id="dpla-description"
source={set.hasPart.find(item => item.name === "Overview").text}
className={`${classNames.description} sourceSetDescription ${classNames.description} ${this
.state.isOpen
? classNames.open
: ""}`}
dangerouslySetInnerHTML={{
__html: markdownit.render(
set.hasPart
.find(item => item.name === "Overview")
.text.replace(
/https?:\/\/.*?\/primary-source-sets\/sources\//g,
"sources/"
)
.replace(
/https?:\/\/.*?\/primary-source-sets\/sets\//g,
"/primary-source-sets/"
)
)
}}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you want to allow emphasis in the above ReactMarkdown?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes and it is because all types are allowed by default. emphasis is specified in the cases where we only want emphasis to show up

<div
id="dpla-showmore"
Expand All @@ -101,65 +89,67 @@ class SourceSetInfo extends React.Component {
Created By
</h2>
{set.author.map(author =>
<div
<ReactMarkdown
key={author.name}
dangerouslySetInnerHTML={{
__html: markdownit.renderInline(
author.name + ", " + author.affiliation.name
)
}}
source={author.name + ", " + author.affiliation.name}
allowedTypes={["emphasis"]}
unwrapDisallowed
/>
)}
</div>
<div className={classNames.metadatum}>
<h2 className={classNames.metadataHeader}>
Time Period
</h2>
{extractTimePeriod(set.about).map((period, i, periods) =>
<span key={period}>
<Link
prefetch
href={{
pathname: "/primary-source-sets",
query: {
timePeriod: mapTimePeriodNameToSlug(period)
}
}}
>
<a
className={`link ${classNames.link}`}
dangerouslySetInnerHTML={{
__html: markdownit.renderInline(period)
<ul>
{extractTimePeriod(set.about).map((period, i, periods) =>
<li key={period}>
<Link
prefetch
href={{
pathname: "/primary-source-sets",
query: {
timePeriod: mapTimePeriodNameToSlug(period)
}
}}
/>
</Link>
{i < periods.length - 1 && <br />}
</span>
)}
>
<a className={`link ${classNames.link}`}>
<ReactMarkdown
source={period}
allowedTypes={["emphasis"]}
unwrapDisallowed
/>
</a>
</Link>
</li>
)}
</ul>
</div>
<div className={classNames.metadatum}>
<h2 className={classNames.metadataHeader}>Subjects</h2>
{extractSubjects(set.about).map((subject, i, subjects) =>
<span key={subject}>
<Link
prefetch
href={{
pathname: "/primary-source-sets",
query: {
subject: mapSubjectNameToSlug(subject)
}
}}
>
<a
className={`link ${classNames.link}`}
dangerouslySetInnerHTML={{
__html: markdownit.renderInline(subject)
<ul>
{extractSubjects(set.about).map((subject, i, subjects) =>
<li key={subject}>
<Link
prefetch
href={{
pathname: "/primary-source-sets",
query: {
subject: mapSubjectNameToSlug(subject)
}
}}
/>
</Link>
{i < subjects.length - 1 && <br />}
</span>
)}
>
<a className={`link ${classNames.link}`}>
<ReactMarkdown
source={subject}
allowedTypes={["emphasis"]}
unwrapDisallowed
/>
</a>
</Link>
</li>
)}
</ul>
</div>
</div>
<div className={classNames.citeButton}>
Expand Down
10 changes: 5 additions & 5 deletions components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
const markdownit = require("markdown-it")({ html: true });
import ReactMarkdown from "react-markdown";

import Link from "next/link";

Expand Down Expand Up @@ -45,11 +45,11 @@ const SourceSetSources = ({ route, sources }) =>
>
<img alt="" src={thumbnailUrl} className={classNames.image} />
</div>
<div
<ReactMarkdown
className={classNames.title}
dangerouslySetInnerHTML={{
__html: markdownit.renderInline(name)
}}
source={name}
allowedTypes={["emphasis"]}
unwrapDisallowed
/>
</a>
</Link>
Expand Down
Loading