feat: use a new theme (#9)

* feat: use a new theme

* fix: php block, markdown frontmatter strings

* chore: use list scope consistently

* docs: readme

* docs: readme center

README.md

@@ -1,40 +1,13 @@
-# Nako
+<h1 align="center">Nako</h1>
 
-**Nako** is an elegant Visual Studio Code theme inspired by Vercel (ZEIT).
+<p align="center"><i>Nako</i> is a premium dark color theme for Visual Studio Code.</p>
 
-![Color theme preview](./preview.png)
+<p align="center"><a href="https://marketplace.visualstudio.com/items?itemName=kettanaito.nako"><strong>Install this theme</strong></a></p>
 
-## Variants
-
-This color theme comes in two variants:
-
-- **Nako** (dark color theme)
-- **Nako Light** (light color theme)
+![Theme preview](./previews.png)
 
 ## Palette
 
-### Light
-
-This theme is designed with vibrant and contrast colors, highlighting syntactic constructions and bringing focus to logic flow operators.
-
-![Light palette](./palette-light.png)
-
-### Dark
-
-The dark variant vastly inherits from the light colors, yet with reduced saturation to prevent eye fatigue, while preserving a sharp contrast.
-
-![Dark palette](./palette-dark.png)
-
-
-## Recommended settings
-
-This theme works best with the following settings in your VS Code:
+Let's take a closer look at the exquisite color palette featured by this color theme.
 
-```json
-{
-  "editor.fontFamily": "Menlo",
-  "editor.fontSize": 13,
-  "editor.fontLigatures": false,
-  "workbench.fontAliasing": "antialiased"
-}
-```
+![Color palette](./color-palette.png)

demos/.gitignore

@@ -0,0 +1 @@
+preview.js

demos/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always"
+}

demos/.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "editor.minimap.enabled": false,
+  "editor.lightbulb.enabled": false,
+  "editor.cursorBlinking": "solid",
+  "editor.parameterHints.enabled": false,
+  "editor.hover.enabled": false,
+  "editor.suggestOnTriggerCharacters": false,
+  "prettier.printWidth": 80,
+  "breadcrumbs.enabled": false,
+  "workbench.activityBar.visible": true,
+  "workbench.statusBar.visible": true,
+  "javascript.suggest.names": false,
+  "scm.diffDecorations": "none",
+  "window.zoomLevel": 0,
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": true
+  }
+}

demos/mdx.mdx

@@ -1,6 +1,12 @@
 ---
-title: Category theory application in web apps.
+title: Category theory application in web apps
 date: 2020-15-20
+property:
+  - item 1
+  - item 2
+object:
+  propA: Something
+  propB: 123
 ---
 
 # Category theory

demos/php.php

@@ -1,8 +1,4 @@
-
-
 <?php
   $age = 100;
-  $name = 'wes';
+  $name = 'John';
   $cool = true;
-
-

demos/react.js

@@ -1,11 +1,41 @@
-import { Component } from "React"
+import { forwardRef } from "react";
+import { RunButton } from "../../common/RunButton";
+import { SandpackStack } from "../../common/Stack";
+import { useActiveCode } from "../../hooks/useActiveCode";
+import { useSandpack } from "../../hooks/useSandpack";
+import { CodeEditor } from "../CodeEditor";
+import type { Decorators } from "../CodeEditor/CodeMirror";
+import { FileTabs } from "../FileTabs";
+
+export interface CodeViewerProps {
+  showTabs?: boolean;
+  showLineNumbers?: boolean;
+  decorators?: Decorators;
+  code?: string;
+}
+
+export const SandpackCodeViewer = forwardRef<HTMLDivElement, CodeViewerProps>(
+  ({ showTabs, showLineNumbers, decorators, code: propCode }, ref) => {
+    const { sandpack } = useSandpack();
+    const { code } = useActiveCode();
+
+    const shouldShowTabs = showTabs ?? sandpack.openPaths.length > 1;
 
-class Wow extends Component {
-  render() {
     return (
-      <div className="wow">
-        <input type="number" />
-      </div>
-    )
+      <SandpackStack>
+        {shouldShowTabs ? <FileTabs /> : null}
+
+        <CodeEditor
+          ref={ref}
+          code={propCode ?? code}
+          decorators={decorators}
+          filePath={sandpack.activePath}
+          showLineNumbers={showLineNumbers}
+          readOnly
+        />
+
+        {sandpack.status === "idle" ? <RunButton /> : null}
+      </SandpackStack>
+    );
   }
-}
+);

demos/tutorial.js

@@ -0,0 +1,22 @@
+import { graphql } from 'msw'
+
+export const config = {
+  runtime: 'experimental-edge',
+  template: `footer`,
+}
+
+export const handlers = [
+  // Some comments here.
+  graphql.query('GetUser', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        prop: 'value',
+        isAdmin: true,
+      }),
+    )
+  }),
+]
+
+export default function headers(req) {
+  return Response.json({})
+}

demos/typescript.ts

@@ -1,17 +1,12 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { FormsModule } from '@angular/forms'
 
-import { AppComponent } from './app.component';
+import { AppComponent } from './app.component'
 
 @NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule
-  ],
-  declarations: [
-    AppComponent
-  ],
-  bootstrap: [AppComponent]
+  imports: [BrowserModule, FormsModule],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nako",
   "displayName": "Nako",
-  "description": "Elegant and contrast Visual Studio Code theme inspired by Vercel.",
+  "description": "Premium dark color theme for Visual Studio Code",
   "author": {
     "name": "Artem Zakharchenko",
     "url": "https://github.com/kettanaito"
@@ -23,29 +23,21 @@
   ],
   "icon": "nako-icon.png",
   "galleryBanner": {
-    "color": "#161A1D",
+    "color": "#080808",
     "theme": "dark"
   },
   "keywords": [
     "Theme",
     "Dark Theme",
-    "Light Theme",
     "Contrast",
-    "Nako",
-    "ZEIT",
-    "Vercel"
+    "Nako"
   ],
   "contributes": {
     "themes": [
       {
         "label": "Nako",
         "uiTheme": "vs-dark",
         "path": "./themes/nako-dark-color-theme.json"
-      },
-      {
-        "label": "Nako Light",
-        "uiTheme": "vs",
-        "path": "./themes/nako-light-color-theme.json"
       }
     ]
   },