Integrate Keystatic to edit twenty.com content (#10709)

This PR introduces Keystatic to let us edit twenty.com's content with a CMS. For now, we'll focus on creating release notes through Keystatic as it uses quite simple Markdown. Other types of content will need some refactoring to work with Keystatic. https://github.com/user-attachments/assets/e9f85bbf-daff-4b41-bc97-d1baf63758b2 --------- Co-authored-by: Félix Malfait <felix@twenty.com>
2025-03-07 07:59:06 +01:00
parent 6b4d3ed025
commit 2c465bd42e
52 changed files with 3059 additions and 63 deletions
--- a/packages/twenty-website/src/app/(public)/layout.css
+++ b/packages/twenty-website/src/app/(public)/layout.css
@ -0,0 +1,126 @@
+*,
+*::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;
+  font-family: var(--font-gabarito);
+}
+
+@media (max-width: 810px) {
+    body {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    body::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 53px;
+}
+
+.warning {
+  color: rgb(94, 30, 4);
+}
+
+a {
+  color: rgb(129, 129, 129);
+  &:hover {
+    color: #000;
+  }
+}
+
+@media (max-width: 1199px) {
+  nav {
+    display: none;
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+nav.toc {
+  width: 20%;
+  position: fixed;
+  top: 135px;
+  right: 0;
+  font-family: var(--font-gabarito);
+  font-size: 12px;
+}
+
+nav.toc ol {
+  list-style-type: none;
+  margin-top: 0px;
+}
+
+nav.toc li {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.toc-link {
+  padding: 5px;
+  border-radius: 4px;
+}
+
+.toc-link.toc-link-h2 {
+  color: rgb(129, 129, 129);
+  margin-left: -16px;
+}
+
+.toc-link.toc-link-h2:hover,.toc-link.toc-link-h3:hover, .toc-link.toc-link-h4:hover, .toc-link.toc-link-h5:hover {
+  background: #1414140a;
+}
+
+.toc-link.toc-link-h2:active,.toc-link.toc-link-h3:active, .toc-link.toc-link-h4:active, .toc-link.toc-link-h5:active {
+  background: #1414140f;
+}
+
+
+.toc-link.toc-link-h3 {
+  color: rgb(129, 129, 129);
+  margin-left: -40px;
+}
+
+.toc-link.toc-link-h4 {
+  color: rgb(129, 129, 129);
+  margin-left: -64px;
+}
+
+.toc-link.toc-link-h5 {
+  color: rgb(129, 129, 129);
+  margin-left: -88px;
+}
+
+nav.toc a {
+  color: #141414;
+  font-family: var(--font-inter);
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: none;
+  margin-top: 12px;
+}
+
+strong,
+  b {
+    color: #141414;
+    -webkit-font-smoothing: auto;
+    font-family: var(--font-inter);
+    font-weight: 500;
+    text-decoration: none;
+}