a lot of content added

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Deploy to GitHub Pages
 
 on:
  # Trigger the workflow every time you push to the `main` branch
- # Using a different branch name? Replace `main` with your branch’s name
+ # Using a different branch name? Replace `main` with your branch's name
  push:
  branches: [ main ]
  # Allows you to run this workflow manually from the Actions tab on GitHub.

.vscode/doc.code-snippets

@@ -6,7 +6,7 @@
  "title: $1",
  "author: hyperoot",
  "pubDatetime: $2 #2024-04-09T12:00:00-05:30",
- "# modDatetime: ''",
+ "# modDatetime: ",
  "# description: ''",
  "draft: true",
  "#tags:",

astro.config.mjs

@@ -29,7 +29,7 @@ export default defineConfig({
  applyBaseStyles: false,
  }),
  mdx({
- gfm: false,
+ gfm: true,
  }),
  ],
 });

config.ts

@@ -1,7 +1,7 @@
 export const SITE = {
  website: "https://hyperoot.dev", // replace this with your deployed domain
  author: "HYP3R00T",
- desc: "Documentation theme using Astro and Shadcn",
+ desc: "Documentation template using Astro and Shadcn",
  title: "CelestialDocs",
  ogImage: "og-image.jpg",
  repo: "https://github.com/HYP3R00T/CelestialDocs",
@@ -20,16 +20,22 @@ export const menu_items: { title: string; href: string }[] = [
 ];
 
 // Just works with top-level folders and files. For files, don't add extension as it looks for the slug, and not the file name.
-export const side_nav_menu_order: string[] = ["getting-started"];
+export const side_nav_menu_order: string[] = [
+ "getting-started",
+ "guides",
+ "custom-components",
+ "reference",
+];
 
 // Don't delete anything. You can use 'true' or 'false'.
 // These are global settings
 export const docconfig = {
  hide_table_of_contents: false,
  hide_breadcrumbs: false,
- hide_side_navinations: false,
+ hide_side_navigations: false,
  hide_datetime: false,
  hide_time: true,
  hide_search: false,
  hide_repo_button: false,
+ hide_author: false,
 };

src/components/core/HamNavMenu.astro

@@ -55,7 +55,7 @@ const pathname_part: string = pathname.split("/")[1];
  ))
  }
  {
- !docconfig.hide_side_navinations && (
+ !docconfig.hide_side_navigations && (
  <div class="py-4 w-full">
  <Separator />
  <SideNavMenu items={menu} level={0} class="px-4 " />

src/components/core/Search.tsx

@@ -34,7 +34,7 @@ const options: IFuseOptions<DocsEntry> = {
  keys: [
  { name: "id", weight: 2.5 },
  { name: "slug", weight: 2.5 },
- { name: "body", weight: 1.5 },
+ { name: "body", weight: 1 },
  {
  name: "title",
  weight: 2,
@@ -45,6 +45,11 @@ const options: IFuseOptions<DocsEntry> = {
  weight: 1.75,
  getFn: (docs: DocsEntry) => docs.data.description || "",
  },
+ {
+ name: "tags",
+ weight: 1.5,
+ getFn: (docs: DocsEntry) => docs.data.tags.join(" ") || "",
+ },
  ],
 };
 

src/components/docs/MainContent.astro

@@ -35,6 +35,7 @@ const {
  />
  )
  }
+ {!docconfig.hide_author && <h6 class="muted font-mono">By {author}</h6>}
  <div class="prose pt-4">
  <slot />
  </div>

src/components/docs/SideNavMenu.astro

@@ -11,27 +11,29 @@ const { class: className } = Astro.props;
 
 <ul class:list={["list-none m-0", className]}>
  {
- items.map((item) => {
- const label = item.title
- ? capitalizeFirstLetter(item.title)
- : capitalizeFirstLetter(item.slug.split("/").pop() || "");
- const className = `
- ${level === 0 ? "font-bold" : "font-normal"}
+ items
+ .filter((item) => !item.draft)
+ .map((item) => {
+ const label = item.title
+ ? capitalizeFirstLetter(item.title)
+ : capitalizeFirstLetter(item.slug.split("/").pop() || "");
+ const className = `
+ ${level === 0 ? "font-semibold" : "text-muted-foreground"}
  ${pathname === "/" + item.slug ? "text-primary" : "no-underline"}
  `.trim();
- return (
- <li class="w-full">
- <a
- href={`/${item.slug}`}
- class={`${className} text-sm leading-none w-full`}
- >
- {label}
- </a>
- {item.children.length > 0 && (
- <Astro.self items={item.children} level={level + 1} />
- )}
- </li>
- );
- })
+  return (
+  <li class="w-full">
+  <a
+  href={`/${item.slug}`}
+  class={`${className} text-sm leading-none w-full`}
+  >
+  {label}
+  </a>
+  {item.children.length > 0 && (
+  <Astro.self items={item.children} level={level + 1} />
+  )}
+  </li>
+  );
+  })
  }
 </ul>

src/content/docs/Custom Components/Callout.mdx

@@ -0,0 +1,91 @@
+---
+title: Callout
+---
+import Callout from "@/components/Callout.astro";
+
+
+## Callout
+
+The `Callout` component is designed to highlight important information, warnings, errors, or successes in your application. It is a versatile alert box with customizable variants and titles.
+
+### Props
+
+**`variant`**
+
+Type: `"info" | "warning" | "danger" | "success"`
+
+Default: "info"
+
+Description: Defines the type of alert to display. The variant determines the color, icon, and default title of the alert.
+
+**`title`**
+
+Type: `string`
+
+Default: Default titles based on the variant
+
+Description: Custom title for the alert. If not provided, the default title for the specified variant will be used.
+
+### Basic Usage
+To use the Callout component, import it and use it in your Astro files with the desired variant and title.
+
+<Callout variant="info">
+ This is an info message.
+</Callout>
+
+<Callout variant="warning" title="Custom Warning Title">
+ This is a warning message with a custom title.
+</Callout>
+
+<Callout variant="danger">
+ This is a danger message.
+</Callout>
+
+<Callout variant="success" title="Custom Success Title">
+ This is a success message with a custom title.
+</Callout>
+
+```astro
+---
+import Callout from './components/Callout.astro';
+---
+
+<!-- Using default title for info variant -->
+<Callout variant="info">
+ This is an info message.
+</Callout>
+
+<!-- Using custom title for warning variant -->
+<Callout variant="warning" title="Custom Warning Title">
+ This is a warning message with a custom title.
+</Callout>
+
+<!-- Using default title for danger variant -->
+<Callout variant="danger">
+ This is a danger message.
+</Callout>
+
+<!-- Using custom title for success variant -->
+<Callout variant="success" title="Custom Success Title">
+ This is a success message with a custom title.
+</Callout>
+```
+
+### Default Behavior
+
+If no variant is provided, the info variant will be used by default. Similarly, if no title is provided, the default title for the specified variant will be used.
+
+<Callout>
+ This is an info message using the default settings.
+</Callout>
+
+```astro
+---
+import Callout from './components/Callout.astro';
+---
+
+<!-- Using default info variant and title -->
+<Callout>
+ This is an info message using the default settings.
+</Callout>
+```

src/content/docs/Custom Components/index.mdx

@@ -0,0 +1,14 @@
+---
+title: Components
+---
+import Callout from "@/components/Callout.astro";
+
+Components let you easily reuse a piece of UI or styling consistently. Examples might include a link card or a YouTube embed. CelestialDocs supports the use of components in [MDX](https://mdxjs.com/) files and provides some common components for you to use.
+
+## Callout
+
+The `Callout` component is designed to highlight important information, warnings, errors, or successes in your application. It is a versatile alert box with customizable variants and titles.
+
+<Callout>
+ See the [Callout](/custom-components/callout) for all custom props and their usages. 
+</Callout>