diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index 4deca22..61259ce 100644 --- a/.github/workflows/deploy.yaml +++ b/.github/workflows/deploy.yaml @@ -31,6 +31,9 @@ jobs: - name: π¦ Install dependencies run: pnpm install + - name: π Lint + run: pnpm run lint + - name: π Install Playwright browsers run: pnpm exec playwright install --with-deps diff --git a/.gitignore b/.gitignore index de5f65b..7e00e5a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ node_modules/ dist/ +public/blog/ .idea .vscode .DS_Store diff --git a/README.md b/README.md index ff19a3e..c05d9db 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,72 @@ -# Astro Starter Kit: Basics +# Explainer -```sh -npm create astro@latest -- --template basics -``` +A documentation framework built on Astro 5 and React 19. Write your docs in MDX, get a fast static site with built-in search, blog, SEO, and dark mode. -[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) -[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) -[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) +## Features -> π§βπ **Seasoned astronaut?** Delete this file. Have fun! +| Category | Feature | Description | +| ------------- | --------------------- | --------------------------------------------------------- | +| Documentation | Multi-section docs | Nested sidebar with collapsible sections and doc switcher | +| Documentation | Custom MDX directives | `::component{attr="value"}` syntax for rich content | +| Documentation | 8+ MDX components | Callout, Card, Code Group, Code Preview, Step, and more | +| Documentation | Mermaid diagrams | Rendered at build time via rehype-mermaid | +| Blog | Full blog system | Tags, drafts, author profiles, publication dates | +| Blog | RSS feed | Auto-generated at `/rss.xml` | +| Navigation | Integrated search | Command palette (Cmd+K) with fuzzy filtering | +| Navigation | Instant transitions | Astro View Transitions with persistent sidebar | +| Navigation | Breadcrumbs | Auto-generated page hierarchy | +| Code | Syntax highlighting | Shiki dual-theme (light/dark) with 60+ language icons | +| Code | Code transformers | Diff, line highlight, focus, word highlight, error levels | +| Theming | Dark mode | Light, dark, and system preference with localStorage | +| Theming | Tailwind CSS v4 | OKLCH color system with shadcn/ui components | +| SEO | Meta tags | Open Graph, Twitter Cards, canonical URLs | +| SEO | Sitemap | Auto-generated via @astrojs/sitemap | +| SEO | OG images | Auto-generated at build time (Satori + Resvg) | +| Accessibility | Standards | Skip link, prefers-reduced-motion, keyboard navigation | +| Accessibility | Custom 404 | Branded error page with navigation links | +| DX | Linting & formatting | Biome with strict TypeScript | +| DX | CI/CD | GitHub Actions β lint, build, deploy to Cloudflare Pages | +| DX | Docker | Multi-stage build with Nginx | - +## Tech Stack -## π Project Structure +Astro 5 / React 19 / MDX / TypeScript / Tailwind CSS v4 / shadcn/ui + Radix UI / Shiki / Biome / Cloudflare Pages -Inside of your Astro project, you'll see the following folders and files: +## Getting Started -```text -/ -βββ public/ -β βββ favicon.svg -βββ src/ -β βββ layouts/ -β β βββ Layout.astro -β βββ pages/ -β βββ index.astro -βββ package.json +```sh +pnpm install +pnpm dev ``` -To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/). +Open [http://localhost:4321](http://localhost:4321). + +| Command | Action | +| --------------- | -------------------------------- | +| `pnpm dev` | Start dev server | +| `pnpm build` | Build for production (`./dist/`) | +| `pnpm preview` | Preview production build | +| `pnpm lint` | Check code with Biome | +| `pnpm lint:fix` | Fix linting issues | +| `pnpm format` | Format code with Biome | + +## Configuration + +All settings are centralized in `explainer.config.ts` via `defineExplainerConfig()`: + +- **Project** β name, repository URL +- **SEO** β title, description, default thumbnail +- **Socials** β GitHub, Twitter, LinkedIn links +- **Blog** β default thumbnail, author profiles +- **Navbar** β custom navigation links +- **Content** β MDX component mappings, 60+ language icon mappings -## π§ Commands +## Deployment -All commands are run from the root of the project, from a terminal: +**Cloudflare Pages** β Automatic via GitHub Actions on push to `main` (lint + build + deploy). -| Command | Action | -| :------------------------ | :----------------------------------------------- | -| `npm install` | Installs dependencies | -| `npm run dev` | Starts local dev server at `localhost:4321` | -| `npm run build` | Build your production site to `./dist/` | -| `npm run preview` | Preview your build locally, before deploying | -| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | -| `npm run astro -- --help` | Get help using the Astro CLI | +**Docker** β `docker build -t explainer . && docker run -p 8080:8080 explainer` (Node 20 Alpine + Nginx 1.28 Alpine). -## π Want to learn more? +## License -Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). +See [LICENSE](LICENSE) for details. diff --git a/astro.config.mjs b/astro.config.mjs index 6186e82..ee3a791 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -16,6 +16,7 @@ import icon from "astro-icon"; import rehypeMermaid from "rehype-mermaid"; import remarkBlockParser from "./src/lib/plugins/parser/plugin"; import remarkDirectivePkg from "remark-directive"; +import remarkStripLayout from "./src/lib/plugins/remark-strip-layout"; import sitemap from "@astrojs/sitemap"; import { buildDocIntegration } from "./src/hooks/build-doc"; import transformerMetaLabel from "./src/lib/plugins/shiki/transformer-meta-label"; @@ -46,7 +47,7 @@ export default defineConfig({ type: "shiki", excludeLangs: ["mermaid"], }, - remarkPlugins: [remarkDirectivePkg, remarkBlockParser], + remarkPlugins: [remarkDirectivePkg, remarkBlockParser, remarkStripLayout], rehypePlugins: [rehypeMermaid], }, diff --git a/biome.json b/biome.json new file mode 100644 index 0000000..57e3b6e --- /dev/null +++ b/biome.json @@ -0,0 +1,40 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", + "vcs": { + "enabled": true, + "clientKind": "git", + "useIgnoreFile": true + }, + "files": { + "ignore": ["dist", "node_modules", ".astro", "*.astro"] + }, + "formatter": { + "enabled": true, + "indentStyle": "space", + "indentWidth": 2, + "lineWidth": 100 + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true, + "correctness": { + "noUnusedImports": "warn", + "noUnusedVariables": "warn" + }, + "style": { + "noNonNullAssertion": "off" + }, + "suspicious": { + "noExplicitAny": "warn" + } + } + }, + "javascript": { + "formatter": { + "quoteStyle": "double", + "semicolons": "always", + "trailingCommas": "all" + } + } +} diff --git a/content/blog/index.mdx b/content/blog/index.mdx index 42206c3..39d95f0 100644 --- a/content/blog/index.mdx +++ b/content/blog/index.mdx @@ -1,6 +1,7 @@ --- title: Blog description: Lorem ipsum +layout: blog-wrapper --- import config from "../../explainer.config"; @@ -16,10 +17,10 @@ import config from "../../explainer.config";
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem - cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat. + cupidatat commodo. Elit sont amet fugiat veniam occaecat fugiat.
-::articles +::articles{perLine=3} diff --git a/content/blog/welcome.mdx b/content/blog/welcome.mdx index f0416f2..52cefa7 100644 --- a/content/blog/welcome.mdx +++ b/content/blog/welcome.mdx @@ -1,5 +1,5 @@ --- -title: Discover Explainer +title: Discover Explainer fondations and use markdown description: "Discover Explainer is a tool that helps you create beautiful, responsive, and accessible web documentation using Astro. It's built with Astro, Tailwind CSS, and TypeScript." permalink: welcome authors: diff --git a/content/blog/whats-new-2.0.mdx b/content/blog/whats-new-2.0.mdx new file mode 100644 index 0000000..e8b83b6 --- /dev/null +++ b/content/blog/whats-new-2.0.mdx @@ -0,0 +1,157 @@ +--- +title: What's new in Explainer 2.0 +description: "A major update bringing new components, improved navigation, auto-generated thumbnails, and a polished design system." +permalink: whats-new-2.0 +authors: + - leadcode_dev +publishedAt: "2026-02-23" +--- + +# What's new in Explainer 2.0 + +We're excited to announce a major update to Explainer that brings a host of new features, components, and design improvements. Here's a summary of everything that's changed. + +:::callout{variant="info"} +This release includes breaking changes. If you're upgrading from a previous version, please review each section carefully. +::: + +--- + +## New landing page + +Explainer now ships with a fully designed landing page β ready to use out of the box. + +::::card-group +:::card{title="Hero Section" icon="lucide:sparkles"} +A bold, animated hero with primary and secondary call-to-action buttons. +::: +:::card{title="Features Grid" icon="lucide:layout-grid"} +Showcase your project's key features in a responsive grid layout. +::: +:::card{title="Testimonials" icon="lucide:message-circle"} +Display user feedback with a clean, rotating testimonial section. +::: +:::card{title="Blog Section" icon="lucide:newspaper"} +Automatically pull your latest blog posts onto the homepage. +::: +:::: + +--- + +## New MDX components + +::::card-group +:::card{title="Step Groups" icon="lucide:list-ordered"} +Guide readers through multi-step processes with a clear, numbered layout. +::: +:::card{title="Code Previews" icon="lucide:eye"} +Show live rendered output alongside source code β perfect for documenting UI components. +::: +:::card{title="Blockquote" icon="lucide:quote"} +Styled citations with optional author attribution using the `β` convention. +::: +:::card{title="Code Groups" icon="lucide:columns-2"} +Tabbed code blocks to present multiple files or languages side by side. +::: +:::card{title="Card Groups" icon="lucide:layout-grid"} +Display feature cards in a responsive grid with icons and descriptions. +::: +:::card{title="Articles" icon="lucide:newspaper"} +Embed a blog article listing directly inside your documentation pages. +::: +:::: + +--- + +## Heading anchor links + +All `h2` and `h3` headings now generate clickable anchor links. Hover over any heading to reveal the `#` symbol, click it to update the URL, and share a direct link to that section. + +> The best documentation is the one you can link to directly. +> +> β The Explainer Team + +--- + +## Improved navigation + +::::step-group +:::step{title="Doc Switcher"} +A redesigned documentation switcher in the sidebar with descriptions and active state indicators. +::: +:::step{title="Navbar Dropdowns"} +The navbar now supports dropdown menus with icons and descriptions for richer navigation. +::: +:::step{title="Full-text Search"} +The search bar now indexes all documentation content for full-text search across your docs. +::: +:::step{title="Previous / Next"} +Navigate between documentation pages with contextual links at the bottom of each page. +::: +:::: + +--- + +## Auto-generated thumbnails + +Blog posts and documentation pages now get automatically generated Open Graph thumbnails during build. Powered by Satori, each thumbnail features your project's primary color, the page title, and a clean dark design. + +:::callout{variant="success"} +No manual image creation needed β thumbnails are generated at build time and served as static assets. +::: + +--- + +## Documentation restructuring + +The documentation now supports multiple doc collections with a clean switcher. Direct pages at the root of a collection are also supported alongside nested folder structures. + +:::codegroup + +```txt [Before] +content/ + docs/ + getting-started/ + installation.mdx + configuration.mdx +``` + +```txt [After] +content/ + docs/ + framework/ + getting-started/ + installation.mdx + documentation/ + demo.mdx +``` + +::: + +--- + +## Design polish + +:::callout{variant="warning"} +If you customized the color tokens in your `global.css`, make sure to update them to match the new naming convention. +::: + +| Feature | Status | +| ---------------- | -------- | +| Landing page | New | +| Step groups | New | +| Code previews | New | +| Blockquote | New | +| Card groups | New | +| Heading anchors | New | +| Doc switcher | Improved | +| Navbar dropdowns | Improved | +| Search | Improved | +| Thumbnails | Improved | +| Dark mode | Improved | + +--- + +## Getting started + +Ready to try it out? Head over to the [Getting Started](/docs/framework/getting-started/getting-started) guide to set up your own Explainer documentation. diff --git a/content/docs/documentation/_default.mdx b/content/docs/documentation/_default.mdx index cf1cde0..5f7c109 100644 --- a/content/docs/documentation/_default.mdx +++ b/content/docs/documentation/_default.mdx @@ -1,10 +1,9 @@ --- -label: Documentation -directory: documentation +label: Demo +directory: demo description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. -permalink: framework +permalink: demo icon: lucide:cuboid collection: - - getting-started - - foundamentals + - demo --- diff --git a/content/docs/documentation/demo.mdx b/content/docs/documentation/demo.mdx new file mode 100644 index 0000000..559dd52 --- /dev/null +++ b/content/docs/documentation/demo.mdx @@ -0,0 +1,164 @@ +--- +title: Demo +description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. +permalink: demo +icon: lucide:tag +--- + +# Demo + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. + +## Getting started + +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. + +:::callout{variant="info"} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. +::: + +--- + +## Installation + +Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. + +::::step-group +:::step{title="Install dependencies"} +Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. + +```bash +pnpm install +``` + +::: +:::step{title="Configure the project"} +Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. + +```ts [explainer.config.ts] +import { defineExplainerConfig } from "@/utils"; + +export default defineExplainerConfig({ + projectName: "My Project", + seo: { + title: "My Project", + description: "Lorem ipsum dolor sit amet.", + thumbnail: "https://placehold.co/1200x630", + }, +}); +``` + +::: +:::step{title="Start the dev server"} +Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet. + +```bash +pnpm dev +``` + +::: +:::: + +--- + +## Code examples + +Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur. + +:::codegroup + +```ts [server.ts] +import express from "express"; + +const app = express(); + +app.get("/", (req, res) => { + res.json({ message: "Hello World" }); +}); + +app.listen(3000); +``` + +```ts [client.ts] +const response = await fetch("http://localhost:3000"); +const data = await response.json(); + +console.log(data.message); +``` + +::: + +### Highlighted code + +At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum. + +```rs [entities/user.rs] +pub struct User { + pub firstname: String, // [!code highlight] + pub lastname: String, + pub email: String, // [!code highlight] +} + +impl User { + pub fn new() -> Self { // [!code --] + pub fn new(firstname: String, lastname: String, email: String) -> Self { // [!code ++] + Self { firstname, lastname, email } + } +} +``` + +--- + +## Features overview + +Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet. + +::::card-group +:::card{title="Fast" icon="lucide:zap"} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. +::: +:::card{title="Flexible" icon="lucide:settings"} +Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. +::: +:::card{title="Extensible" icon="lucide:puzzle"} +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. +::: +:::: + +--- + +## Important notes + +Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores. + +:::callout{variant="info"} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. +::: + +:::callout{variant="success"} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. +::: + +:::callout{variant="warning"} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. +::: + +:::callout{variant="danger"} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. +::: + +--- + +## Summary + +| Feature | Description | Status | +| ---------- | ---------------------------- | ------ | +| Routing | File-based routing system | Stable | +| Components | Built-in MDX components | Stable | +| Theming | Light and dark mode support | Stable | +| Search | Full-text search across docs | Beta | +| Blog | Integrated blog system | Stable | + +> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. +> +> β John Doe diff --git a/content/docs/documentation/getting-started/configuration.mdx b/content/docs/documentation/getting-started/configuration.mdx deleted file mode 100644 index 665e992..0000000 --- a/content/docs/documentation/getting-started/configuration.mdx +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Configuration -description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. -permalink: configuration -icon: lucide:settings-2 -visibility: - - navbar ---- - -# Configuration - -The project configuration is simple and centralized in the `explainer.config.ts` file. - -This file uses the `defineExplainerConfig` function to define all the configurations for the site. Here is an overview of the different configuration sections available: - -```ts [explainer.config.ts] -import { defineExplainerConfig } from "@/utils"; - -export default defineExplainerConfig({ - repository: "https://github.com/LeadcodeDev/explainer", - projectName: "Explainer", - seo: { - title: "Explainer β’ Make your own documentation easily", - description: - "Quickly design your documentation and optimise it for search engine optimisation to showcase your products.", - thumbnail: "https://placehold.co/1200x630", - }, - socials: { - media: { - github: "https://github.com/LeadcodeDev/explainer", - twitter: "https://twitter.com/LeadcodeDev", - linkedin: "https://linkedin.com/in/leadcode-dev", - }, - }, - blog: { - defaults: { - thumbnail: "https://placehold.co/1200x630", - }, - authors: { - leadcode_dev: { - name: "LeadcodeDev", - avatar: "https://avatars.githubusercontent.com/u/8946317?v=4", - href: "https://github.com/LeadcodeDev", - }, - }, - }, - navbar: [ - { - label: "API", - href: "/api", - }, - { - label: "Blog", - href: "/blog", - }, - ], -}); -``` diff --git a/content/docs/framework/_default.mdx b/content/docs/framework/_default.mdx new file mode 100644 index 0000000..812bfde --- /dev/null +++ b/content/docs/framework/_default.mdx @@ -0,0 +1,10 @@ +--- +label: Framework +directory: documentation +description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. +permalink: framework +icon: lucide:book +collection: + - getting-started + - foundamentals +--- diff --git a/content/docs/documentation/foundamentals/_default.mdx b/content/docs/framework/foundamentals/_default.mdx similarity index 100% rename from content/docs/documentation/foundamentals/_default.mdx rename to content/docs/framework/foundamentals/_default.mdx diff --git a/content/docs/documentation/foundamentals/blog.mdx b/content/docs/framework/foundamentals/blog.mdx similarity index 92% rename from content/docs/documentation/foundamentals/blog.mdx rename to content/docs/framework/foundamentals/blog.mdx index 07c6067..8121d5e 100644 --- a/content/docs/documentation/foundamentals/blog.mdx +++ b/content/docs/framework/foundamentals/blog.mdx @@ -19,12 +19,13 @@ To create a new article, you need to create a new markdown file in the `content/ You should use the frontmatter on top of the file to define the article metadata. -> [!WARNING] -> The `permalink` property is required. If you modify it, the URL of the article will change. +:::callout{variant="warning"} +The `permalink` property is required. If you modify it, the URL of the article will change. +::: -:::codegroup labels=[frontmatter, schema] +:::codegroup -```mdx +```mdx [frontmatter] --- title: "Article title" description: "Article description" @@ -37,7 +38,7 @@ publishedAt: 2024-01-01:23:00:00 --- ``` -```ts +```ts [schema] const schema = z.object({ title: z.string(), description: z.string(), @@ -55,8 +56,9 @@ const schema = z.object({ The article will be visible on the blog page if the `publishedAt` date is defined and is in the future. -> [!NOTE] -> You can also remove or comment the `publishedAt` date to unpublish the article. +:::callout{variant="warning"} +You can also remove or comment the `publishedAt` date to unpublish the article. +::: In the blog index page, the articles are sorted by `publishedAt` date and displayed in descending order. diff --git a/content/docs/documentation/foundamentals/components/_default.mdx b/content/docs/framework/foundamentals/components/_default.mdx similarity index 100% rename from content/docs/documentation/foundamentals/components/_default.mdx rename to content/docs/framework/foundamentals/components/_default.mdx diff --git a/content/docs/documentation/foundamentals/components/callout.mdx b/content/docs/framework/foundamentals/components/callout.mdx similarity index 100% rename from content/docs/documentation/foundamentals/components/callout.mdx rename to content/docs/framework/foundamentals/components/callout.mdx diff --git a/content/docs/documentation/foundamentals/components/card.mdx b/content/docs/framework/foundamentals/components/card.mdx similarity index 96% rename from content/docs/documentation/foundamentals/components/card.mdx rename to content/docs/framework/foundamentals/components/card.mdx index 9ec2631..36d0583 100644 --- a/content/docs/documentation/foundamentals/components/card.mdx +++ b/content/docs/framework/foundamentals/components/card.mdx @@ -51,8 +51,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i You can customize the number of elements per line by setting the `cols` prop. -> [!note] -> Default card per line was fixed to 2 +:::callout{variant="info"} +Default card per line was fixed to 2 +::: ::::::preview @@ -143,8 +144,9 @@ Vous pouvez personaliser chacune de vos cartes en utilisant les props suivantes - `label`: Le texte Γ afficher en haut de la carte. (required) - `icon`: L'icΓ΄ne Γ afficher en haut de la carte. -> [!note] -> The cards use the [`iconify`](https://icon-sets.iconify.design/) library to display icons. +:::callout{variant="info"} +The cards use the [`iconify`](https://icon-sets.iconify.design/) library to display icons. +::: ::::::preview diff --git a/content/docs/documentation/foundamentals/components/code-block.mdx b/content/docs/framework/foundamentals/components/code-block.mdx similarity index 97% rename from content/docs/documentation/foundamentals/components/code-block.mdx rename to content/docs/framework/foundamentals/components/code-block.mdx index 7c083df..f8a4562 100644 --- a/content/docs/documentation/foundamentals/components/code-block.mdx +++ b/content/docs/framework/foundamentals/components/code-block.mdx @@ -261,8 +261,9 @@ impl User { ## Group code blocks -> [!warning] This is a **collapsible** callout -> Only code blocks can be used in a group. +:::callout{variant="warning"} +This is a **collapsible** callout. Only code blocks can be used in a group. +::: :::::preview ::::code-preview diff --git a/content/docs/documentation/foundamentals/components/code-preview.mdx b/content/docs/framework/foundamentals/components/code-preview.mdx similarity index 100% rename from content/docs/documentation/foundamentals/components/code-preview.mdx rename to content/docs/framework/foundamentals/components/code-preview.mdx diff --git a/content/docs/documentation/foundamentals/components/markdown.mdx b/content/docs/framework/foundamentals/components/markdown.mdx similarity index 100% rename from content/docs/documentation/foundamentals/components/markdown.mdx rename to content/docs/framework/foundamentals/components/markdown.mdx diff --git a/content/docs/documentation/foundamentals/components/step.mdx b/content/docs/framework/foundamentals/components/step.mdx similarity index 100% rename from content/docs/documentation/foundamentals/components/step.mdx rename to content/docs/framework/foundamentals/components/step.mdx diff --git a/content/docs/documentation/foundamentals/components/text.mdx b/content/docs/framework/foundamentals/components/text.mdx similarity index 76% rename from content/docs/documentation/foundamentals/components/text.mdx rename to content/docs/framework/foundamentals/components/text.mdx index e240ca1..5ebc4b2 100644 --- a/content/docs/documentation/foundamentals/components/text.mdx +++ b/content/docs/framework/foundamentals/components/text.mdx @@ -79,6 +79,30 @@ _Italic text_ ::: :::: +## Blockquote + +Use the `>` syntax to create a styled citation. Add an author with a line starting by `β`. + +::::preview +:::code-preview + +> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. +> +> β John Doe + +::: + +:::content-preview + +```mdx +> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. +> +> β John Doe +``` + +::: +:::: + ## Headers You can create headers from level 1 (largest) to level 6 (smallest): diff --git a/content/docs/documentation/foundamentals/docs.mdx b/content/docs/framework/foundamentals/docs.mdx similarity index 100% rename from content/docs/documentation/foundamentals/docs.mdx rename to content/docs/framework/foundamentals/docs.mdx diff --git a/content/docs/documentation/foundamentals/routing.mdx b/content/docs/framework/foundamentals/routing.mdx similarity index 100% rename from content/docs/documentation/foundamentals/routing.mdx rename to content/docs/framework/foundamentals/routing.mdx diff --git a/content/docs/documentation/getting-started/_default.mdx b/content/docs/framework/getting-started/_default.mdx similarity index 100% rename from content/docs/documentation/getting-started/_default.mdx rename to content/docs/framework/getting-started/_default.mdx diff --git a/content/docs/framework/getting-started/configuration.mdx b/content/docs/framework/getting-started/configuration.mdx new file mode 100644 index 0000000..39fa56e --- /dev/null +++ b/content/docs/framework/getting-started/configuration.mdx @@ -0,0 +1,126 @@ +--- +title: Configuration +description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. +permalink: configuration +icon: lucide:settings-2 +visibility: + - navbar +--- + +# Configuration + +The project configuration is simple and centralized in the `explainer.config.ts` file. + +This file uses the `defineExplainerConfig` function to define all the configurations for the site. Here is an overview of the different configuration sections available: + +```ts [explainer.config.ts] +import { defineExplainerConfig } from "@/utils"; + +export default defineExplainerConfig({ + repository: "https://github.com/LeadcodeDev/explainer", + projectName: "Explainer", + seo: { + title: "Explainer β’ Make your own documentation easily", + description: + "Quickly design your documentation and optimise it for search engine optimisation to showcase your products.", + thumbnail: "https://placehold.co/1200x630", + }, + socials: { + media: { + github: "https://github.com/LeadcodeDev/explainer", + twitter: "https://twitter.com/LeadcodeDev", + linkedin: "https://linkedin.com/in/leadcode-dev", + }, + }, + blog: { + defaults: { + thumbnail: "https://placehold.co/1200x630", + }, + authors: { + leadcode_dev: { + name: "LeadcodeDev", + avatar: "https://avatars.githubusercontent.com/u/8946317?v=4", + href: "https://github.com/LeadcodeDev", + }, + }, + }, + navbar: [ + { + label: "API", + href: "/api", + }, + { + label: "Blog", + href: "/blog", + }, + ], +}); +``` + +--- + +## Navbar + +The `navbar` array supports two types of entries: **simple links** and **dropdown menus**. + +### Simple link + +A simple link navigates directly to a page. You can optionally add an icon. + +```ts +navbar: [ + { + label: "Blog", + href: "/blog", + icon: "lucide:newspaper", // optional + }, +], +``` + +| Property | Type | Description | +| -------- | -------- | --------------------------------- | +| `label` | `string` | Display text | +| `href` | `string` | Target URL | +| `icon` | `string` | Iconify icon identifier (optional)| + +### Dropdown + +A dropdown entry displays a collapsible menu with a list of sub-items. Each sub-item can have its own label, description, icon and link. + +```ts +navbar: [ + { + label: "Resources", + icon: "lucide:book", + children: [ + { + label: "API Reference", + description: "Full API docs", + icon: "mdi:code-braces", + href: "/api", + }, + { + label: "Changelog", + description: "What's new", + icon: "mdi:history", + href: "/changelog", + }, + ], + }, +], +``` + +| Property | Type | Description | +| ---------- | -------- | ------------------------------------ | +| `label` | `string` | Display text for the trigger | +| `icon` | `string` | Iconify icon on the trigger (optional)| +| `children` | `array` | List of sub-items | + +Each child item accepts the following properties: + +| Property | Type | Description | +| ------------- | -------- | ------------------------------------ | +| `label` | `string` | Display text | +| `description` | `string` | Short description shown below label (optional) | +| `icon` | `string` | Iconify icon identifier (optional) | +| `href` | `string` | Target URL | diff --git a/content/docs/documentation/getting-started/deploy.mdx b/content/docs/framework/getting-started/deploy.mdx similarity index 100% rename from content/docs/documentation/getting-started/deploy.mdx rename to content/docs/framework/getting-started/deploy.mdx diff --git a/content/docs/documentation/getting-started/getting-started.mdx b/content/docs/framework/getting-started/getting-started.mdx similarity index 100% rename from content/docs/documentation/getting-started/getting-started.mdx rename to content/docs/framework/getting-started/getting-started.mdx diff --git a/content/docs/documentation/getting-started/installation.mdx b/content/docs/framework/getting-started/installation.mdx similarity index 100% rename from content/docs/documentation/getting-started/installation.mdx rename to content/docs/framework/getting-started/installation.mdx diff --git a/content/docs/documentation/getting-started/project-structure.mdx b/content/docs/framework/getting-started/project-structure.mdx similarity index 100% rename from content/docs/documentation/getting-started/project-structure.mdx rename to content/docs/framework/getting-started/project-structure.mdx diff --git a/content/index.mdx b/content/index.mdx index 848382a..590fdc4 100644 --- a/content/index.mdx +++ b/content/index.mdx @@ -1,162 +1,9 @@ --- --- -import { BackgroundAnimation } from "@/components/ui/background-animation"; -import { Icon } from "@iconify/react"; -import { Button } from "@/components/ui/button"; -import { Badge } from "@/components/ui/badge"; - -
- - Learn more about our latest developments. We share tips and tricks to - help you succeed.og posts and follow us -
-+++++