Merge pull request #104 from Raspirus/deno_rewrite

Deno rewrite

.github/workflows/deno.yml

@@ -7,7 +7,7 @@ on:
     branches:
       - main
   workflow_dispatch:
-      
+
 jobs:
   deploy:
     runs-on: ubuntu-latest

.gitignore

@@ -1,24 +1,11 @@
-# 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
+# dotenv environment variable files
 .env
-.env.*
-!.env.example
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# Fresh build directory
+_fresh/
+# npm dependencies
+node_modules/

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "denoland.vscode-deno",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "deno.enable": true,
+  "deno.lint": true,
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ]
+}

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

README.md

@@ -1,75 +1,16 @@
-# Raspirus Nuxt3 website
+# Fresh project
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+Your new Fresh project is ready to go. You can follow the Fresh "Getting
+Started" guide here: https://fresh.deno.dev/docs/getting-started
 
-## Setup
+### Usage
 
-Make sure to install the dependencies:
+Make sure to install Deno: https://deno.land/manual/getting_started/installation
 
-```bash
-# npm
-npm install
+Then start the project:
 
-# 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
+deno task start
 ```
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+This will watch the project directory and restart as necessary.

components/AboutCard.tsx

@@ -0,0 +1,46 @@
+import {
+  IconBolt,
+  IconLockOpen,
+  IconShieldCheck,
+  IconUserCode,
+  IconPackage,
+  IconSeeding
+} from "npm:@tabler/icons-preact";
+
+interface AboutCardProps {
+  icon?: string;
+  title?: string;
+  description?: string;
+}
+
+const AboutCard = ({ icon, title, description }: AboutCardProps) => {
+  return (
+    <div class="m-2 p-4 bg-gray-800 rounded-lg">
+      <div class="flex items-center mb-2">
+        {(() => {
+          switch (icon) {
+            case "IconBolt":
+              return <IconBolt class="w-8 h-8 mr-2" />;
+            case "IconLockOpen":
+              return <IconLockOpen class="w-8 h-8 mr-2" />;
+            case "IconShieldCheck":
+              return <IconShieldCheck class="w-8 h-8 mr-2" />;
+            case "IconUserCode":
+                return <IconUserCode class="w-8 h-8 mr-2" />;
+            case "IconPackage":
+                return <IconPackage class="w-8 h-8 mr-2" />;
+            case "IconSeeding":
+                return <IconSeeding class="w-8 h-8 mr-2" />;
+            default:
+              return <IconBolt class="w-8 h-8 mr-2" />;
+          }
+        })()}
+        <span class="text-xl font-bold">{title}</span>
+      </div>
+      <hr class="my-2" />
+      <p class="text-lg">{description}</p>
+    </div>
+  );
+};
+
+export default AboutCard;