From 3d5a364e29bf249e7d77e4da519abcb03d845bb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Wed, 27 Dec 2023 16:14:42 +0100 Subject: [PATCH] Marketing website improvements (#3169) * Website improvement * Improve website design * Start writing script for user guide * Begin adding user guide --- .gitignore | 3 +- .../twenty-docs/docs/developer/rest_api.mdx | 3 +- .../docs/user-guide/basics/_category_.json | 4 - .../user-guide/integrations/_category_.json | 4 - .../docs/user-guide/others/_category_.json | 4 - packages/twenty-docs/docusaurus.config.js | 5 - packages/twenty-website/README.md | 21 ++- .../user-guide/all-opportunities-dark.png | Bin .../user-guide/all-opportunities-light.png | Bin .../attach-files-to-records-dark.png | Bin .../attach-files-to-records-light.png | Bin .../compact-opportunities-view-dark.png | Bin .../compact-opportunities-view-light.png | Bin .../images}/user-guide/connect-zapier.png | Bin .../user-guide/create-custom-object.gif | Bin .../user-guide/create-new-note-dark.png | Bin .../user-guide/create-new-note-light.png | Bin .../user-guide/create-new-task-dark.png | Bin .../user-guide/create-new-task-light.png | Bin .../user-guide/display-fields-dark.png | Bin .../user-guide/display-fields-light.png | Bin .../user-guide/filter-opportunities-dark.png | Bin .../user-guide/filter-opportunities-light.png | Bin .../user-guide/manage-custom-object.png | Bin .../user-guide/view-all-objects-dark.png | Bin .../user-guide/view-all-objects-light.png | Bin .../user-guide/view-favorite-records-dark.png | Bin .../view-favorite-records-light.png | Bin .../src/app/api/github/route.ts | 8 - .../src/app/blog/[slug]/page.tsx | 4 - .../src/app/blog/list-posts.tsx | 0 packages/twenty-website/src/app/blog/page.tsx | 6 - .../src/app/components/ContentContainer.tsx | 17 +- .../{FooterNav.tsx => FooterDesktop.tsx} | 17 +- .../{HeaderNav.tsx => HeaderDesktop.tsx} | 18 +- .../src/app/components/HeaderMobile.tsx | 176 ++++++++++++++++++ .../src/app/components/Icons.tsx | 16 +- .../src/app/components/PostImage.tsx | 7 + packages/twenty-website/src/app/layout.css | 26 +++ packages/twenty-website/src/app/layout.tsx | 22 +-- .../twenty-website/src/app/releases/page.tsx | 19 +- .../src/app/user-guide/[...slug]/page.tsx | 11 ++ .../src/app/user-guide/get-posts.tsx | 97 ++++++++++ .../src/app/user-guide/page.tsx | 47 +++++ .../src/content}/user-guide/_category_.json | 0 .../content/user-guide/basics/_category_.json | 4 + .../src/content/user-guide/basics/basics.mdx} | 7 +- .../user-guide/basics/custom-objects.mdx} | 9 +- .../src/content}/user-guide/basics/notes.mdx | 4 +- .../user-guide/basics/opportunities.mdx | 10 +- .../src/content}/user-guide/basics/tasks.mdx | 4 +- .../user-guide/integrations/_category_.json | 4 + .../integrations/connect-zapier.mdx | 2 +- .../integrations/generating-api-keys.mdx | 0 .../content/user-guide/others/_category_.json | 4 + .../content}/user-guide/others/glossary.mdx | 0 .../src/content}/user-guide/others/tips.mdx | 0 57 files changed, 478 insertions(+), 105 deletions(-) delete mode 100644 packages/twenty-docs/docs/user-guide/basics/_category_.json delete mode 100644 packages/twenty-docs/docs/user-guide/integrations/_category_.json delete mode 100644 packages/twenty-docs/docs/user-guide/others/_category_.json rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/all-opportunities-dark.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/all-opportunities-light.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/attach-files-to-records-dark.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/attach-files-to-records-light.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/compact-opportunities-view-dark.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/compact-opportunities-view-light.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/connect-zapier.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/create-custom-object.gif (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/create-new-note-dark.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/create-new-note-light.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/create-new-task-dark.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/create-new-task-light.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/display-fields-dark.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/display-fields-light.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/filter-opportunities-dark.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/filter-opportunities-light.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/manage-custom-object.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/view-all-objects-dark.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/view-all-objects-light.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/view-favorite-records-dark.png (100%) rename packages/{twenty-docs/static/img => twenty-website/public/images}/user-guide/view-favorite-records-light.png (100%) delete mode 100644 packages/twenty-website/src/app/api/github/route.ts delete mode 100644 packages/twenty-website/src/app/blog/[slug]/page.tsx delete mode 100644 packages/twenty-website/src/app/blog/list-posts.tsx delete mode 100644 packages/twenty-website/src/app/blog/page.tsx rename packages/twenty-website/src/app/components/{FooterNav.tsx => FooterDesktop.tsx} (87%) rename packages/twenty-website/src/app/components/{HeaderNav.tsx => HeaderDesktop.tsx} (86%) create mode 100644 packages/twenty-website/src/app/components/HeaderMobile.tsx create mode 100644 packages/twenty-website/src/app/components/PostImage.tsx create mode 100644 packages/twenty-website/src/app/layout.css create mode 100644 packages/twenty-website/src/app/user-guide/[...slug]/page.tsx create mode 100644 packages/twenty-website/src/app/user-guide/get-posts.tsx create mode 100644 packages/twenty-website/src/app/user-guide/page.tsx rename packages/{twenty-docs/docs => twenty-website/src/content}/user-guide/_category_.json (100%) create mode 100644 packages/twenty-website/src/content/user-guide/basics/_category_.json rename packages/{twenty-docs/docs/user-guide/user-guide.mdx => twenty-website/src/content/user-guide/basics/basics.mdx} (84%) rename packages/{twenty-docs/docs/user-guide/basics/custom objects.mdx => twenty-website/src/content/user-guide/basics/custom-objects.mdx} (81%) rename packages/{twenty-docs/docs => twenty-website/src/content}/user-guide/basics/notes.mdx (84%) rename packages/{twenty-docs/docs => twenty-website/src/content}/user-guide/basics/opportunities.mdx (79%) rename packages/{twenty-docs/docs => twenty-website/src/content}/user-guide/basics/tasks.mdx (78%) create mode 100644 packages/twenty-website/src/content/user-guide/integrations/_category_.json rename packages/{twenty-docs/docs => twenty-website/src/content}/user-guide/integrations/connect-zapier.mdx (93%) rename packages/{twenty-docs/docs => twenty-website/src/content}/user-guide/integrations/generating-api-keys.mdx (100%) create mode 100644 packages/twenty-website/src/content/user-guide/others/_category_.json rename packages/{twenty-docs/docs => twenty-website/src/content}/user-guide/others/glossary.mdx (100%) rename packages/{twenty-docs/docs => twenty-website/src/content}/user-guide/others/tips.mdx (100%) diff --git a/.gitignore b/.gitignore index 3d23d7fa40..00c501bfb7 100644 --- a/.gitignore +++ b/.gitignore @@ -15,4 +15,5 @@ !.yarn/plugins !.yarn/releases !.yarn/sdks -!.yarn/versions \ No newline at end of file +!.yarn/versions +.vercel diff --git a/packages/twenty-docs/docs/developer/rest_api.mdx b/packages/twenty-docs/docs/developer/rest_api.mdx index 0a2d064aaf..90674e790b 100644 --- a/packages/twenty-docs/docs/developer/rest_api.mdx +++ b/packages/twenty-docs/docs/developer/rest_api.mdx @@ -6,8 +6,7 @@ sidebar_custom_props: --- To use the REST API, you will need an API key. -Connect to your Twenty account and follow the following -[documentation](user-guide/integrations/generating-api-keys.mdx) to generate one +Connect to your Twenty account ang do to Setting > Developers to generate one. ## Using Postman? diff --git a/packages/twenty-docs/docs/user-guide/basics/_category_.json b/packages/twenty-docs/docs/user-guide/basics/_category_.json deleted file mode 100644 index daec3e16a8..0000000000 --- a/packages/twenty-docs/docs/user-guide/basics/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Basics", - "position": 1 -} diff --git a/packages/twenty-docs/docs/user-guide/integrations/_category_.json b/packages/twenty-docs/docs/user-guide/integrations/_category_.json deleted file mode 100644 index f8777284bd..0000000000 --- a/packages/twenty-docs/docs/user-guide/integrations/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Integrations", - "position": 2 -} diff --git a/packages/twenty-docs/docs/user-guide/others/_category_.json b/packages/twenty-docs/docs/user-guide/others/_category_.json deleted file mode 100644 index 9aa323d853..0000000000 --- a/packages/twenty-docs/docs/user-guide/others/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Others", - "position": 3 -} diff --git a/packages/twenty-docs/docusaurus.config.js b/packages/twenty-docs/docusaurus.config.js index d05b9a3af5..6c0188f671 100644 --- a/packages/twenty-docs/docusaurus.config.js +++ b/packages/twenty-docs/docusaurus.config.js @@ -75,11 +75,6 @@ const config = { type: "search", position: "left", }, - { - to: "/user-guide", - label: "User Guide", - position: "right", - }, { to: "https://github.com/twentyhq/twenty/releases", label: "Releases", diff --git a/packages/twenty-website/README.md b/packages/twenty-website/README.md index 1601a6b33d..08e731e562 100644 --- a/packages/twenty-website/README.md +++ b/packages/twenty-website/README.md @@ -1,16 +1,21 @@ -This is a [Next.js](https://nextjs.org/) project. + +# Twenty-Website +This used for the marketing website (twenty.com). +This is not related in anyway to the main app, which you can find in twenty-front and twenty-server. ## Getting Started -First, run the development server: +We're using Nest.JS +From the root directory: ```bash -yarn dev +nx run twenty-website:dev ``` +Then open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - - +Or to build in prod: +```bash +nx run twenty-website:build +nx run twenty-website:start +``` \ No newline at end of file diff --git a/packages/twenty-docs/static/img/user-guide/all-opportunities-dark.png b/packages/twenty-website/public/images/user-guide/all-opportunities-dark.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/all-opportunities-dark.png rename to packages/twenty-website/public/images/user-guide/all-opportunities-dark.png diff --git a/packages/twenty-docs/static/img/user-guide/all-opportunities-light.png b/packages/twenty-website/public/images/user-guide/all-opportunities-light.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/all-opportunities-light.png rename to packages/twenty-website/public/images/user-guide/all-opportunities-light.png diff --git a/packages/twenty-docs/static/img/user-guide/attach-files-to-records-dark.png b/packages/twenty-website/public/images/user-guide/attach-files-to-records-dark.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/attach-files-to-records-dark.png rename to packages/twenty-website/public/images/user-guide/attach-files-to-records-dark.png diff --git a/packages/twenty-docs/static/img/user-guide/attach-files-to-records-light.png b/packages/twenty-website/public/images/user-guide/attach-files-to-records-light.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/attach-files-to-records-light.png rename to packages/twenty-website/public/images/user-guide/attach-files-to-records-light.png diff --git a/packages/twenty-docs/static/img/user-guide/compact-opportunities-view-dark.png b/packages/twenty-website/public/images/user-guide/compact-opportunities-view-dark.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/compact-opportunities-view-dark.png rename to packages/twenty-website/public/images/user-guide/compact-opportunities-view-dark.png diff --git a/packages/twenty-docs/static/img/user-guide/compact-opportunities-view-light.png b/packages/twenty-website/public/images/user-guide/compact-opportunities-view-light.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/compact-opportunities-view-light.png rename to packages/twenty-website/public/images/user-guide/compact-opportunities-view-light.png diff --git a/packages/twenty-docs/static/img/user-guide/connect-zapier.png b/packages/twenty-website/public/images/user-guide/connect-zapier.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/connect-zapier.png rename to packages/twenty-website/public/images/user-guide/connect-zapier.png diff --git a/packages/twenty-docs/static/img/user-guide/create-custom-object.gif b/packages/twenty-website/public/images/user-guide/create-custom-object.gif similarity index 100% rename from packages/twenty-docs/static/img/user-guide/create-custom-object.gif rename to packages/twenty-website/public/images/user-guide/create-custom-object.gif diff --git a/packages/twenty-docs/static/img/user-guide/create-new-note-dark.png b/packages/twenty-website/public/images/user-guide/create-new-note-dark.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/create-new-note-dark.png rename to packages/twenty-website/public/images/user-guide/create-new-note-dark.png diff --git a/packages/twenty-docs/static/img/user-guide/create-new-note-light.png b/packages/twenty-website/public/images/user-guide/create-new-note-light.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/create-new-note-light.png rename to packages/twenty-website/public/images/user-guide/create-new-note-light.png diff --git a/packages/twenty-docs/static/img/user-guide/create-new-task-dark.png b/packages/twenty-website/public/images/user-guide/create-new-task-dark.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/create-new-task-dark.png rename to packages/twenty-website/public/images/user-guide/create-new-task-dark.png diff --git a/packages/twenty-docs/static/img/user-guide/create-new-task-light.png b/packages/twenty-website/public/images/user-guide/create-new-task-light.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/create-new-task-light.png rename to packages/twenty-website/public/images/user-guide/create-new-task-light.png diff --git a/packages/twenty-docs/static/img/user-guide/display-fields-dark.png b/packages/twenty-website/public/images/user-guide/display-fields-dark.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/display-fields-dark.png rename to packages/twenty-website/public/images/user-guide/display-fields-dark.png diff --git a/packages/twenty-docs/static/img/user-guide/display-fields-light.png b/packages/twenty-website/public/images/user-guide/display-fields-light.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/display-fields-light.png rename to packages/twenty-website/public/images/user-guide/display-fields-light.png diff --git a/packages/twenty-docs/static/img/user-guide/filter-opportunities-dark.png b/packages/twenty-website/public/images/user-guide/filter-opportunities-dark.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/filter-opportunities-dark.png rename to packages/twenty-website/public/images/user-guide/filter-opportunities-dark.png diff --git a/packages/twenty-docs/static/img/user-guide/filter-opportunities-light.png b/packages/twenty-website/public/images/user-guide/filter-opportunities-light.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/filter-opportunities-light.png rename to packages/twenty-website/public/images/user-guide/filter-opportunities-light.png diff --git a/packages/twenty-docs/static/img/user-guide/manage-custom-object.png b/packages/twenty-website/public/images/user-guide/manage-custom-object.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/manage-custom-object.png rename to packages/twenty-website/public/images/user-guide/manage-custom-object.png diff --git a/packages/twenty-docs/static/img/user-guide/view-all-objects-dark.png b/packages/twenty-website/public/images/user-guide/view-all-objects-dark.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/view-all-objects-dark.png rename to packages/twenty-website/public/images/user-guide/view-all-objects-dark.png diff --git a/packages/twenty-docs/static/img/user-guide/view-all-objects-light.png b/packages/twenty-website/public/images/user-guide/view-all-objects-light.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/view-all-objects-light.png rename to packages/twenty-website/public/images/user-guide/view-all-objects-light.png diff --git a/packages/twenty-docs/static/img/user-guide/view-favorite-records-dark.png b/packages/twenty-website/public/images/user-guide/view-favorite-records-dark.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/view-favorite-records-dark.png rename to packages/twenty-website/public/images/user-guide/view-favorite-records-dark.png diff --git a/packages/twenty-docs/static/img/user-guide/view-favorite-records-light.png b/packages/twenty-website/public/images/user-guide/view-favorite-records-light.png similarity index 100% rename from packages/twenty-docs/static/img/user-guide/view-favorite-records-light.png rename to packages/twenty-website/public/images/user-guide/view-favorite-records-light.png diff --git a/packages/twenty-website/src/app/api/github/route.ts b/packages/twenty-website/src/app/api/github/route.ts deleted file mode 100644 index 21778e7399..0000000000 --- a/packages/twenty-website/src/app/api/github/route.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {NextRequest, NextResponse} from "next/server"; - -export async function GET (request: NextRequest){ - const response = await fetch('https://api.github.com/repos/twentyhq/twenty/releases'); - const data = await response.json(); - - return NextResponse.json(data); -} \ No newline at end of file diff --git a/packages/twenty-website/src/app/blog/[slug]/page.tsx b/packages/twenty-website/src/app/blog/[slug]/page.tsx deleted file mode 100644 index 994520518c..0000000000 --- a/packages/twenty-website/src/app/blog/[slug]/page.tsx +++ /dev/null @@ -1,4 +0,0 @@ -export default async function BlogPost({ params }: { params: { slug: string } }) { - const posts = {}; - return <>Blog Post: {params.slug}; -} diff --git a/packages/twenty-website/src/app/blog/list-posts.tsx b/packages/twenty-website/src/app/blog/list-posts.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/twenty-website/src/app/blog/page.tsx b/packages/twenty-website/src/app/blog/page.tsx deleted file mode 100644 index 9b360fed5d..0000000000 --- a/packages/twenty-website/src/app/blog/page.tsx +++ /dev/null @@ -1,6 +0,0 @@ - - -export default async function BlogHome() { - const posts = {}; - return <>Blog Home; -} \ No newline at end of file diff --git a/packages/twenty-website/src/app/components/ContentContainer.tsx b/packages/twenty-website/src/app/components/ContentContainer.tsx index db033a27a1..0e6ba61a26 100644 --- a/packages/twenty-website/src/app/components/ContentContainer.tsx +++ b/packages/twenty-website/src/app/components/ContentContainer.tsx @@ -1,11 +1,18 @@ 'use client' +import styled from '@emotion/styled' + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 600px; + @media(max-width: 809px) { + width: 100%; + }`; + + export const ContentContainer = ({children}: {children?: React.ReactNode}) => { return ( -
{children}
+ {children} ) } \ No newline at end of file diff --git a/packages/twenty-website/src/app/components/FooterNav.tsx b/packages/twenty-website/src/app/components/FooterDesktop.tsx similarity index 87% rename from packages/twenty-website/src/app/components/FooterNav.tsx rename to packages/twenty-website/src/app/components/FooterDesktop.tsx index ff325344ab..800bb73c81 100644 --- a/packages/twenty-website/src/app/components/FooterNav.tsx +++ b/packages/twenty-website/src/app/components/FooterDesktop.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled' import { Logo } from './Logo'; -import { DiscordIcon, GithubIcon, LinkedInIcon, XIcon } from "./Icons"; +import { DiscordIcon, GithubIcon2, LinkedInIcon, XIcon } from "./Icons"; const FooterContainer = styled.div` @@ -11,6 +11,9 @@ const FooterContainer = styled.div` flex-direction: column; color: rgb(129, 129, 129); gap: 32px; + @media(max-width: 809px) { + display: none; + } `; const LeftSideFooter = styled.div` @@ -21,7 +24,9 @@ const LeftSideFooter = styled.div` const RightSideFooter = styled.div` display: flex; - justify-content: space-between;`; + justify-content: space-between; + gap: 48px; + height: 146px;`; const RightSideFooterColumn = styled.div` width: 160px; @@ -46,7 +51,7 @@ const RightSideFooterColumnTitle = styled.div` -export const FooterNav = () => { +export const FooterDesktop = () => { return
@@ -58,8 +63,8 @@ export const FooterNav = () => { Company - Pricing - Story + Pricing + Story Resources @@ -91,7 +96,7 @@ export const FooterNav = () => { - + diff --git a/packages/twenty-website/src/app/components/HeaderNav.tsx b/packages/twenty-website/src/app/components/HeaderDesktop.tsx similarity index 86% rename from packages/twenty-website/src/app/components/HeaderNav.tsx rename to packages/twenty-website/src/app/components/HeaderDesktop.tsx index 43a7cc5f96..c93cec27ea 100644 --- a/packages/twenty-website/src/app/components/HeaderNav.tsx +++ b/packages/twenty-website/src/app/components/HeaderDesktop.tsx @@ -22,14 +22,18 @@ const Nav = styled.nav` overflow: visible; padding: 12px 16px 12px 16px; position: relative; - border-color: rgba(20, 20, 20, 0.08); transform-origin: 50% 50% 0px; - border-bottom: 1px solid var(--Borders-Light, #F1F1F1); + border-bottom: 1px solid rgba(20, 20, 20, 0.08); + + @media(max-width: 809px) { + display: none; + } `; const LinkList = styled.div` display:flex; flex-direction: row; + gap: 2px; `; const ListItem = styled.a` @@ -78,8 +82,7 @@ const StyledButton = styled.div` const CallToActionContainer = styled.div` display: flex; align-items: center; - gap: 16px; - + gap: 8px; a { text-decoration: none; } @@ -89,6 +92,7 @@ const LinkNextToCTA = styled.a` display: flex; align-items: center; color: rgb(71, 71, 71); + padding: 0px 16px 0px 16px; span { text-decoration: underline; }`; @@ -112,7 +116,7 @@ const ExternalArrow = () => { } -export const HeaderNav = () => { +export const HeaderDesktop = () => { const isTwentyDev = false; @@ -124,8 +128,8 @@ export const HeaderNav = () => { Pricing Story - Docs - 5.7k + Docs + 5.7k ; diff --git a/packages/twenty-website/src/app/components/HeaderMobile.tsx b/packages/twenty-website/src/app/components/HeaderMobile.tsx new file mode 100644 index 0000000000..d33e47ca7d --- /dev/null +++ b/packages/twenty-website/src/app/components/HeaderMobile.tsx @@ -0,0 +1,176 @@ +'use client' + +import styled from '@emotion/styled' +import { Logo } from './Logo'; +import { IBM_Plex_Mono } from 'next/font/google'; +import { GithubIcon } from './Icons'; + +const IBMPlexMono = IBM_Plex_Mono({ + weight: '500', + subsets: ['latin'], + display: 'swap', +}); + + + +const Nav = styled.nav` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + overflow: visible; + padding: 0 12px; + position: relative; + transform-origin: 50% 50% 0px; + border-bottom: 1px solid rgba(20, 20, 20, 0.08); + height: 64px; + width: 100%; + @media(min-width: 810px) { + display: none; + } +`; + +const LinkList = styled.div` + display:flex; + flex-direction: column; + `; + +const ListItem = styled.a` + color: rgb(71, 71, 71); + text-decoration: none; + display: flex; + gap: 4px; + align-items: center; + border-radius: 8px; + height: 40px; + padding-left: 16px; + padding-right: 16px; + &:hover { + background-color: #F1F1F1; + } +`; + +const LogoContainer = styled.div` +display: flex; +align-items: center; +gap: 8px; +width:202px;`; + +const LogoAddon = styled.div` + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 150%; + `; + +const StyledButton = styled.div` + display: flex; + height: 40px; + padding-left: 16px; + padding-right: 16px; + align-items: center; + background-color: #000; + color: #fff; + border-radius: 8px; + font-weight: 500; + border: none; + outline: inherit; + cursor: pointer; +`; + +const CallToActionContainer = styled.div` + display: flex; + align-items: center; + gap: 8px; + a { + text-decoration: none; + } + `; + +const LinkNextToCTA = styled.a` + display: flex; + align-items: center; + color: rgb(71, 71, 71); + padding: 0px 16px 0px 16px; + span { + text-decoration: underline; + }`; + +const CallToAction = () => { + return + Sign in + + + Get Started + + + ; +}; + + +const ExternalArrow = () => { + return
+ +
+} + +const HamburgerContainer = styled.div` + height: 44px; + width: 44px; + cursor: pointer; + position: relative; + input { + height: 44px; + width: 44px; + opacity: 0; + }`; + +const HamburgerLine1 = styled.div` + height: 2px; + left: calc(50.00000000000002% - 20px / 2); + position: absolute; + top: calc(37.50000000000002% - 2px / 2); + width: 20px; + border-radius: 10px; + background-color: rgb(179, 179, 179);`; + +const HamburgerLine2 = styled.div` + height: 2px; + left: calc(50.00000000000002% - 20px / 2); + position: absolute; + top: calc(62.50000000000002% - 2px / 2); + width: 20px; + border-radius: 10px; + background-color: rgb(179, 179, 179);`; + +const NavOpen = styled.div` + display:none;`; + + +export const HeaderMobile = () => { + + const isTwentyDev = false; + + return ; +}; + diff --git a/packages/twenty-website/src/app/components/Icons.tsx b/packages/twenty-website/src/app/components/Icons.tsx index 897e9318ca..e3659fe299 100644 --- a/packages/twenty-website/src/app/components/Icons.tsx +++ b/packages/twenty-website/src/app/components/Icons.tsx @@ -1,4 +1,4 @@ -const getSize = size => { +const getSize = (size: string) => { switch(size) { case 'S': return '14px'; @@ -36,6 +36,16 @@ export const DiscordIcon = ({size = 'S', color = 'rgb(179, 179, 179)'}) => { export const XIcon = ({size = 'S', color = 'rgb(179, 179, 179)'}) => { let dimension = getSize(size); return
- + + + +
-} \ No newline at end of file +} + +export const GithubIcon2 = ({size = 'S', color = 'rgb(179, 179, 179)'}) => { + let dimension = getSize(size); + return
+ +
+} \ No newline at end of file diff --git a/packages/twenty-website/src/app/components/PostImage.tsx b/packages/twenty-website/src/app/components/PostImage.tsx new file mode 100644 index 0000000000..58ee96c2eb --- /dev/null +++ b/packages/twenty-website/src/app/components/PostImage.tsx @@ -0,0 +1,7 @@ + + +import Image from 'next/image' + +export const PostImage = ({ sources, style }: { sources: { light: string, dark: string }, style?: React.CSSProperties }) => { + return {sources.light} +} \ No newline at end of file diff --git a/packages/twenty-website/src/app/layout.css b/packages/twenty-website/src/app/layout.css new file mode 100644 index 0000000000..bf40526ed8 --- /dev/null +++ b/packages/twenty-website/src/app/layout.css @@ -0,0 +1,26 @@ +*, *::before, *::after { + box-sizing: border-box; + font-smooth: antialiased; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + box-sizing: border-box; + padding: 0; + margin: 0; + word-wrap: break-word; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; +} + +a { + color: rgb(129, 129, 129); + &:hover { + color: #000; + } +} \ No newline at end of file diff --git a/packages/twenty-website/src/app/layout.tsx b/packages/twenty-website/src/app/layout.tsx index ee02e80d65..31e948aa18 100644 --- a/packages/twenty-website/src/app/layout.tsx +++ b/packages/twenty-website/src/app/layout.tsx @@ -2,19 +2,22 @@ import type { Metadata } from 'next' import { Gabarito } from 'next/font/google' import EmotionRootStyleRegistry from './emotion-root-style-registry' import styled from '@emotion/styled' -import { HeaderNav } from './components/HeaderNav' -import { FooterNav } from './components/FooterNav' +import { HeaderDesktop } from './components/HeaderDesktop' +import { FooterDesktop } from './components/FooterDesktop' +import { HeaderMobile } from '@/app/components/HeaderMobile' +import './layout.css' export const metadata: Metadata = { title: 'Twenty.dev', description: 'Twenty for Developer', - icons: '/favicon.ico', + icons: '/images/core/logo.svg', } const gabarito = Gabarito({ weight: ['400', '500'], subsets: ['latin'], display: 'swap', + adjustFontFallback: false }) @@ -25,17 +28,14 @@ export default function RootLayout({ }) { return ( - + - -
+ +
+ {children}
- + diff --git a/packages/twenty-website/src/app/releases/page.tsx b/packages/twenty-website/src/app/releases/page.tsx index 5965fa1629..bb505518ee 100644 --- a/packages/twenty-website/src/app/releases/page.tsx +++ b/packages/twenty-website/src/app/releases/page.tsx @@ -1,22 +1,25 @@ -import { GetStaticProps } from 'next' -import { MDXRemote } from 'next-mdx-remote/rsc' import { compileMDX } from 'next-mdx-remote/rsc' import gfm from 'remark-gfm'; import { ContentContainer } from '../components/ContentContainer'; -import { visit } from 'unist-util-visit'; import remarkBehead from 'remark-behead'; +import type { Metadata } from 'next' interface Release { id: number; name: string; body: string; - } +} +export const metadata: Metadata= { + title: 'Twenty - Releases', + description: 'Latest releases of Twenty', +} + const Home = async () => { - const res = await fetch(`${process.env.BASE_URL}/api/github`); - const data: Release[] = await res.json(); + const response = await fetch('https://api.github.com/repos/twentyhq/twenty/releases'); + const data: Release[] = await response.json(); const releases = await Promise.all( data.map(async (release) => { @@ -51,11 +54,11 @@ interface Release {

Releases

- {releases.map(release => ( + {releases.map((release, index) => (

{release.name}

{release.body}
diff --git a/packages/twenty-website/src/app/user-guide/[...slug]/page.tsx b/packages/twenty-website/src/app/user-guide/[...slug]/page.tsx new file mode 100644 index 0000000000..46c14e52de --- /dev/null +++ b/packages/twenty-website/src/app/user-guide/[...slug]/page.tsx @@ -0,0 +1,11 @@ +import { getPost } from "@/app/user-guide/get-posts"; + +export default async function BlogPost({ params }: { params: { slug: string[] } }) { + const post = await getPost(params.slug as string[]); + console.log(post); + + return
+

{post?.itemInfo.title}

+
{post?.content}
+
; +} diff --git a/packages/twenty-website/src/app/user-guide/get-posts.tsx b/packages/twenty-website/src/app/user-guide/get-posts.tsx new file mode 100644 index 0000000000..c286c1f1cc --- /dev/null +++ b/packages/twenty-website/src/app/user-guide/get-posts.tsx @@ -0,0 +1,97 @@ +import fs from 'fs'; +import path from 'path'; +import { compileMDX } from 'next-mdx-remote/rsc'; +import { ReactElement } from 'react'; + +interface ItemInfo { + title: string; + position?: number; + path: string; + type: 'file' | 'directory'; +} + +export interface FileContent { + content: ReactElement; + itemInfo: ItemInfo; +} + +export interface Directory { + [key: string]: FileContent | Directory | ItemInfo; + itemInfo: ItemInfo; +} + +const basePath = '/src/content/user-guide'; + + +async function getFiles(filePath: string, position: number = 0): Promise { + const entries = fs.readdirSync(filePath, { withFileTypes: true }); + + const urlpath = path.toString().split(basePath); + const pathName = urlpath.length > 1 ? urlpath[1] : path.basename(filePath); + console.log(pathName); + + const directory: Directory = { + itemInfo: { + title: path.basename(filePath), + position, + type: 'directory', + path: pathName, + }, + }; + + for (const entry of entries) { + if (entry.isDirectory()) { + directory[entry.name] = await getFiles(path.join(filePath, entry.name), position++); + } else if (entry.isFile() && path.extname(entry.name) === '.mdx') { + const fileContent = fs.readFileSync(path.join(filePath, entry.name), 'utf8'); + const { content, frontmatter } = await compileMDX<{ title: string, position?: number }>({ source: fileContent, options: { parseFrontmatter: true } }); + directory[entry.name] = { content, itemInfo: {...frontmatter, type: 'file', path: pathName + "/" + entry.name.replace(/\.mdx$/, '')} }; + } + } + + return directory; +} + +async function parseFrontMatterAndCategory(directory: Directory, dirPath: string): Promise { + const parsedDirectory: Directory = { + itemInfo: directory.itemInfo, + }; + + for (const entry in directory) { + if (entry !== 'itemInfo' && directory[entry] instanceof Object) { + parsedDirectory[entry] = await parseFrontMatterAndCategory(directory[entry] as Directory, path.join(dirPath, entry)); + } + } + + const categoryPath = path.join(dirPath, '_category_.json'); + + if (fs.existsSync(categoryPath)) { + const categoryJson: ItemInfo = JSON.parse(fs.readFileSync(categoryPath, 'utf8')); + parsedDirectory.itemInfo = categoryJson; + } + + return parsedDirectory; +} + +export async function getPosts(): Promise { + const postsDirectory = path.join(process.cwd(), basePath); + const directory = await getFiles(postsDirectory); + return parseFrontMatterAndCategory(directory, postsDirectory); +} + +export async function getPost(slug: string[]): Promise { + const postsDirectory = path.join(process.cwd(), basePath); + const modifiedSlug = slug.join('/'); + const filePath = path.join(postsDirectory, `${modifiedSlug}.mdx`); + + console.log(filePath); + + if (!fs.existsSync(filePath)) { + return null; + } + + const fileContent = fs.readFileSync(filePath, 'utf8'); + const { content, frontmatter } = await compileMDX<{ title: string, position?: number }>({ source: fileContent, options: { parseFrontmatter: true } }); + + return { content, itemInfo: {...frontmatter, type: 'file', path: modifiedSlug }}; +} diff --git a/packages/twenty-website/src/app/user-guide/page.tsx b/packages/twenty-website/src/app/user-guide/page.tsx new file mode 100644 index 0000000000..168767a577 --- /dev/null +++ b/packages/twenty-website/src/app/user-guide/page.tsx @@ -0,0 +1,47 @@ +import { ContentContainer } from '@/app/components/ContentContainer'; +import { getPosts, Directory, FileContent } from '@/app/user-guide/get-posts'; +import Link from 'next/link'; + + +const DirectoryItem = ({ name, item }: { name: string, item: Directory | FileContent }) => { + if ('content' in item) { + // If the item is a file, we render a link. + return ( +
+ + {item.itemInfo.title} + +
+ ); + } else { + // If the item is a directory, we render the title and the items in the directory. + return ( +
+

{item.itemInfo.title}

+ {Object.entries(item).map(([childName, childItem]) => { + if (childName !== 'itemInfo') { + return ; + } + })} +
+ ); + } +}; + + +export default async function BlogHome() { + + const posts = await getPosts(); + + + return +

User Guide

+
+ {Object.entries(posts).map(([name, item]) => { + if (name !== 'itemInfo') { + return ; + } + })} +
+ ; +} \ No newline at end of file diff --git a/packages/twenty-docs/docs/user-guide/_category_.json b/packages/twenty-website/src/content/user-guide/_category_.json similarity index 100% rename from packages/twenty-docs/docs/user-guide/_category_.json rename to packages/twenty-website/src/content/user-guide/_category_.json diff --git a/packages/twenty-website/src/content/user-guide/basics/_category_.json b/packages/twenty-website/src/content/user-guide/basics/_category_.json new file mode 100644 index 0000000000..cd758c340a --- /dev/null +++ b/packages/twenty-website/src/content/user-guide/basics/_category_.json @@ -0,0 +1,4 @@ +{ + "title": "Basics", + "position": 1 +} diff --git a/packages/twenty-docs/docs/user-guide/user-guide.mdx b/packages/twenty-website/src/content/user-guide/basics/basics.mdx similarity index 84% rename from packages/twenty-docs/docs/user-guide/user-guide.mdx rename to packages/twenty-website/src/content/user-guide/basics/basics.mdx index 8fba99db52..6208d2ff61 100644 --- a/packages/twenty-docs/docs/user-guide/user-guide.mdx +++ b/packages/twenty-website/src/content/user-guide/basics/basics.mdx @@ -1,5 +1,5 @@ --- -title: User Guide +title: Get started displayed_sidebar: userSidebar sidebar_class_name: hidden sidebar_position: 0 @@ -8,7 +8,6 @@ sidebar_custom_props: isSidebarRoot: true --- -import ThemedImage from '@theme/ThemedImage'; # Welcome to Twenty's User Guide @@ -46,13 +45,13 @@ There are multiple ways to create notes and tasks. Learn more about [Notes](./ba You can also upload and attach files for each record. To do so, expand a record, and head over to the Files tab. You'll then see the `+ Add file` button. - + ## Add Records To Favorites You can add records to your favorites for quick access. To do so, expand the record you want to add, and click on the heart icon on the top right. You'll now be able to see your favorite records in your sidebar right above your workspace. - + ## Import data diff --git a/packages/twenty-docs/docs/user-guide/basics/custom objects.mdx b/packages/twenty-website/src/content/user-guide/basics/custom-objects.mdx similarity index 81% rename from packages/twenty-docs/docs/user-guide/basics/custom objects.mdx rename to packages/twenty-website/src/content/user-guide/basics/custom-objects.mdx index a8554f89b5..5ace070382 100644 --- a/packages/twenty-docs/docs/user-guide/basics/custom objects.mdx +++ b/packages/twenty-website/src/content/user-guide/basics/custom-objects.mdx @@ -1,11 +1,10 @@ --- -title: Creating Custom Objects +title: Custom Objects sidebar_position: 1 sidebar_custom_props: icon: TbAugmentedReality --- -import ThemedImage from '@theme/ThemedImage'; Objects are structures that allow you to store data (records, attributes, and values) specific to an organization. Twenty provides both standard and custom objects. @@ -22,7 +21,7 @@ To create a new custom object:
- +
@@ -31,7 +30,7 @@ To create a new custom object:
- Create custom object + Create custom object

@@ -39,5 +38,5 @@ To create a new custom object: 4. Once you create your custom object, you'll be able to manage it. You can edit the name, icon and description, view the different fields, and add more fields.
- Create custom object + Create custom object
diff --git a/packages/twenty-docs/docs/user-guide/basics/notes.mdx b/packages/twenty-website/src/content/user-guide/basics/notes.mdx similarity index 84% rename from packages/twenty-docs/docs/user-guide/basics/notes.mdx rename to packages/twenty-website/src/content/user-guide/basics/notes.mdx index 3e71b64f7e..edcafeaf4d 100644 --- a/packages/twenty-docs/docs/user-guide/basics/notes.mdx +++ b/packages/twenty-website/src/content/user-guide/basics/notes.mdx @@ -5,7 +5,7 @@ sidebar_custom_props: icon: TbNote --- -import ThemedImage from '@theme/ThemedImage'; +import PostImage from '@theme/PostImage'; Easily create a note to keep track of important information. @@ -13,7 +13,7 @@ Easily create a note to keep track of important information. To attach a note to the record, go to the Notes tab of a record page and click on `+ New Note`. You can also format, comment, and upload images to your notes. - + ## Format Notes diff --git a/packages/twenty-docs/docs/user-guide/basics/opportunities.mdx b/packages/twenty-website/src/content/user-guide/basics/opportunities.mdx similarity index 79% rename from packages/twenty-docs/docs/user-guide/basics/opportunities.mdx rename to packages/twenty-website/src/content/user-guide/basics/opportunities.mdx index 8949b33bb9..5e05a05671 100644 --- a/packages/twenty-docs/docs/user-guide/basics/opportunities.mdx +++ b/packages/twenty-website/src/content/user-guide/basics/opportunities.mdx @@ -5,11 +5,11 @@ sidebar_custom_props: icon: TbTargetArrow --- -import ThemedImage from '@theme/ThemedImage'; +import PostImage from '@theme/PostImage'; All opportunities are presented in a Kanban board, where each column represents the stage of your workflow and each card represents a record. For each card, you can list the amount, close date, probability, and the point of contact. You can also move each card between stages as it goes through your workflow. - + ## Add and delete stages @@ -26,7 +26,7 @@ It's easy to add filters and update your view to focus on only the most importan - You can also add another filter by following the same steps or clicking on the `+ Add filter` button on top of the columns. - To remove a filter condition, simply click on the X next to the attribute you used to filter the records. - +
@@ -41,10 +41,10 @@ You can configure your kanban board to display some fields and hide others. By d You can also rearrange the order of fields by holding down the field name and dragging it to where you want it. - +
You can also hide all the fields, and get an overview of all the opportunities at a glance. To do so, click on Options on the top right and turn on the toggle in front of the Compact view option. - \ No newline at end of file + \ No newline at end of file diff --git a/packages/twenty-docs/docs/user-guide/basics/tasks.mdx b/packages/twenty-website/src/content/user-guide/basics/tasks.mdx similarity index 78% rename from packages/twenty-docs/docs/user-guide/basics/tasks.mdx rename to packages/twenty-website/src/content/user-guide/basics/tasks.mdx index 786da1e75f..b2211a84ef 100644 --- a/packages/twenty-docs/docs/user-guide/basics/tasks.mdx +++ b/packages/twenty-website/src/content/user-guide/basics/tasks.mdx @@ -5,11 +5,11 @@ sidebar_custom_props: icon: TbChecklist --- -import ThemedImage from '@theme/ThemedImage'; +import PostImage from '../../../components/PostImage' You can find all the tasks from across your workspace in the Tasks window in your sidebar. You can also find a dedicated tab for Tasks on each record so you can add and edit tasks directly from each record. Alternatively, you can click on the `+` button on the top right of each record page and then click on Task to create a new task. - + ## Tasks page diff --git a/packages/twenty-website/src/content/user-guide/integrations/_category_.json b/packages/twenty-website/src/content/user-guide/integrations/_category_.json new file mode 100644 index 0000000000..4309ef82a4 --- /dev/null +++ b/packages/twenty-website/src/content/user-guide/integrations/_category_.json @@ -0,0 +1,4 @@ +{ + "title": "Integrations", + "position": 2 +} diff --git a/packages/twenty-docs/docs/user-guide/integrations/connect-zapier.mdx b/packages/twenty-website/src/content/user-guide/integrations/connect-zapier.mdx similarity index 93% rename from packages/twenty-docs/docs/user-guide/integrations/connect-zapier.mdx rename to packages/twenty-website/src/content/user-guide/integrations/connect-zapier.mdx index bf7e8c1325..801fff10dc 100644 --- a/packages/twenty-docs/docs/user-guide/integrations/connect-zapier.mdx +++ b/packages/twenty-website/src/content/user-guide/integrations/connect-zapier.mdx @@ -21,7 +21,7 @@ Sync Twenty with 3000+ apps using [Zapier](https://zapier.com/), and automate yo 6. Enter your API key and click on 'Yes, Continue to Twenty.'
- Connect Twenty to Zapier + Connect Twenty to Zapier
You can now continue creating your automation! diff --git a/packages/twenty-docs/docs/user-guide/integrations/generating-api-keys.mdx b/packages/twenty-website/src/content/user-guide/integrations/generating-api-keys.mdx similarity index 100% rename from packages/twenty-docs/docs/user-guide/integrations/generating-api-keys.mdx rename to packages/twenty-website/src/content/user-guide/integrations/generating-api-keys.mdx diff --git a/packages/twenty-website/src/content/user-guide/others/_category_.json b/packages/twenty-website/src/content/user-guide/others/_category_.json new file mode 100644 index 0000000000..66620be53c --- /dev/null +++ b/packages/twenty-website/src/content/user-guide/others/_category_.json @@ -0,0 +1,4 @@ +{ + "title": "Others", + "position": 3 +} diff --git a/packages/twenty-docs/docs/user-guide/others/glossary.mdx b/packages/twenty-website/src/content/user-guide/others/glossary.mdx similarity index 100% rename from packages/twenty-docs/docs/user-guide/others/glossary.mdx rename to packages/twenty-website/src/content/user-guide/others/glossary.mdx diff --git a/packages/twenty-docs/docs/user-guide/others/tips.mdx b/packages/twenty-website/src/content/user-guide/others/tips.mdx similarity index 100% rename from packages/twenty-docs/docs/user-guide/others/tips.mdx rename to packages/twenty-website/src/content/user-guide/others/tips.mdx