🚀 first commit

Author: atinux

Diff for: .env.example

@@ -0,0 +1 @@
+NUXT_PUBLIC_HELLO_TEXT="Hello from the Edge 👋"

Diff for: .gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

Diff for: README.md

@@ -0,0 +1,60 @@
+# Hello Edge
+
+A minimal [Nuxt](https://nuxt.com) starter deployed on the Edge using [NuxtHub](https://hub.nuxt.com).
+
+https://hello.nuxt.dev
+
+<a href="https://hello.nuxt.dev">
+<img src="https://github.com/nuxt-hub/hello-edge/assets/904724/99d1bd54-ef7e-4ac9-83ad-0a290f85edcf" alt="Hello World template for NuxtHub" />
+</a>
+
+## Features
+
+- Server-Side rendering on Cloudflare Workers
+- ESLint setup
+- Ready to add a database, blob and KV storage
+- One click deploy on 275+ locations for free
+
+## Setup
+
+Make sure to install the dependencies with [pnpm](https://pnpm.io/installation#using-corepack):
+
+```bash
+pnpm install
+```
+
+You can update the main text displayed by creating a `.env`:
+
+```bash
+NUXT_PUBLIC_HELLO_TEXT="Hello my world!"
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+## Deploy
+
+
+Deploy the application on the Edge with [NuxtHub](https://hub.nuxt.com) on your Cloudflare account:
+
+```bash
+npx nuxthub deploy
+```
+
+Then checkout your server logs, analaytics and more in the [NuxtHub Admin](https://admin.hub.nuxt.com).
+
+You can also deploy using [Cloudflare Pages CI](https://hub.nuxt.com/docs/getting-started/deploy#cloudflare-pages-ci).
+

Diff for: app/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'red',
+  },
+})

Diff for: app/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <NuxtRouteAnnouncer />
+  <NuxtLoadingIndicator color="rgb(var(--color-primary-DEFAULT))" />
+  <div class="flex flex-col items-center justify-center h-screen max-w-[600px] w-full lg:w-[600px] mx-auto">
+    <NuxtPage />
+  </div>
+</template>

Diff for: app/components/ColorModeToggle.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  },
+})
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UToggle
+      v-bind="$attrs"
+      v-model="isDark"
+      on-icon="i-heroicons-moon"
+      off-icon="i-heroicons-sun"
+      :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
+    />
+
+    <template #fallback>
+      <UToggle
+        v-bind="$attrs"
+        on-icon="i-heroicons-moon"
+        off-icon="i-heroicons-sun"
+        :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
+        disabled
+      />
+    </template>
+  </ClientOnly>
+</template>

Diff for: app/components/ColorPicker/ColorPicker.vue

@@ -0,0 +1,88 @@
+<!-- Source: https://github.com/nuxt/ui/blob/dev/docs/components/color-picker/ColorPicker.vue  -->
+<script setup lang="ts">
+import colors from '#tailwind-config/theme/colors'
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+// Computed
+
+const primaryColors = computed(() =>
+  appConfig.ui.colors
+    .filter(color => color !== 'primary')
+    .map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })),
+)
+const primary = computed({
+  get() {
+    return primaryColors.value.find(option => option.value === appConfig.ui.primary)
+  },
+  set(option) {
+    appConfig.ui.primary = option.value
+    window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.primary)
+  },
+})
+
+const grayColors = computed(() =>
+  ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({
+    value: color,
+    text: color,
+    hex: colors[color][colorMode.value === 'dark' ? 400 : 500],
+  })),
+)
+const gray = computed({
+  get() {
+    return grayColors.value.find(option => option.value === appConfig.ui.gray)
+  },
+  set(option) {
+    appConfig.ui.gray = option.value
+    window.localStorage.setItem('nuxt-ui-gray', appConfig.ui.gray)
+  },
+})
+</script>
+
+<template>
+  <UPopover mode="hover">
+    <template #default="{ open }">
+      <UButton
+        color="gray"
+        variant="ghost"
+        square
+        :class="[open && 'bg-gray-50 dark:bg-gray-800']"
+        aria-label="Color picker"
+        size="xs"
+      >
+        <UIcon name="i-heroicons-paint-brush-20-solid" class="w-4 h-4 text-primary-500 dark:text-primary-400" />
+      </UButton>
+    </template>
+
+    <template #panel>
+      <div class="p-2">
+        <div class="grid grid-cols-5 gap-px">
+          <ColorPickerPill
+            v-for="color in primaryColors"
+            :key="color.value"
+            :color="color"
+            :selected="primary"
+            @select="primary = color"
+          />
+        </div>
+
+        <hr class="border-gray-200 dark:border-gray-800 my-2">
+
+        <div class="grid grid-cols-5 gap-px">
+          <ColorPickerPill
+            v-for="color in grayColors"
+            :key="color.value"
+            :color="color"
+            :selected="gray"
+            @select="gray = color"
+          />
+        </div>
+
+        <hr class="border-gray-200 dark:border-gray-800 my-2">
+
+        <ColorModeToggle />
+      </div>
+    </template>
+  </UPopover>
+</template>

Diff for: app/components/ColorPicker/ColorPickerPill.vue

@@ -0,0 +1,26 @@
+<!-- Source: https://github.com/nuxt/ui/blob/dev/docs/components/color-picker/ColorPickerPill.vue  -->
+<script setup lang="ts">
+defineProps<{ color: { value: string; hex: string }; selected: { value: string } }>()
+defineEmits(['select'])
+</script>
+
+<template>
+  <UTooltip :text="color.value" class="capitalize" :open-delay="500">
+    <UButton
+      color="white"
+      square
+      :ui="{
+        color: {
+          white: {
+            solid: 'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
+            ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
+          },
+        },
+      }"
+      :variant="color.value === selected.value ? 'solid' : 'ghost'"
+      @click.stop.prevent="$emit('select')"
+    >
+      <span class="inline-block w-3 h-3 rounded-full" :style="{ backgroundColor: color.hex }" />
+    </UButton>
+  </UTooltip>
+</template>

Diff for: app/components/NPMChart.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { eachDayOfInterval, eachWeekOfInterval, eachMonthOfInterval, format } from 'date-fns'
+import { VisXYContainer, VisLine, VisAxis, VisArea, VisCrosshair, VisTooltip } from '@unovis/vue'
+
+const cardRef = ref<HTMLElement | null>(null)
+const { width } = useElementSize(cardRef)
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<Record<string, number>>,
+    required: true
+  },
+  period: {
+    type: String as PropType<Period>,
+    default: 'monthly'
+  }
+})
+
+type Period = 'weekly' | 'monthly'
+
+interface DataRecord {
+  date: Date
+  downloads: number
+}
+
+const x = (_: DataRecord, i: number) => i
+const y = (d: DataRecord) => d.amount
+
+const data = computed(() => {
+  const periodData = {}
+  const periodFormat = props.period === 'monthly' ? 'MM-yyyy' : 'ww-yyyy'
+  for (const date in props.data) {
+    const period = format(date, periodFormat)
+    periodData[period] ||= { amount: 0, date }
+    periodData[period].amount += props.data[date]
+  }
+  return Object.entries(periodData).map(([period, { date, amount }]) => ({ date: formatDate(date), amount }))
+})
+
+const total = computed(() => data.value.reduce((acc: number, { amount }) => acc + amount, 0))
+
+const formatNumber = new Intl.NumberFormat('en', { maximumFractionDigits: 0 }).format
+const formatNumberCompact = new Intl.NumberFormat('en', { maximumFractionDigits: 0, notation: 'compact' }).format
+
+const formatDate = (date: Date): string => {
+  return ({
+    weekly: format(date, 'd MMM'),
+    monthly: format(date, 'MMM yyy')
+  })[props.period]
+}
+
+const xTicks = (i: number) => {
+  if (i === 0 || i === data.value.length - 1 || !data.value[i]) {
+    return ''
+  }
+
+  return formatDate(data.value[i].date)
+}
+const template = (d: DataRecord) => `${formatDate(d.date)}: ${formatNumber(d.amount)}`
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-full lg:w-[600px]" ref="cardRef">
+    <div class="text-sm text-gray-600 dark:text-gray-400">{{ formatNumber(total) }} total npm downloads.</div>
+    <VisXYContainer :data="data" class="h-96" :width="width">
+      <VisLine :x="x" :y="y" color="rgb(var(--color-primary-DEFAULT))" />
+      <VisArea :x="x" :y="y" color="rgb(var(--color-primary-DEFAULT))" :opacity="0.1" />
+
+      <VisAxis type="x" :x="x" :tick-format="xTicks" />
+      <VisAxis type="y" :tick-format="(y) => formatNumberCompact(y)" />
+
+      <VisCrosshair color="rgb(var(--color-primary-DEFAULT))" :template="template" />
+
+      <VisTooltip />
+    </VisXYContainer>
+  </div>
+</template>
+
+<style scoped>
+.unovis-xy-container {
+  --vis-crosshair-line-stroke-color: rgb(var(--color-primary-500));
+  --vis-crosshair-circle-stroke-color: #fff;
+
+  --vis-axis-grid-color: rgb(var(--color-gray-200));
+  --vis-axis-tick-color: rgb(var(--color-gray-200));
+  --vis-axis-tick-label-color: rgb(var(--color-gray-400));
+
+  --vis-tooltip-background-color: #fff;
+  --vis-tooltip-border-color: rgb(var(--color-gray-200));
+  --vis-tooltip-text-color: rgb(var(--color-gray-900));
+}
+
+.dark {
+  .unovis-xy-container {
+    --vis-crosshair-line-stroke-color: rgb(var(--color-primary-400));
+    --vis-crosshair-circle-stroke-color: rgb(var(--color-gray-900));
+
+    --vis-axis-grid-color: rgb(var(--color-gray-800));
+    --vis-axis-tick-color: rgb(var(--color-gray-800));
+    --vis-axis-tick-label-color: rgb(var(--color-gray-500));
+
+    --vis-tooltip-background-color: rgb(var(--color-gray-900));
+    --vis-tooltip-border-color: rgb(var(--color-gray-800));
+    --vis-tooltip-text-color: #fff;
+  }
+}
+</style>