filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-25 01:52:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

adding some coodeblocks and rearranging the page

Browse Source
This commit is contained in:
tarafanlin 2020-07-19 11:34:02 -07:00
parent 118ac3c504
commit 0e210b1931
1 changed files with 65 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
pages/system/typography.js
View File

@ -51,11 +51,12 @@ export default class SystemPageTypography extends React.Component {
<hr />
<br />
<System.P>
Import React and the Typography Component.
Import React and the typography components. If needed, import the ViewSourceLink component.
</System.P>
<br />
<System.CodeBlock>
{`import { H1, H2, H3, H4, P, UL, OL, LI } from 'slate-react-system'; `}
{`import { H1, H2, H3, H4, P, UL, OL, LI } from 'slate-react-system';
import ViewSourceLink from "~/components/system/ViewSourceLink";`}
</System.CodeBlock>
<br />
<br />
@ -84,8 +85,7 @@ export default class SystemPageTypography extends React.Component {
<br />
<br />
<System.CodeBlock>
{`
<System.H1>
{`<System.H1>
This is heading level 1
</System.H1>
@ -99,8 +99,50 @@ This is heading level 3
<System.H4>
This is heading level 4
</System.H4>
`}
</System.H4>`}
</System.CodeBlock>
<br />
<br />
<System.H2>Type Styles</System.H2>
<hr />
<br />
<System.P css={STYLES_BOLD}>This text is bold</System.P>
<System.P css={STYLES_ITALIC}>This text is italic</System.P>
<System.P css={STYLES_UNDERLINE}>This text is underlined</System.P>
<br />
<br />
<System.CodeBlock>
{`<System.P css={STYLES_BOLD}>This text is bold</System.P>
<System.P css={STYLES_ITALIC}>This text is italic</System.P>
<System.P css={STYLES_UNDERLINE}>This text is underlined</System.P>`}
</System.CodeBlock>
<br />
<br />
<System.H2>Typefaces</System.H2>
<hr />
<br />
<System.H3>Inter</System.H3>
<System.P>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
<System.P>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
<System.P>0 1 2 3 4 5 6 7 8 9</System.P>
<br />
<br/>
<System.H3>Jet Brains</System.H3>
<System.P css={STYLES_TYPE_JETBRAINS}>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
<System.P css={STYLES_TYPE_JETBRAINS}>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
<System.P css={STYLES_TYPE_JETBRAINS}>0 1 2 3 4 5 6 7 8 9</System.P>
<br />
<br />
<System.CodeBlock>
{`<System.P>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
<System.P>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
<System.P>0 1 2 3 4 5 6 7 8 9</System.P>
<System.P css={STYLES_TYPE_JETBRAINS}>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
<System.P css={STYLES_TYPE_JETBRAINS}>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
<System.P css={STYLES_TYPE_JETBRAINS}>0 1 2 3 4 5 6 7 8 9</System.P>`}
</System.CodeBlock>
<br />
<br />
@ -121,8 +163,7 @@ This is heading level 4
<br />
<br />
<System.CodeBlock>
{`
<System.OL>
{`<System.OL>
<System.LI>Rainbow</System.LI>
<System.LI>Cloud</System.LI>
<System.LI>Cake</System.LI>
@ -132,40 +173,31 @@ This is heading level 4
<System.LI>Cloud</System.LI>
<System.LI>Cake</System.LI>
<System.LI>Rainbow</System.LI>
</System.UL>
`}
</System.UL>`}
</System.CodeBlock>
<br />
<br />
<System.H2>Typefaces</System.H2>
<hr />
<br />
<System.H3>Inter</System.H3>
<System.P>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
<System.P>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
<System.P>0 1 2 3 4 5 6 7 8 9</System.P>
<br />
<br/>
<System.H3>Jet Brains</System.H3>
<System.P css={STYLES_TYPE_JETBRAINS}>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
<System.P css={STYLES_TYPE_JETBRAINS}>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
<System.P css={STYLES_TYPE_JETBRAINS}>0 1 2 3 4 5 6 7 8 9</System.P>
<br />
<br />
<System.H2>Type Styles</System.H2>
<hr />
<br />
<System.P css={STYLES_BOLD}>This text is bold</System.P>
<System.P css={STYLES_ITALIC}>This text is italic</System.P>
<System.P css={STYLES_UNDERLINE}>This text is underlined</System.P>
<br />
<br />
<System.H2>Hyperlinks</System.H2>
<hr />
<br />
<System.P>Internal References <a href="https://slate.host" target="_blank">Link to a page</a></System.P>
<System.P>External References <ViewSourceLink file="system/typography.js" /></System.P>
<br />
<br />
<System.CodeBlock>
{`<System.P>
<a href="https://slate.host"
target="_blank">
Link to a page
</a>
</System.P>
<System.P>
<ViewSourceLink file="system/typography.js" />
</System.P>`}
</System.CodeBlock>
<br />
<br />
</SystemPage>
);
}