Skip to content

Commit 39addf0

Browse files
camielvscamielvs
authored
Website Updates [December 2025] (#21)
1 parent cbdfd5b commit 39addf0

41 files changed

Lines changed: 840 additions & 703 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎constants.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
export const APP_URL = "https://tangleml-tangle.hf.space/#/quick-start";
2-
export const GITHUB_REPO_URL = "https://github.com/tangleml/tangle";
3-
export const GITHUB_ISSUES_URL = `${GITHUB_REPO_URL}/issues`;
1+
export const APP_URL = "https://tangleml-tangle.hf.space";
2+
export const GITHUB_BACKEND_REPO_URL = "https://github.com/tangleml/tangle";
3+
export const GITHUB_FRONTEND_REPO_URL = "https://github.com/tangleml/tangle-ui";
4+
export const GITHUB_ISSUES_URL = `${GITHUB_BACKEND_REPO_URL}/issues`;
5+
export const GITHUB_DISCUSSIONS_URL = `${GITHUB_BACKEND_REPO_URL}/discussions`;
46
export const DEMO_URL = "https://tangleml-tangle.hf.space/#/quick-start";
57
export const DOCS_URL = "/docs";
8+
export const PRIVACY_POLICY = "https://www.shopify.com/ca/legal/privacy";
69

7-
export const SLACK_CHANNEL = "#tangle";
8-
export const SUPPORT_EMAIL = "n/a";
910
export const WEBSITE_URL = "https://tangleml.com/";
11+
12+
export const APP_NAME = "Tangle";

‎docusaurus.config.ts‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { themes as prismThemes } from "prism-react-renderer";
22
import type { Config } from "@docusaurus/types";
33
import type * as Preset from "@docusaurus/preset-classic";
4-
import { DEMO_URL } from "./constants";
4+
import { APP_NAME, APP_URL, DEMO_URL, GITHUB_BACKEND_REPO_URL, PRIVACY_POLICY } from "./constants";
55

66
// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
77

88
const config: Config = {
9-
title: "Tangle",
9+
title: APP_NAME,
1010
tagline:
11-
"Tangle is a web app that allows the users to build and run Machine Learning pipelines using drag and drop without having to set up development environment.",
11+
`${APP_NAME} is a web app that allows the users to build and run Machine Learning pipelines using drag and drop without having to set up development environment.`,
1212
favicon: "img/favicon.ico",
1313

1414
// Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
@@ -53,7 +53,7 @@ const config: Config = {
5353
// type: ["rss", "atom"],
5454
// xslt: true,
5555
// },
56-
// blogSidebarTitle: "Tangle Product Updates",
56+
// blogSidebarTitle: `${APP_NAME} Product Updates`,
5757
// blogSidebarCount: "ALL",
5858
// // Useful options to enforce blogging best practices
5959
// onInlineTags: "warn",
@@ -106,12 +106,12 @@ const config: Config = {
106106
colorMode: {
107107
defaultMode: "dark",
108108
},
109-
image: "img/logo.png",
109+
image: "img/icon.png",
110110
navbar: {
111-
title: "Tangle",
112111
logo: {
113-
alt: "Tangle Logo",
114-
src: "img/logo.png",
112+
alt: `${APP_NAME} Logo`,
113+
src: "img/tangle_black.png",
114+
srcDark: "img/tangle_white.png",
115115
},
116116
items: [
117117
{
@@ -127,17 +127,43 @@ const config: Config = {
127127
footer: {
128128
style: "dark",
129129
links: [
130+
{
131+
title: "Tangle",
132+
items: [
133+
{
134+
label: "Demo",
135+
to: DEMO_URL,
136+
},
137+
{
138+
label: "Explore",
139+
to: APP_URL,
140+
},
141+
{
142+
label: "Build",
143+
to: GITHUB_BACKEND_REPO_URL,
144+
},
145+
],
146+
},
130147
{
131148
title: "Docs",
132149
items: [
133150
{
134-
label: "Tutorial",
151+
label: "Installation",
152+
to: "/docs/install",
153+
},
154+
{
155+
label: "Guides",
135156
to: "/docs",
136157
},
158+
{
159+
label: "Privacy Policy",
160+
to: PRIVACY_POLICY,
161+
},
137162
],
138163
},
139164
],
140-
// copyright: `Copyright © ${new Date().getFullYear()} The Tangle authors.`,
165+
// copyright: "Developed by Shopify",
166+
141167
},
142168
prism: {
143169
theme: prismThemes.github,

‎src/components/CTASection.module.css‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
.ctaSection {
22
padding: 5rem 0;
3-
background: linear-gradient(
4-
135deg,
5-
var(--accent-primary) 0%,
6-
var(--accent-blue) 100%
7-
);
3+
background: var(--accent-primary);
84
color: white;
95
text-align: center;
106
}
@@ -63,6 +59,21 @@
6359
text-decoration: none;
6460
}
6561

62+
.buttonIcon {
63+
width: 1.2rem;
64+
height: 1.2rem;
65+
vertical-align: middle;
66+
margin-right: 0.5rem;
67+
}
68+
69+
.buttonOutline .buttonIcon {
70+
filter: brightness(0) invert(1);
71+
}
72+
73+
.buttonOutline:hover .buttonIcon {
74+
filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(3217%) hue-rotate(239deg) brightness(98%) contrast(94%);
75+
}
76+
6677
.buttonPrimary {
6778
background: var(--bg-white, white);
6879
color: var(--accent-primary, #4a90e2);

‎src/css/custom.css‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
/* Shop Brand Colors */
44
:root {
55
/* Light mode colors */
6-
--shop-brand-primary: #5433eb;
6+
--shop-brand-primary: #9c83f8;
77
--shop-brand-background: #ffffff;
88

99
/* Primary color shades for light mode */
10-
--ifm-color-primary: #5433eb;
11-
--ifm-color-primary-dark: #4227d9;
12-
--ifm-color-primary-darker: #3d24ce;
13-
--ifm-color-primary-darkest: #321da9;
14-
--ifm-color-primary-light: #6645fd;
15-
--ifm-color-primary-lighter: #7151fd;
16-
--ifm-color-primary-lightest: #8e71fe;
10+
--ifm-color-primary: #5B2DF4;
11+
--ifm-color-primary-dark: #4D1FE0;
12+
--ifm-color-primary-darker: #481DD4;
13+
--ifm-color-primary-darkest: #3B17AF;
14+
--ifm-color-primary-light: #7349F6;
15+
--ifm-color-primary-lighter: #8055F7;
16+
--ifm-color-primary-lightest: #9D7BF9;
1717

1818
/* Core colors */
1919
--ifm-background-color: #ffffff;
@@ -28,8 +28,8 @@
2828
/* Footer styling */
2929
--ifm-footer-background-color: #f5f6f7;
3030
--ifm-footer-color: var(--ifm-color-emphasis-700);
31-
--ifm-footer-link-color: var(--ifm-color-emphasis-600);
32-
--ifm-footer-link-hover-color: var(--ifm-color-primary);
31+
--ifm-footer-link-color: var(--ifm-color-primary);
32+
--ifm-footer-link-hover-color: var(--ifm-color-primary-lighter);
3333
--ifm-footer-title-color: var(--ifm-color-emphasis-900);
3434

3535
/* DocSearch theming (if using Algolia DocSearch) */
@@ -48,13 +48,13 @@
4848
--shop-brand-background: #121212;
4949

5050
/* Primary color shades for dark mode */
51-
--ifm-color-primary: #9c83f8;
52-
--ifm-color-primary-dark: #8165f6;
53-
--ifm-color-primary-darker: #7456f5;
54-
--ifm-color-primary-darkest: #5129f2;
55-
--ifm-color-primary-light: #b7a1fa;
56-
--ifm-color-primary-lighter: #c4b0fb;
57-
--ifm-color-primary-lightest: #e0d7fd;
51+
--ifm-color-primary: #5B2DF4;
52+
--ifm-color-primary-dark: #4D1FE0;
53+
--ifm-color-primary-darker: #481DD4;
54+
--ifm-color-primary-darkest: #3B17AF;
55+
--ifm-color-primary-light: #7349F6;
56+
--ifm-color-primary-lighter: #8055F7;
57+
--ifm-color-primary-lightest: #c4b5fd;
5858

5959
/* Core dark mode colors */
6060
--ifm-background-color: #121212;
@@ -416,8 +416,8 @@ html[data-theme="dark"] {
416416

417417
/* Footer link color fix for light mode */
418418
.footer {
419-
--ifm-footer-link-color: var(--ifm-color-emphasis-700);
420-
--ifm-footer-link-hover-color: var(--ifm-color-primary);
419+
--ifm-footer-link-color: var(--shop-brand-primary);
420+
--ifm-footer-link-hover-color: var(--ifm-color-primary-lighter);
421421
}
422422

423423
[data-theme="dark"] .footer {

0 commit comments

Comments
 (0)