add tiles element

packages/element-tiles/README.md

@@ -0,0 +1,9 @@
+# @hyperbook/element-tiles
+
+## Installation
+
+```sh
+yarn add @hyperbook/element-tiles
+# or
+npm i @hyperbook/element-tiles
+```

packages/element-tiles/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@hyperbook/element-tiles",
+  "version": "0.0.0",
+  "author": "Mike Barkmin",
+  "homepage": "https://github.com/openpatch/hyperbook#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.js",
+    "./index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openpatch/hyperbook.git",
+    "directory": "packages/element-tiles"
+  },
+  "bugs": {
+    "url": "https://github.com/openpatch/hyperbook/issues"
+  },
+  "scripts": {
+    "version": "pnpm build",
+    "lint": "tsc --noEmit",
+    "build": "rimraf dist && pnpm build:pkg && pnpm build:types",
+    "build:pkg": "node ../../scripts/build.mjs",
+    "build:types": "tsc --project tsconfig.build.json --declaration --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "@hyperbook/provider": "workspace:*",
+    "@hyperbook/store": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "18.x",
+    "react-dom": "18.x",
+    "react-redux": "8.x"
+  },
+  "devDependencies": {
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "vitest": "^0.26.3"
+  }
+}

packages/element-tiles/src/index.css

@@ -0,0 +1,91 @@
+.hyperbook .tiles {
+  display: grid;
+  column-gap: 0.75rem;
+  row-gap: 0.75rem;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  list-style-type: none;
+}
+
+.element-tiles .tile.S {
+  grid-column-start: span 2;
+}
+
+.element-tiles .tile.M {
+  grid-column-start: span 3;
+}
+
+.element-tiles .tile.L {
+  grid-column-start: span 4;
+}
+
+@media screen and (max-width: 900px) {
+  .hyperbook .tiles {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+
+  .element-tiles .tile.S {
+    grid-column-start: span 4;
+  }
+
+  .element-tiles .tile.M {
+    grid-column-start: span 6;
+  }
+
+  .element-tiles .tile.L {
+    grid-column-start: span 8;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .hyperbook .tiles {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .element-tiles .tile.S {
+    grid-column-start: span 1;
+  }
+
+  .element-tiles .tile.M {
+    grid-column-start: span 1;
+  }
+
+  .element-tiles .tile.L {
+    grid-column-start: span 1;
+  }
+}
+
+.element-tiles .tile {
+  line-height: 1.2em;
+  min-height: 6rem;
+  background: var(--color-nav);
+  transition: all 300ms;
+  padding: 8px;
+  position: relative;
+  border-radius: 8px;
+}
+
+.element-tiles .tile.link:hover {
+  background: var(--color-brand);
+  color: var(--color-brand-text);
+}
+
+.element-tiles .tile.link:hover a {
+  color: var(--color-brand-text);
+  height: 100%;
+  display: block;
+}
+
+.element-tiles .tile.link a {
+  text-decoration: none;
+}
+
+.element-tiles .tile-icon {
+  position: absolute;
+  width: 3rem;
+  bottom: 0.5rem;
+  right: 0.5rem;
+}

packages/element-tiles/src/index.tsx

@@ -0,0 +1,54 @@
+import { FC, Fragment, ReactNode } from "react";
+import { createSlice } from "@hyperbook/store";
+import "./index.css";
+
+type DirectiveTilesProps = {
+  children?: ReactNode;
+};
+
+const DirectiveTiles: FC<DirectiveTilesProps> = ({ children }) => {
+  return (
+    <div className="hyperbook element-tiles">
+      <ul className="tiles">{children}</ul>
+    </div>
+  );
+};
+
+type DirectiveTileProps = {
+  size?: "S" | "M" | "L";
+  title?: string;
+  description?: string;
+  href?: string;
+  icon?: string;
+};
+
+const DirectiveTile: FC<DirectiveTileProps> = ({
+  size = "M",
+  title,
+  href,
+  icon,
+}) => {
+  return (
+    <li className={`tile ${size} ${href ? "link" : ""}`}>
+      <a className="tile-title" href={href}>
+        {title}
+      </a>
+      {icon && <img className="tile-icon" src={icon} />}
+    </li>
+  );
+};
+
+type ElementTilesState = {};
+
+const initialState: ElementTilesState = {};
+
+const sliceTiles = createSlice({
+  name: "element.tiles",
+  initialState,
+  reducers: {},
+});
+
+export default {
+  directives: { tiles: DirectiveTiles, tile: DirectiveTile },
+  slice: sliceTiles,
+};

packages/element-tiles/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src", "../../types"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist"
+  }
+}

packages/element-tiles/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src", "../../types", "tests"]
+}

packages/element-tiles/vite.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({});

platforms/vscode/app/App.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Provider, ProviderProps } from "@hyperbook/provider";
 import elementTab from "@hyperbook/element-tabs";
+import elementTiles from "@hyperbook/element-tiles";
 import elementAudio from "@hyperbook/element-audio";
 import elementAlert from "@hyperbook/element-alert";
 import elementBitflow from "@hyperbook/element-bitflow";
@@ -152,6 +153,7 @@ export const App = () => {
           elementMermaid,
           elementScratchblock,
           elementExcalidraw,
+          elementTiles,
         ]}
         loadFile={() => async (path) => {
           return fetch(path).then((res) => res.text());

platforms/vscode/app/index.scss

@@ -5,6 +5,7 @@
 @import "@hyperbook/element-excalidraw/index.css";
 @import "@hyperbook/element-scratchblock/index.css";
 @import "@hyperbook/element-tabs/index.css";
+@import "@hyperbook/element-tiles/index.css";
 @import "@hyperbook/element-audio/index.css";
 @import "@hyperbook/element-alert/index.css";
 @import "@hyperbook/element-term/index.css";

platforms/vscode/package.json

@@ -199,6 +199,7 @@
     "@hyperbook/element-struktog": "workspace:*",
     "@hyperbook/element-tabs": "workspace:*",
     "@hyperbook/element-term": "workspace:*",
+    "@hyperbook/element-tiles": "workspace:*",
     "@hyperbook/element-youtube": "workspace:*",
     "@hyperbook/fs": "workspace:*",
     "@hyperbook/markdown": "workspace:*",

platforms/vscode/snipptes/hyperbook.code-snippets

@@ -90,6 +90,18 @@
       ":::"
     ]
   },
+  "Element Tiles": {
+    "prefix": [":tiles"],
+    "body": [
+      ":::tiles",
+      "",
+      "::tile{title=\"${1:Tab 1}\" href=\"$RANDOM\"}",
+      "",
+      "$0",
+      "",
+      ":::"
+    ]
+  },
   "Element YouTube": {
     "prefix": [":youtube"],
     "body": ["::youtube[${1:title}]{#$CLIPBOARD}", "$0"]

platforms/web/package.json

@@ -28,6 +28,7 @@
     "@hyperbook/element-struktog": "workspace:*",
     "@hyperbook/element-tabs": "workspace:*",
     "@hyperbook/element-term": "workspace:*",
+    "@hyperbook/element-tiles": "workspace:*",
     "@hyperbook/element-youtube": "workspace:*",
     "@hyperbook/fs": "workspace:*",
     "@hyperbook/markdown": "workspace:*",

platforms/web/src/pages/_app.tsx

@@ -43,6 +43,8 @@ import elementBitflow from "@hyperbook/element-bitflow";
 import "@hyperbook/element-bitflow/index.css";
 import elementScratchblock from "@hyperbook/element-scratchblock";
 import "@hyperbook/element-scratchblock/index.css";
+import elementTiles from "@hyperbook/element-tiles";
+import "@hyperbook/element-tiles/index.css";
 import Link from "next/link";
 import Head from "next/head";
 import { Styles } from "@hyperbook/styles";
@@ -111,6 +113,7 @@ export default function MyApp({ Component, pageProps }) {
         elementExcalidraw,
         elementScratchblock,
         elementBitflow,
+        elementTiles,
       ]}
       router={router}
       storage={typeof window !== "undefined" ? localStorage : noopStorage}

website/de/book/elements/tiles.md

@@ -0,0 +1,39 @@
+---
+name: Kacheln
+lang: de
+---
+
+# Kacheln
+
+Kacheln sind eine schöne visuelle Möglichkeit für Startseiten oder
+Übersichtsseiten, welche deinen Benutzern helfen sollen sich zurechtzufinden.
+
+```md
+:::tiles
+
+::tile{title="Hallo"}
+
+::tile{title="Eine Kachel mit einem Link" href="openpatch.org"}
+
+::tile{title="Eine große Kachel" size="L"}
+
+::tile{title="Eine kleine Kachel" size="S"}
+
+::tile{title="Eine Kachel mit einem Icon" icon="https://www.inf-schule.de/assets/img/icons/icon_algorithmen.png"}
+
+:::
+```
+
+:::tiles
+
+::tile{title="Hallo"}
+
+::tile{title="Eine Kachel mit einem Link" href="openpatch.org"}
+
+::tile{title="Eine große Kachel" size="L"}
+
+::tile{title="Eine kleine Kachel" size="S"}
+
+::tile{title="Eine Kachel mit einem Icon" icon="https://www.inf-schule.de/assets/img/icons/icon_algorithmen.png"}
+
+:::