This is an automated email from the ASF dual-hosted git repository.
lzljs3620320 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/paimon-website.git
The following commit(s) were added to refs/heads/master by this push:
new 0218ba4db2 feat: add a standalone who's using page (#20)
0218ba4db2 is described below
commit 0218ba4db23f3865d8f2536a5a546f6b8c1b25e5
Author: Laffery <[email protected]>
AuthorDate: Thu May 15 13:14:00 2025 +0800
feat: add a standalone who's using page (#20)
---
README.md | 4 +-
src/app/app.routes.ts | 5 ++
src/app/components/header/header.component.html | 80 ++++++++-------------
src/app/components/header/header.component.ts | 18 +++++
.../components/whosusing/whosusing.component.html | 24 ++++++-
.../components/whosusing/whosusing.component.ts | 52 ++------------
src/app/routers/users/users.component.html | 37 ++++++++++
src/app/routers/users/users.component.ts | 36 ++++++++++
src/app/tokens/users.ts | 67 +++++++++++++++++
src/assets/users/wanglong.png | Bin 12634 -> 8610 bytes
10 files changed, 218 insertions(+), 105 deletions(-)
diff --git a/README.md b/README.md
index 6b427481fc..6721aef977 100644
--- a/README.md
+++ b/README.md
@@ -106,9 +106,9 @@ List of users who are using Apache Paimon are maintained in
the `src/assets/user
### Add a new user
-Firstly You should prepare a new image file with transparent background (png
format best) and which color is in grayscale.
+Firstly, You should prepare a new image file with a transparent background
(png format best).
-Then add the image file `xxx.png` in the `src/assets/users/` directory and add
the `xxx.png` item in the `WhosusingComponent`.
+Then add the image file `xxx.png` in the `src/assets/users/` directory and add
the `xxx.png` item in the `src/app/tokens/users.ts`.
Save the file and preview the page to make sure it looks well.
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 41a07fb0ce..109a122177 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -22,6 +22,7 @@ import { DownloadsComponent, downloadsResolver } from
'@paimon/app/routers/downl
import { HomeComponent } from '@paimon/app/routers/home/home.component';
import { SecurityComponent } from
'@paimon/app/routers/security/security.component';
import { TeamComponent } from '@paimon/app/routers/team/team.component';
+import { UsersComponent } from '@paimon/app/routers/users/users.component';
export const routes: Routes = [
{
@@ -47,6 +48,10 @@ export const routes: Routes = [
downloads: downloadsResolver
}
},
+ {
+ path: 'users',
+ component: UsersComponent
+ },
{
path: 'releases',
loadChildren: () =>
import('@paimon/app/routers/releases/releases.routes').then(m =>
m.releasesRoutes)
diff --git a/src/app/components/header/header.component.html
b/src/app/components/header/header.component.html
index 4e5824ce00..5b16639226 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -18,26 +18,7 @@
<!-- Navigation Menu -->
<div class="hidden h-16 flex-grow items-center justify-center lg:flex">
<div class="flex h-full items-center space-x-2.5">
- <paimon-dropdown-links
- [options]="[
- {
- label: 'master',
- value: 'https://paimon.apache.org/docs/master'
- },
- {
- label: '1.1',
- value: 'https://paimon.apache.org/docs/1.1'
- },
- {
- label: '1.0',
- value: 'https://paimon.apache.org/docs/1.0'
- },
- {
- label: '0.9',
- value: 'https://paimon.apache.org/docs/0.9'
- }
- ]"
- >
+ <paimon-dropdown-links [options]="versions">
<a
class="group/link inline-flex w-full justify-center px-3 py-2
text-sm font-semibold text-gray-300 shadow-sm hover:text-white"
aria-expanded="true"
@@ -85,6 +66,14 @@
BLOG
</a>
<paimon-divider></paimon-divider>
+ <a
+ [routerLink]="['/', 'users']"
+ class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-white"
+ translate
+ >
+ Who's Using
+ </a>
+ <paimon-divider></paimon-divider>
<paimon-community-dropdown></paimon-community-dropdown>
</div>
</div>
@@ -175,38 +164,16 @@
</a>
@if (expandedMenu === 'document') {
<ul class="list-none items-center gap-3 text-sm
font-semibold">
- <li>
- <a
- class="flex h-10 w-full items-center justify-start
px-8 pl-12 no-underline hover:text-paimon-text-hover"
- href="https://paimon.apache.org/docs/master";
- >
- master
- </a>
- </li>
- <li>
- <a
- class="flex h-10 w-full items-center justify-start
px-8 pl-12 no-underline hover:text-paimon-text-hover"
- href="https://paimon.apache.org/docs/1.0";
- >
- 1.0
- </a>
- </li>
- <li>
- <a
- class="flex h-10 w-full items-center justify-start
px-8 pl-12 no-underline hover:text-paimon-text-hover"
- href="https://paimon.apache.org/docs/0.9";
- >
- 0.9
- </a>
- </li>
- <li>
- <a
- class="flex h-10 w-full items-center justify-start
px-8 pl-12 no-underline hover:text-paimon-text-hover"
- href="https://paimon.apache.org/docs/0.8";
- >
- 0.8
- </a>
- </li>
+ @for (version of versions; track version.label) {
+ <li>
+ <a
+ class="flex h-10 w-full items-center justify-start
px-8 pl-12 no-underline hover:text-paimon-text-hover"
+ [attr.href]="version.value"
+ >
+ {{ version.label }}
+ </a>
+ </li>
+ }
</ul>
}
</li>
@@ -241,6 +208,15 @@
BLOG
</a>
</li>
+ <li class="hover:bg-paimon-gray-12">
+ <a
+ [routerLink]="['/', 'users']"
+ class="flex h-10 w-full items-center justify-start px-8
no-underline hover:text-paimon-text-hover"
+ translate
+ >
+ Who's Using
+ </a>
+ </li>
<li class="hover:bg-paimon-gray-12">
<a
(click)="toggleMobileMenus('community')"
diff --git a/src/app/components/header/header.component.ts
b/src/app/components/header/header.component.ts
index def48b3dc3..9c952649ee 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -71,6 +71,24 @@ export class HeaderComponent implements OnInit {
private readonly platformId = inject(PLATFORM_ID);
private _doc = inject(DOCUMENT);
+ readonly versions = [
+ {
+ label: 'master',
+ value: 'https://paimon.apache.org/docs/master'
+ },
+ {
+ label: '1.1',
+ value: 'https://paimon.apache.org/docs/1.1'
+ },
+ {
+ label: '1.0',
+ value: 'https://paimon.apache.org/docs/1.0'
+ },
+ {
+ label: '0.9',
+ value: 'https://paimon.apache.org/docs/0.9'
+ }
+ ];
constructor(
private el: ElementRef,
diff --git a/src/app/routers/home/components/whosusing/whosusing.component.html
b/src/app/routers/home/components/whosusing/whosusing.component.html
index a52fa5a0f3..109392ba9d 100644
--- a/src/app/routers/home/components/whosusing/whosusing.component.html
+++ b/src/app/routers/home/components/whosusing/whosusing.component.html
@@ -25,7 +25,13 @@
class="group-hover:paused flex shrink-0 grow-0 basis-auto
animate-paimon-slide flex-row items-center space-x-4 hover:cursor-pointer"
>
@for (item of listOfUsers; track $index) {
- <img [ngSrc]="item.src" [width]="item.width" [height]="item.height"
[alt]="item.label" />
+ <img
+ [ngSrc]="item.src"
+ [width]="item.width"
+ [height]="item.height"
+ [alt]="item.label"
+ class="grayscale"
+ />
}
</div>
<!-- make the slider seamless looping -->
@@ -33,7 +39,13 @@
class="group-hover:paused flex shrink-0 grow-0 basis-auto
animate-paimon-slide flex-row items-center space-x-3 hover:cursor-pointer"
>
@for (item of listOfUsers; track $index) {
- <img [ngSrc]="item.src" [width]="item.width" [height]="item.height"
[alt]="item.label" />
+ <img
+ [ngSrc]="item.src"
+ [width]="item.width"
+ [height]="item.height"
+ [alt]="item.label"
+ class="grayscale"
+ />
}
</div>
</div>
@@ -45,7 +57,13 @@
>
@for (item of listOfUsers; track $index) {
<div class="flex h-full w-full items-center justify-center">
- <img [ngSrc]="item.src" [width]="item.width" [height]="item.height"
[alt]="item.label" />
+ <img
+ [ngSrc]="item.src"
+ [width]="item.width"
+ [height]="item.height"
+ [alt]="item.label"
+ class="grayscale"
+ />
</div>
}
</div>
diff --git a/src/app/routers/home/components/whosusing/whosusing.component.ts
b/src/app/routers/home/components/whosusing/whosusing.component.ts
index 66685c4336..970e957031 100644
--- a/src/app/routers/home/components/whosusing/whosusing.component.ts
+++ b/src/app/routers/home/components/whosusing/whosusing.component.ts
@@ -17,10 +17,12 @@
* under the License.
*/
import { NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
+import { WHO_IS_USING } from '@paimon/app/tokens/users';
+
@Component({
selector: 'paimon-whosusing',
standalone: true,
@@ -31,51 +33,5 @@ import { TranslateModule } from '@ngx-translate/core';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class WhosusingComponent {
- listOfUsers: Array<{
- label: string;
- src: string;
- width?: number;
- height?: number;
- }> = [
- 'aliyun.png',
- 'bytedance.png',
- 'ximalaya.png',
- 'antgroup.png',
- 'zhongyuanbank.png',
- 'autohome.png',
- 'dustess.png',
- 'babeltime.png',
- 'tongchengtravel.png',
- 'xiaopeng.png',
- 'mihoyo.png',
- 'highlandhuanyu.png',
- 'ziroom.png',
- 'starrocks.png',
- 'kuayueexpress.png',
- 'selectdb.png',
- 'dinky.png',
- 'ververica.png',
- 'amoro.png',
- 'netEase-media.png',
- 'celerdata.png',
- 'aodong.png',
- 'unicom.png',
- 'wanglong.png',
- 'unicom-digital.png',
- 'zhihu.png',
- 'vivo.png',
- 'xgimi.png',
- 'yiou.png',
- 'bilibili.png',
- 'zto.png'
- ].map(img => {
- const largeHeight = ['highlandhuanyu.png', 'ziroom.png',
'dinky.png'].includes(img);
- const mediumHeight = ['aodong.png', 'yiou.png'].includes(img);
- return {
- label: img,
- src: `assets/users/${img}`,
- width: largeHeight ? 64 : mediumHeight ? 128 : 192,
- height: largeHeight ? 72 : mediumHeight ? 96 : 133
- };
- });
+ readonly listOfUsers = inject(WHO_IS_USING);
}
diff --git a/src/app/routers/users/users.component.html
b/src/app/routers/users/users.component.html
new file mode 100644
index 0000000000..d0d2ac366e
--- /dev/null
+++ b/src/app/routers/users/users.component.html
@@ -0,0 +1,37 @@
+<paimon-page-container>
+ <div header>
+ <div class="mt-16 text-6xl font-normal text-paimon-gray-3" translate>Who's
Using</div>
+ <div class="py-4 text-sm font-normal leading-5 text-paimon-gray-8">
+ <span translate>
+ Various companies and organizations are using Paimon for production
and commercial products.
+ </span>
+ <span translate>Are you using this project?</span>
+ <a
+ class="space-x-0 text-paimon-blue-primary hover:underline"
+ href="https://github.com/apache/paimon/issues/915";
+ translate
+ >
+ Add your company
+ </a>
+ </div>
+ </div>
+ <div content>
+ <div class="relative mb-32 mt-14 block px-14 before:w-0 after:w-0">
+ <div
+ class="relative grid grid-cols-2 items-center gap-14 md:grid-cols-4
lg:grid-cols-5 xl:grid-cols-7"
+ >
+ @for (item of listOfUsers; track $index) {
+ <div class="flex h-full w-full items-center justify-center">
+ <img
+ [ngSrc]="item.src"
+ [width]="item.width"
+ [height]="item.height"
+ [alt]="item.label"
+ class="grayscale"
+ />
+ </div>
+ }
+ </div>
+ </div>
+ </div>
+</paimon-page-container>
diff --git a/src/app/routers/users/users.component.ts
b/src/app/routers/users/users.component.ts
new file mode 100644
index 0000000000..fd9648a86f
--- /dev/null
+++ b/src/app/routers/users/users.component.ts
@@ -0,0 +1,36 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { PageContainerComponent } from
'@paimon/app/components/page-container/page-container.component';
+import { WHO_IS_USING } from '@paimon/app/tokens/users';
+
+@Component({
+ selector: 'paimon-users',
+ standalone: true,
+ imports: [PageContainerComponent, TranslateModule, NgOptimizedImage],
+ templateUrl: './users.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class UsersComponent {
+ readonly listOfUsers = inject(WHO_IS_USING);
+}
diff --git a/src/app/tokens/users.ts b/src/app/tokens/users.ts
new file mode 100644
index 0000000000..5bc3fdaf37
--- /dev/null
+++ b/src/app/tokens/users.ts
@@ -0,0 +1,67 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { InjectionToken } from '@angular/core';
+
+export const WHO_IS_USING = new InjectionToken('WHO_IS_USING', {
+ providedIn: 'root',
+ factory: () => {
+ return [
+ 'aliyun.png',
+ 'bytedance.png',
+ 'ximalaya.png',
+ 'antgroup.png',
+ 'zhongyuanbank.png',
+ 'autohome.png',
+ 'dustess.png',
+ 'babeltime.png',
+ 'tongchengtravel.png',
+ 'xiaopeng.png',
+ 'mihoyo.png',
+ 'highlandhuanyu.png',
+ 'ziroom.png',
+ 'starrocks.png',
+ 'kuayueexpress.png',
+ 'selectdb.png',
+ 'dinky.png',
+ 'ververica.png',
+ 'amoro.png',
+ 'netEase-media.png',
+ 'celerdata.png',
+ 'aodong.png',
+ 'unicom.png',
+ 'wanglong.png',
+ 'unicom-digital.png',
+ 'zhihu.png',
+ 'vivo.png',
+ 'xgimi.png',
+ 'yiou.png',
+ 'bilibili.png',
+ 'zto.png'
+ ].map(img => {
+ const largeHeight = ['highlandhuanyu.png', 'ziroom.png',
'dinky.png'].includes(img);
+ const mediumHeight = ['aodong.png', 'yiou.png'].includes(img);
+ return {
+ label: img,
+ src: `assets/users/${img}`,
+ width: largeHeight ? 64 : mediumHeight ? 128 : 192,
+ height: largeHeight ? 72 : mediumHeight ? 96 : 133
+ };
+ });
+ }
+});
diff --git a/src/assets/users/wanglong.png b/src/assets/users/wanglong.png
index dbd0e9f37a..f649ac829c 100644
Binary files a/src/assets/users/wanglong.png and
b/src/assets/users/wanglong.png differ
