-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(renderer): update md rendering #159
- Loading branch information
1 parent
097793b
commit fb440be
Showing
72 changed files
with
2,177 additions
and
3,546 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,12 @@ | ||
| import React from "react"; | ||
| import { Nav } from './nav'; | ||
| import ReactMarkdown from 'react-markdown'; | ||
| import CodeBlock from 'components/CodeBlock'; | ||
| import { MarkdownPageWrapper } from 'components/markdownPageWrapper'; | ||
| import AuroComponentContent from "functions/renderContentPage"; | ||
|
|
||
| const markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-accordion/main/demo/api.md'; | ||
| class AuroContent extends AuroComponentContent { | ||
|
|
||
| class AuroAccordionApi extends MarkdownPageWrapper { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| componentWillMount() { | ||
| fetch(markdownContent).then((response) => response.text()).then((text) => { | ||
| this.setState({ | ||
| contentBuild: text | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <section className="auro_baseType"> | ||
|
|
||
| <Nav /> | ||
|
|
||
| <section className="auro-markdown"> | ||
| <ReactMarkdown | ||
| source={this.state.contentBuild} | ||
| escapeHtml={false} | ||
| renderers={{ | ||
| code: CodeBlock, | ||
| heading: this.headingRenderer | ||
| }}/> | ||
| </section> | ||
| </section> | ||
| ); | ||
| } | ||
| this.markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-accordion/main/demo/api.md'; | ||
| }; | ||
| } | ||
|
|
||
| export default AuroAccordionApi; | ||
| export default AuroContent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,12 @@ | ||
| import React from "react"; | ||
| import { Nav } from './nav'; | ||
| import marked from 'marked'; | ||
| import Prism from 'prismjs'; | ||
| import 'prismjs/themes/prism.css'; | ||
| import { MarkdownPageWrapper } from 'components/markdownPageWrapper'; | ||
| import { registerCustomComponent } from "content/utils/registerCustomComponent"; | ||
| import AuroComponentContent from "functions/renderContentPage"; | ||
|
|
||
| const markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-accordion/main/demo/demo.md'; | ||
| class AuroContent extends AuroComponentContent { | ||
|
|
||
| class AuroAccordionComponent extends MarkdownPageWrapper { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| // function to get text from MD document | ||
| getMarkdownText() { | ||
| fetch(markdownContent) | ||
| .then((response) => response.text()) | ||
| .then((text) => { | ||
| const rawHtml = marked(text); | ||
| document.querySelector('.auro-markdown').innerHTML = rawHtml; | ||
| Prism.highlightAll(); | ||
| }); | ||
|
|
||
| const renderer = new marked.Renderer(); | ||
| renderer.link = function(href, title, text) { | ||
| const link = marked.Renderer.prototype.link.call(this, href, title, text); | ||
| let url = href | ||
| url = url.replace(/^.*\/\/[^/]+/, '') | ||
|
|
||
| if (href.includes("auro.alaskaair.com")) { | ||
|
|
||
| return link.replace("href",`href="${url}"`); | ||
| } else { | ||
|
|
||
| const newLink = `<a href="${href}" rel="noopener noreferrer" target="_blank" className="externalLink">${text} <auro-icon customColor category="interface" name="external-link-md"></auro-icon></a>` | ||
|
|
||
| return newLink; | ||
| } | ||
| }; | ||
|
|
||
| marked.setOptions({ | ||
| renderer: renderer | ||
| }); | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| registerCustomComponent('custom-accordion', 'https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js'); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <section className="auro_baseType"> | ||
|
|
||
| <Nav /> | ||
|
|
||
| <section | ||
| className="auro-markdown" | ||
| dangerouslySetInnerHTML={this.getMarkdownText()} | ||
| /> | ||
| </section> | ||
| ); | ||
| } | ||
| this.markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-accordion/main/demo/demo.md'; | ||
| }; | ||
| } | ||
|
|
||
| export default AuroAccordionComponent; | ||
| export default AuroContent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,12 @@ | ||
| import React from "react"; | ||
| import { Nav } from './nav'; | ||
| import ReactMarkdown from 'react-markdown'; | ||
| import CodeBlock from 'components/CodeBlock'; | ||
| import { MarkdownPageWrapper } from 'components/markdownPageWrapper'; | ||
| import AuroComponentContent from "functions/renderContentPage"; | ||
|
|
||
| const markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-accordion/main/README.md'; | ||
| class AuroContent extends AuroComponentContent { | ||
|
|
||
| class AuroAccordionInstall extends MarkdownPageWrapper { | ||
| showVersion() { | ||
| const pjson = require('../../../../package.json'); | ||
| const dependencies = pjson.dependencies['@alaskaairux/auro-accordion']; | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| return `@alaskaairux/auro-accordion: ${dependencies}`; | ||
| this.markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-accordion/main/README.md'; | ||
| }; | ||
|
|
||
| // function to get text from MD document | ||
| componentWillMount() { | ||
| fetch(markdownContent).then((response) => response.text()).then((text) => { | ||
| this.setState({ | ||
| contentBuild: text | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <section className="auro_baseType"> | ||
|
|
||
| <Nav /> | ||
|
|
||
| <section className="auro-markdown"> | ||
| <ReactMarkdown | ||
| source={this.state.contentBuild} | ||
| escapeHtml={false} | ||
| renderers={{ | ||
| code: CodeBlock, | ||
| heading: this.headingRenderer, | ||
| link: this.linkRenderer | ||
| }}/> | ||
| </section> | ||
| </section> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default AuroAccordionInstall; | ||
| export default AuroContent; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,12 @@ | ||
| import React, { Component } from "react"; | ||
| import { Query } from '@apollo/react-components'; | ||
| import { gql } from 'apollo-boost'; | ||
| import Releases from '../releaseDashboard/releases'; | ||
| import { Nav } from './nav'; | ||
| import AuroComponentContent from "functions/renderContentPage"; | ||
|
|
||
| const RELEASES = gql` | ||
| { | ||
| organization(login: "AlaskaAirlines") { | ||
| team(slug: "auro-team") { | ||
| repositories(first: 1, orderBy: {field: NAME, direction: ASC}, query: "auro-accordion") { | ||
| nodes { | ||
| name | ||
| releases(first: 20, orderBy: {field: CREATED_AT, direction: DESC}) { | ||
| nodes { | ||
| name | ||
| updatedAt | ||
| description | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| class AllReleases extends Component { | ||
| render() { | ||
| return ( | ||
| <section id="releases"> | ||
|
|
||
| <Nav /> | ||
|
|
||
| <h1 className="auro_heading auro_heading--display">Releases</h1> | ||
| <p>The following is a list of all Auro element releases.</p> | ||
| class AuroContent extends AuroComponentContent { | ||
|
|
||
| <Query query={RELEASES}> | ||
| {({ loading, error, data }) => { | ||
| if (loading) return <auro-loader laser onlight></auro-loader>; | ||
| if (error) return <p>We are unable to connect to GitHub at the moment, please try back later.</p>; | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| return data.organization.team.repositories.nodes.map(({ name, releases }) => ( | ||
| releases.nodes.length > 0 | ||
| ? <Releases key={name} name={name} releases={releases.nodes} /> | ||
| : '' | ||
| )); | ||
| }} | ||
| </Query> | ||
| </section> | ||
| ) | ||
| } | ||
| this.hasFigma = false; | ||
| }; | ||
| } | ||
|
|
||
| export default AllReleases; | ||
| export default AuroContent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,14 @@ | ||
| import React from "react"; | ||
| import { Nav } from './nav'; | ||
| import ReactMarkdown from 'react-markdown'; | ||
| import CodeBlock from 'components/CodeBlock'; | ||
| import { MarkdownPageWrapper } from 'components/markdownPageWrapper'; | ||
| import AuroComponentContent from "functions/renderContentPage"; | ||
|
|
||
| const markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-alert/main/demo/api.md'; | ||
| class AuroContent extends AuroComponentContent { | ||
|
|
||
| class AuroAlertApi extends MarkdownPageWrapper { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| componentWillMount() { | ||
| fetch(markdownContent).then((response) => response.text()).then((text) => { | ||
| this.setState({ | ||
| contentBuild: text | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <section className="auro_baseType"> | ||
|
|
||
| <Nav /> | ||
|
|
||
| <section className="auro-markdown"> | ||
| <ReactMarkdown | ||
| source={this.state.contentBuild} | ||
| escapeHtml={false} | ||
| renderers={{ | ||
| code: CodeBlock, | ||
| heading: this.headingRenderer | ||
| }}/> | ||
| </section> | ||
| </section> | ||
| ); | ||
| } | ||
| this.nameSpace = 'aurodesignsystem'; | ||
| this.componentName = 'alert'; | ||
| this.markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-alerts/master/docs/api.md'; | ||
| }; | ||
| } | ||
|
|
||
| export default AuroAlertApi; | ||
| export default AuroContent; |
Oops, something went wrong.