Revert "Update home page"

ephemeraHQ · Oct 5, 2024 · 6310007 · 6310007
1 parent cb3c9d7
commit 6310007
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 307 deletions.
diff --git a/packages/docs/components/CustomHomePage.tsx b/packages/docs/components/CustomHomePage.tsx
diff --git a/packages/docs/pages/index.mdx b/packages/docs/pages/index.mdx
@@ -1,72 +1,23 @@
+---
+layout: landing
+---
+
 import { HomePage } from "vocs/components";
-import { CustomHomePage } from '../components/CustomHomePage'
 
-<CustomHomePage.Root>
- <CustomHomePage.Headline>
-  Build with MessageKit
- </CustomHomePage.Headline>
+<HomePage.Root>
+ <HomePage.Logo />
+ <HomePage.Tagline>SDK for building messaging mini apps</HomePage.Tagline>
+ <HomePage.InstallPackage name="message-kit" type="init" />
  <HomePage.Description>
- An open SDK for building messaging mini-apps that run in apps built with [XMTP](https://docs.xmtp.org) 
+ Build use cases on top of messaging apps powered by
+ [xmtp](https://docs.xmtp.org)
  </HomePage.Description>
-
-<div style={{ 
- marginTop: '2rem', 
- marginBottom: '2rem', 
- width: '75%', 
- maxWidth: '400px', 
- margin: '2rem auto' 
-}}>
-:::code-group
-
-```bash [bun]
-bun create message-kit
-```
-
-```bash [yarn]
-yarn create message-kit
-```
-
-```bash [npm]
-npm init message-kit
-```
-:::
-</div>
- <CustomHomePage.TileGrid>
- <CustomHomePage.Tile
- href="/installation"
- title="Get started"
- description="Get you started with this step-by-step guide"
- icon="⚡️"
- />
- <CustomHomePage.Tile
- href="/directory"
- title="Examples"
- description="Discover some of the most popular Apps built with MessageKit"
- icon="💬"
- />
- <CustomHomePage.Tile
- href="/deployment"
- title="Deploy"
- description="Deploy your mini-app with this step-by-step guide"
- icon="🤖"
- />
- <CustomHomePage.Tile
- href="/concepts/structure"
- title="Concepts"
- description="Learn about key MessageKit concepts"
- icon="📚"
- />
- <CustomHomePage.Tile
- href="/use-cases/group"
- title="Use cases"
- description="Learn about use cases for MessageKit"
- icon="💡"
- />
- <CustomHomePage.Tile
- href="/frames"
- title="Frames"
- description="Create Open Frames using MessageKit"
- icon="🖼️"
- />
- </CustomHomePage.TileGrid>
-</CustomHomePage.Root>
+ <HomePage.Buttons>
+ <HomePage.Button href="/installation" variant="accent">
+ Get started
+ </HomePage.Button>
+ <HomePage.Button href="https:/ephemeraHQ/message-kit">
+ GitHub
+ </HomePage.Button>
+ </HomePage.Buttons>
+</HomePage.Root>
diff --git a/packages/docs/public/messagekit-logo.png b/packages/docs/public/messagekit-logo.png
diff --git a/packages/docs/styles.css b/packages/docs/styles.css
@@ -1,150 +1,3 @@
 .vocs_Code {
  max-height: 800px;
 }
-
-/* Custom Homepage text styles */
-
-.custom-homepage {
- max-width: 1200px;
- margin: 0 auto;
- padding: 2rem;
-}
-
-.custom-homepage-headline {
- margin-bottom: 1rem;
- text-align: left;
- max-width: 800px;
- margin-left: auto;
- margin-right: auto;
- line-height: 1.2;
-}
-
-.custom-homepage-headline-text {
- font-size: 2.5rem;
- font-weight: bold;
- display: inline-block;
-}
-
-.custom-homepage-headline * {
- line-height: inherit;
- margin: 0;
- padding: 0;
-}
-
-/* For smaller screens */
-@media (max-width: 768px) {
- .custom-homepage-headline-text {
- font-size: 2rem;
- line-height: 1.3;
- }
-}
-
-.custom-homepage-subhead {
- margin-bottom: 1rem;
- text-align: left;
- max-width: 800px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.custom-homepage-subhead-text {
- font-size: 1.25rem;
- line-height: 1.5;
- display: inline-block;
-}
-
-.custom-homepage-subhead * {
- line-height: inherit;
- margin: 0;
- padding: 0;
-}
-
-/* For smaller screens */
-@media (max-width: 768px) {
- .custom-homepage-subhead-text {
- font-size: 1.1rem;
- }
-}
-
-/* Custom Homepage tiles */
-
-.custom-homepage-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 1.5rem;
-}
-
-.custom-homepage-tile {
- position: relative; /* Add this line */
- background-color: var(--vocs-color-bg-soft);
- border: 1px solid var(--vocs-color-border);
- border-radius: 8px;
- padding: 1.5rem;
- text-decoration: none;
- color: var(--vocs-color-text);
- transition: all 0.3s ease;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-}
-
-.custom-homepage-tile:hover {
- transform: translateY(-5px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
- border-color: var(--vocs-color-primary);
-}
-
-.custom-homepage-tile-icon {
- font-size: 1.5rem;
- display: block;
- margin-bottom: 0.75rem;
-}
-
-:root {
- --tile-external-icon-color: rgba(76, 76, 76, 0.7); /* Default color for light mode */
-}
-
-.dark {
- --tile-external-icon-color: rgba(207, 207, 207, 0.7); /* Use the text color in dark mode */
-}
-
-.custom-homepage-tile-external-icon {
- position: absolute;
- top: 0.5rem;
- right: 0.5rem;
- width: 0.75rem;
- height: 0.75rem;
- opacity: 0.7;
- transition: opacity 0.3s ease, filter 0.3s ease;
- filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
- display: block; /* Add this line */
-}
-
-.dark .custom-homepage-tile-external-icon {
- filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
-}
-
-.custom-homepage-tile-title {
- font-size: 1.25rem;
- font-weight: bold;
- margin-bottom: 0.5rem;
-}
-
-.custom-homepage-tile-description {
- font-size: 0.9rem;
- color: var(--vocs-color-text-soft);
- line-height: 1.5; /* Added this line to reduce line height */
- margin: 0; /* Added to remove any default margins */
-}
-
-/* Dark mode adjustments */
-.dark .custom-homepage-tile {
- background-color: rgba(255, 255, 255, 0.01); /* Slightly lighter than the background */
- border-color: rgba(255, 255, 255, 0.1);
- box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05);
-}
-
-.dark .custom-homepage-tile:hover {
- transform: translateY(-5px);
- background-color: rgba(255, 255, 255, 0.01); /* Slightly lighter on hover */
- box-shadow: 0 4px 12px rgba(255, 255, 255, 0.02);
- border-color: var(--vocs-color-primary);
-}
diff --git a/packages/docs/vocs.config.tsx → packages/docs/vocs.config.ts b/packages/docs/vocs.config.tsx → packages/docs/vocs.config.ts
@@ -1,26 +1,13 @@
 import { defineConfig } from "vocs";
 
 export default defineConfig({
- head: () => {
- // console.log(`Generating head content... ${new Date().toISOString()}`)
- return (
- <>
- <script
- src="https://plausible.io/js/script.js"
- data-domain="docs.xmtp.org"
- defer
- />
- </>
- );
- },
  title: "MessageKit",
- iconUrl: "/messagekit-logo.png",
  rootDir: ".",
  theme: {
  colorScheme: "dark",
  accentColor: {
- light: "#FA6977",
- dark: "#FA6977",
+ light: "#F04D23",
+ dark: "#F04D23",
  },
  },
  socials: [