create gists
This commit is contained in:
parent
79a17290d5
commit
43a8412f06
90 changed files with 1777 additions and 2107 deletions
|
|
@ -21,6 +21,55 @@ import "phoenix_html";
|
|||
import { Socket } from "phoenix";
|
||||
import { LiveSocket } from "phoenix_live_view";
|
||||
import topbar from "../vendor/topbar";
|
||||
import CodeBlockHook from "./hooks/code_block_hook";
|
||||
import {
|
||||
DropdownAnimation,
|
||||
SearchableDropdown,
|
||||
} from "./hooks/searchable_dropdown";
|
||||
|
||||
let Hooks = {
|
||||
CodeBlockHook,
|
||||
SearchableDropdown,
|
||||
DropdownAnimation,
|
||||
};
|
||||
|
||||
Hooks.ClickOutside = {
|
||||
mounted() {
|
||||
this.handleClick = (e) => {
|
||||
if (!this.el.contains(e.target)) {
|
||||
this.pushEventTo(this.el, "close_dropdown", {});
|
||||
}
|
||||
};
|
||||
document.addEventListener("click", this.handleClick);
|
||||
},
|
||||
destroyed() {
|
||||
document.removeEventListener("click", this.handleClick);
|
||||
},
|
||||
};
|
||||
|
||||
Hooks.ClientSearch = {
|
||||
mounted() {
|
||||
this.options = JSON.parse(this.el.dataset.options);
|
||||
this.searchInput = this.el.querySelector("input");
|
||||
this.optionsContainer = this.el.querySelector(
|
||||
"#dropdown-options-container",
|
||||
);
|
||||
|
||||
this.searchInput.addEventListener("input", (e) => {
|
||||
const query = e.target.value.toLowerCase();
|
||||
const options = this.el.querySelectorAll(".dropdown-option");
|
||||
|
||||
options.forEach((option) => {
|
||||
const value = option.dataset.value.toLowerCase();
|
||||
if (value.includes(query)) {
|
||||
option.style.display = "";
|
||||
} else {
|
||||
option.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
window.addEventListener("phx:copy", (event) => {
|
||||
let button = event.detail.dispatcher;
|
||||
|
|
@ -40,6 +89,7 @@ let csrfToken = document
|
|||
let liveSocket = new LiveSocket("/live", Socket, {
|
||||
longPollFallbackMs: 2500,
|
||||
params: { _csrf_token: csrfToken },
|
||||
hooks: Hooks,
|
||||
});
|
||||
|
||||
// Show progress bar on live navigation and form submits
|
||||
|
|
|
|||
59
assets/js/hooks/code_block_hook.js
Normal file
59
assets/js/hooks/code_block_hook.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
// assets/js/hooks/code_block_hook.js
|
||||
import { codeToHtml } from "shiki";
|
||||
|
||||
const CodeBlockHook = {
|
||||
mounted() {
|
||||
const code = this.el.dataset.code;
|
||||
const language = this.el.dataset.language;
|
||||
const highlightedLines = JSON.parse(
|
||||
this.el.dataset.highlightedLines || "[]",
|
||||
);
|
||||
|
||||
console.log(code);
|
||||
console.log("language", language);
|
||||
|
||||
const lines = code.split("\n");
|
||||
|
||||
// Convert line numbers to decorations
|
||||
const decorations = highlightedLines
|
||||
.map((line) => {
|
||||
// Convert to 0-based index and ensure valid line number
|
||||
const lineIndex = line - 1;
|
||||
if (lineIndex < 0 || lineIndex >= lines.length) return null;
|
||||
|
||||
// Get the actual line length
|
||||
const lineLength = lines[lineIndex].length;
|
||||
|
||||
return {
|
||||
// Line numbers are 0-indexed
|
||||
start: { line: lineIndex, character: 0 },
|
||||
end: { line: lineIndex, character: lineLength },
|
||||
properties: {
|
||||
// Apply both background color and a class for flexibility
|
||||
class: "highlight",
|
||||
style: "background-color: rgba(200,200,255,0.1);",
|
||||
},
|
||||
};
|
||||
})
|
||||
.filter(Boolean); // Remove any null entries from invalid line numbers
|
||||
|
||||
codeToHtml(code, {
|
||||
lang: language,
|
||||
theme: "catppuccin-mocha",
|
||||
decorations,
|
||||
}).then((html) => {
|
||||
console.log(html);
|
||||
|
||||
// Replace the code content while preserving the pre/code structure
|
||||
const tempDiv = document.createElement("div");
|
||||
tempDiv.innerHTML = html;
|
||||
const codeContent = tempDiv.querySelector("code");
|
||||
|
||||
if (codeContent) {
|
||||
this.el.querySelector("code").innerHTML = codeContent.innerHTML;
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default CodeBlockHook;
|
||||
32
assets/js/hooks/searchable_dropdown.js
Normal file
32
assets/js/hooks/searchable_dropdown.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
SearchableDropdown = {
|
||||
mounted() {
|
||||
this.el.addEventListener("input", (e) => {
|
||||
const query = e.target.value.toLowerCase();
|
||||
const dropdownId = this.el.dataset.dropdownId;
|
||||
const optionsContainer = document.querySelector(`#${dropdownId}-options`);
|
||||
const options = optionsContainer.querySelectorAll("li button");
|
||||
|
||||
options.forEach((option) => {
|
||||
const text = option.textContent.toLowerCase();
|
||||
option.parentElement.style.display = text.includes(query)
|
||||
? "block"
|
||||
: "none";
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const DropdownAnimation = {
|
||||
mounted() {
|
||||
this.el.addEventListener("transitionend", (e) => {
|
||||
if (
|
||||
e.propertyName === "opacity" &&
|
||||
this.el.classList.contains("fade-out")
|
||||
) {
|
||||
this.el.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export { SearchableDropdown, DropdownAnimation };
|
||||
File diff suppressed because it is too large
Load diff
71
assets/package-lock.json
generated
71
assets/package-lock.json
generated
|
|
@ -10,11 +10,13 @@
|
|||
"@esbuild/linux-x64": "^0.24.0",
|
||||
"@tailwindcss/forms": "^0.5.9",
|
||||
"esbuild": "^0.24.0",
|
||||
"i": "^0.3.7",
|
||||
"phoenix": "^1.7.14",
|
||||
"phoenix_html": "^3.3.4",
|
||||
"phoenix_live_view": "^1.0.0-rc.7",
|
||||
"shiki": "^1.22.0",
|
||||
"tailwindcss": "^3.4.14"
|
||||
"shiki": "^1.22.1",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/phoenix": "^1.6.5",
|
||||
|
|
@ -536,44 +538,44 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@shikijs/core": {
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.0.tgz",
|
||||
"integrity": "sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==",
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.1.tgz",
|
||||
"integrity": "sha512-bqAhT/Ri5ixV4oYsvJNH8UJjpjbINWlWyXY6tBTsP4OmD6XnFv43nRJ+lTdxd2rmG5pgam/x+zGR6kLRXrpEKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/engine-javascript": "1.22.0",
|
||||
"@shikijs/engine-oniguruma": "1.22.0",
|
||||
"@shikijs/types": "1.22.0",
|
||||
"@shikijs/engine-javascript": "1.22.1",
|
||||
"@shikijs/engine-oniguruma": "1.22.1",
|
||||
"@shikijs/types": "1.22.1",
|
||||
"@shikijs/vscode-textmate": "^9.3.0",
|
||||
"@types/hast": "^3.0.4",
|
||||
"hast-util-to-html": "^9.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@shikijs/engine-javascript": {
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.0.tgz",
|
||||
"integrity": "sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==",
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.1.tgz",
|
||||
"integrity": "sha512-540pyoy0LWe4jj2BVbgELwOFu1uFvRI7lg4hdsExrSXA9x7gqfzZ/Nnh4RfX86aDAgJ647gx4TCmRwACbnQSvw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/types": "1.22.0",
|
||||
"@shikijs/types": "1.22.1",
|
||||
"@shikijs/vscode-textmate": "^9.3.0",
|
||||
"oniguruma-to-js": "0.4.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@shikijs/engine-oniguruma": {
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.0.tgz",
|
||||
"integrity": "sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==",
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.1.tgz",
|
||||
"integrity": "sha512-L+1Vmd+a2kk8HtogUFymQS6BjUfJnzcWoUp1BUgxoDiklbKSMvrsMuLZGevTOP1m0rEjgnC5MsDmsr8lX1lC+Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/types": "1.22.0",
|
||||
"@shikijs/types": "1.22.1",
|
||||
"@shikijs/vscode-textmate": "^9.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@shikijs/types": {
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.0.tgz",
|
||||
"integrity": "sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==",
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.1.tgz",
|
||||
"integrity": "sha512-+45f8mu/Hxqs6Kyhfm98Nld5n7Q7lwhjU8UtdQwrOPs7BnM4VAb929O3IQ2ce+4D7SlNFlZGd8CnKRSnwbQreQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/vscode-textmate": "^9.3.0",
|
||||
|
|
@ -1134,6 +1136,14 @@
|
|||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/i": {
|
||||
"version": "0.3.7",
|
||||
"resolved": "https://registry.npmjs.org/i/-/i-0.3.7.tgz",
|
||||
"integrity": "sha512-FYz4wlXgkQwIPqhzC5TdNMLSE5+GS1IIDJZY/1ZiEPCT2S3COUVZeT5OW4BmW4r5LHLQuOosSwsvnroG9GR59Q==",
|
||||
"engines": {
|
||||
"node": ">=0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/is-binary-path": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
|
|
@ -1858,15 +1868,15 @@
|
|||
}
|
||||
},
|
||||
"node_modules/shiki": {
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.0.tgz",
|
||||
"integrity": "sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==",
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.1.tgz",
|
||||
"integrity": "sha512-PbJ6XxrWLMwB2rm3qdjIHNm3zq4SfFnOx0B3rEoi4AN8AUngsdyZ1tRe5slMPtn6jQkbUURLNZPpLR7Do3k78g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/core": "1.22.0",
|
||||
"@shikijs/engine-javascript": "1.22.0",
|
||||
"@shikijs/engine-oniguruma": "1.22.0",
|
||||
"@shikijs/types": "1.22.0",
|
||||
"@shikijs/core": "1.22.1",
|
||||
"@shikijs/engine-javascript": "1.22.1",
|
||||
"@shikijs/engine-oniguruma": "1.22.1",
|
||||
"@shikijs/types": "1.22.1",
|
||||
"@shikijs/vscode-textmate": "^9.3.0",
|
||||
"@types/hast": "^3.0.4"
|
||||
}
|
||||
|
|
@ -2083,6 +2093,15 @@
|
|||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss-animate": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
|
||||
"integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || insiders"
|
||||
}
|
||||
},
|
||||
"node_modules/thenify": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
|
||||
|
|
|
|||
|
|
@ -11,11 +11,13 @@
|
|||
"@esbuild/linux-x64": "^0.24.0",
|
||||
"@tailwindcss/forms": "^0.5.9",
|
||||
"esbuild": "^0.24.0",
|
||||
"i": "^0.3.7",
|
||||
"phoenix": "^1.7.14",
|
||||
"phoenix_html": "^3.3.4",
|
||||
"phoenix_live_view": "^1.0.0-rc.7",
|
||||
"shiki": "^1.22.0",
|
||||
"tailwindcss": "^3.4.14"
|
||||
"shiki": "^1.22.1",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/phoenix": "^1.6.5",
|
||||
|
|
|
|||
|
|
@ -12,7 +12,45 @@ module.exports = {
|
|||
"../lib/zoeyscomputer_web/**/*.*ex",
|
||||
],
|
||||
theme: {
|
||||
fontSize: {
|
||||
sm: "1rem",
|
||||
base: "1.2rem",
|
||||
xl: "1.45rem",
|
||||
"2xl": "1.563rem",
|
||||
"3xl": "1.953rem",
|
||||
"4xl": "2.441rem",
|
||||
"5xl": "3.052rem",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Iosevka Web", "monospace"],
|
||||
},
|
||||
extend: {
|
||||
keyframes: {
|
||||
"fade-in": {
|
||||
"0%": { opacity: 0 },
|
||||
"100%": { opacity: 1 },
|
||||
},
|
||||
"fade-out": {
|
||||
"0%": { opacity: 1 },
|
||||
"100%": { opacity: 0 },
|
||||
},
|
||||
"zoom-in": {
|
||||
"0%": { transform: "scale(0.95)" },
|
||||
"100%": { transform: "scale(1)" },
|
||||
},
|
||||
"zoom-out": {
|
||||
"0%": { transform: "scale(1)" },
|
||||
"100%": { transform: "scale(0.95)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"fade-in-0": "fade-in 0.2s ease-in-out",
|
||||
"fade-in": "fade-in 0.3s ease-in-out",
|
||||
"fade-out-0": "fade-out 0.2s ease-in-out",
|
||||
"fade-out": "fade-out 0.3s ease-in-out",
|
||||
"zoom-in-95": "zoom-in 0.2s ease-in-out",
|
||||
"zoom-out-95": "zoom-out 0.2s ease-in-out",
|
||||
},
|
||||
colors: {
|
||||
brand: "#FD4F00",
|
||||
},
|
||||
|
|
@ -25,6 +63,7 @@ module.exports = {
|
|||
//
|
||||
// <div class="phx-click-loading:animate-ping">
|
||||
//
|
||||
require("tailwindcss-animate"),
|
||||
require("@catppuccin/tailwindcss")({
|
||||
prefix: "ctp",
|
||||
defaultFlavor: "mocha",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue