From 9fb7e0a819d78d889186ba6ade8ea0d554ec1a69 Mon Sep 17 00:00:00 2001 From: Wiley Conte Date: Thu, 19 Dec 2024 15:07:15 -0500 Subject: [PATCH] Docs scaffolding ands tart --- components/CodeBlock/CodeBlock.module.scss | 2 +- components/CodeBlock/CodeBlock.tsx | 59 +-- components/EmbedCodeBlock/EmbedCodeBlock.tsx | 59 ++- .../[dashboardSlug]/conversations/index.tsx | 6 +- pages/docs/DocsLayout/DocsLayout.module.scss | 400 ++++++++++++++++++ pages/docs/DocsLayout/DocsLayout.tsx | 160 +++++++ pages/docs/api/auth.tsx | 50 +++ pages/docs/api/introduction.tsx | 63 +++ pages/docs/api/quick-start.tsx | 100 +++++ pages/docs/content/overview.tsx | 42 ++ pages/docs/conversations/configuration.tsx | 57 +++ pages/docs/conversations/distribution.tsx | 77 ++++ pages/docs/conversations/moderation.tsx | 49 +++ pages/docs/conversations/monitoring.tsx | 40 ++ pages/docs/conversations/overview.tsx | 78 ++++ pages/docs/conversations/quickstart.tsx | 87 ++++ pages/docs/index.tsx | 58 +++ pages/docs/navigationConfig.ts | 126 ++++++ 18 files changed, 1474 insertions(+), 39 deletions(-) create mode 100644 pages/docs/DocsLayout/DocsLayout.module.scss create mode 100644 pages/docs/DocsLayout/DocsLayout.tsx create mode 100644 pages/docs/api/auth.tsx create mode 100644 pages/docs/api/introduction.tsx create mode 100644 pages/docs/api/quick-start.tsx create mode 100644 pages/docs/content/overview.tsx create mode 100644 pages/docs/conversations/configuration.tsx create mode 100644 pages/docs/conversations/distribution.tsx create mode 100644 pages/docs/conversations/moderation.tsx create mode 100644 pages/docs/conversations/monitoring.tsx create mode 100644 pages/docs/conversations/overview.tsx create mode 100644 pages/docs/conversations/quickstart.tsx create mode 100644 pages/docs/index.tsx create mode 100644 pages/docs/navigationConfig.ts diff --git a/components/CodeBlock/CodeBlock.module.scss b/components/CodeBlock/CodeBlock.module.scss index 6a4771a6..c3daca92 100644 --- a/components/CodeBlock/CodeBlock.module.scss +++ b/components/CodeBlock/CodeBlock.module.scss @@ -33,7 +33,7 @@ font-size: 0.9em; letter-spacing: -0.05em; word-break: normal; - padding: 0 !important; + padding: 0.25rem !important; margin: 0 !important; } } diff --git a/components/CodeBlock/CodeBlock.tsx b/components/CodeBlock/CodeBlock.tsx index 517a9705..7d33237d 100644 --- a/components/CodeBlock/CodeBlock.tsx +++ b/components/CodeBlock/CodeBlock.tsx @@ -4,19 +4,17 @@ import { toast } from "react-toastify"; import hljs from "highlight.js"; import { useEffect } from "react"; -function CodeBlock({ - language, - setLanguage, - snippets, -}: { - language: "html" | "react" | "nextjs"; - setLanguage: (language: "html" | "react" | "nextjs") => void; - snippets: { html: string; react: string; nextjs: string }; -}) { - const text = snippets[language]; +// Get all supported languages from highlight.js +type HljsLanguage = ReturnType[number]; +interface CodeBlockProps { + code: string; + language: HljsLanguage; +} + +function CodeBlock({ code, language }: CodeBlockProps) { const handleCopy = () => { - void navigator.clipboard.writeText(text); + void navigator.clipboard.writeText(code); toast("Copied to clipboard", { position: "bottom-right", type: "success", @@ -26,34 +24,23 @@ function CodeBlock({ useEffect(() => { hljs.highlightAll(); - }, [language]); + }, [code, language]); return ( - <> -
-
- - - -
- 
-          {text}
-
+
+
+ {language} +
- + 
+        {code}
+
+
); } diff --git a/components/EmbedCodeBlock/EmbedCodeBlock.tsx b/components/EmbedCodeBlock/EmbedCodeBlock.tsx index 99499c3c..49bea90d 100644 --- a/components/EmbedCodeBlock/EmbedCodeBlock.tsx +++ b/components/EmbedCodeBlock/EmbedCodeBlock.tsx @@ -1,6 +1,63 @@ import { Box } from "components/Box/Box"; -import { CodeBlock } from "components/CodeBlock/CodeBlock"; import { useState } from "react"; +import { Button } from "components/Button/Button"; +import styles from "../CodeBlock/CodeBlock.module.scss"; +import { toast } from "react-toastify"; +import hljs from "highlight.js"; +import { useEffect } from "react"; + +function CodeBlock({ + language, + setLanguage, + snippets, +}: { + language: "html" | "react" | "nextjs"; + setLanguage: (language: "html" | "react" | "nextjs") => void; + snippets: { html: string; react: string; nextjs: string }; +}) { + const text = snippets[language]; + + const handleCopy = () => { + void navigator.clipboard.writeText(text); + toast("Copied to clipboard", { + position: "bottom-right", + type: "success", + autoClose: 2000, + }); + }; + + useEffect(() => { + hljs.highlightAll(); + }, [language]); + + return ( + <> +
+
+ + + +
+ 
+          {text}
+
+
+ + ); +} export function EmbedCodeBlock({ id }: { id: string }) { const [language, setLanguage] = useState<"html" | "react" | "nextjs">("html"); diff --git a/pages/dashboard/[dashboardSlug]/conversations/index.tsx b/pages/dashboard/[dashboardSlug]/conversations/index.tsx index f15c7853..b227b10f 100644 --- a/pages/dashboard/[dashboardSlug]/conversations/index.tsx +++ b/pages/dashboard/[dashboardSlug]/conversations/index.tsx @@ -24,6 +24,7 @@ import { useForm } from "react-hook-form"; import { useQueryClient } from "@tanstack/react-query"; import { DashboardTopNav } from ".."; import { ContentTypeNav } from "components/EmbedIndex/EmbedIndex"; +import Link from "next/link"; export const getServerSideProps: GetServerSideProps = async (ctx) => { const { locale } = ctx; @@ -115,7 +116,10 @@ export default function ConversationsIndexPage() {
-

Conversations

+
+

Conversations

+ Info +
+
+ + Docs +
+
+ + {/*
+
+
+ +
+
+
*/} + +
+ {!user && } + {user && ( +
+ +
+ +
+ +
+ )} +
+
+ + + + +
+ + +
+
{children}
+
+
+ + ); +}; + +export default DocsLayout; diff --git a/pages/docs/api/auth.tsx b/pages/docs/api/auth.tsx new file mode 100644 index 00000000..d10e9d60 --- /dev/null +++ b/pages/docs/api/auth.tsx @@ -0,0 +1,50 @@ +import { Divider } from "components"; + +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "../DocsLayout/DocsLayout"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsApiAuth() { + return ( +
+

API Reference

+ +

Authentication

+

+ The Populist public API requires an `authorization` header to be set + with your request using your API key like so: + 

+          "authorization": "Bearer YOUR_API_KEY"
+
+

+

+ If you do not have an API key, you can request one by contacting us at{" "} + info@populist.us. +

+
+ ); +} + +DocsApiAuth.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/api/introduction.tsx b/pages/docs/api/introduction.tsx new file mode 100644 index 00000000..fe8bb352 --- /dev/null +++ b/pages/docs/api/introduction.tsx @@ -0,0 +1,63 @@ +import { Divider } from "components"; +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "../DocsLayout/DocsLayout"; +import { CodeBlock } from "components/CodeBlock/CodeBlock"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsApiIntroduction() { + return ( +
+

API Reference

+ +

Introducing: The Populist public API

+

+ The Populist public API provides access to the Populist platform's + features and data. You can use the API to consume data about elections, + politicians, bills and more. +

+

GraphQL

+

+ The Populist public API is built on GraphQL, a query language for your + API. You can use GraphQL to query the Populist platform for the specific + data you need. +

+

A query to the Populist API could looks something like this:

+ +
+ ); +} + +DocsApiIntroduction.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/api/quick-start.tsx b/pages/docs/api/quick-start.tsx new file mode 100644 index 00000000..e58df7b7 --- /dev/null +++ b/pages/docs/api/quick-start.tsx @@ -0,0 +1,100 @@ +import { Divider } from "components"; + +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "../DocsLayout/DocsLayout"; +import { CodeBlock } from "components/CodeBlock/CodeBlock"; +import styles from "../DocsLayout/DocsLayout.module.scss"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsGuidesQuickStart() { + return ( +
+

API Reference

+ +

Quickstart

+

+ Making a request to the Populist API is easy! To get started quickly, + copy this snippet into your terminal and run it: +

+ +

+ You should get output that looks something like this: + 

+          {`{
+  "data": {
+    "elections": [
+      {
+        "title": "Colorado Primaries",
+        "description": "Primary races for the general election later this year on November 8, 2022.",
+        "electionDate": "2022-06-28"
+      },
+      {
+        "title": "General Election",
+        "description": "During this midterm election year, all 435 seats in the U.S. House of Representatives and 35 of the 100 seats in the U.S. Senate will be contested. This will be the first election affected by the redistricting following the 2020 census.",
+        "electionDate": "2022-11-08"
+      },
+      {
+        "title": "Municipal General Election",
+        "description": "",
+        "electionDate": "2023-04-04"
+      },
+      {
+        "title": "General Runoff Election",
+        "description": "Michael Johnston defeated Kelly Brough in the general runoff election for Mayor of Denver on June 6, 2023.",
+        "electionDate": "2023-06-06"
+      },
+      {
+        "title": "Primary & Special Elections",
+        "description": null,
+        "electionDate": "2023-08-08"
+      },
+      {
+        "title": "General Election",
+        "description": "This off-year election includes mostly local elections, with a few state level ones.",
+        "electionDate": "2023-11-07"
+      },
+      {
+        "title": "Colorado Primaries 2024",
+        "description": "Primary races in Colorado for the upcoming general election on November 5, 2024",
+        "electionDate": "2024-06-25"
+      },
+      {
+        "title": "General Election 2024",
+        "description": "This year's election includes the presidential election as well as all 435 seats in the U.S. House of Representatives and 33 seats in the U.S. Senate.",
+        "electionDate": "2024-11-05"
+      }
+    ]
+  }
+}`}
+
+

+
+ ); +} + +DocsGuidesQuickStart.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/content/overview.tsx b/pages/docs/content/overview.tsx new file mode 100644 index 00000000..e485d8b7 --- /dev/null +++ b/pages/docs/content/overview.tsx @@ -0,0 +1,42 @@ +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "../DocsLayout/DocsLayout"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsContentOverview() { + return ( +
+

Populist helps you create civic content

+

What is Civic Content?

+

+ Civic content is information that helps people understand and engage + with their communities. It can be news, events, or discussions about + local issues. Civic content is important because it helps people make + informed decisions and participate in their communities. +

+
+ ); +} + +DocsContentOverview.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/conversations/configuration.tsx b/pages/docs/conversations/configuration.tsx new file mode 100644 index 00000000..78002c6c --- /dev/null +++ b/pages/docs/conversations/configuration.tsx @@ -0,0 +1,57 @@ +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "../DocsLayout/DocsLayout"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsConversationsConfiguration() { + return ( +
+

Configuring a Conversation

+

+ The conversation owner can configure the conversation settings to suit + their needs. The following settings are available: +

+

Conversation Title

+

+ The title of the conversation is displayed at the top of the + conversation page. Choose a title that is descriptive and engaging to + attract participants. +

+

Conversation Description

+

+ The description provides additional context for the conversation. Use + the description to explain the purpose of the conversation and provide + guidelines for participants. +

+

Seed Statements

+

+ Seed statements are initial statements or questions that provide context + for the conversation. Add seed statements to prompt participants to + engage with the conversation. +

+
+ ); +} + +DocsConversationsConfiguration.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/conversations/distribution.tsx b/pages/docs/conversations/distribution.tsx new file mode 100644 index 00000000..22e35d51 --- /dev/null +++ b/pages/docs/conversations/distribution.tsx @@ -0,0 +1,77 @@ +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "../DocsLayout/DocsLayout"; +import { Divider } from "components"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsConversationsDistribution() { + return ( +
+

Distributing a Conversation

+

+ The conversation owner can distribute the conversation to participants + using the following methods: +

+

Direct Link

+

+ Share the conversation link with participants via email, social media, + or other communication channels. Participants can access the + conversation by clicking the link. +

+

+ Embed Code (Coming Soon) +

+

+ Embed the conversation on your website using the provided embed code. + Participants can engage with the conversation directly on your website. +

+ +

Marketing

+

+ Promote the conversation to attract participants and increase + engagement. Consider the following marketing strategies: +

+

Email list

+

+ Send an email to your subscribers inviting them to participate in the + conversation. Include a brief description of the conversation and a + call-to-action to join. +

+

Social media

+

+ Share the conversation link on your social media channels to reach a + wider audience. Use engaging visuals and captions to attract + participants. +

+

Paid Ads

+

+ Consider running paid ads to promote the conversation to a targeted + audience. Use platforms like Google Ads or Facebook Ads to reach + potential participants. +

+
+ ); +} + +DocsConversationsDistribution.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/conversations/moderation.tsx b/pages/docs/conversations/moderation.tsx new file mode 100644 index 00000000..21c00e24 --- /dev/null +++ b/pages/docs/conversations/moderation.tsx @@ -0,0 +1,49 @@ +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "../DocsLayout/DocsLayout"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsConversationsModeration() { + return ( +
+

Moderation

+

+ The conversation owner controls moderation through the admin interface. + Each new comment can be approved, rejected, or left unmoderated. While + Conversations work without moderation, moderating effectively saves + participants' time by removing irrelevant content. +

+

Moderation Schemes

+

+ Strict Moderation (Default) Works like a whitelist Comments only appear + after moderator approval. Recommended when embedding on your website to + prevent inappropriate content. Permissive Moderation Works like a + blacklist Comments appear immediately Can be removed later by moderators + You can switch between these in the conversation's admin configuration. +

+
+ ); +} + +DocsConversationsModeration.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/conversations/monitoring.tsx b/pages/docs/conversations/monitoring.tsx new file mode 100644 index 00000000..cca62213 --- /dev/null +++ b/pages/docs/conversations/monitoring.tsx @@ -0,0 +1,40 @@ +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "../DocsLayout/DocsLayout"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsConversationsMonitoring() { + return ( +
+

Monitoring

+

+ You can monitor a live conversation in real time using a conversations + "Manage" page. Here you can see the number of participants, votes, + statements, and more. +

+
+ ); +} + +DocsConversationsMonitoring.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/conversations/overview.tsx b/pages/docs/conversations/overview.tsx new file mode 100644 index 00000000..9386f441 --- /dev/null +++ b/pages/docs/conversations/overview.tsx @@ -0,0 +1,78 @@ +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "../DocsLayout/DocsLayout"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsConversationsOverview() { + return ( +
+

What is a Conversation?

+

+ Populist's Conversations is an open-source platform + that helps large groups share and understand their collective views. It + is an implementation of a{" "} + Wikisurvey and + inspired by other platforms including{" "} + Pol.is with a few key improvements. +

+

+ When using Populist conversations, people write short comments and then + vote on other people's comments by selecting support, oppose, or + neutral. The system shows comments to voters in a semi-random way to + ensure broad exposure of ideas. +

+

+ What makes this different from regular surveys: +

    +
  • + Participants create the content themselves instead of answering + preset questions +
    • +
  • + People can contribute meaningfully without having to vote on + everything +
    • +
  • + The system works efficiently even with hundreds, thousands, or + potentially millions of participants +
    • +
+

+

Participating in Conversations

+

+ Browse through the list of existing conversations to find topics that + interest you. Click on a conversation to view the discussion and + contribute your thoughts and opinions. +

+

Managing Conversations

+

+ Organization administrators have the ability to manage conversations, + including editing or deleting conversations as needed. This ensures that + discussions remain relevant and appropriate for the organization. +

+
+ ); +} + +DocsConversationsOverview.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/conversations/quickstart.tsx b/pages/docs/conversations/quickstart.tsx new file mode 100644 index 00000000..6d1ba105 --- /dev/null +++ b/pages/docs/conversations/quickstart.tsx @@ -0,0 +1,87 @@ +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "../DocsLayout/DocsLayout"; +import useOrganizationStore from "hooks/useOrganizationStore"; +import { useOrganizationByIdQuery } from "generated"; +import Link from "next/link"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsConversationsQuickstart() { + const { organizationId } = useOrganizationStore(); + const { data: organizationData } = useOrganizationByIdQuery({ + id: organizationId as string, + }); + const dashboardSlug = organizationData?.organizationById?.slug; + return ( +
+

Quickstart

+

+

    +
  1. + Access the conversations feature by navigating to conversations on + your{" "} + + organization's dashboard. + +
    2. +
  2. + Click the "Create New Conversation" button to create a new + conversation. +
    3. +
  3. + Set a topic and optional description for the conversation. +
    4. +
  4. + Optionally add seed statements to provide initial context or ideas + for the discussion. +
    5. +
  5. + Click on "Manage" then "Copy Public URL" to distribute a link to the + conversation +
    6. +
  6. + From the "Manage" tab you'll be able to monitor the conversation in + realtime. +
    7. +
  7. + Use the "Moderate" tab to manage comments and seed statements. +
    8. +
+

+
+ ); +} + +DocsConversationsQuickstart.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/index.tsx b/pages/docs/index.tsx new file mode 100644 index 00000000..2634c09b --- /dev/null +++ b/pages/docs/index.tsx @@ -0,0 +1,58 @@ +import { Box, Divider } from "components"; + +import { GetServerSideProps } from "next"; +import nextI18nextConfig from "next-i18next.config"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ReactNode } from "react"; +import { SupportedLocale } from "types/global"; +import DocsLayout from "./DocsLayout/DocsLayout"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const { locale } = ctx; + return { + props: { + title: "Populist Conversations", + description: + "Join the conversation on the latest political topics and bills.", + ...ctx.query, + ...(await serverSideTranslations( + locale as SupportedLocale, + ["auth", "common"], + nextI18nextConfig + )), + }, + }; +}; + +export default function DocsIndex() { + return ( +
+

+ Populist{" "} + + docs + +

+ + + +

Getting Started

+

+ Welcome to the Populist documentation! Here you'll find everything you + need to get started with the Populist platform. +

+ +
+ ); +} + +DocsIndex.getLayout = (page: ReactNode) => ( + {page} +); diff --git a/pages/docs/navigationConfig.ts b/pages/docs/navigationConfig.ts new file mode 100644 index 00000000..35ef3d69 --- /dev/null +++ b/pages/docs/navigationConfig.ts @@ -0,0 +1,126 @@ +// Type for valid navigation sections +export type NavigationSectionKey = "home" | "content" | "conversations" | "api"; + +export interface NavigationItem { + label: string; + href: string; +} + +export interface NavigationSection { + title: string; + items: NavigationItem[]; +} + +export interface NavigationTab { + id: string; + label: string; + color: string; +} + +export interface NavigationConfig { + tabs: NavigationTab[]; + home: { + sections: NavigationSection[]; + }; + content: { + sections: NavigationSection[]; + }; + conversations: { + sections: NavigationSection[]; + }; + api: { + sections: NavigationSection[]; + }; +} + +export const navigationConfig: NavigationConfig = { + tabs: [ + { id: "content", label: "Embed Content", color: "aqua" }, + { id: "conversations", label: "Conversations", color: "orange" }, + { id: "api", label: "API Reference", color: "violet" }, + ], + home: { + sections: [], + }, + content: { + sections: [ + { + title: "Overview", + items: [{ label: "What is Populist?", href: "/docs/content/overview" }], + }, + { + title: "Content Types", + items: [ + { label: "Legislation", href: "/docs/content/legislation" }, + { + label: "Legislation Tracker", + href: "/docs/content/legislation-tracker", + }, + { label: "Politician", href: "/docs/content/politician" }, + { label: "Candidate Guide", href: "/docs/content/candidate-guide" }, + { label: "Race", href: "/docs/content/race" }, + { label: "Question", href: "/docs/content/question" }, + { label: "Poll", href: "/docs/content/poll" }, + ], + }, + ], + }, + conversations: { + sections: [ + { + title: "Overview", + items: [ + { + label: "What is a conversation?", + href: "/docs/conversations/overview", + }, + { + label: "Quickstart", + href: "/docs/conversations/quickstart", + }, + ], + }, + { + title: "Usage", + items: [ + { + label: "Configuration", + href: "/docs/conversations/configuration", + }, + { + label: "Distribution", + href: "/docs/conversations/distribution", + }, + { + label: "Moderation", + href: "/docs/conversations/moderation", + }, + { + label: "Monitoring", + href: "/docs/conversations/monitoring", + }, + ], + }, + ], + }, + api: { + sections: [ + { + title: "Overview", + items: [ + { label: "Introduction", href: "/docs/api/introduction" }, + { label: "Quickstart", href: "/docs/api/quick-start" }, + { label: "Authentication", href: "/docs/api/auth" }, + ], + }, + { + title: "Core Resources", + items: [ + { label: "Elections", href: "/docs/api/resources/elections" }, + { label: "Politicians", href: "/docs/api/resources/politicians" }, + { label: "Bills", href: "/docs/api/resources/bills" }, + ], + }, + ], + }, +};