Skip to content

Split out sidebar from devtools #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tbrockman merged 2 commits into from
Oct 21, 2025
Merged

Split out sidebar from devtools #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b6411f
Fixing bug and before handling canvas.
tbrockman Oct 21, 2025
a9523b4
Add workflows perm.
tbrockman Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/license.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ jobs:
permissions:
contents: write # Required to push to PR branches
pull-requests: write
workflows: write

steps:
- name: Checkout PR branch
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"@codemirror/state": "^6.5.2",
"@codemirror/theme-one-dark": "^6.1.2",
"clean-css": "^5.3.3",
"codemirror": "^6.0.1"
"codemirror": "^6.0.1",
"fabric": "^6.7.1"
}
}
852 changes: 847 additions & 5 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

79 changes: 0 additions & 79 deletions public/devtools.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,9 @@
<!DOCTYPE html>
<!--
Copyright 2025 Theodore Brockman
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
font-family: system-ui, sans-serif;
background: var(--bg);
color: var(--fg);
}

:root {
--bg: #fff;
--fg: #000;
--border: #ccc;
}

@media (prefers-color-scheme: dark) {
:root {
--bg: #1e1e1e;
--fg: #ddd;
--border: #444;
}
}

body {
display: flex;
flex-direction: column;
padding: 8px;
gap: 8px;
}

.section {
display: flex;
flex-direction: column;
flex: 1;
max-height: 50vh;
}

.section > .header {
font-weight: bold;
font-size: 0.85rem;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}

#codemirror, #preview {
overflow: auto;
}

#copy {
font-size: 0.75rem;
padding: 4px 8px;
background-color: var(--bg);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
}

#copy:hover {
background-color: rgba(127,127,127,0.1);
}
</style>
</head>

<body>
<div class="section" id="editor-section">
<div class="header">Editor</div>
<button id="copy">Copy</button>
<div id="codemirror"></div>
</div>

<div class="section">
<div class="header">Preview</div>
<div id="preview">Rendered output goes here...</div>
</div>

<script src="devtools.js" type="module"></script>
</body>
</html>
17 changes: 0 additions & 17 deletions public/offscreen.html
View file
Open in desktop

This file was deleted.

87 changes: 87 additions & 0 deletions public/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<!--
Copyright 2025 Theodore Brockman
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
font-family: system-ui, sans-serif;
background: var(--bg);
color: var(--fg);
}

:root {
--bg: #fff;
--fg: #000;
--border: #ccc;
}

@media (prefers-color-scheme: dark) {
:root {
--bg: #1e1e1e;
--fg: #ddd;
--border: #444;
}
}

body {
display: flex;
flex-direction: column;
padding: 8px;
gap: 8px;
}

.section {
display: flex;
flex-direction: column;
flex: 1;
max-height: 50vh;
}

.section > .header {
font-weight: bold;
font-size: 0.85rem;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}

#codemirror, #preview {
overflow: auto;
}

#copy {
font-size: 0.75rem;
padding: 4px 8px;
background-color: var(--bg);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
}

#copy:hover {
background-color: rgba(127,127,127,0.1);
}
</style>
</head>

<body>
<div class="section" id="editor-section">
<div class="header">Editor</div>
<div id="codemirror"></div>
</div>

<div class="section">
<div class="header">Preview</div>
<div id="preview">Rendered output goes here...</div>
</div>

<script src="sidebar.js" type="module"></script>
</body>
</html>
99 changes: 0 additions & 99 deletions src/background.ts
View file
Open in desktop

This file was deleted.

Loading