Merge pull request #25 from permaweb/preact

Preact
permaweb · Oct 19, 2024 · e874923 · e874923
2 parents 88e3994 + ca6d6c6
commit e874923
Show file tree

Hide file tree

Showing 79 changed files with 6,304 additions and 7,568 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,25 @@
+name: publish specs
+
+on:
+  push:
+    branches:
+      - "main"
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: ⎔ Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18.x
+      - name: 📦 Install deps
+        run: npm install
+      - name: 🚀 Deploy
+        run: npm run deploy-main
+        env:
+          DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+package-lock.json
diff --git a/.gitpod.yml b/.gitpod.yml
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
diff --git a/.yarnrc.yml b/.yarnrc.yml
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# specs
+# specs.
 
 Where permaweb standards evolve!
 
@@ -51,6 +51,3 @@ Contributions are welcome, use the issues to create an issue and then a branch t
 If you need help contributing, feel free to connect to our discord server and get help in the #dev channel.
 
 https://discord.gg/kyzkeF2qs8
-
-
-
diff --git a/index.html b/index.html
@@ -1,21 +1,15 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="arweave">
-
-<head>
-  <meta charset="UTF-8" />
-  <!-- <link rel="manifest" href="manifest.json" /> -->
-  <link rel="icon" type="image/svg+xml" href="icon.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>SPECS</title>
-  <meta name="description" content="Specifications on the Permaweb" />
-
-  <link rel="stylesheet" href="easymde.min.css">
-  <script src="easymde.min.js"></script>
-</head>
-
-<body data-theme="arweave">
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-
-</html>
+	<head>
+		<meta charset="utf-8">
+		<title>SPECS</title>
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
+	</head>
+	<body data-theme="arweave">
+    <div id="app"></div>
+    <script type="module" src="/src/index.tsx"></script>
+	</body>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
diff --git a/package.json b/package.json
@@ -1,38 +1,83 @@
 {
-  "name": "specs.g8way.io",
   "private": true,
+  "name": "preact-specs",
   "version": "0.0.0",
+  "license": "MIT",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint src",
+    "test": "jest",
+    "tw:build": "npx tailwindcss -i src/tailwind.css -c tailwind.config.js -o src/index.css",
+    "tw:watch": "npx tailwindcss -i src/tailwind.css -c tailwind.config.js -o src/index.css --watch",
+    "deploy-main": "tw:build && vite build && permaweb-deploy --ant-process 4bKkvG1AvzX6Ks2vjopkZQwvxUT0-jvvgAD3Xa0JDVs"
   },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.0.3",
-    "autoprefixer": "^10.4.14",
-    "daisyui": "^2.51.5",
-    "postcss": "^8.4.21",
-    "svelte": "^3.55.1",
-    "tailwindcss": "^3.2.7",
-    "tinro": "^0.6.12",
-    "vite": "^4.2.0"
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "preact",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "ignorePatterns": [
+      "build/"
+    ]
   },
   "dependencies": {
-    "@permaweb/stampjs": "^0.3.2",
-    "@tailwindcss/typography": "^0.5.9",
-    "arweave": "^1.13.5",
-    "arweave-wallet-connector": "^1.0.1",
-    "convert-yaml": "^2.0.5",
+    "@permaweb/aoconnect": "^0.0.54",
+    "@permaweb/stampjs": "file:/Users/jackfrain/Desktop/stamp/packages/stampjs",
+    "@tailwindcss/typography": "^0.5.15",
+    "arweave-wallet-connector": "^1.0.2",
     "crocks": "^0.12.4",
-    "date-fns": "^2.29.3",
+    "daisyui": "^4.12.10",
+    "date-fns": "^3.6.0",
+    "easymde": "^2.18.0",
     "front-matter": "^4.0.2",
-    "marked": "^4.3.0",
-    "ramda": "^0.28.0",
-    "robot3": "^0.4.0",
-    "svelte-robot-factory": "^2.0.5",
-    "warp-contracts": "^1.4.10",
-    "warp-contracts-plugin-deploy": "^1.0.8",
-    "zod": "^3.21.4"
+    "hyper-async": "^1.1.2",
+    "js-yaml": "^4.1.0",
+    "marked": "^14.1.2",
+    "permaweb-deploy": "^1.1.8",
+    "preact": "^10.10.0",
+    "preact-render-to-string": "^5.2.1",
+    "preact-robot": "^0.3.0",
+    "preact-router": "^3.2.1",
+    "ramda": "^0.30.1",
+    "robot3": "^0.4.1",
+    "warp-contracts": "^1.4.45",
+    "warp-contracts-plugin-deploy": "^1.0.13",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.9.1",
+    "@types/crocks": "^0.12.6",
+    "@types/enzyme": "^3.10.12",
+    "@types/jest": "^27.4.1",
+    "@types/ramda": "^0.30.2",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "autoprefixer": "^10.4.20",
+    "cosmiconfig": "^8.2.0",
+    "cross-env": "^7.0.3",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-preact-pure": "^4.0.1",
+    "eslint": "^8.20.0",
+    "eslint-config-preact": "^1.3.0",
+    "jest": "^27.5.1",
+    "jest-preset-preact": "^4.0.5",
+    "postcss": "^8.4.45",
+    "preact-cli": "^3.4.0",
+    "preact-cli-plugin-env-vars": "^1.2.1",
+    "sirv-cli": "^2.0.2",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^4.5.2",
+    "vite": "^5.4.5"
+  },
+  "jest": {
+    "preset": "jest-preset-preact",
+    "setupFiles": [
+      "<rootDir>/tests/__mocks__/browserMocks.ts",
+      "<rootDir>/tests/__mocks__/setupTests.ts"
+    ]
   }
 }
diff --git a/preact.config.js b/preact.config.js
@@ -0,0 +1,8 @@
+export default (config) => {
+  // Resolve .tsx and .ts extensions
+  config.resolve.extensions.push('.ts', '.tsx')
+  config.node = {
+    process: true,
+  };
+  // Additional configurations can be added here
+}
diff --git a/src/App.svelte b/src/App.svelte
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,61 @@
+import { Route, Router } from 'preact-router';
+import { FunctionalComponent, h } from 'preact';
+import HomePage from './pages/home';
+import ShowPage from './pages/show';
+import Editor from './pages/form';
+import RelatedPage from './pages/related';
+import LearnPage from './pages/learn';
+import { useEffect, useState } from 'preact/hooks';
+import Match from 'preact-router/match';
+
+const FadeInComponent: FunctionalComponent = ({ children }) => {
+  const [fadeClass, setFadeClass] = useState('fade-in');
+
+  useEffect(() => {
+    setFadeClass('fade-in');
+    const timer = setTimeout(() => setFadeClass(''), 700);
+    return () => clearTimeout(timer);
+  }, [children]);
+
+  return <div className={fadeClass}>{children}</div>;
+};
+
+
+const App = () => {
+  const [path, setPath] = useState<string>('/');
+
+  const handleRouteChange = (e: { url: string }) => {
+    setPath(e.url);
+  };
+
+  return (
+    <FadeInComponent key={path}>
+      <Router onChange={handleRouteChange}>
+        <Route path="/" component={HomePage} />
+        <Match path="/view/:tx">
+          {({ matches, url }) => {
+            if (matches) {
+              const tx: string = url.match(/\/view\/([a-zA-Z0-9_-]+)/)?.[1];
+              return <ShowPage tx={tx} />;
+            }
+            return <div className="text-4xl">Not Found</div>;
+          }}
+        </Match>
+        <Match path="/related/:tx">
+          {({ matches, url }) => {
+            if (matches) {
+              const tx: string = url.match(/\/related\/([a-zA-Z0-9_-]+)/)?.[1];
+              return <RelatedPage tx={tx} />;
+            }
+            return <div className="text-4xl">Not Found</div>;
+          }}
+        </Match>
+        <Route path="/learn" component={LearnPage} />
+        <Route path="/create" component={Editor} />
+        <Route path="/remix/:tx" component={Editor} />
+      </Router>
+    </FadeInComponent>
+  );
+};
+
+export default App;
diff --git a/src/app.css b/src/app.css
diff --git a/src/components/announcer.svelte b/src/components/announcer.svelte