polish styling

huozhi · Jan 18, 2025 · 623d7fb · 623d7fb
1 parent 292d821
commit 623d7fb
Show file tree

Hide file tree

Showing 12 changed files with 253 additions and 166 deletions.
diff --git a/docs/app/carousel.js → docs/app/carousel.tsx b/docs/app/carousel.js → docs/app/carousel.tsx
@@ -1,13 +1,9 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Editor } from 'codice'
+import { Editor, Code } from 'codice'
 import { highlight } from 'sugar-high'
 
-/**
- * @type {[string, string, { highlightedLines: number[] }][]} 
- * @const
- */
 const EXAMPLE_PAIRS = [
   [
     'install.js',
@@ -119,9 +115,20 @@ const _iu = /* evaluate */ (19) / 234 + 56 / 7;
       highlightedLines: [9]
     }
   ]
-]
-
-function CodeFrame({ code, title = 'Untitled', index, highlightedLines = [] }) {
+] as const
+
+function CodeFrame(
+  { 
+    code, 
+    title = 'Untitled', 
+    index, 
+    highlightedLines = [] 
+  }: { 
+    code: string, 
+    title: string, 
+    index: number, 
+    highlightedLines: readonly number[] | number[]
+  }) {
   return (
     <div className='code-frame'>
       <style>
@@ -132,21 +139,14 @@ function CodeFrame({ code, title = 'Untitled', index, highlightedLines = [] }) {
           .join('\n') + '\n'
         }
       </style>
-      <div className='code-header'>
-        <div className='code-controls'>
-          <div className='code-control' />
-          <div className='code-control' />
-          <div className='code-control' />
-        </div>
-        <div className='code-title'>{title}</div>
-      </div>
-
-      <Editor
-        className='codice-editor'
-        highlight={highlight}
-        value={code}
-        disabled
-      />
+      <Code
+        controls
+        title={title}
+        className='codice code-snippet'
+        data-disabled="true"
+      >
+        {highlight(code)}
+      </Code>
     </div>
   )
 }
@@ -175,8 +175,8 @@ export default function Carousel() {
           const isShown = isAdjacent || isSelected
 
           let translate = '0%, 0%'
-          let scale = 1
-          let opacity = 1
+          let scale = '1'
+          let opacity = '1'
           if (i == left) {
             translate = '-40%, 60px'
             scale = '0.8'
@@ -198,7 +198,7 @@ export default function Carousel() {
 
           if (isAdjacent || i === selected) {
             r += `.code-label#code-${i}:hover {
-              transform: translate(${translate}) scale(${scale * 1.1});
+              transform: translate(${translate}) scale(${Number(scale) * 1.1});
             }`
           }
 

diff --git a/docs/app/components/copy-button.js → docs/app/components/copy-button.tsx b/docs/app/components/copy-button.js → docs/app/components/copy-button.tsx
diff --git a/docs/app/components/install-banner.js → docs/app/components/install-banner.tsx b/docs/app/components/install-banner.js → docs/app/components/install-banner.tsx
diff --git a/docs/app/editor/page.js → docs/app/editor/page.tsx b/docs/app/editor/page.js → docs/app/editor/page.tsx
diff --git a/docs/app/layout.js → docs/app/layout.tsx b/docs/app/layout.js → docs/app/layout.tsx
diff --git a/docs/app/live-editor.js → docs/app/live-editor.tsx b/docs/app/live-editor.js → docs/app/live-editor.tsx
@@ -31,7 +31,7 @@ function debounce(func, timeout = 200) {
 
 const customizableColors = Object.entries(SugarHigh.TokenTypes)
   .filter(([, tokenTypeName]) => tokenTypeName !== 'break' && tokenTypeName !== 'space')
-  .sort((a, b) => a - b)
+  .sort((a, b) => Number(a) - Number(b))
 
 const DEFAULT_LIVE_CODE = `\
 export default function App() {
@@ -110,7 +110,7 @@ export default function LiveEditor({
   enableTypingAnimation = true,
   defaultCode = DEFAULT_LIVE_CODE,
 }) {
-  const editorRef = useRef()
+  const editorRef = useRef(null)
   const [colorPlateColors, setColorPlateColors] = useState(defaultColorPlateColors)
   const isDebug = process.env.NODE_ENV === 'development'
 
@@ -139,7 +139,7 @@ export default function LiveEditor({
 
   const customizableColorsString = useMemo(() => {
     return customizableColors
-      .map(([tokenType, tokenTypeName]) => {
+      .map(([_tokenType, tokenTypeName]) => {
         return `--sh-${tokenTypeName}: ${colorPlateColors[tokenTypeName]};`
       })
       .join('\n')
@@ -165,8 +165,9 @@ export default function LiveEditor({
       <div className="flex live-editor">
         <Editor
           ref={editorRef}
-          className="codice-editor flex-1"
+          className="codice editor flex-1"
           highlight={highlight}
+          controls={false}
           value={liveCode}
           onChange={(newCode) => {
             setLiveCode(newCode)
@@ -210,17 +211,14 @@ export default function LiveEditor({
       </div>
       {isDebug && (
         <div className="editor-tokens">
-          <pre>
-            {liveCodeTokens.map(([tokenType, token], index) => {
-              const tokenTypeName = SugarHigh.TokenTypes[tokenType]
-              return (
-                <div key={index}>
-                  {tokenTypeName}
-                  {' '.repeat(12 - tokenTypeName.length)} {token}
-                </div>
-              )
-            })}
-          </pre>
+          {liveCodeTokens.map(([tokenType, token], index) => {
+            const tokenTypeName = SugarHigh.TokenTypes[tokenType]
+            return (
+              <span className={`editor-token editor-token--${tokenTypeName}`} key={index}>
+                {token}{` `}
+              </span>
+            )
+          })}
         </div>
       )}
     </div>

diff --git a/docs/app/page.js → docs/app/page.tsx b/docs/app/page.js → docs/app/page.tsx
diff --git a/docs/app/styles.css b/docs/app/styles.css
@@ -1,14 +1,15 @@
 :root {
-  --editor-background-color: transparent;
-  --editor-text-color: transparent;
+  --codice-editor-text-color: transparent;
+  --codice-editor-background-color: transparent;
+  --codice-editor-caret-color: #333;
 }
 
 ::selection {
   background-color: #333;
   color: #ddd;
 }
 
-.codice-editor ::selection {
+.codice ::selection {
   background-color: #e2ffea;
 }
 
@@ -97,18 +98,7 @@ input[type="checkbox"]:checked {
   overflow-y: scroll;
   scrollbar-width: none;
 }
-.codice-editor code,
-.codice-editor textarea {
-  font-family: Consolas, Monaco, monospace;
-  padding: 10px;
-  background-color: #f6f6f6;
-  border: none;
-  font-size: 16px;
-  line-height: 1.5em;
-  caret-color: #333;
-  outline: none;
-  scrollbar-width: none;
-}
+
 textarea {
   padding-left: 48px;
   position: absolute;
@@ -121,35 +111,6 @@ textarea {
 .code-frame {
   position: relative;
 }
-.code-header {
-  position: relative;
-  display: flex;
-  background-color: #f6f6f6;
-  padding: 16px 22px 0;
-}
-.code-control {
-  display: flex;
-  width: 12px;
-  height: 12px;
-  margin: 4px;
-  background-color: hsl(0deg 0% 0% / 34%);
-  border-radius: 50%;
-}
-.code-controls {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translate(16px, -50%);
-}
-.code-title {
-  flex: 1 0;
-  text-align: center;
-  color: hsl(0deg 0% 0% / 34%);
-}
-
 .code-label {
   position: absolute;
   height: 100%;
@@ -199,24 +160,18 @@ textarea {
 code {
   counter-reset: sh-line-number;
 }
-.codice-editor code {
-  display: flex !important;
-  flex-direction: column;
-  padding-left: 48px;
-  min-height: 400px;
-  width: 100%;
-}
-
-pre code .sh__line::before {
+code .sh__line::before {
   counter-increment: sh-line-number 1;
   content: counter(sh-line-number);
-  width: 24px;
   display: inline-block;
+  text-align: right;
+  width: 24px;
   margin-right: 18px;
   margin-left: -42px;
-  text-align: right;
   color: #a4a4a4;
 }
+.editor code .sh__line::before {
+}
 
 .live-editor {
   flex: 1;
@@ -226,18 +181,6 @@ pre code .sh__line::before {
   margin: 8rem auto;
   max-width: 720px;
 }
-.codice-editor code::selection {
-  color: transparent;
-}
-.codice-editor textarea::selection {
-  color: #2c7ea163;
-}
-
-.codice-editor code,
-.codice-editor textarea {
-  padding: 24px;
-  padding-left: 48px;
-}
 
 .live-editor__color {
   margin: 24px 0;
@@ -283,9 +226,6 @@ pre code .sh__line::before {
   height: 30px;
   margin-right: 8px;
 }
-.sh__line {
-  display: block;
-}
 .live-editor .sh__line {
   color: #333;
 }
@@ -309,4 +249,81 @@ pre code .sh__line::before {
   }
 }
 
+[data-codice-editor] code {
+  width: 100%;
+}
+[data-codice-editor] code,
+[data-codice-code] code {
+  /* TODO: potentially upstream */
+  display: inline-block;
+}
+.editor.codice[data-codice-editor] code {
+  min-height: 400px;
+  background-color: #f6f6f6;
+}
+.editor.codice[data-codice-editor] code,
+.editor.codice[data-codice-editor] textarea {
+  padding: 24px 24px 24px 48px;
+}
+.code-snippet[data-codice-code] pre {
+  background-color: #f6f6f6;
+}
 
+.codice[data-codice-code] code,
+.codice[data-codice-code] textarea {
+  font-family: Consolas, Monaco, monospace;  
+  padding: 10px;
+  border: none;
+  font-size: 16px;
+  line-height: 1.5em;
+  caret-color: #333;
+  outline: none;
+  /* background-color: #f6f6f6; */
+  scrollbar-width: none;
+}
+.codice[data-codice-code] pre {
+  padding: 0;
+  padding-left: 48px;
+}
+.codice[data-codice-code] code::selection {
+  color: transparent;
+}
+.codice[data-codice-code] textarea::selection {
+  color: #2c7ea163;
+}
+.code-snippet [data-codice-editor-header] {
+  background-color: #f6f6f6;
+}
+
+/* TODO: default color variable */
+.codice [data-codice-editor-controls] span {
+  background-color: rgba(0,0,0,.34);
+}
+.codice [data-codice-editor-title] {
+  color: rgba(0,0,0,.34);
+}
+
+/* debug */
+.editor-token {
+  padding: 4px 8px;
+  margin: 8px;
+  background-color: #d4d1d1;
+}
+.editor-token--keyword {
+  background-color: #f47067;
+}
+.editor-token--string {
+  background-color: #00a99a;
+}
+.editor-token--comment {
+  background-color: #a19595;
+}
+.editor-token--property {
+  background-color: #0550ae;
+}
+.editor-token--entity {
+  background-color: #249a97;
+}
+.editor-token--jsxliterals {
+  background-color: #6266d1;
+}
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.