-
+
+
+
diff --git a/src/cv-maker/main.ts b/src/cv-maker/main.ts
index e49c9ce..747b0d4 100644
--- a/src/cv-maker/main.ts
+++ b/src/cv-maker/main.ts
@@ -1,5 +1,5 @@
import Alpine from "alpinejs";
-import { getResumeObject, parseJSON, resumeObjectToHTML } from "./core/utils";
+import { debounce, getResumeObject, parseJSON, resumeObjectToHTML } from "./core/utils";
import type resumeSchema from "./static/resume-schema.json"
import { makeJsonEditor } from "#/common/editor/make";
import { hasMajorError } from "#/common/editor/text-model";
@@ -14,47 +14,49 @@ window.Alpine = Alpine;
setup();
-Alpine.data("sections", () => ({
- sections: [{
- id: "all",
- label: "All",
- }, {
- id: "me",
- label: "Me",
- }, {
- id: "employmentHistory",
- label: "My Employment",
- }, {
- id: "technologies",
- label: "Tecnologies"
- }]
-}));
+Alpine.store("sections", () => [{
+ id: "all",
+ label: "Everything",
+}, {
+ id: "me",
+ label: "Me",
+}, {
+ id: "employmentHistory",
+ label: "My Employment",
+}, {
+ id: "technologies",
+ label: "Tecnologies"
+}]);
+
+const state: {
+ resumeObject: any
+ resumeHtml: string
+ editorSection: Exclude
+ mode: string
+ editorHasError: boolean
+ availableResumes: { id: string, name: string }[]
+ currentResume: string
+} =
+ Alpine.reactive({
+ resumeObject: {},
+ resumeHtml: "My Resume
",
+ editorSection: "me",
+ mode: "view",
+ editorHasError: false,
+ availableResumes: [{ id: "example", name: "Example" }],
+ currentResume: "example"
+ });
Alpine.start();
async function setup() {
- const state: {
- resumeObject: any
- resumeHtml: string
- editorSection: Exclude
- mode: string
- editorHasError: boolean
- } =
- Alpine.reactive({
- resumeObject: {},
- resumeHtml: "My Resume
",
- editorSection: "me",
- mode: "editor",
- editorHasError: false
- });
-
- Alpine.store("state", state);
+ Alpine.data("state", () => state);
const editor = await makeJsonEditor();
const resumeSchemaObject = await fetch("./resume-schema.json").then(_ => _.json());
-
+
if (!editor) {
console.warn("can not load editor");
return;
@@ -87,23 +89,48 @@ async function setup() {
}
}
- editor.textModel.model.onDidChangeContent(() => {
+ const saveResume = () => {
const parsed = parseJSON(editor.textModel.model.getValue());
- console.log("parsed", parsed);
if (!parsed) return;
if (state.editorSection == "all") {
state.resumeObject = parsed;
} else {
state.resumeObject[state.editorSection] = parsed;
}
+ localStorage.setItem(state.currentResume, JSON.stringify(state.resumeObject));
state.resumeHtml = resumeObjectToHTML(state.resumeObject);
- })
+ };
+
+ editor.textModel.model.onDidChangeContent(debounce(saveResume, 300));
document.addEventListener("section-changed", () => {
prepareEditor();
+ editor.editor.setScrollTop(0);
+ editor.editor.setScrollLeft(0);
+ if (state.editorSection == "all") {
+ editor.editor.updateOptions({
+ minimap: {
+ enabled: true,
+ }
+ })
+ } else {
+ editor.editor.updateOptions({
+ minimap: {
+ enabled: false
+ }
+ })
+ }
});
- const resume = await getResumeObject();
+ window.addEventListener('resize', () => {
+ editor.editor.layout();
+ });
+
+ document.addEventListener("mode-was-changed", () => {
+ Alpine.nextTick(() => {
+ editor.editor.layout();
+ });
+ });
editor.monaco.editor.onDidChangeMarkers(() => {
const hasErrors = hasMajorError(editor.monaco, editor.textModel.model, new Set([4, 8]));
@@ -112,7 +139,9 @@ async function setup() {
if (!hasErrors) {
state.resumeHtml = resumeObjectToHTML(state.resumeObject);
}
- })
+ });
+
+ const resume = await getResumeObject();
state.resumeObject = resume;
state.resumeHtml = resumeObjectToHTML(resume);
diff --git a/src/cv-maker/style.css b/src/cv-maker/style.css
index 9976c2b..f9e7539 100644
--- a/src/cv-maker/style.css
+++ b/src/cv-maker/style.css
@@ -1,35 +1,16 @@
-body {
- font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
- display: flex;
- justify-content: start;
- align-items: center;
- flex-direction: column;
- min-height: 100vh;
- padding: 1.5rem;
-}
-
-@media print {
- .no-print {
- display: none;
- }
-}
+@import "tailwindcss";
-div#code-editor {
- width: 820px;
- height: 600px;
- padding-top: 15px;
-}
-ul {
- list-style-type: square;
+@theme {
+ --color-so: #f1f8ff;
}
-ul li::marker {
- font-size: 0.7em;
+.btn {
+ @apply text-sm rounded-full py-2 px-4 text-white font-bold hover:cursor-pointer;
}
-@page {
- margin: 0;
+.btn-orange {
+ @apply bg-amber-600 hover:bg-amber-900
}
@media print {
@@ -38,16 +19,12 @@ ul li::marker {
margin: 0;
padding: 0;
}
-}
-
-/* div#employment > div:nth-child(4) {
- page-break-after: always;
-} */
-
-hr {
- height: 1px;
- border: none;
- background-color: #ccc;
+ .no-print {
+ display: none;
+ }
+ .no-break {
+ page-break-inside: avoid;
+ }
}
separator-dot {
@@ -57,17 +34,6 @@ separator-dot {
color: #ccc;
}
-div#resume {
- width: 820px;
- font-size: 13px;
- line-height: 1.4;
-}
-
-div#skills {
- display: flex;
- flex-wrap: wrap;
-}
-
div.group-list {
display: flex;
width: 12rem;
@@ -79,16 +45,6 @@ div.company a:first-child {
color: steelblue;
}
-div.skill-group span:first-child {
- text-transform: uppercase;
- font-weight: 400;
-}
-
-div#contact {
- display: flex;
- gap: 10px;
-}
-
div#profiles {
display: flex;
gap: 5px;
@@ -102,15 +58,6 @@ div#profiles a {
text-decoration: none;
}
-div#contact a {
- text-decoration: none;
- color: steelblue;
-}
-
-#expertise {
- font-size: smaller;
-}
-
div#summary {
background: #f1f8ff;
padding: 1em;
@@ -126,30 +73,6 @@ span.stack-item {
font-size: 0.7rem;
}
-div.skill-group {
- margin-bottom: 10px;
-}
-
-div#summary p {
- margin: 0;
- padding: 0;
- font-weight: 400;
-}
-
-div#head {
- padding-bottom: 10px;
-}
-
-div#name {
- font-weight: 100;
- font-size: xx-large;
-}
-
-div#role {
- font-weight: 300;
- font-size: large;
-}
-
div#location {
font-size: smaller;
padding-bottom: 5px;
diff --git a/vite.config.ts b/vite.config.ts
index 9994c11..4785600 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,6 @@
import type { UserConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
+import tailwindcss from '@tailwindcss/vite'
const configs: Record = {
"tg-bot-playground": {
@@ -20,6 +21,7 @@ const configs: Record = {
publicDir: "static",
base: "./",
plugins: [
+ tailwindcss(),
tsconfigPaths()
],
build: {