Add marketing site and docs to repo

.gitignore

@@ -2,8 +2,6 @@
 .DS_Store
 node_modules/
 *.log
-Iconr
-icon*
 .vscode
 .sass-cache
 logs/

docs/.env.example

@@ -0,0 +1,3 @@
+NUXT_APP_BASE_URL=/open-source/amplitudejs
+TOP_LEVEL_DOMAIN=http://localhost:3000
+BASE_PATH=http://localhost:3000

docs/.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

docs/README.md

@@ -1,50 +1,82 @@
----
-title: Overview - AmplitudeJS Documentation
-meta:
-  - name: description
-    content: Amplitude.js is the HTML5 audio player for the modern era. Using no dependencies, take control of the browser and design a web audio player the way you want it to look.
-  - name: og:locale
-    content: en_US
-  - name: og:type
-    content: website
-  - name: og:title
-    content: Amplitude.js The Open Source HTML5 Audio Player for the Modern Era
-  - name: og:description
-    content: Amplitude.js is the open source HTML5 audio player for the modern era. Using no dependencies, take control of the browser and design an audio player the way you want it to look.
-  - name: og:url
-    content: https://521dimensions.com/open-source/amplitudejs/docs/
-  - name: og:site_name
-    content: Amplitude.js
-  - name: og:image
-    content: https://521dimensions.com/img/open-source/amplitudejs/og-image-amplitudejs.png
-  - name: og:image:width
-    content: 1200
-  - name: og:image:height
-    content: 630
-  - name: twitter:card
-    content: summary_large_image
-  - name: twitter:description
-    content: Amplitude.js is the open source HTML5 audio player for the modern era. Using no dependencies, take control of the browser and design an audio player the way you want it to look. Available for free on Github.
-  - name: twitter:title
-    content: Amplitude.js The HTML Audio Player for the Modern Era
-  - name: twitter:site
-    content: "@521dimensions"
-  - name: twitter:image
-    content: https://521dimensions.com/img/open-source/amplitudejs/og-image-amplitudejs.png
-  - name: creator
-    content: "@521dimensions"
----
-
-# Overview
-<carbon-ads/>
-The concept of Amplitude.js is simple, allow designers to fully control the look
-and feel of their audio player through the web without having to understand
-advanced scripting. In HTML5, the audio tag allows users to add common audio
-formats to their web page. The problem is that the audio playback interface is
-controlled by the browser. Amplitude.js puts you in control of the design by
-simply applying a class and/or attributes to page elements. You can then style these
-elements through CSS and control your audio. Amplitude.js goes above and
-beyond by adding playlist capabilities (next, previous, shuffle), song meta
-data and visualizations. Amplitude.js is now mobile friendly as well. If it
-detects a request coming from a mobile device it will apply a touchstart event
-listener instead of a click to the appropriate elements.
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Prepare environment
+Copy over the `.env.example` file to `.env` and fill in the necessary environment variables.
+
+```bash
+cp .env.example .env
+```
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

docs/assets/animations.css

@@ -0,0 +1,69 @@
+.slide-in-right-enter-active {
+	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.slide-in-right-leave-active {
+	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
+	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
+}
+
+@-webkit-keyframes slide-in-right {
+  0% {
+    -webkit-transform: translateX(1000px);
+            transform: translateX(1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-in-right {
+  0% {
+    -webkit-transform: translateX(1000px);
+            transform: translateX(1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-top-enter-active {
+	-webkit-animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.slide-in-top-leave-active {
+	-webkit-animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
+	        animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
+}
+
+ @-webkit-keyframes slide-in-top {
+  0% {
+    -webkit-transform: translateY(-1000px);
+            transform: translateY(-1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-in-top {
+  0% {
+    -webkit-transform: translateY(-1000px);
+            transform: translateY(-1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}

docs/assets/hamburger.css

@@ -0,0 +1,82 @@
+#nav-icon span {
+    display: block;
+    position: absolute;
+    height: 2px;
+    width: 50%;
+    background: #FFF;
+    opacity: 1;
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    -webkit-transition: .25s ease-in-out;
+    -moz-transition: .25s ease-in-out;
+    -o-transition: .25s ease-in-out;
+    transition: .25s ease-in-out;
+}
+
+#nav-icon span:nth-child(even) {
+    left: 50%;
+    border-radius: 0 9px 9px 0;
+}
+
+#nav-icon span:nth-child(odd) {
+    left:0px;
+    border-radius: 9px 0 0 9px;
+}
+
+#nav-icon span:nth-child(1), #nav-icon span:nth-child(2) {
+    top: 0px;
+}
+
+#nav-icon span:nth-child(3), #nav-icon span:nth-child(4) {
+    top: 6px;
+}
+
+#nav-icon span:nth-child(5), #nav-icon span:nth-child(6) {
+    top: 12px;
+}
+
+#nav-icon.open span:nth-child(1),#nav-icon.open span:nth-child(6) {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+#nav-icon.open span:nth-child(2),#nav-icon.open span:nth-child(5) {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+#nav-icon.open span:nth-child(1) {
+    left: 3px;
+    top: 3px;
+}
+
+#nav-icon.open span:nth-child(2) {
+    left: calc(50%);
+    top: 3px;
+}
+
+#nav-icon.open span:nth-child(3) {
+    left: -50%;
+    opacity: 0;
+}
+
+#nav-icon.open span:nth-child(4) {
+    left: 100%;
+    opacity: 0;
+}
+
+#nav-icon.open span:nth-child(5) {
+    left: 3px;
+    top: 10px;
+}
+
+#nav-icon.open span:nth-child(6) {
+    left: calc(50%);
+    top: 10px;
+}

docs/assets/tailwind.css

@@ -0,0 +1,10 @@
+@import "animations.css";
+@import "hamburger.css";
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+} 

docs/components/Docs/Anchor.vue

@@ -0,0 +1,23 @@
+<template>
+    <NuxtLink :href="href" class="group text-inherit no-underline flex items-center hover:text-inherit">
+        <div v-if="inView">
+            <div class="mt-1 hidden opacity-0 transition group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:theme(spacing.10)]">
+                <div class="group/anchor block h-5 w-5 -ml-7 rounded-lg ring-1 ring-inset transition bg-zinc-800 ring-zinc-700 hover:bg-zinc-700 hover:ring-zinc-600">
+                    <IconsAnchor class="h-5 w-5 transition stroke-zinc-400 group-hover/anchor:stroke-white" />
+                </div>
+            </div>
+        </div>
+        <slot/>
+    </NuxtLink>
+</template>
+<script setup>
+const props = defineProps({
+    href: {
+        default: ''
+    },
+    inView: {
+        default: false
+    }
+});
+
+</script>

docs/components/Docs/Eyebrow.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="flex items-center gap-x-3" v-if="tag != null && label != null">
+        <DocsTag>{{ tag }}</DocsTag>
+        <span class="h-0.5 w-0.5 rounded-full bg-zinc-600"></span>
+        <span class="font-mono text-xs text-zinc-400">{{ label }}</span>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    tag: {
+        default: null
+    },
+    label: {
+        default: null
+    }
+})
+</script>