Skip to content

Commit 6a993f7

Browse files
m-ristom-risto
committed
feat: add overview page and link to official block note
1 parent d4eceed commit 6a993f7

File tree

7 files changed

+131
-21
lines changed

7 files changed

+131
-21
lines changed

‎docs/public/block-note-logo.png

13.7 KB
Loading

‎docs/public/logo.svg

Lines changed: 22 additions & 0 deletions
Loading

‎docs/src/app/app.component.html

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,36 @@
11
<div class="w-full h-full">
2-
<!-- <nav class="flex items-center space-x-4 lg:space-x-6 p-2 border-b">-->
3-
<!-- <a routerLink="overview" hlmBtn variant="link"> Overview </a-->
4-
<!-- ><a routerLink="examples" hlmBtn variant="link"> Examples </a>-->
5-
<!-- </nav>-->
6-
<div class="py-3 px-5">
2+
<div class="p-2 border-b shadow-sm">
3+
<nav class="flex items-center space-x-2 lg:space-x-3 mx-auto max-w-[90rem]">
4+
<a class="flex flex-col items-start" routerLink="overview">
5+
<img class="h-12 object-contain" src="logo.svg" alt="logo" />
6+
</a>
7+
<div class="flex-auto"></div>
8+
<a routerLink="examples" hlmBtn variant="link"> Examples </a>
9+
<a hlmBtn variant="ghost" href="https://github.com/TypeCellOS/BlockNote"
10+
><span class="sr-only">GitHub</span
11+
><svg width="24" height="24" fill="currentColor" viewBox="3 3 18 18">
12+
<title>GitHub</title>
13+
<path
14+
d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"
15+
></path></svg
16+
></a>
17+
<a hlmBtn variant="ghost" href="https://discord.gg/Qc2QTTH5dF"
18+
><span class="sr-only">Discord</span
19+
><svg
20+
width="24"
21+
height="24"
22+
fill="currentColor"
23+
xmlns="http://www.w3.org/2000/svg"
24+
viewBox="0 5 30.67 23.25"
25+
>
26+
<title>Discord</title>
27+
<path
28+
d="M26.0015 6.9529C24.0021 6.03845 21.8787 5.37198 19.6623 5C19.3833 5.48048 19.0733 6.13144 18.8563 6.64292C16.4989 6.30193 14.1585 6.30193 11.8336 6.64292C11.6166 6.13144 11.2911 5.48048 11.0276 5C8.79575 5.37198 6.67235 6.03845 4.6869 6.9529C0.672601 12.8736 -0.41235 18.6548 0.130124 24.3585C2.79599 26.2959 5.36889 27.4739 7.89682 28.2489C8.51679 27.4119 9.07477 26.5129 9.55525 25.5675C8.64079 25.2265 7.77283 24.808 6.93587 24.312C7.15286 24.1571 7.36986 23.9866 7.57135 23.8161C12.6241 26.1255 18.0969 26.1255 23.0876 23.8161C23.3046 23.9866 23.5061 24.1571 23.7231 24.312C22.8861 24.808 22.0182 25.2265 21.1037 25.5675C21.5842 26.5129 22.1422 27.4119 22.7621 28.2489C25.2885 27.4739 27.8769 26.2959 30.5288 24.3585C31.1952 17.7559 29.4733 12.0212 26.0015 6.9529ZM10.2527 20.8402C8.73376 20.8402 7.49382 19.4608 7.49382 17.7714C7.49382 16.082 8.70276 14.7025 10.2527 14.7025C11.7871 14.7025 13.0425 16.082 13.0115 17.7714C13.0115 19.4608 11.7871 20.8402 10.2527 20.8402ZM20.4373 20.8402C18.9183 20.8402 17.6768 19.4608 17.6768 17.7714C17.6768 16.082 18.8873 14.7025 20.4373 14.7025C21.9717 14.7025 23.2271 16.082 23.1961 17.7714C23.1961 19.4608 21.9872 20.8402 20.4373 20.8402Z"
29+
></path></svg
30+
></a>
31+
</nav>
32+
</div>
33+
<div class="">
734
<router-outlet></router-outlet>
835
</div>
936
</div>

‎docs/src/app/app.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import { NgOptimizedImage } from '@angular/common';
12
import { Component } from '@angular/core';
23
import { RouterModule } from '@angular/router';
34
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
45

56
@Component({
67
standalone: true,
7-
imports: [RouterModule, HlmButtonDirective],
8+
imports: [RouterModule, HlmButtonDirective, NgOptimizedImage],
89
selector: 'app-root',
910
templateUrl: './app.component.html',
1011
styleUrl: './app.component.css',

‎docs/src/pages/examples/examples.page.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,11 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
1212
RouterLink,
1313
RouterLinkActive,
1414
],
15+
host: {
16+
class: 'block py-3 mx-auto max-w-[90rem]',
17+
},
1518
template: `<div
16-
class="w-full mx-auto px-4 sm:px-8 flex flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)] md:gap-6 lg:gap-10"
19+
class="flex flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)] md:gap-6 lg:gap-10"
1720
>
1821
<aside class="flex flex-col p-3">
1922
Basic
@@ -51,9 +54,7 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
5154
>Converting Blocks to HTML</a
5255
>
5356
</aside>
54-
<main
55-
class="sticky top-0 overflow-hidden py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[minmax(0,1fr)_280px]"
56-
>
57+
<main class="overflow-hidden py-6">
5758
<router-outlet class="hidden"></router-outlet>
5859
</main>
5960
</div>`,

‎docs/src/pages/overview.page.ts

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,67 @@
11
import { Component } from '@angular/core';
2+
import { RouterLink } from '@angular/router';
3+
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
4+
import { HlmCardDirective } from '@spartan-ng/ui-card-helm';
5+
import { hlmH2, hlmLead } from '@spartan-ng/ui-typography-helm';
6+
import { BasicSetupExample } from './examples/basic/basic-setup/basic-setup.example';
27

38
@Component({
49
standalone: true,
5-
imports: [],
6-
template: `Overview Test`,
10+
imports: [
11+
RouterLink,
12+
HlmButtonDirective,
13+
HlmCardDirective,
14+
BasicSetupExample,
15+
],
16+
template: `<section
17+
class="relative flex h-fit w-full justify-center overflow-hidden pb-36 pt-24 xl:pt-36"
18+
>
19+
<div
20+
class="z-20 flex w-full flex-col items-center justify-between gap-6 px-6 md:max-w-screen-md xl:max-w-[1440px] xl:flex-row"
21+
>
22+
<div
23+
class="relative flex h-fit flex-col items-center justify-center gap-6 text-center xl:w-[584px] xl:items-start xl:text-left"
24+
>
25+
<div
26+
class="hero-glow text-glow absolute block h-full w-full sm:hidden"
27+
></div>
28+
<h1 class=" leading-none text-6xl font-medium md:text-7xl z-10">
29+
Unofficial<br /><strong>Block Note</strong><br />Angular Wrapper
30+
</h1>
31+
<p class="font-space-grotesk text-lg leading-snug md:text-xl z-10">
32+
A beautiful text editor that just works in <strong>angular</strong>.
33+
Easily add an editor to your app that users will love. Customize it
34+
with your own functionality like custom blocks or AI tooling.
35+
</p>
36+
<a hlmBtn variant="default" routerLink="/examples">Get Started</a>
37+
</div>
38+
<div
39+
class="relative h-[36rem] w-full shrink-0 grow-0 rounded-lg sm:block xl:w-[584px]"
40+
>
41+
<div
42+
class="absolute h-full w-full -inset-0,5 bg-gradient-to-r from-purple-600 to-sky-400 rouned-lg blur opacity-75"
43+
></div>
44+
<div hlmCard class="relative z-20 h-full w-full rounded-lg">
45+
<bna-basic-setup-example></bna-basic-setup-example>
46+
</div>
47+
</div>
48+
</div>
49+
</section>
50+
<section
51+
class="relative flex h-fit w-full justify-center overflow-hidden pb-36 pt-24 xl:pt-36 border-b border-t shadow-sm"
52+
>
53+
<div class="flex flex-col justify-center items-center">
54+
<h2 class="${hlmH2}">Disclaimer</h2>
55+
<p class="${hlmLead} text-center xl:w-[584px] mb-5">
56+
This is not an official Angular wrapper for Block Note. This wrapper
57+
was created on our own because we needed a solution for Angular. For
58+
this reason, we would like to offer it here in case other developers
59+
also need a corresponding solution for Angular.
60+
</p>
61+
<a hlmBtn variant="default" href="https://www.blocknotejs.org/"
62+
>Go to Block Note</a
63+
>
64+
</div>
65+
</section>`,
766
})
867
export class OverviewPage {}

‎libs/ui/ui-typography-helm/src/lib/hlm-h2.directive.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import { Directive, computed, input } from '@angular/core';
1+
import { computed, Directive, input } from '@angular/core';
22
import { hlm } from '@spartan-ng/ui-core';
33
import type { ClassValue } from 'clsx';
44

55
export const hlmH2 =
6-
'scroll-m-20 border-border border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0';
6+
'scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0';
77

88
@Directive({
9-
selector: '[hlmH2]',
10-
standalone: true,
11-
host: {
12-
'[class]': '_computedClass()',
13-
},
9+
selector: '[hlmH2]',
10+
standalone: true,
11+
host: {
12+
'[class]': '_computedClass()',
13+
},
1414
})
1515
export class HlmH2Directive {
16-
public readonly userClass = input<ClassValue>('', { alias: 'class' });
17-
protected _computedClass = computed(() => hlm(hlmH2, this.userClass()));
16+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
17+
protected _computedClass = computed(() => hlm(hlmH2, this.userClass()));
1818
}

0 commit comments

Comments
 (0)