Skip to content

Commit

Permalink
w/ prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
stanistan committed Jul 22, 2023
1 parent ff011af commit 79f85b3
Show file tree
Hide file tree
Showing 29 changed files with 2,042 additions and 285 deletions.
18 changes: 10 additions & 8 deletions frontend/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
module.exports = {
root: true,
extends: ["@nuxt/eslint-config"],
parser: "vue-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
},
extends: ["@nuxt/eslint-config", "plugin:prettier/recommended"],
rules: {
"vue/max-attributes-per-line": ["error", {
"singleline": {
"max": 2
},
"multiline": {
"max": 3
"vue/max-attributes-per-line": [
"error", {
"singleline": { "max": 4 },
"multiline": { "max": 4 }
}
}],
],
},
overrides: [
{
Expand Down
6 changes: 3 additions & 3 deletions frontend/components/BodyMarkdown.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@

<script setup lang="ts">
const props = defineProps({
model: { type: Object, required: true }
model: { type: Object, required: true },
});
const body = computed(() => {
return [ props.model.pr.body, props.model.review.body ]
.filter(x => x && x.length > 0)
return [props.model.pr.body, props.model.review.body]
.filter((x) => x && x.length > 0)
.join("\n\n---\n\n");
});
</script>
8 changes: 5 additions & 3 deletions frontend/components/CommentCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
<div class="p-3 flex-none md:w-2/5 text-md markdown">
<MarkdownHTML>{{ commentBody }}</MarkdownHTML>
</div>
<div class="flex-grow overflow-scroll text-sm md:border-l border-t md:border-t-0">
<div
class="flex-grow overflow-scroll text-sm md:border-l border-t md:border-t-0"
>
<DiffBlock :comment="comment" />
</div>
</div>
Expand All @@ -19,10 +21,10 @@
<script setup lang="ts">
const props = defineProps({
comment: { type: Object, required: true },
idx: { type: Number, required: true }
idx: { type: Number, required: true },
});
const commentBody = computed(() => {
return props.comment.body.replace(/^\s*\d+\.\s*/, '');
return props.comment.body.replace(/^\s*\d+\.\s*/, "");
});
</script>
7 changes: 5 additions & 2 deletions frontend/components/ComponentCard.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<template>
<div class="m-4 border border-slate-300 rounded-xl overflow-hidden shadow">
<div class="w-full">
<div class="w-full text-sm p-3 bg-slate-100 border-b border-slate-300 gap-1 rounded-t-xl" :class="titleClass">
<div
class="w-full text-sm p-3 bg-slate-100 border-b border-slate-300 gap-1 rounded-t-xl"
:class="titleClass"
>
<SmallBadge v-if="!!badge">
{{ badge }}
</SmallBadge>
Expand All @@ -15,6 +18,6 @@
<script setup lang="ts">
defineProps({
badge: { type: Number, default: 0 },
titleClass: { type: String, default: '' }
titleClass: { type: String, default: "" },
});
</script>
179 changes: 92 additions & 87 deletions frontend/components/DiffBlock.vue
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
<template>
<pre class="bg-gray-100"><code ref="code" :class="language">{{ comment.diff_hunk }}</code></pre>
<pre
class="bg-gray-100"
><code ref="code" :class="language">{{ comment.diff_hunk }}</code></pre>
</template>

<script setup lang="ts">
// We do manual Prism-ing
import Prism from 'prismjs';
import Prism from "prismjs";
Prism.manual = true;
// these are the supported languages in general
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-docker';
import 'prismjs/components/prism-go';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-markdown';
import 'prismjs/components/prism-markup-templating';
import 'prismjs/components/prism-php';
import 'prismjs/components/prism-rust';
import 'prismjs/components/prism-sass';
import 'prismjs/components/prism-scss';
import 'prismjs/components/prism-toml';
import 'prismjs/components/prism-yaml';
import "prismjs/components/prism-bash";
import "prismjs/components/prism-css";
import "prismjs/components/prism-diff";
import "prismjs/components/prism-docker";
import "prismjs/components/prism-go";
import "prismjs/components/prism-json";
import "prismjs/components/prism-markdown";
import "prismjs/components/prism-markup-templating";
import "prismjs/components/prism-php";
import "prismjs/components/prism-rust";
import "prismjs/components/prism-sass";
import "prismjs/components/prism-scss";
import "prismjs/components/prism-toml";
import "prismjs/components/prism-yaml";
// this gets us the fancier diff-highlighting
import 'prismjs/plugins/diff-highlight/prism-diff-highlight';
import 'prismjs/plugins/diff-highlight/prism-diff-highlight.css';
import "prismjs/plugins/diff-highlight/prism-diff-highlight";
import "prismjs/plugins/diff-highlight/prism-diff-highlight.css";
const code = ref('code');
const code = ref("code");
onMounted(() => {
Prism.highlightElement(code.value);
});
Expand All @@ -41,34 +43,33 @@ const props = defineProps({
// we grab the file extension and map it to the diff-language
const languageMap = {
rs: 'rust',
vue: 'html',
Dockerfile: 'docker'
rs: "rust",
vue: "html",
Dockerfile: "docker",
};
const basename = (str, sep) => str.substr(str.lastIndexOf(sep) + 1);
const detectedLanguage = (path) => {
// basename and split on extension...
const base = basename(path, '/');
const pieces = base.split('.');
const base = basename(path, "/");
const pieces = base.split(".");
const ext = pieces[pieces.length - 1];
// if there's an extension go the standard path
if (pieces.length > 1) {
return languageMap[ext] || ext;
}
if (base === 'Dockerfile') {
return 'docker';
if (base === "Dockerfile") {
return "docker";
}
return 'bash';
return "bash";
};
const language = computed(() => {
return `diff-highlight language-diff-${detectedLanguage(props.comment.path)}`;
});
</script>

<style type="text/css">
Expand All @@ -80,78 +81,82 @@ const language = computed(() => {
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px #fefefe;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
color: black;
background: none;
text-shadow: 0 1px #fefefe;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
/* padding: 1em;
/* padding: 1em;
margin: .5em 0;
overflow: auto; */
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
/*background: #f5f2f0; */
/*background: #f5f2f0; */
}
/* Inline code */
:not(pre) > code[class*="language-"] {
/* padding: .1em;
/* padding: .1em;
border-radius: .3em; */
white-space: normal;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
color: slategray;
}
.token.punctuation {
color: #999;
color: #999;
}
.token.namespace {
opacity: .7;
opacity: 0.7;
}
.token.property,
Expand All @@ -161,7 +166,7 @@ pre[class*="language-"] {
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
color: #905;
}
.token.selector,
Expand All @@ -170,62 +175,62 @@ pre[class*="language-"] {
.token.char,
.token.builtin,
.token.inserted {
color: #690;
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
/* This background color was intended by the author of this theme. */
background: hsla(0, 0%, 100%, .5);
color: #9a6e3a;
/* This background color was intended by the author of this theme. */
background: hsla(0, 0%, 100%, 0.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
color: #dd4a68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
font-weight: bold;
}
.token.italic {
font-style: italic;
font-style: italic;
}
.token.entity {
cursor: help;
cursor: help;
}
.token.prefix.inserted,
.token.prefix.deleted,
.token.prefix.unchanged {
padding-right: 2em;
font-size: 0.90em;
font-size: 0.9em;
}
pre.diff-highlight > code .token.deleted:not(.prefix), pre > code.diff-highlight .token.deleted:not(.prefix) {
pre.diff-highlight > code .token.deleted:not(.prefix),
pre > code.diff-highlight .token.deleted:not(.prefix) {
background-color: rgba(255, 0, 0, 0.05);
}
pre.diff-highlight > code .token.inserted:not(.prefix), pre > code.diff-highlight .token.inserted:not(.prefix) {
background-color: rgba(0, 255, 180, .05);
pre.diff-highlight > code .token.inserted:not(.prefix),
pre > code.diff-highlight .token.inserted:not(.prefix) {
background-color: rgba(0, 255, 180, 0.05);
}
</style>


Loading

0 comments on commit 79f85b3

Please sign in to comment.