Add marketing site and docs to repo (#538)

* Remove original docs

* Migrate over webext-bridge site for sample

* Update Open Graph site name from 'Webext Bridge' to 'AmplitudeJS'

* Remove build failure

* Revert "Remove build failure"

This reverts commit 74faf55.

* Fixed icons

* Config ready

* Enhance typography configuration in Tailwind CSS and remove unused Anchor component. Updated typography styles for headings, lists, and code elements. Adjusted content rendering styles in documentation pages for improved layout and readability.

* Updated to proper format

* Update project ownership and URLs to reflect transition from 521 Dimensions to Server Side Up. Modified license, package.json, README, and various documentation links. Added new mobile menu component and improved layout for better responsiveness.

* Ready for QA

* Set Node version

* Update .env.example with new site configuration, including NUXT_SITE_URL, NUXT_SITE_NAME, NUXT_SITE_ENV, and PLAUSIBLE_ENABLED settings for development environment.

* Remove nuxt-headlessui dependency and update @headlessui/vue to version 1.7.23. Clean up app.vue and nuxt.config.ts files by removing unused code.

---------

Co-authored-by: Dan Pastori <dan@521dimensions.com>

Author: jaydrogers

.github/CODE_OF_CONDUCT.md

@@ -34,7 +34,7 @@ This Code of Conduct applies both within project spaces and in public spaces whe
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@521dimensions.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@serversideup.net. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
 

.github/CONTRIBUTING.md

@@ -18,7 +18,7 @@ We also have a few guidelines on getting started and how to contribute:
 3. Run `npm run build` to process a build of your source code
 
 # Submitting a pull request
-We ask that any pull requests be submitted to our `dev` branch, which you can do here: https://github.com/521dimensions/amplitudejs/pull/new/dev
+We ask that any pull requests be submitted to our `dev` branch, which you can do here: https://github.com/serversideup/amplitudejs/pull/new/dev
 
 ## Automated Tests
 AmplitudeJS ships with a full test suite written in Jest: [https://jestjs.io/](https://jestjs.io/) to ensure stable, production ready code. This process is automated by TravisCI on every commit we push. We tried to cover every scenario and even did some UI/UX tests. Like all of AmplitudeJS we welcome any critiques and contributes you may have for the tests.

.gitignore

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

.nvmrc

@@ -0,0 +1 @@
+22

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2021 521 Dimensions
+Copyright (c) 2025 Server Side Up
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,18 +1,16 @@
 <p align="center">
-	<a href="https://521dimensions.com/open-source/amplitudejs" target="_blank">
-		<img src="https://521dimensions.com/img/open-source/amplitudejs/AmplitudeJS-NoSlogan.svg" width="600" alt="AmplitudeJS Logo">
+	<a href="https://serversideup.net/open-source/amplitudejs" target="_blank">
+		<img src="https://serversideup.net/open-source/amplitudejs/images/logos/AmplitudeJS-NoSlogan.svg" width="600" alt="AmplitudeJS Logo">
 	</a>
 </p>
 <p align="center">
-  <a title="Documentation" href="https://521dimensions.com/open-source/amplitudejs/docs/"><strong>Documentation</strong></a>
+  <a title="Documentation" href="https://serversideup.net/open-source/amplitudejs/docs/"><strong>Documentation</strong></a>
   &#x2022;
-  <a title="Examples" href="https://521dimensions.com/open-source/amplitudejs/docs/examples/"><strong>Examples</strong></a>
-  &#x2022;
-  <a title="Tutorials" href="https://serversideup.net/search/?tags=amplitudejs&type=all"><strong>Tutorials</strong></a>
+  <a title="Examples" href="https://serversidieup.net/open-source/amplitudejs/examples/"><strong>Examples</strong></a>
   &#x2022;
   <a title="Support Us" href="https://github.com/sponsors/serversideup"><strong>Support Us</strong></a>
   &#x2022;
-  <a title="Get Professional Help" href="https://serversideup.net/get-help/?quick_question=amplitudejs"><strong>Get Professional Help</strong></a>
+  <a title="Get Professional Help" href="https://schedule.serversideup.net/team/serversideup/quick-chat-with-dan"><strong>Get Professional Help</strong></a>
 </p>
 <p align="center">
 	<a href="https://github.com/serversideup/amplitudejs/actions" target="_blank"><img src="https://github.com/serversideup/amplitudejs/workflows/publish-production/badge.svg" alt="Build Status"></a>
@@ -21,19 +19,19 @@
 	<a href="https://www.npmjs.com/package/amplitudejs" target="_blank"><img src="https://badgen.net/npm/dt/amplitudejs" alt="Downloads"></a>
 	<a href="https://community.serversideup.net/c/get-help/amplitudejs/27" target="_blank"><img src="https://badgen.net/badge/icon/On%20Discourse?label=chat&color=cyan" alt="Chat"></a>
 	<br />
-	<a href="https://david-dm.org/521dimensions/amplitudejs" target="_blank"><img src="https://badgen.net/david/dep/521dimensions/amplitudejs" alt="david-dm"></a>
-	<a href="https://raw.githubusercontent.com/521dimensions/amplitudejs/master/LICENSE" target="_blank"><img src="https://badgen.net/github/license/521dimensions/amplitudejs" alt="License"></a>
+	<a href="https://david-dm.org/serversideup/amplitudejs" target="_blank"><img src="https://badgen.net/david/dep/serversideup/amplitudejs" alt="david-dm"></a>
+	<a href="https://raw.githubusercontent.com/serversideup/amplitudejs/master/LICENSE" target="_blank"><img src="https://badgen.net/github/license/serversideup/amplitudejs" alt="License"></a>
 	<a href="https://github.com/sponsors/serversideup"><img src="https://badgen.net/badge/icon/Support%20Us?label=Github%20Sponsors&color=orange" alt="Support us"></a>
 </p>
 
-AmplitudeJS is a lightweight JavaScript library that allows you to control the design of your media controls in your webpage -- not the browser. No dependencies (jQuery not required). AmplitudeJS is available under the [MIT License](https://raw.githubusercontent.com/521dimensions/amplitudejs/master/LICENSE).
+AmplitudeJS is a lightweight JavaScript library that allows you to control the design of your media controls in your webpage -- not the browser. No dependencies (jQuery not required). AmplitudeJS is available under the [MIT License](https://raw.githubusercontent.com/serversideup/amplitudejs/master/LICENSE).
 
 ## Demo
 <p align="center">
-	<a href="https://521dimensions.com/open-source/amplitudejs" target="_blank">
-		<img src="https://521dimensions.com/img/open-source/amplitudejs/AmplitudeDemo.jpg" alt="MIT License" width="600">
+	<a href="https://serversideup.net/open-source/amplitudejs" target="_blank">
+		<img src="https://serversideup.net/open-source/amplitudejs/images/screenshots/AmplitudeDemo.jpg" alt="MIT License" width="600">
 	</a><br />
-	Click the image above to go to the demo site or <a href="https://521dimensions.com/open-source/amplitudejs" target="_blank">click here</a>.
+	Click the image above to go to the demo site or <a href="https://serversideup.net/open-source/amplitudejs" target="_blank">click here</a>.
 </p>
 
 ## This Software is Community-run
@@ -43,7 +41,7 @@ Open-source software is not sustainable without proper financial support. Mainta
 ## Sponsors
 These people believe in open-source. If you are interested in improving the project, <a href="https://opencollective.com/amplitudejs" target="_blank">become a sponsor</a>.
 ### Platinum Sponsors
-<a href="https://soothingrelaxation.com/" target="_blank"><img width="250" src="https://521dimensions.com/img/open-source/amplitudejs/sponsors/soothing-relaxation.png"></a>
+<a href="https://soothingrelaxation.com/" target="_blank"><img width="250" src="https://serversideup.net/open-source/amplitudejs/images/logos/soothing-relaxation.png"></a>
 
 ### Silver Sponsors
 - [Monarch Air Group](https://monarchairgroup.com/)
@@ -75,20 +73,20 @@ These people believe in open-source. If you are interested in improving the proj
 
 ## Example Players
 
-Looking for some cool examples to get started with? [View all of our example players &rarr;](https://521dimensions.com/open-source/amplitudejs/docs/examples/index.html)
+Looking for some cool examples to get started with? [View all of our example players &rarr;](https://serversideup.net/open-source/amplitudejs/examples)
 
 #### View the source
 All of our example players have the code available on our ["AmplitudeJS Example Players" repository](https://github.com/serversideup/amplitudejs-player-examples). Feel free to submit a PR of your own example if you want! [See the source for our example players &rarr;](https://github.com/serversideup/amplitudejs-player-examples)
 
 ## Installation
-Installation is a breeze and very flexible on how you want to use it. [View the installation instructions &rarr;](https://521dimensions.com/open-source/amplitudejs/docs/installation/)
+Installation is a breeze and very flexible on how you want to use it. [View the installation instructions &rarr;](https://serversideup.net/open-source/amplitudejs/docs/installation/)
 
 
 ## Documentation & Usage
-All of our documentation is located in the `/docs` folder, but we made an even easier and more beautiful way to fully experience AmplitudeJS. [View our documentation site &rarr;](https://521dimensions.com/open-source/amplitudejs/docs)
+All of our documentation is located in the `/docs` folder, but we made an even easier and more beautiful way to fully experience AmplitudeJS. [View our documentation site &rarr;](https://serversideup.net/open-source/amplitudejs/docs)
 
 ## Getting Help
-Feeling stuck? No worries! We have entire community built around helping eachother out. [Get help &rarr;](https://521dimensions.com/open-source/amplitudejs/docs/help-and-support/)
+Feeling stuck? No worries! We have entire community built around helping eachother out. [Get help &rarr;](https://serversideup.net/professional-support/)
 
 ## Roadmap
-We have all of our proposed features organized on our [roadmap](https://github.com/521dimensions/amplitudejs/projects/11). If you are interested in sponsoring a specific feature, just comment on that feature and we will get in touch with you soon!
+We have all of our proposed features organized on our [roadmap](https://github.com/serversideup/amplitudejs/projects/11). If you are interested in sponsoring a specific feature, just comment on that feature and we will get in touch with you soon!

docs/.env.example

@@ -0,0 +1,4 @@
+NUXT_SITE_URL=https://localhost:3000
+NUXT_SITE_NAME="AmplitudeJS | A JavaScript library that allows you to control the design of your media controls in your webpage -- not the browser. No dependencies (jQuery not required) https://serversideup.net/open-source/amplitudejs"
+NUXT_SITE_ENV="development"
+PLAUSIBLE_ENABLED=false

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/app.config.ts

@@ -0,0 +1,74 @@
+export default defineAppConfig({
+    discord: {
+        link: 'https://serversideup.net/discord/'
+    },
+    hireUs: {
+        contact_link: 'mailto:hireus@serversideup.net?subject=Project%20Inquiry',
+        stripe: {
+            starter: 'https://buy.stripe.com/6oEcPmfBs1UjafS001',
+            accelerator: 'https://buy.stripe.com/7sI4iQfBs9mLfAccMO'
+        }
+    },
+    metrics: {
+        repositories: 62,
+        stars: 10,
+        downloads: 7,
+        subscribers: 7000,
+        discord: '1,500+',
+        newsletter: '2,000+'
+    },
+    products: {
+        bugflow: {
+            learn_more: 'https://bugflow.io',
+            start_trial: 'https://app.bugflow.io/register'
+        },
+        spin_pro: {
+            learn_more: 'https://getspin.pro',
+            buy_now: 'https://store.serversideup.net/buy/9cf51bbc-2a86-4ea1-958b-c4d69e05cde6?checkout%5Bdiscount_code%5D=FIRST50'
+        },
+        browser_extensions_book: {
+            learn_more: '/products/building-multi-platform-browser-extensions/',
+            buy_now: 'https://store.serversideup.net/checkout/buy/5ec75643-2fc5-4366-ae67-213a217c4e54?checkout',
+            essentials: {
+                link: 'https://store.serversideup.net/checkout/buy/96e2d787-e797-4e13-9c8d-0aeb7b687844'
+            },
+            complete_package: {
+                link: 'https://store.serversideup.net/checkout/buy/5ec75643-2fc5-4366-ae67-213a217c4e54?checkout'
+            }
+        },
+        api_spa_book: {
+            learn_more: '/products/ultimate-guide-to-building-apis-and-spas-with-laravel-and-nuxt3/',
+            buy_now: 'https://serversideup.lemonsqueezy.com/checkout/buy/10d32965-4348-4502-a8cc-cf4895c4a841?checkout%5Bdiscount_code%5D=LAUNCHCOMPLETE',
+            essentials: {
+                link: 'https://serversideup.lemonsqueezy.com/checkout/buy/69a4e541-e74b-4c40-9cde-15fd9a13c6da?checkout%5Bdiscount_code%5D=LAUNCHESSENTIALS'
+            },
+            complete_package: {
+                link: 'https://serversideup.lemonsqueezy.com/checkout/buy/10d32965-4348-4502-a8cc-cf4895c4a841?checkout%5Bdiscount_code%5D=LAUNCHCOMPLETE'
+            }
+        },
+        docker_php: {
+            learn_more: 'https://serversideup.net/open-source/docker-php/',
+            repo: 'https://github.com/serversideup/docker-php'
+        },
+        spin: {
+            learn_more: 'https://serversideup.net/open-source/spin/',
+            repo: 'https://github.com/serversideup/spin'
+        },
+        financial_freedom: {
+            learn_more: 'https://serversideup.net/open-source/financial-freedom/',
+            repo: 'https://github.com/serversideup/financial-freedom'
+        },
+        amplitudejs: {
+            learn_more: 'https://serversideup.net/open-source/amplitudejs/',
+            repo: 'https://github.com/serversideup/amplitudejs'
+        },
+        webext_bridge: {
+            learn_more: 'https://serversideup.net/open-source/webext-bridge/',
+            repo: 'https://github.com/serversideup/webext-bridge'
+        }
+    },
+    schedule: {
+        dan: 'https://schedule.serversideup.net/team/serversideup/quick-chat-with-dan',
+        jay: 'https://schedule.serversideup.net/team/serversideup/quick-chat-with-jay'
+    }
+});