Merge pull request #1 from j-Cis/dev

v0.1.0-alpha.1

.github/workflows/deploy.yml

@@ -30,5 +30,5 @@ jobs:
         uses: denoland/deployctl@v1
         with:
           project: "skanoteka-pobieracz"
-          entrypoint: "main.tsx"
-          root: "."
+          entrypoint: "main.ts"
+          root: "./client/"

.vscode/extensions.json

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

.vscode/settings.json

@@ -1,8 +1,70 @@
 {
-	"deno.enable": true,
-	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "denoland.vscode-deno",
-	"[toml]": {
-		"editor.defaultFormatter": "tamasfe.even-better-toml"
-	}
+  "deno.enable": true,
+  "deno.lint": true,
+  "editor.formatOnSave": true,
+  "files.readonlyInclude": {
+      "deno.lock": true,
+      "**/deno.lock": true,
+  },
+  "material-icon-theme.activeIconPack": "react_redux",
+  "material-icon-theme.folders.associations": {
+    "islands": "Animation",
+  },
+  "material-icon-theme.files.associations": {
+    "**/fresh.ts": "Deno",    
+  },
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "[toml]": {
+    "editor.defaultFormatter": "tamasfe.even-better-toml"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
+    "editor.wordWrap": "on"
+  },
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ],
+  "cSpell.words": [
+    "asynciterable",
+    "cpath",
+    "csvg",
+    "datetime",
+    "preact",
+    "Skanoteka",
+    "tailwindcss"
+  ],
+  "workbench.iconTheme": "material-icon-theme",
+  "workbench.productIconTheme": "material-product-icons",
+  "files.associations": {
+    "*.yrf": "json",
+    "*.rpx": "xml",
+    "*.tsx": "typescriptreact",
+    ".env*": "dotenv",
+    "*.stl": "json"
+  },
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "explorer.confirmDragAndDrop": false,
+  "terminal.integrated.defaultProfile.windows": "PowerShell",
+  "search.exclude": {
+    "**/.history": true
+  },
+  "editor.tabSize": 2,
+  "editor.minimap.enabled": true,
+  "editor.fontFamily": "Fira Code",
+  "editor.fontLigatures": true,
+  "editor.fontWeight": "450",
+  "terminal.external.windowsExec": "C:\\Program Files\\PowerShell\\7\\pwsh.exe",
+  "cSpell.language": "en, pl"
 }

.vscode/skanoteka.code-workspace

@@ -0,0 +1,39 @@
+{
+  "folders": [
+    {
+      // KLIENT
+      "name": "CLIENT",
+      "path": "../client/"
+    },
+    {
+      // DOKUMENTACJA
+      "name": "DOCS",
+      "path": "../docs/"
+    },
+    {
+      // USTAWIENIA VSCODE
+      "name": ".VSCODE",
+      "path": "../.vscode/"
+    },
+    {
+      // USTAWIENIA GITHUB
+      "name": ".GITHUB",
+      "path": "../.github/"
+    },
+    {
+      // USTAWIENIA GIT
+      "name": ".GIT",
+      "path": "../.git/"
+    },
+    {
+      // CAŁOŚĆ
+      "name": "_",
+      "path": "../"
+    }
+  ],
+  "settings": {
+    "cSpell.words": [
+      "linkcode"
+    ]
+  }
+}

.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"
+        }
+      ]
+    }
+  ]
+}

client/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "pobieracz",
+    "skanoteka"
+  ]
+}

client/batch/NavApp.ts

@@ -0,0 +1,29 @@
+//NavApp.ts
+
+const NAVIGATION_LINK: NavigationLink[] = [
+  {
+    name: "skanoteka-pobieracz",
+    href: "/docs",
+  },
+  {
+    name: "Pobierz",
+    href: "/wydanie",
+  },
+  {
+    name: "Skanoteka (oficjalna)",
+    href: "https://skanoteka.genealodzy.pl/",
+  },
+  {
+    name: "Skanoteka",
+    href: "/skanoteka",
+  },
+];
+
+interface NavigationLink {
+  name: string;
+  href: string;
+}
+
+
+export { NAVIGATION_LINK };
+export type { NavigationLink };

client/components/AccordionContainer.tsx

@@ -0,0 +1,19 @@
+import { ComponentChildren, h } from "preact";
+
+interface AccordionContainerProps {
+  children: ComponentChildren;
+}
+
+export default function AccordionContainer(props: AccordionContainerProps): h.JSX.Element {
+  return (
+    <div 
+      class={[
+        "rounded-none border border-l-0 border-r-0 border-b-0",
+        "bg-white dark:bg-neutral-800",
+        "border-t-4 border-t-stone-200"
+      ].join(" ")}
+    >
+      {props.children}
+    </div>
+  );
+}

client/components/Blank.tsx

@@ -0,0 +1,25 @@
+//import { ComponentChildren } from "preact";
+
+import { h } from "preact";
+//export interface ButtonProps {
+//onClick?: () => void;
+//children?: ComponentChildren;
+//disabled?: boolean;
+//}
+
+export default function Blank(n: number | string): h.JSX.Element {
+  return (
+    <div>
+      <p>{`${n}0`}</p>
+      <p>{`${n}1`}</p>
+      <p>{`${n}2`}</p>
+      <p>{`${n}3`}</p>
+      <p>{`${n}4`}</p>
+      <p>{`${n}5`}</p>
+      <p>{`${n}6`}</p>
+      <p>{`${n}7`}</p>
+      <p>{`${n}8`}</p>
+      <p>{`${n}9`}</p>
+    </div>
+  );
+}

client/components/Button.tsx

@@ -0,0 +1,16 @@
+import { ComponentChildren } from "preact";
+
+export interface ButtonProps {
+  onClick?: () => void;
+  children?: ComponentChildren;
+  disabled?: boolean;
+}
+
+export function Button(props: ButtonProps) {
+  return (
+    <button
+      {...props}
+      class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
+    />
+  );
+}

client/components/Layout.tsx

@@ -0,0 +1,90 @@
+import { ComponentChildren, h } from "preact";
+/* WHY IS NOT WORKING?
+import { NAVIGATION_LINK } from "$batch/NavApp.ts";
+*/
+import { NAVIGATION_LINK } from "../batch/NavApp.ts";
+function Layout(props: {
+  children: ComponentChildren;
+  navShow: boolean;
+  navActive: string;
+  navClass?: string;
+  navClass_ul?: string;
+  navClass_li?: string;
+  navClass_a?: string;
+  asideShow?: boolean;
+  asideClass_box?: string;
+  asideClass?: string;
+  aside?: h.JSX.Element;
+  footShow?: boolean;
+  foot?: h.JSX.Element;
+}): h.JSX.Element {
+  return (
+    <div
+      class={[
+        "flex flex-1 flex-col flex-nowrap",
+        "w-full h-full",
+        "fresh-gradient",
+      ].join(" ")}
+    >
+      {props.navShow && (
+        <nav
+          class={"flex shadow-xl " + props.navClass ?? ""}
+          f-client-nav={false}
+        >
+          <ul
+            class={[
+              "flex flex-wrap items-center",
+              "gap-x-2 sm:gap-4",
+              "mx-4 lg:mx-8",
+              "my-2 sm:my-6",
+              "2xl:mr-0",
+              props.navClass_ul ?? "",
+            ].join(" ")}
+          >
+            {NAVIGATION_LINK.map((item) => (
+              <li class={" " + props.navClass_li ?? ""}>
+                <a
+                  href={item.href}
+                  class={[
+                    "p-1 sm:p-2 hover:underline text-black font-bold",
+                    "aria-[current]:font-bold aria-[current]:text-rose-800",
+                    props.navClass_a ?? "",
+                  ].join(" ")}
+                >
+                  {item.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )}
+      <div class="flex-1 flex flex-row flex-nowrap overflow-hidden">
+        {props.asideShow && (
+          <div
+            class={"flex shadow-xl py-4 px-2 mr-4 w-72 overflow-hidden " +
+                props.asideClass_box ?? ""}
+          >
+            <nav
+              class={"flex-1 overflow-y-auto pb-8 " +
+                  props.asideClass ?? ""}
+              f-client-nav={false}
+            >
+              {props.aside ?? ""}
+            </nav>
+          </div>
+        )}
+        <div
+          f-client-nav={true}
+          class="flex-1 flex flex-col flex-nowrap pt-4 overflow-hidden"
+        >
+          <div class="flex-1 overflow-auto">
+            {props.children}
+          </div>
+        </div>
+      </div>
+      {props.footShow && (props.foot ?? "")}
+    </div>
+  );
+}
+
+export default Layout;