slidev-theme-neversink 0.3.1 → 0.3.3

package/components/Thumb.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { computed } from 'vue'
-//import { resolveColor } from '../layoutHelper'
 const props = defineProps({
   color: {
     type: String,

package/layoutHelper.ts

@@ -1,41 +1,41 @@
 import type { CSSProperties } from 'vue'
-import { colors } from '@unocss/preset-mini'
+// import { colors } from '@unocss/preset-mini'
 
-export function resolveColor(colorName: string, defaultColor: string = '#000000'): string {
-  // If the input is already a hex code, return it
-  if (/^#([0-9A-F]{3}){1,2}$/i.test(colorName)) {
-    return colorName
-  }
+// export function resolveColor(colorName: string, defaultColor: string = '#000000'): string {
+//   // If the input is already a hex code, return it
+//   if (/^#([0-9A-F]{3}){1,2}$/i.test(colorName)) {
+//     return colorName
+//   }
 
-  // Split the color name into base and shade
-  const [baseColor, shade] = colorName.toLowerCase().split('-')
+//   // Split the color name into base and shade
+//   const [baseColor, shade] = colorName.toLowerCase().split('-')
 
-  // Function to find the color in the colors object
-  function findColor(obj: any, base: string, shade?: string): string | null {
-    if (base in obj) {
-      if (shade && typeof obj[base] === 'object' && shade in obj[base]) {
-        return obj[base][shade]
-      } else if (!shade && typeof obj[base] === 'string') {
-        return obj[base]
-      }
-    }
+//   // Function to find the color in the colors object
+//   function findColor(obj: any, base: string, shade?: string): string | null {
+//     if (base in obj) {
+//       if (shade && typeof obj[base] === 'object' && shade in obj[base]) {
+//         return obj[base][shade]
+//       } else if (!shade && typeof obj[base] === 'string') {
+//         return obj[base]
+//       }
+//     }
 
-    for (const value of Object.values(obj)) {
-      if (typeof value === 'object' && value !== null) {
-        const result = findColor(value, base, shade)
-        if (result) return result
-      }
-    }
+//     for (const value of Object.values(obj)) {
+//       if (typeof value === 'object' && value !== null) {
+//         const result = findColor(value, base, shade)
+//         if (result) return result
+//       }
+//     }
 
-    return null
-  }
+//     return null
+//   }
 
-  // Search for the color in the UnoCSS colors object
-  const hexCode = findColor(colors, baseColor, shade)
+//   // Search for the color in the UnoCSS colors object
+//   const hexCode = findColor(colors, baseColor, shade)
 
-  // If a valid color is found, return its hex code; otherwise, return the default color
-  return hexCode || defaultColor
-}
+//   // If a valid color is found, return its hex code; otherwise, return the default color
+//   return hexCode || defaultColor
+// }
 
 /**
  * Resolve urls from frontmatter and append with the base url

package/layouts/side-title.vue

@@ -1,9 +1,7 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
+<script setup lang="js">
+import { computed } from 'vue'
 import { compute_alignment, compute_column_size } from '../layoutHelper'
 
-const slots = useSlots()
-
 const props = defineProps({
   side: {
     default: 'l',
@@ -55,15 +53,15 @@ const colorscheme = computed(() => {
     <p>
       There are three parameters: <code>color</code>, <code>columns</code> and <code>align</code>. Currently:
       <code>color: {{ props.color }}</code
-      >, <code>columns: {{ props.columns }}</code> and <code>align: {{ props.align }}</code
+      >, <code>columns: {{ props.titlewidth }}</code> and <code>align: {{ props.align }}</code
       >.
     </p>
     <p>The "slots" of the page are default and <code>:: content ::</code></p>
     <p>
-      Options for <code>columns</code> are divided into 12 column units. So with <code>columns: is-1-11</code> the left
-      column is 1/12 wide and the the right columns is 11/12 wide. The component admits a short had of only specifying
-      the left column (<code>columns: is-1</code> does the same thing). In addition there are short hands like
-      <code>columns: is-one-quarter</code> which resolves to <code>is-3-9</code>, etc...
+      Options for <code>titlewidth</code> are divided into 12 column units. So with <code>titlewidth: is-1-11</code> the
+      left column is 1/12 wide and the the right columns is 11/12 wide. The component admits a short had of only
+      specifying the left column (<code>titlewidth: is-1</code> does the same thing). In addition there are short hands
+      like <code>titlewidth: is-one-quarter</code> which resolves to <code>is-3-9</code>, etc...
     </p>
     <p>
       Here are a bunch of examples:

package/layouts/top-title-two-cols.vue

@@ -1,9 +1,7 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
+<script setup lang="js">
+import { computed } from 'vue'
 import { compute_alignment, compute_column_size } from '../layoutHelper'
 
-const slots = useSlots()
-
 const props = defineProps({
   columns: {
     default: 'is-one-half',
@@ -59,7 +57,7 @@ const colorscheme = computed(() => {
 
     <p>The <code>color</code> parameter determines color of the title.</p>
   </div>
-  <template v-else>
+  <div v-else>
     <div class="flex flex-col h-full w-full">
       <div class="w-full h-fit min-h-13 pt-2 pb-2 slidecolor" :class="colorscheme">
         <div class="slidev-layout toptitle title p-0 ml-6 mr-6 mt-auto mb-auto" :class="alignment.t">
@@ -80,7 +78,7 @@ const colorscheme = computed(() => {
         <slot name="default" />
       </div>
     </div>
-  </template>
+  </div>
 </template>
 
 <style>

package/layouts/top-title.vue

@@ -1,8 +1,6 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
-import { compute_alignment, compute_column_size } from '../layoutHelper'
-
-const slots = useSlots()
+<script setup lang="js">
+import { computed } from 'vue'
+import { compute_alignment } from '../layoutHelper'
 
 const props = defineProps({
   color: {
@@ -41,7 +39,7 @@ const colorscheme = computed(() => {
 
     <p>The <code>color</code> parameter determines color of the title.</p>
   </div>
-  <template v-else>
+  <div v-else>
     <div class="flex flex-col h-full w-full">
       <div class="w-full h-fit min-h-13 pt-2 pb-2 slidecolor" :class="colorscheme">
         <div class="slidev-layout toptitle title p-0 pt-0 ml-6 mr-6 mt-auto mb-auto" :class="alignment">
@@ -55,7 +53,7 @@ const colorscheme = computed(() => {
         <slot name="default" />
       </div>
     </div>
-  </template>
+  </div>
 </template>
 
 <style>

package/layouts/two-cols-title.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { computed, useSlots } from 'vue'
 import { compute_alignment, compute_column_size } from '../layoutHelper'
 

package/layouts/two-cols.vue

@@ -1,9 +1,7 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
+<script setup lang="js">
+import { computed } from 'vue'
 import { compute_alignment, compute_column_size } from '../layoutHelper'
 
-const slots = useSlots()
-
 const props = defineProps({
   columns: {
     default: 'is-one-half',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-neversink",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "author": "gureckis",
   "type": "module",
   "keywords": [