@nil-/doc 0.2.27 → 0.2.29

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nil-/doc
 
+## 0.2.29
+
+### Patch Changes
+
+-   [doc][feature] ThemeIcon ([#41](https://github.com/njaldea/mono/pull/41))
+    [doc][feature] added top bar to separate title and other controls
+
+## 0.2.28
+
+### Patch Changes
+
+-   [doc][fix] reorder css style ([#37](https://github.com/njaldea/mono/pull/37))
+
 ## 0.2.27
 
 ### Patch Changes

package/components/Layout.svelte

@@ -1,10 +1,25 @@
 <style>
+    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
+
     .layout {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: minmax(40px, auto) 1fr;
         width: 100%;
         height: 100%;
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
 
+    .top {
+        display: grid;
+        grid-template-columns: 1fr 40px;
+        align-items: center;
+        padding-left: 20px;
+        padding-right: 20px;
+        box-sizing: border-box;
+        user-select: none;
+    }
+
     .content {
         height: 100%;
         padding: 5px;
@@ -14,8 +29,6 @@
     }
 
     /* reset block */
-    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
-
     .reset {
         width: 100%;
         height: 100%;
@@ -41,6 +54,14 @@
         color-scheme: light;
     }
 
+    .layout > .top {
+        border-bottom: hsl(0, 2%, 70%) solid 1px;
+    }
+
+    .layout.dark > .top {
+        border-bottom: hsl(0, 2%, 38%) solid 1px;
+    }
+
     .layout.dark {
         background-color: hsl(200, 4%, 14%);
         color: hsl(200, 6%, 80%);
@@ -51,6 +72,7 @@
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
 import { inRoot, getTheme, initTheme, evalTheme } from "./context";
+import ThemeIcon from "./etc/ThemeIcon.svelte";
 export let data;
 export let current = null;
 export let sorter = null;
@@ -63,6 +85,10 @@ $:
   $isDark = evalTheme(parentTheme ? $parentTheme : true, theme);
 </script>
 <div class="layout" class:reset={r} class:dark={$isDark}>
+    <div class="top">
+        <slot name="title"><span>@nil-/doc</span></slot>
+        <ThemeIcon bind:dark={$isDark} />
+    </div>
     <Container offset={250} padding={250} vertical secondary>
         <svelte:fragment slot="primary">
             <div class="content scrollable">
@@ -72,9 +98,7 @@ $:
                     sorter={sorter ?? ((l, r) => (l === r ? 0 : l < r ? -1 : +1))}
                     renamer={renamer ?? ((s) => s)}
                     on:navigate
-                >
-                    <slot name="title">@nil-/doc</slot>
-                </Nav>
+                />
             </div>
         </svelte:fragment>
         <svelte:fragment slot="secondary">

package/components/block/Block.svelte

@@ -1,4 +1,6 @@
 <style>
+    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
+
     div {
         display: flex;
         flex-direction: column;
@@ -6,8 +8,6 @@
     }
 
     /* reset block */
-    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
-
     .reset {
         width: 100%;
         height: 100%;

package/components/etc/ThemeIcon.svelte

@@ -0,0 +1,69 @@
+<script context="module">let indexer = 0;
+</script>
+<script>export let dark = true;
+import { spring } from "svelte/motion";
+function iter() {
+  dark = !dark;
+}
+const rotate = spring(dark ? 90 : 40);
+const mcx = spring(dark ? 30 : 12);
+const mcy = spring(dark ? 0 : 4);
+const cr = spring(dark ? 5 : 9);
+const opacity = spring(dark ? 0 : 1);
+$:
+  rotate.set(dark ? 90 : 40);
+$:
+  mcx.set(dark ? 30 : 12);
+$:
+  mcy.set(dark ? 0 : 4);
+$:
+  cr.set(dark ? 5 : 9);
+$:
+  opacity.set(dark ? 1 : 0);
+const index = indexer++;
+</script>
+<style>
+    svg {
+        all: unset;
+        width: 50%;
+        height: 50%;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        cursor: pointer;
+        color: black;
+        margin: auto;
+    }
+
+    svg.dark {
+        color: white;
+    }
+</style>
+
+
+<svg
+    on:click={iter}
+    on:keypress={null}
+    viewBox="0 0 24 24"
+    class:dark
+    style={`transform: rotate(${$rotate}deg)`}
+>
+    <mask id={`theme_icon_${index}`}>
+        <rect x="0" y="0" width="100%" height="100%" fill="white" />
+        <circle cx={$mcx} cy={$mcy} r="9" fill="currentColor" />
+    </mask>
+    <circle cx="12" cy="12" r={$cr} fill="currentColor" mask={`url(#theme_icon_${index})`} />
+    <g style={`opacity: ${$opacity}`}>
+        <line x1="12" y1="1" x2="12" y2="3" />
+        <line x1="12" y1="21" x2="12" y2="23" />
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+        <line x1="1" y1="12" x2="3" y2="12" />
+        <line x1="21" y1="12" x2="23" y2="12" />
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </g>
+</svg>
+

package/components/etc/ThemeIcon.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        dark?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeIconProps = typeof __propDef.props;
+export type ThemeIconEvents = typeof __propDef.events;
+export type ThemeIconSlots = typeof __propDef.slots;
+export default class ThemeIcon extends SvelteComponentTyped<ThemeIconProps, ThemeIconEvents, ThemeIconSlots> {
+}
+export {};

package/components/navigation/utils.d.ts

@@ -10,8 +10,8 @@ import type { Tree, Sorter, Renamer } from "./types";
  *
  * Else comparison is done using built-in `string` comparison.
  *
- * @param {string} l
- * @param {string} r
+ * @param l - left operand
+ * @param r - right operand
  * @returns `-1 | 0 | +1`
  */
 declare const sorter: Sorter;
@@ -19,7 +19,7 @@ declare const sorter: Sorter;
  * If a text follows `<I>-<Name>` format,
  * this method simply removes the Prefix.
  *
- * @param {string} text
+ * @param text
  * @returns `<Name>`
  */
 declare const renamer: Renamer;

package/components/navigation/utils.js

@@ -19,8 +19,8 @@ function sorterT(l, r) {
  *
  * Else comparison is done using built-in `string` comparison.
  *
- * @param {string} l
- * @param {string} r
+ * @param l - left operand
+ * @param r - right operand
  * @returns `-1 | 0 | +1`
  */
 const sorter = (l, r) => {
@@ -41,7 +41,7 @@ const sorter = (l, r) => {
  * If a text follows `<I>-<Name>` format,
  * this method simply removes the Prefix.
  *
- * @param {string} text
+ * @param text
  * @returns `<Name>`
  */
 const renamer = (text) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -11,11 +11,11 @@
     "@sveltejs/kit": "^1.0.1",
     "@sveltejs/package": "^1.0.1",
     "mdsvex": "^0.10.6",
-    "svelte-check": "^2.10.2",
+    "svelte-check": "^2.10.3",
     "svelte-markdown": "^0.2.3",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.2"
+    "vite": "^4.0.3"
   },
   "peerDependencies": {
     "svelte": "^3.55.0"

package/sveltekit/index.d.ts

@@ -1,15 +1,17 @@
 import { type Readable } from "svelte/store";
 type Routes = {
     /**
-     * Routes
+     * List of routes
      */
     data: string[];
     /**
-     * Removes unneeded group layout in the route
-     * @param {string} route
-     * @returns
+     * Current route but removes unneeded group layout in the route
      */
     current: Readable<string | null>;
+    /**
+     * Callback to navigate to other pages
+     * @param e - event that contains detail about the target url
+     */
     navigate: (e: CustomEvent<string>) => void;
 };
 /**