### Install Dependencies Source: https://github.com/mickasmt/astro-nomy/blob/master/README.md Installs project dependencies using pnpm. This command is essential before starting the development server. ```sh pnpm install ``` -------------------------------- ### JSON Configuration Example Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/style-guide.mdx This snippet shows a sample JSON configuration object, likely used for defining page metadata or settings. ```json { "url": "#when-a-heading-comes-after-a-paragraph-", "title": "When a heading comes after a paragraph ..." } ``` -------------------------------- ### Start Development Server Source: https://github.com/mickasmt/astro-nomy/blob/master/README.md Starts the local development server to preview the project. This command allows for real-time updates as you make changes. ```sh pnpm run dev ``` -------------------------------- ### Image Component Example Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/preview-markdown.md An example of using an Image component, likely from a framework like Astro or React, to display an image with specified source, dimensions, and alt text. This is used to demonstrate how images are handled within the styled content. ```javascript Image ``` -------------------------------- ### Markdown Example with Typography Elements Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/style-guide.mdx An example of markdown content showcasing various typographic elements, including bold text, unordered lists, ordered lists, code blocks, block quotes, and italics. This serves to test and demonstrate the effectiveness of the Tailwind Typography plugin in styling rich text content. ```md Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS. By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive. We get lots of complaints about it actually, with people regularly asking us things like: > Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too? > We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful. The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles. It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document: For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md). --- ## What to expect from here on out What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_. It's important to cover all of these use cases for a few reasons: 1. We want everything to look good out of the box. 2. Really just the first reason, that's the whole point of the plugin. 3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items. Now we're going to try out another header style. ### Typography should be easy So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable. Something a wise person once told me about typography is: > Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad. It's probably important that images look okay here by default as well: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Now I'm going to show you an example of an unordered list to make sure that looks good, too: - So here is the first item in this list. - In this example we're keeping the items short. - Later, we'll use longer, more complex list items. And that's the end of this section. ## What if we stack headings? ### We should make sure that looks good, too. Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be. ### When a heading comes after a paragraph... Error if you use `...` in title like the follow example. ``` -------------------------------- ### Tailwind CSS Configuration Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/style-guide.mdx A basic JavaScript configuration for Tailwind CSS, demonstrating default theme and plugin settings. This is a common setup for projects using Tailwind. ```javascript module.exports = { purge: [], theme: { extend: {}, }, variants: {}, plugins: [], }; ``` -------------------------------- ### Heading Styling and Usage Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/style-guide.mdx Illustrates the styling and recommended usage of heading levels (h1 to h4) in an Astro project, discouraging the use of h5 and h6. ```html

There are other elements we need to style

Sometimes I even use code in headings

We haven't used an h4 yet

We still need to think about stacked headings though.

Let's make sure we don't screw that up with h4 elements, either.

``` -------------------------------- ### Styling Links and Inline Code Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/style-guide.mdx Demonstrates styling for hyperlinks and inline code elements, including custom colors for links and specific handling for Tailwind CSS related code. ```html

I almost forgot to mention links, like this link to the Tailwind CSS website. We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.

We also need to make sure inline code looks good, like if I wanted to talk about <span> elements or tell you the good news about @tailwindcss/typography.

Even though it's probably a bad idea, and historically I've had a hard time making it look good. This "wrap the code blocks in backticks" trick works pretty well though really.

Another thing I've done in the past is put a code tag inside of a link, like if I wanted to tell you about the [tailwindcss/docs](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.

``` -------------------------------- ### next.config.js Example Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/code-blocks.mdx Demonstrates a Next.js configuration file with line numbers and specific line highlighting, using TypeScript. It includes settings for React Strict Mode, image domains, and experimental features like appDir. ```ts import { withContentlayer } from "next-contentlayer" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, images: { domains: ["avatars.githubusercontent.com"], }, experimental: { appDir: true, serverComponentsExternalPackages: ["@prisma/client"], }, } export default withContentlayer(nextConfig) ``` -------------------------------- ### GitHub Flavored Markdown Support Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/style-guide.mdx Demonstrates the use of GitHub Flavored Markdown (GFM) with `remark-gfm`, including autolink literals for URLs and email addresses. ```markdown I've also added support for GitHub Flavored Mardown using `remark-gfm`. With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals. A link like www.example.com or https://example.com would automatically be converted into an `a` tag. This works for email links too: contact@example.com. ``` -------------------------------- ### Markdown Image Syntax Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/markdown-style-guide.md Demonstrates the syntax for including images in Markdown, supporting both relative and absolute paths. The alt text provides a textual description of the image. ```markdown ![Alt text](./full/or/relative/path/of/image) ``` -------------------------------- ### Markdown Blockquote Syntax Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/markdown-style-guide.md Illustrates how to create blockquotes in Markdown, including options for attribution using the `` tag. Markdown syntax can be used within blockquotes. ```markdown > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > **Note** that you can use _Markdown syntax_ within a blockquote. ``` ```markdown > Don't communicate by sharing memory, share memory by communicating.
> — Rob Pike[^1] ``` -------------------------------- ### Markdown Table Syntax Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/markdown-style-guide.md Shows the syntax for creating tables in Markdown, using pipes and hyphens to define columns and rows. Supports basic formatting like italics, bold, and code within cells. ```markdown | Italics | Bold | Code | | --------- | -------- | ------ | | _italics_ | **bold** | `code` | ``` -------------------------------- ### Markdown Other Elements Syntax Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/markdown-style-guide.md Shows the syntax for various other Markdown elements including abbreviations with ``, subscripts with ``, superscripts with ``, keyboard input with ``, and text highlighting with ``. ```markdown GIF is a bitmap image format. H2O Xn + Yn = Zn Press CTRL+ALT+Delete to end the session. Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. ``` -------------------------------- ### Tailwind CSS Configuration for MDX Content Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/components.mdx Provides an example of configuring `tailwind.config.js` to include MDX files in the content paths, enabling Tailwind CSS to process them. ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./content/**/*.{md,mdx}", ], } ``` -------------------------------- ### Markdown List Syntax Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/markdown-style-guide.md Demonstrates the syntax for creating ordered, unordered, and nested lists in Markdown. Ordered lists use numbers followed by periods, while unordered lists use hyphens or asterisks. ```markdown 1. First item 2. Second item 3. Third item ``` ```markdown - List item - Another item - And another item ``` ```markdown - Fruit - Apple - Orange - Banana - Dairy - Milk - Cheese ``` -------------------------------- ### Using Custom Component in MDX Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/components.mdx Example of how to invoke a custom component within an MDX file after it has been registered. ```js ``` -------------------------------- ### Table Styling Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/style-guide.mdx Provides the structure for styling HTML tables with Tailwind CSS, including header and data cells. ```html
Wrestler Origin Finisher
Bret "The Hitman" Hart Calgary, AB Sharpshooter
Stone Cold Steve Austin Austin, TX Stone Cold Stunner
Randy Savage Sarasota, FL Elbow Drop
Vader Boulder, CO Vader Bomb
Razor Ramon Chuluota, FL Razor's Edge
``` -------------------------------- ### Markdown Code Block Syntax Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/markdown-style-guide.md Explains how to create code blocks in Markdown using triple backticks. Language-specific syntax highlighting can be enabled by specifying the language name after the opening backticks. ```markdown ```html Example HTML5 Document

Test

``` ``` -------------------------------- ### MDX with TypeScript Code Block Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/code-blocks.mdx An example of embedding a TypeScript code block within MDX, specifying a file path in the title. ```ts // Code here ``` -------------------------------- ### HTML Content Styling with Tailwind Typography Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/style-guide.mdx Demonstrates how to apply the 'prose' class from the `@tailwindcss/typography` plugin to an HTML article to style its content. This class enables beautiful, well-formatted documents out-of-the-box, overriding default browser styles for elements like headings and paragraphs. ```html

Garlic bread with cheese: What the science tells us

For years parents have espoused the health benefits of eating garlic bread with cheese to their children, with the food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for Halloween.

But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases springing up around the country.

``` -------------------------------- ### Default tailwind.config.js Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/guides/build-blog-using-astro-mdx.mdx A standard configuration file for Tailwind CSS, showing default settings for purge, theme, variants, and plugins. ```js module.exports = { purge: [], theme: { extend: {}, }, variants: {}, plugins: [], }; ``` -------------------------------- ### Contentlayer and MDX Integration Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/index.mdx Learn how to integrate MDX content with Contentlayer for documentation. ```mdx import { Card } from "./components";
### Contentlayer Learn how to use MDX with Contentlayer. ### Components Using React components in Mardown. ### Code Blocks Beautiful code blocks with syntax highlighting. ### Style Guide View a sample page with all the styles.
``` -------------------------------- ### HTML Article with Tailwind Typography Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/guides/build-blog-using-astro-mdx.mdx Demonstrates how to apply the 'prose' class from the @tailwindcss/typography plugin to an HTML article for styled content. This class enables automatic typographic styling for elements like headings, paragraphs, and lists. ```html

Garlic bread with cheese: What the science tells us

For years parents have espoused the health benefits of eating garlic bread with cheese to their children, with the food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for Halloween.

But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases springing up around the country.

``` -------------------------------- ### GitHub Flavored Markdown Support Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/guides/build-blog-using-astro-mdx.mdx This section explains the integration of GitHub Flavored Markdown (GFM) using remark-gfm, enabling features like autolink literals for URLs and email addresses. ```markdown I've also added support for GitHub Flavored Mardown using `remark-gfm`. With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals. A link like www.example.com or https://example.com would automatically be converted into an `a` tag. This works for email links too: contact@example.com. ``` -------------------------------- ### Import and Use UI Component in MDX Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/using-mdx.mdx Demonstrates how to import and use a UI component within an MDX file in Astro. This allows for interactive elements within Markdown content. Ensure client directives are used for interactivity. ```mdx import MyComponent from '../components/MyComponent.jsx'; # My MDX Page ``` -------------------------------- ### Card Component Usage Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/components.mdx Illustrates how to use the Card component in MDX, including single card and grid layouts with Markdown content. ```mdx #### Heading You can use **markdown** inside cards. #### Heading You can use **markdown** inside cards. You can also use HTML to embed cards in a grid.
#### Card One You can use **markdown** inside cards. #### Card Two You can also use `inline code` and code blocks.
#### Card One You can use **markdown** inside cards. #### Card Two You can also use `inline code` and code blocks.
``` -------------------------------- ### Callout Component Usage Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/components.mdx Demonstrates the usage of the built-in Callout component in MDX, showcasing different types (default, warning, danger) and the use of icons. ```mdx This is a default callout. You can embed **Markdown** inside a `callout`. This is a default callout. You can embed **Markdown** inside a `callout`. This is a info callout. It uses the props `type="info"`. This is a warning callout. It uses the props `type="warning"`. This is a danger callout. It uses the props `type="danger"`. ``` -------------------------------- ### Default tailwind.config.js Configuration Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/preview-markdown.md This snippet shows the default configuration for a tailwind.config.js file. It includes basic settings for purging, theme extensions, variants, and plugins. ```js module.exports = { purge: [], theme: { extend: {}, }, variants: {}, plugins: [], }; ``` -------------------------------- ### Astro Configuration for MDX Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/using-mdx.mdx Shows how to configure the MDX integration in an Astro project's configuration file (`astro.config.mjs`). This enables MDX support. To disable, remove the integration. ```javascript import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; // https://astro.build/config export default defineConfig({ integrations: [mdx()] }); ``` -------------------------------- ### GitHub Flavored Markdown Support Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/preview-markdown.md This section explains the integration of GitHub Flavored Markdown (GFM) using remark-gfm, enabling features like autolink literals for URLs and email addresses. ```markdown I've also added support for GitHub Flavored Mardown using `remark-gfm`. With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals. A link like www.example.com or https://example.com would automatically be converted into an `a` tag. This works for email links too: contact@example.com. ``` -------------------------------- ### Tailwind Typography Plugin Usage Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/blog/preview-markdown.md Demonstrates how to apply the 'prose' class from the @tailwindcss/typography plugin to an HTML article to style its content. This class automatically applies beautiful, well-formatted typography to vanilla HTML. ```html

Garlic bread with cheese: What the science tells us

For years parents have espoused the health benefits of eating garlic bread with cheese to their children, with the food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for Halloween.

But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases springing up around the country.

``` -------------------------------- ### Nebulous 2.0 Release Announcement Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/releases/2_0.md Markdown content for the Nebulous 2.0 release announcement, detailing new features, bug fixes, and upcoming features. ```markdown ## Introducing Nebulous 2.0! ![Nebulous 2.0 Release](../../assets/releases/starlog-placeholder-2.jpg) Greetings, Nebulous users! We're excited to bring you the latest updates in our [ever-evolving tech ecosystem](#). In this release, we're introducing some exciting new features and squashing a few pesky bugs. Let's dive in! ### 🍿 New Features & Enhancements - **NebulaSync v2.0:** We're thrilled to introduce NebulaSync 2.0, our revamped file synchronization tool. It now offers blazing-fast sync speeds, improved reliability, and enhanced cross-device compatibility. - **Enhanced NebulaProtect:** NebulaProtect, our comprehensive security suite, has received a major update. Enjoy advanced threat detection, and real-time monitoring. - **NebulaConnect for Teams:** Collaborate effortlessly with NebulaConnect for Teams. This powerful feature allows seamless integration with your favorite project management tools, enabling you to manage tasks, share documents, and track progress in real-time. ### 🐞 Bug Fixes - Resolved occasional crashing issues when using NebulaSync. - Fixed a bug causing data corruption in rare cases during file transfers. - Improved compatibility with older devices to ensure a seamless experience for all users. - Enhanced error handling and reporting for a smoother user experience. ### 👀 Coming Soon We can't spill all the beans just yet, but we're thrilled to give you a sneak peek of what's coming in the next Nebulous release: - **NebulaWallet:** A secure and user-friendly cryptocurrency wallet integrated directly into Nebulous for seamless digital asset management. - **NebulaConnect Mobile:** Take your collaboration to the next level with our upcoming mobile app, enabling you to work on the go. - **NebulaLabs:** Our developer tools and API enhancements, providing you with even more customization options and possibilities. If you have any suggestions or encounter any issues, don't hesitate to reach out to our support team. Together, we'll continue to make Nebulous the ultimate tech solution for you. ``` -------------------------------- ### Default tailwind.config.js Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/guides/using-next-auth-next-13.mdx A standard configuration file for Tailwind CSS, showing default settings for purge, theme, variants, and plugins. ```js module.exports = { purge: [], theme: { extend: {}, }, variants: {}, plugins: [], }; ``` -------------------------------- ### Integrating Custom MDX Components Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/components.mdx Shows how to register and use custom React components within MDX using the `useMDXComponent` hook. ```ts import { Callout } from "@/components/callout" import { CustomComponent } from "@/components/custom" const components = { Callout, CustomComponent, } export function Mdx({ code }) { const Component = useMDXComponent(code) return (
) } ``` -------------------------------- ### MDX with Line Highlight Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/code-blocks.mdx Illustrates how to highlight specific lines (e.g., line 1 and lines 3-6) within a TypeScript code block embedded in MDX. ```ts // Highlight line 1 and line 3 to 6 ``` -------------------------------- ### Styling MDX Content with Tailwind CSS Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/components.mdx Shows how to apply Tailwind CSS classes directly to elements within MDX for styling purposes. ```mdx

This text will be red.

``` -------------------------------- ### Astro Blog Post Metadata Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/releases/2_0.md This snippet contains the frontmatter metadata for an Astro blog post, including title, date, version, description, and image details. ```astro --- title: "Introducing Nebulous 2.0!" date: "2022-07-01" versionNumber: "2.0" description: "This is the first post of my new Astro blog." image: src: "../../assets/releases/starlog-placeholder-2.jpg" alt: "The full Astro logo." --- ``` -------------------------------- ### MDX with Word Highlight Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/code-blocks.mdx Shows how to highlight a specific word (e.g., 'shadcn') within a TypeScript code block embedded in MDX. ```ts // Highlight the word shadcn. ``` -------------------------------- ### Tailwind CSS Typography Plugin Usage Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/guides/using-next-auth-next-13.mdx Demonstrates how to apply the 'prose' class from the Tailwind CSS typography plugin to an HTML article to style its content. This plugin is designed to make rich text content look good out-of-the-box. ```html

Garlic bread with cheese: What the science tells us

For years parents have espoused the health benefits of eating garlic bread with cheese to their children, with the food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for Halloween.

But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases springing up around the country.

``` -------------------------------- ### GitHub Flavored Markdown Support Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/guides/using-next-auth-next-13.mdx This section explains the integration of GitHub Flavored Markdown (GFM) using remark-gfm, enabling features like autolink literals for URLs and email addresses. ```markdown I've also added support for GitHub Flavored Mardown using `remark-gfm`. With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals. A link like www.example.com or https://example.com would automatically be converted into an `a` tag. This works for email links too: contact@example.com. ``` -------------------------------- ### MDX with Line Numbers Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/code-blocks.mdx Demonstrates enabling line numbers for a TypeScript code block embedded in MDX. ```ts // This will show line numbers. ``` -------------------------------- ### Overwriting HTML Elements in MDX Source: https://github.com/mickasmt/astro-nomy/blob/master/src/content/docs/documentation/components.mdx Demonstrates how to override default HTML elements like `
` with custom React components and styling within the MDX configuration. ```ts const components = { Callout, CustomComponent, hr: ({ ...props }) =>
, } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.