mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Lens app source code (#119)
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
1 parent
936cbd53d4
commit
1d0815abd2
797 files changed
+73714
-215
No files matched your search
@@ -0,0 +1 @@
|
||||
export * from "./markdown-viewer"
|
||||
@@ -0,0 +1,680 @@
|
||||
.MarkDownViewer {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.light {
|
||||
pre, table {
|
||||
@include custom-scrollbar(dark);
|
||||
}
|
||||
}
|
||||
|
||||
.pl-c {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.pl-c1,
|
||||
.pl-s .pl-v {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.pl-e,
|
||||
.pl-en {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.pl-smi,
|
||||
.pl-s .pl-s1 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pl-ent {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.pl-k {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.pl-s,
|
||||
.pl-pds,
|
||||
.pl-s .pl-pse .pl-s1,
|
||||
.pl-sr,
|
||||
.pl-sr .pl-cce,
|
||||
.pl-sr .pl-sre,
|
||||
.pl-sr .pl-sra {
|
||||
color: #183691;
|
||||
}
|
||||
|
||||
.pl-v {
|
||||
color: #ed6a43;
|
||||
}
|
||||
|
||||
.pl-id {
|
||||
color: #b52a1d;
|
||||
}
|
||||
|
||||
.pl-ii {
|
||||
color: #f8f8f8;
|
||||
background-color: #b52a1d;
|
||||
}
|
||||
|
||||
.pl-sr .pl-cce {
|
||||
font-weight: bold;
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.pl-ml {
|
||||
color: #693a17;
|
||||
}
|
||||
|
||||
.pl-mh,
|
||||
.pl-mh .pl-en,
|
||||
.pl-ms {
|
||||
font-weight: bold;
|
||||
color: #1d3e81;
|
||||
}
|
||||
|
||||
.pl-mq {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.pl-mi {
|
||||
font-style: italic;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pl-mb {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pl-md {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.pl-mi1 {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.pl-mdr {
|
||||
font-weight: bold;
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.pl-mo {
|
||||
color: #1d3e81;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
input {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3d90ce;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0;
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
hr::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
hr::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
ul ul ol,
|
||||
ul ol ol,
|
||||
ol ul ol,
|
||||
ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
input {
|
||||
-webkit-font-feature-settings: "liga" 0;
|
||||
font-feature-settings: "liga" 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
& > *:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
& > *:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
margin-left: -20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.anchor:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
table,
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: $helmDescriptionHr;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 8px 1em;
|
||||
color: $helmDescriptionBlockqouteColor;
|
||||
border-left: 0.25em solid $helmDescriptionBlockqouteBorder;
|
||||
background: $helmDescriptionBlockquoteBackground;
|
||||
}
|
||||
|
||||
blockquote > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
blockquote > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h1 .octicon-link,
|
||||
h2 .octicon-link,
|
||||
h3 .octicon-link,
|
||||
h4 .octicon-link,
|
||||
h5 .octicon-link,
|
||||
h6 .octicon-link {
|
||||
color: #000;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
h1:hover .anchor,
|
||||
h2:hover .anchor,
|
||||
h3:hover .anchor,
|
||||
h4:hover .anchor,
|
||||
h5:hover .anchor,
|
||||
h6:hover .anchor {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1:hover .anchor .octicon-link,
|
||||
h2:hover .anchor .octicon-link,
|
||||
h3:hover .anchor .octicon-link,
|
||||
h4:hover .anchor .octicon-link,
|
||||
h5:hover .anchor .octicon-link,
|
||||
h6:hover .anchor .octicon-link {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.8em;
|
||||
font-weight: normal;
|
||||
border-bottom: 1px solid $borderFaintColor;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
border-bottom: 1px solid $borderFaintColor;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
font-weight: normal;
|
||||
border-bottom: 1px solid $borderFaintColor;
|
||||
padding-bottom: 0.4em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.85em;
|
||||
color: $helmDescriptionH6;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li > p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
table {
|
||||
@include custom-scrollbar;
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
width: 100%;
|
||||
overflow-y: visible;
|
||||
overflow-x: auto;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid $helmDescriptionTdBorder;
|
||||
text-align: left;
|
||||
word-break: break-all;
|
||||
hyphens: auto;
|
||||
|
||||
> * {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
table tr {
|
||||
background-color: $tableBgcStripe;
|
||||
}
|
||||
|
||||
table tr:nth-child(2n) {
|
||||
background-color: $tableBgcSelected;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
background-color: $mainBackground;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: .15em .35em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: $helmDescriptionCodeBackground;
|
||||
border-radius: 3px;
|
||||
white-space: normal;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $helmDescriptionPreColor;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
margin-bottom: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.highlight pre,
|
||||
pre {
|
||||
@include custom-scrollbar;
|
||||
padding: 16px;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: $helmDescriptionPreBackground;
|
||||
border-radius: 3px;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: inline;
|
||||
max-width: initial;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: $helmDescriptionPreColor;
|
||||
}
|
||||
|
||||
pre code::before,
|
||||
pre code::after {
|
||||
content: normal;
|
||||
}
|
||||
|
||||
.pl-0 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: 3px !important;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-left: 24px !important;
|
||||
}
|
||||
|
||||
.pl-5 {
|
||||
padding-left: 36px !important;
|
||||
}
|
||||
|
||||
.pl-6 {
|
||||
padding-left: 48px !important;
|
||||
}
|
||||
|
||||
.full-commit .btn-outline:not(:disabled):hover {
|
||||
color: #4078c0;
|
||||
border: 1px solid #4078c0;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
|
||||
:checked + .radio-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-color: #4078c0;
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.task-list-item + .task-list-item {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.task-list-item input {
|
||||
margin: 0 0.2em 0.25em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
// Wrapper Component with marked plugin in its core
|
||||
// Source: https://www.npmjs.com/package/marked
|
||||
import "./markdown-viewer.scss";
|
||||
|
||||
import React, { Component } from "react";
|
||||
import marked from "marked";
|
||||
import DOMPurify from "dompurify";
|
||||
import { cssNames } from "../../utils";
|
||||
import { themeStore } from "../../theme.store";
|
||||
|
||||
DOMPurify.addHook('afterSanitizeAttributes', function (node) {
|
||||
// Set all elements owning target to target=_blank
|
||||
if ('target' in node as any as HTMLElement) {
|
||||
node.setAttribute('target', '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
interface Props extends OptionalProps {
|
||||
markdown: string;
|
||||
}
|
||||
|
||||
interface OptionalProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export class MarkdownViewer extends Component<Props> {
|
||||
render() {
|
||||
const { className, markdown } = this.props;
|
||||
const html = DOMPurify.sanitize(marked(markdown));
|
||||
return (
|
||||
<div
|
||||
className={cssNames("MarkDownViewer", className, themeStore.activeTheme.type)}
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user