Skip to content

Refactor logic and fix bugs #4

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
mr150 merged 13 commits into from
Jan 11, 2026
Merged

Refactor logic and fix bugs #4

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
99373c5
fix: fix various stylistical bugs and refactor core logic
Ramazanmak Jan 2, 2026
029dbce
chore: restore initial vite.config.js
Ramazanmak Jan 2, 2026
4a36db5
fix: fix preview logic and minor stylistical bugs
Ramazanmak Jan 7, 2026
1624739
fix: fix minor mistakes and remove useless code
Ramazanmak Jan 8, 2026
3a051a0
fix: fix minor mistakes and change importmap
Ramazanmak Jan 9, 2026
142eacb
fix: make some minor stylistical corrections
Ramazanmak Jan 9, 2026
944908d
ci: set custom cname on GH Pages
Ramazanmak Jan 9, 2026
2613575
chore: remove unused utils from initial markup
mr150 Jan 9, 2026
1746589
chore: remove unused script import from html
mr150 Jan 9, 2026
ac09481
fix: change vite.config.js and add a script for the correct importmap
Ramazanmak Jan 10, 2026
618ab61
fix: roll back the importmap updates
Ramazanmak Jan 11, 2026
b671374
chore: clean the initial markup
mr150 Jan 11, 2026
d220d67
fix: fix preview crash when changing sass config
mr150 Jan 11, 2026
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
47 changes: 25 additions & 22 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,17 @@
<html lang="en" class="Fnf-mUss -HeaderH14u -SectionHeaderH10u">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="src/assets/img/favicon.png" type="image/x-icon">
<link rel="icon" href="/img/favicon.png" type="image/x-icon">
Comment thread
mr150 marked this conversation as resolved.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mlut playground</title>
<link rel="stylesheet" href="assets/style.css" />
<script type="importmap">
{
"imports": {
"immutable": "https://unpkg.com/immutable@^4.0.0",
"sass": "https://unpkg.com/sass@^1.63.0/sass.default.js"
}
}
</script>
</head>
<body class="P0 M0 H100vh">
<header class="W100p H-$headerH Mxh18u D-g Gtc1fr;1fr P2u;5u Bgc-$core700">
<!-- Logo part-->
<div class="W50p D-f Ai-c">
<div class=" D-f Ai-fe Gap3u W100p">
<img class="D H7u" alt="mlut logo" src="src/assets/img/mlut.png">
<img class="D H7u" alt="mlut logo" src="/img/mlut.png">
<span class="D-ib Fns5u C-$accent700">Playground</span>
</div>
</div>
Expand All @@ -40,9 +32,9 @@

</header>

<div class="H-calc(100%;-;var(--ml-headerH)) W100p Ps-r loader">
<main-comp class="H100p Ps-r ">
<main class="D-f Ai-str H100p Ps-r">
<div class="H-calc(100%;-;var(--ml-headerH)) W100p Ps loader">

@mr150 mr150 Jan 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div class="H-calc(100%;-;var(--ml-headerH)) W100p Ps loader">
<div class="H-calc(100%;-;$headerH) W100p Ps loader">

<main-comp class="H100p Ps ">
<main class="D-f Ai-str H100p Ps">
<!-- Left part-->
<div class="W50p D-f Fld-c">
<!-- HTML sample's wrapper-->
Expand All @@ -64,36 +56,47 @@
</div>

<!-- The right part-->
<div class="W50p D-f Fld-c ">
<div class="W50p">
<!-- Preview part-->
<div class="Flg1 Bdl1;s;$accent700 D-f Fld-c">
<div class="H100p Bdl1;s;$accent700">
<!-- Header-->
<div class="H-$sectionHeaderH Flg0 P0;5u Bgc-$core800 Bdt1;s;$accent700 Bdb1;s;$accent700 D-f Jc-sb Ai-c">
<div class="H-$sectionHeaderH P0;5u Bgc-$core800 Bdt1;s;$accent700 Bdb1;s;$accent700 D-f Jc-sb Ai-c">
<span class="C-$brand Fnw600"> Preview</span>
</div>
<!-- Preview's Body -->
<div class="H-calc(100%;-;$sectionHeaderH) Ps-r">
<code-preview class="preview-loader"></code-preview>
<div class="H-calc(100%;-;$sectionHeaderH) Ps Ovy-a Ovx-h">
<code-preview class="loader Zi8_b Zi9_af"></code-preview>
</div>
</div>
</div>
</main>
</main-comp>
</div>
<script type="importmap">
{
"imports": {
"immutable": "https://unpkg.com/immutable@^4.0.0",
"sass": "https://unpkg.com/sass@^1.63.0/sass.default.js",
"@octokit/plugin-retry": "/src/lib/engine-dependencies.js",
"@octokit/rest": "/src/lib/engine-dependencies.js",
"path-browserify-esm": "/src/lib/engine-dependencies.js"

@mr150 mr150 Jan 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Проверил, там сейчас есть проблемы с этим, так что пока убираем

}
}
</script>
<script type="module">
globalThis.mlut = {
['g' + 'it' + 'hub' + 'To' + 'ken']: 'g' + 'it' + 'hub_p' + 'at_11ACX5TXY0scktF',
};
</script>
<script type="module" src="/src/lib/engine-dependencies.js"></script>
<script type="module" src="/src/assets/scripts/loader-helper.js"></script>
<script type="module" src="/src/assets/scripts/eventBusContext.js"></script>
<script type="module" src="/src/components/main-comp.js"></script>
<script type="module" src="/src/components/style-tab.js"></script>
<script type="module" src="/src/components/copy-button.js"></script>
<script type="module" src="/src/components/content-loader.js"></script>
<script type="module" src="/src/components/code-editor.js"></script>
<script type="module" src="/src/components/code-preview.js"></script>
<script type="module" src="/src/components/tab-switch.js"></script>
<script type="module" src="/src/components/main-comp.js"></script>
<script type="module" src="/src/components/code-preview.js"></script>
<script type="module" src="https://unpkg.com/@mlut/core@latest/dist/index.js"></script>

</body>
</html>
46 changes: 21 additions & 25 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,12 @@
"@codemirror/lang-sass": "^6.0.2",
"@codemirror/theme-one-dark": "^6.1.3",
"@lit/context": "^1.1.6",
"@lit/task": "^1.0.3",
"@octokit/plugin-retry": "^8.0.3",
"@octokit/rest": "^22.0.1",
"@types/node": "^25.0.3",
"codemirror": "^6.0.2",
"component-emitter": "^2.0.0",
"lit": "3.3.1",
"path-browserify-esm": "^1.0.6",
"thememirror": "^2.0.1"
"path-browserify-esm": "^1.0.6"
},
"devDependencies": {
"@mlut/plugins": "^1.0.3",
Expand Down
0 src/assets/img/favicon.png → public/img/favicon.png
View file
Open in desktop
File renamed without changes
0 src/assets/img/icons.svg → public/img/icons.svg
View file
Open in desktop
File renamed without changes
0 src/assets/img/mlut.png → public/img/mlut.png
View file
Open in desktop
File renamed without changes
39 changes: 18 additions & 21 deletions src/assets/data/initial-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,30 @@
export const initialLayout = `
<div id="hero-page" class="-Gdl120d,$core750,$core650,$core600 Fnf-mUss H100vh P-$heroPadding;0;5u D-f Jc-c Ai-c">

export const initialLayout = `
<div class="-Gdl120d,$core750,$core650,$core600 Fnf-mUss H100vh P-$heroPadding;0;5u D-f Jc-c Ai-c">
<div class="D-f Jc-c Ai-c Fld-c wrapper">

<img class="D Mxw480 M0;a;5u W80p md_W100p"
alt="mlut logo" src="https://150.lv/t/acss/pictures/mlut-logo.png">


<img class="D Mxw480 M0;a;5u W80p md_W100p" alt="mlut logo" src="/img/mlut.png">
<h1 class="Txa-c C-$accent900 Fns8u Lnh1.1 M0;0;5u P0;1u md_Fns10u">
Make CSS exciting again!
</h1>

<p class="C-$accent850 M0;0;5u P0;2u Mxw750 Txa-c Fns4.4u
md_Fns5.2u ">
Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity
</p>

<div class="D-f Fld-r W100p Flw-w Jc-c Gap3u M0;0;5u P0;5u">
</div>
<button class="btn W70p Mxw50u H8u Fns0.9r P1u;3u Bdrd1u Bgc-$brand Bgc-$brand500_h C#fff">

@mr150 mr150 Jan 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Уже писал ранее, что фиксированная высота - антипаттерн. И все размеры по дефолту либо в u либо в gg

Getting started
</button>

@mr150 mr150 Jan 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Тут еще чуть надо форматирование поправить

</div>
</div>
`
`;
export const initialConfig = `
@use "@mlut/core";

:root {
--ml-brand:#f0438c;
--ml-brand500:rgb(233,30,99);
}

@media (prefers-color-scheme: dark){
html{
:root{
--ml-accent900:#fff;
--ml-accent850:rgb(209,213,219,1);
--ml-core750:#121828;
Expand All @@ -35,16 +34,15 @@ export const initialConfig = `
}

@media (prefers-color-scheme: light){
html{
:root{
--ml-accent900:rgb(17,24,39);
--ml-accent850:rgb(41,42,51,1);
--ml-core750:rgb(236,240,246,0.5);
--ml-core650:rgba(218,178,255,0.1);
--ml-core600:rgba(142,197,255,0.4);
}
}
`

`;
export const errorLayout = `
<div>
<h1> Ooops... </h1>
Expand All @@ -55,8 +53,7 @@ export const errorLayout = `
Check out the console
</h2>
</div>
`

`;
export const errorStyles = `
@media (prefers-color-scheme: light){
div {
Expand All @@ -73,7 +70,7 @@ export const errorStyles = `
}
div {
background-color:var(--ml-core800);
height: 100vh;
height: 100%;
weight: 100%;
display: flex;
flex-direction: column;
Expand All @@ -87,4 +84,4 @@ export const errorStyles = `
padding: 0;
margin: 0 0 1rem
}
`
`;
27 changes: 0 additions & 27 deletions src/assets/scripts/event-bus.js
View file
Open in desktop

This file was deleted.

5 changes: 5 additions & 0 deletions src/assets/scripts/eventBusContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import Emitter from 'component-emitter';
import { createContext } from '@lit/context';

export const eventBus = new Emitter();
export const eventBusContext = createContext('eventBus');
8 changes: 4 additions & 4 deletions src/assets/scripts/loader-helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// replace with normal auth
//replace with normal auth
//eslint-disable-next-line
globalThis.mlut.githubToken += 'ukhbxMg_OmqGHNu4' + 'ilNlnHBDEFpHbfdfqPYkbR1E2vnRbfN6Q7w44ZMECDZuhsGp2EK';

const contentLoader = document.querySelector('.loader');
window.addEventListener('load', () => {
contentLoader.classList.remove('loader')
})
window.addEventListener('load', () => {
contentLoader.classList.remove('loader');
});
2 changes: 2 additions & 0 deletions src/assets/style/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ html {
@media (prefers-color-scheme: light){
html {
--ml-core800: #f0f0f1;
--ml-core750: #fbf9fe;
Comment thread
mr150 marked this conversation as resolved.
--ml-core700: #fbf9fe;
--ml-accent800:#707481;
--ml-accent700: #7c7f8b;
Expand All @@ -20,6 +21,7 @@ html {
@media (prefers-color-scheme: dark){
html {
--ml-core800: #111827;
--ml-core750: #282c34;
--ml-core700: #0d1117;
--ml-accent800:#878c99;
--ml-accent700: #7f838f;
Expand Down
Loading