@sfgrp/taxonpages 0.1.0

package/src/cli/utils/resolveConfig.js

@@ -0,0 +1,112 @@
+import { resolve } from 'node:path'
+import { existsSync } from 'node:fs'
+import { loadConfiguration } from '../../utils/loadConfiguration.js'
+import { VitePluginRadar } from 'vite-plugin-radar'
+import Vue from '@vitejs/plugin-vue'
+import Markdown from 'unplugin-vue-markdown/vite'
+import markdownAnchor from 'markdown-it-anchor'
+import Pages from 'vite-plugin-pages'
+import tailwindcss from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import {
+  relativeToRouterPlugin,
+  variableReplacementPlugin
+} from '../../plugins/markdown/index.js'
+import { ViteRestart, projectStylesPlugin } from '../../plugins/vite/index.js'
+
+/**
+ * Build the full Vite configuration, resolving paths correctly
+ * for both the installed package and the user's project directory.
+ *
+ * @param {object} options
+ * @param {string} options.packageRoot - Absolute path to the taxonpages package
+ * @param {string} options.projectRoot - Absolute path to the user's project (CWD)
+ */
+export function getViteConfig({ packageRoot, projectRoot }) {
+  const configuration = loadConfiguration(projectRoot)
+
+  // Use user's index.html if it exists, otherwise fall back to the package's
+  const root = existsSync(resolve(projectRoot, 'index.html'))
+    ? projectRoot
+    : packageRoot
+
+  return {
+    root,
+    base: configuration.base_url,
+
+    resolve: {
+      alias: {
+        '@': resolve(packageRoot, 'src'),
+        '~': projectRoot
+      }
+    },
+
+    css: {
+      postcss: {
+        plugins: [
+          tailwindcss({
+            config: getTailwindConfigPath(packageRoot, projectRoot)
+          }),
+          autoprefixer()
+        ]
+      },
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler'
+        }
+      }
+    },
+
+    plugins: [
+      projectStylesPlugin(projectRoot),
+
+      ViteRestart({ dir: [resolve(projectRoot, 'config/**/*.yml')], projectRoot }),
+
+      Vue({
+        include: [/\.vue$/, /\.md$/]
+      }),
+
+      Markdown({
+        wrapperComponent: 'markdown-layout',
+        markdownItSetup(md) {
+          md.use(markdownAnchor)
+          md.use(variableReplacementPlugin, {
+            variables: { ...configuration }
+          })
+          md.use(relativeToRouterPlugin, configuration)
+        }
+      }),
+
+      Pages({
+        dirs: resolve(projectRoot, 'pages'),
+        exclude: ['**/components/*.vue', 'components/**/*.vue'],
+        extensions: ['vue', 'md'],
+        extendRoute(route) {
+          if (route.path === '/home') {
+            route.alias = '/home'
+            route.path = '/'
+            return route
+          }
+        }
+      }),
+
+      VitePluginRadar({
+        ...configuration?.analytics_services
+      })
+    ]
+  }
+}
+
+/**
+ * Resolve the Tailwind config file path.
+ * Prefers user's custom config at config/vendor/tailwind.config.cjs,
+ * falls back to the package's default tailwind.config.cjs.
+ */
+
+function getTailwindConfigPath(packageRoot, projectRoot) {
+  const userConfig = resolve(projectRoot, 'config/vendor/tailwind.config.cjs')
+  if (existsSync(userConfig)) {
+    return userConfig
+  }
+  return resolve(packageRoot, 'tailwind.config.cjs')
+}

package/src/components/AddressMaker.global.vue

@@ -0,0 +1,67 @@
+<template>
+  <button
+    type="button"
+    class="text-secondary-color cursor-pointer whitespace-nowrap inline bg-transparent border-0 p-0 font-inherit text-inherit"
+    aria-label="Send email"
+    @click="openClient"
+  >
+    <span v-html="data.username" />
+    <template v-for="(item, index) in data.host">
+      <svg
+        v-if="index === 0"
+        class="h-4 inline"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
+        />
+      </svg>
+
+      <svg
+        class="inline h-4 w-1"
+        aria-hidden="true"
+        v-else
+      >
+        <circle
+          cy="calc(100% - 5px)"
+          cx="2.5"
+          r="1"
+          fill="currentColor"
+        />
+      </svg>
+      <span v-html="item" />
+    </template>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+})
+
+const data = computed(() => {
+  const [username, ...rest] = props.items
+
+  return {
+    username,
+    host: rest
+  }
+})
+
+function openClient() {
+  const [username, ...rest] = props.items
+
+  document.location.href = `mailto:${username}@${rest.join('.')}`
+}
+</script>

package/src/components/Animation/AnimationOpacity.global.vue

@@ -0,0 +1,12 @@
+<template>
+  <transition
+    enter-active-class="duration-500 ease-out origin-top"
+    enter-from-class="transform opacity-0 scale-y-0"
+    enter-to-class="opacity-100 scale-y-100"
+    leave-active-class="duration-200 ease-in origin-top"
+    leave-from-class="opacity-100 scale-y-100"
+    leave-to-class="transform opacity-0 scale-y-0"
+  >
+    <slot />
+  </transition>
+</template>

package/src/components/Autocomplete/Autocomplete.global.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="tp-autocomplete md:block relative w-fit">
+    <div
+      class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
+    >
+      <IconSearch
+        class="w-4 h-4 text-gray-500"
+        aria-hidden="true"
+      />
+    </div>
+    <InputText
+      ref="inputElement"
+      v-model="typed"
+      type="text"
+      role="combobox"
+      :autofocus="autofocus"
+      autocomplete="off"
+      aria-autocomplete="list"
+      :aria-expanded="list.length > 0"
+      aria-controls="autocomplete-listbox"
+      :aria-activedescendant="activeDescendant"
+      class="tp-autocomplete__input block box-border w-full p-1.5 pl-10"
+      :placeholder="placeholder"
+      @input="trigger"
+      @keydown="handleKeydown"
+    />
+    <AutocompleteSpinner
+      v-if="isSearching"
+      class="tp-autocomplete__spinner hidden absolute top-1/2 -translate-y-1/2 right-2 h-5 w-5"
+    />
+
+    <ul
+      v-if="list.length"
+      id="autocomplete-listbox"
+      class="tp-autocomplete__list list absolute z-[500] max-h-52 w-full overflow-y-auto border bg-base-foreground border-base-border !m-0 shadow-md"
+      role="listbox"
+    >
+      <li
+        v-for="(item, index) in list"
+        :id="`autocomplete-option-${index}`"
+        :key="item.id"
+        class="tp-autocomplete__item px-3 py-2 border-b text-xs text-base-content cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 border-base-border truncate"
+        :class="{ 'bg-secondary-color bg-opacity-10': index === activeIndex }"
+        role="option"
+        :aria-selected="index === activeIndex"
+        @mousedown.prevent="selectItem(item)"
+      >
+        <span v-html="label ? item[label] : item" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { makeAPIRequest } from '@/utils/request'
+import AutocompleteSpinner from './AutocompleteSpinner.vue'
+
+const props = defineProps({
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+
+  placeholder: {
+    type: String,
+    default: 'Search...'
+  },
+
+  url: {
+    type: String,
+    required: true
+  },
+
+  queryParam: {
+    type: String,
+    default: 'term'
+  },
+
+  params: {
+    type: Object,
+    default: () => ({})
+  },
+
+  label: {
+    type: String,
+    default: undefined
+  },
+
+  retainInput: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const typed = defineModel('input', {
+  type: String,
+  default: ''
+})
+
+const emit = defineEmits(['select'])
+const list = ref([])
+const isSearching = ref(false)
+const inputElement = ref(null)
+const activeIndex = ref(-1)
+
+const activeDescendant = computed(() =>
+  activeIndex.value >= 0
+    ? `autocomplete-option-${activeIndex.value}`
+    : undefined
+)
+
+watch(list, () => {
+  activeIndex.value = -1
+})
+
+const delay = 500
+let timeout
+
+function trigger(e) {
+  clearTimeout(timeout)
+
+  if (e.target.value.length) {
+    timeout = setTimeout(() => {
+      list.value = []
+      isSearching.value = true
+
+      makeAPIRequest
+        .get(props.url, {
+          params: {
+            ...props.params,
+            [props.queryParam]: typed.value
+          }
+        })
+        .then(({ data }) => {
+          list.value = data
+        })
+        .catch(() => {})
+        .finally(() => {
+          isSearching.value = false
+        })
+    }, delay)
+  } else {
+    list.value = []
+  }
+}
+
+function highlightItem() {
+  const el = document.querySelector(`#${activeDescendant.value}`)
+
+  el?.scrollIntoView({
+    block: 'nearest',
+    behavior: 'auto'
+  })
+}
+
+function handleKeydown(e) {
+  if (!list.value.length) return
+
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault()
+      activeIndex.value = (activeIndex.value + 1) % list.value.length
+      break
+    case 'ArrowUp':
+      e.preventDefault()
+      activeIndex.value =
+        activeIndex.value <= 0 ? list.value.length - 1 : activeIndex.value - 1
+      break
+    case 'Enter':
+      if (activeIndex.value >= 0) {
+        e.preventDefault()
+        selectItem(list.value[activeIndex.value])
+      }
+      break
+  }
+
+  highlightItem()
+}
+
+const selectItem = (item) => {
+  emit('select', item)
+
+  if (props.retainInput) {
+    typed.value = props.label ? item[props.label] : item
+  } else {
+    typed.value = ''
+  }
+
+  list.value = []
+  activeIndex.value = -1
+  inputElement.value.inputRef.blur()
+}
+
+function setFocus() {
+  inputElement.value.inputRef.focus()
+}
+
+defineExpose({
+  setFocus
+})
+</script>
+
+<style lang="scss" scoped>
+.tp-autocomplete {
+  &__list {
+    display: none;
+    padding: 0px;
+  }
+
+  &__item {
+    margin: 0px;
+  }
+
+  &__input:focus ~ &__list {
+    display: block;
+  }
+
+  &__input:focus ~ &__spinner {
+    display: block;
+  }
+}
+</style>

package/src/components/Autocomplete/AutocompleteOtu.global.vue

@@ -0,0 +1,33 @@
+<template>
+  <Autocomplete
+    url="/otus/autocomplete"
+    query-param="term"
+    label="label_html"
+    :autofocus="autofocus"
+    :params="{ having_taxon_name_only: true }"
+    @select="loadOtu"
+  />
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import Autocomplete from '@/components/Autocomplete/Autocomplete.global.vue'
+
+const router = useRouter()
+
+const props = defineProps({
+  autofocus: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const loadOtu = ({ id, otu_valid_id }) => {
+  router.push({
+    name: 'otus-id-overview',
+    params: {
+      id: otu_valid_id || id
+    }
+  })
+}
+</script>

package/src/components/Autocomplete/AutocompleteSpinner.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    viewBox="0 0 38 38"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="green"
+  >
+    <g
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        transform="translate(1 1)"
+        stroke-width="2"
+      >
+        <circle
+          stroke-opacity=".5"
+          cx="18"
+          cy="18"
+          r="18"
+        />
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script></script>

package/src/components/Button/ButtonExpand.global.vue

@@ -0,0 +1,40 @@
+<template>
+  <button
+    type="button"
+    :title="isExpanded ? 'Close' : 'Expand'"
+    class="button-expand bg-base-foreground text-secondary-color w-5 h-5"
+    @click="isExpanded = !isExpanded"
+  >
+    <IconMinusCircle
+      v-if="isExpanded"
+      class="w-5 h-5"
+    />
+    <IconPlusCircle
+      v-else
+      class="w-5 h-5"
+    />
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isExpanded = computed({
+  get() {
+    return props.modelValue
+  },
+
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>

package/src/components/Button/VButton.global.vue

@@ -0,0 +1,39 @@
+<template>
+  <button
+    type="button"
+    :class="[
+      'tp-button',
+      'px-3',
+      'py-1',
+      circle ? 'rounded-full ' : 'rounded-md',
+      'hover:bg-opacity-80',
+      {
+        'bg-primary-color': primary,
+        'bg-secondary-color': secondary,
+        'text-primary-content': primary,
+        'text-secondary-content': secondary
+      }
+    ]"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup>
+const props = defineProps({
+  primary: {
+    type: Boolean,
+    default: false
+  },
+
+  secondary: {
+    type: Boolean,
+    default: false
+  },
+
+  circle: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>

package/src/components/Card/VCard.global.vue

@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="border-1 tp-card border-base-muted bg-base-foreground print:shadow-none print:border-0 rounded"
+  >
+    <slot />
+  </div>
+</template>
+
+<style>
+.tp-card {
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
+  border: 1px solid rgba(98, 105, 118, 0.16);
+  transition:
+    transform 0.3s ease-out,
+    opacity 0.3s ease-out,
+    box-shadow 0.3s ease-out;
+}
+</style>

package/src/components/Card/VCardContent.global.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4 pl-5 pr-5 tp-card-content">
+    <slot />
+  </div>
+</template>

package/src/components/Card/VCardHeader.global.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="tp-card-header p-4 pl-5 pr-5 border-b font-medium border-base-muted"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/Clipboard/VClipboard.global.vue

@@ -0,0 +1,50 @@
+<template>
+  <VButton
+    class="px-2 py-2 rounded-full"
+    primary
+    :aria-label="isCopied ? 'Copied to clipboard' : 'Copy to clipboard'"
+    @click="copyText"
+  >
+    <IconCheck
+      v-if="isCopied"
+      class="w-4 h-4"
+    />
+    <IconClipboard
+      v-else
+      class="w-4 h-4"
+    />
+  </VButton>
+</template>
+
+<script setup>
+import { ref, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true
+  },
+
+  delay: {
+    type: Number,
+    default: 2000
+  }
+})
+
+const isCopied = ref(false)
+let timeoutId
+
+function copyText() {
+  navigator.clipboard.writeText(props.text).then(() => {
+    isCopied.value = true
+
+    timeoutId = setTimeout(() => {
+      isCopied.value = false
+    }, props.delay)
+  })
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(timeoutId)
+})
+</script>