initial commit

.dockerignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.eslintrc.cjs

@@ -0,0 +1,25 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier'
+  ],
+  overrides: [
+    {
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc.json

@@ -0,0 +1 @@
+{}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

Dockerfile.dev

@@ -0,0 +1 @@
+FROM node:lts

Makefile

@@ -0,0 +1,25 @@
+DEV_IMAGE=node:lts
+DEV_CONTAINER_NAME=website-dev
+
+dev-run:
+	docker run \
+		--name "$(DEV_CONTAINER_NAME)" \
+		-d \
+		--entrypoint=tail \
+		-v "$$PWD:/app" \
+		--workdir "/app" \
+		-p 3000:5173 \
+		-u 1000:1000 \
+		"$(DEV_IMAGE)" \
+		-f /dev/null
+
+dev-rm:
+	docker rm \
+	-f \
+	"$(DEV_CONTAINER_NAME)"
+
+dev-exec:
+	docker exec \
+		-it \
+		"$(DEV_CONTAINER_NAME)" \
+		"bash"

README.md

@@ -0,0 +1,23 @@
+# opendolphin-webiste
+
+This is the source of the OpenDolphin Company website at [about.opendolphin.social](https://about.opendolphin.social/)
+
+## Getting started
+
+### Node.JS from the OS
+
+```bash
+yarn install
+yarn run vite
+# Visit http://127.0.0.1:5173 
+```
+
+### With Node.JS in Docker
+
+```bash
+host $ make dev-run
+host $ make dev-exec
+container $ yarn install
+container $ yarn run vite --host
+# Visit http://127.0.0.1:3000 on your host 
+```

cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173'
+  }
+})

cypress/e2e/example.cy.ts

@@ -0,0 +1,8 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('My First Test', () => {
+  it('visits the app root url', () => {
+    cy.visit('/')
+    cy.contains('h1', 'You did it!')
+  })
+})

cypress/e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["./**/*", "../support/**/*"],
+  "compilerOptions": {
+    "isolatedModules": false,
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  }
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+export {}

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenDolphin</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "opendolphin-webiste",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "test:unit": "vitest --environment jsdom --root src/",
+    "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@fontsource/asap": "^4.5.10",
+    "@fontsource/chivo": "^4.5.10",
+    "@fontsource/encode-sans": "^4.5.9",
+    "@fontsource/inter": "^4.5.14",
+    "@fontsource/nunito-sans": "^4.5.10",
+    "marked": "^4.2.3",
+    "pinia": "^2.0.23",
+    "sass": "^1.56.1",
+    "vue": "^3.2.41",
+    "vue-router": "^4.1.5"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/jsdom": "^20.0.0",
+    "@types/node": "^16.11.68",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/test-utils": "^2.1.0",
+    "@vue/tsconfig": "^0.1.3",
+    "cypress": "^10.10.0",
+    "eslint": "^8.22.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-vue": "^9.3.0",
+    "jsdom": "^20.0.1",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
+    "start-server-and-test": "^1.14.0",
+    "typescript": "~4.7.4",
+    "vite": "^3.1.8",
+    "vitest": "^0.24.3",
+    "vue-tsc": "^1.0.8"
+  }
+}

src/App.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+</script>
+
+<template>
+  <header>
+    <div class="logo">
+      <router-link to="/">
+        <img src="https://raw.githubusercontent.com/OpenDolphin/brand/master/logo/logo.svg"/>
+      </router-link>
+    </div>
+    <nav class="menu">
+      <router-link to="/about">About</router-link>
+      <router-link to="/contribute">Contribute</router-link>
+    </nav>
+  </header>
+
+  <div class="content">
+    <RouterView />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$leftRight: 50px;
+
+header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  overflow: hidden;
+  background-color: var(--color-header);
+  backdrop-filter: blur(5px);
+  z-index: 300;
+
+  flex-direction: row;
+  justify-content: space-between;
+
+  height: 80px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 10px;
+  padding-left: $leftRight;
+  padding-right: $leftRight;
+
+  div.logo {
+    cursor: pointer;
+    height: 100%;
+    overflow: hidden;
+    img {
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 100%;
+    column-gap: 50px;
+
+    a {
+      color: var(--color-navbar-item);
+      text-decoration: none;
+      user-select: none;
+      font-weight: 500;
+      font-size: 18px;
+    }
+  }
+}
+
+div.content {
+  color: var(--color-text);
+}
+
+</style>