add/astro-example #282
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # build output | ||
| dist/ | ||
| .output/ | ||
|
|
||
| # dependencies | ||
| node_modules/ | ||
|
|
||
| # logs | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| pnpm-debug.log* | ||
|
|
||
|
|
||
| # environment variables | ||
| .env | ||
| .env.production | ||
|
|
||
| # macOS-specific files | ||
| .DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| # Expose Astro dependencies for `pnpm` users | ||
| shamefully-hoist=true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| # Welcome to [Astro](https://astro.build) | ||
|
|
||
| [](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) | ||
|
|
||
| > 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun! | ||
|
|
||
|  | ||
|
|
||
|
|
||
| ## 🚀 Project Structure | ||
|
|
||
| Inside of your Astro project, you'll see the following folders and files: | ||
|
|
||
| ``` | ||
| / | ||
| ├── public/ | ||
| │ └── favicon.svg | ||
| ├── src/ | ||
| │ ├── components/ | ||
| │ │ └── Card.astro | ||
| │ ├── layouts/ | ||
| │ │ └── Layout.astro | ||
| │ └── pages/ | ||
| │ └── index.astro | ||
| └── package.json | ||
| ``` | ||
|
|
||
| Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. | ||
|
|
||
| There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. | ||
|
|
||
| Any static assets, like images, can be placed in the `public/` directory. | ||
|
|
||
| ## 🧞 Commands | ||
|
|
||
| All commands are run from the root of the project, from a terminal: | ||
|
|
||
| | Command | Action | | ||
| | :--------------------- | :------------------------------------------------- | | ||
| | `npm install` | Installs dependencies | | ||
| | `npm run dev` | Starts local dev server at `localhost:3000` | | ||
| | `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 preview` | | ||
| | `npm run astro --help` | Get help using the Astro CLI | | ||
|
|
||
| ## 👀 Want to learn more? | ||
|
|
||
| Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { defineConfig } from "astro/config" | ||
| import react from "@astrojs/react" | ||
| import mdx from "@astrojs/mdx" | ||
| import { remarkCodeHike } from "@code-hike/mdx" | ||
| import theme from "shiki/themes/github-dark.json" | ||
|
|
||
| // https://astro.build/config | ||
| export default defineConfig({ | ||
| markdown: { | ||
| syntaxHighlight: false, | ||
| }, | ||
| integrations: [ | ||
| react(), | ||
| mdx({ remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]] }), | ||
|
There was a problem hiding this comment. Setting I think this may be because import { annotations, Code, Slideshow, CodeSlot } from "@code-hike/mdx/dist/components.cjs.js";
export const CH = {
annotations,
Code,
Slideshow,
CodeSlot
};Astro looks at the import statements when attempting to hydrate a component, so it isn't able to resolve components that use the |
||
| ], | ||
| }) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| { | ||
| "name": "codehike-astro", | ||
| "type": "module", | ||
| "version": "0.0.1", | ||
| "private": true, | ||
| "scripts": { | ||
| "dev": "astro dev", | ||
| "start": "astro dev", | ||
| "build": "astro build", | ||
| "preview": "astro preview", | ||
| "astro": "astro" | ||
| }, | ||
| "dependencies": { | ||
| "@astrojs/mdx": "^0.11.1", | ||
| "@astrojs/react": "^1.1.3", | ||
| "@code-hike/mdx": "^0.7.4", | ||
| "astro": "^1.2.6", | ||
| "react": "^18.0.0", | ||
| "react-dom": "^18.0.0" | ||
|
Comment on lines
+18
to
+19
There was a problem hiding this comment. I was seeing The warnings went away when I downgraded |
||
| } | ||
| } | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| --- | ||
| export interface Props { | ||
| title: string; | ||
| body: string; | ||
| href: string; | ||
| } | ||
|
|
||
| const { href, title, body } = Astro.props; | ||
| --- | ||
|
|
||
| <li class="link-card"> | ||
| <a href={href}> | ||
| <h2> | ||
| {title} | ||
| <span>→</span> | ||
| </h2> | ||
| <p> | ||
| {body} | ||
| </p> | ||
| </a> | ||
| </li> | ||
| <style> | ||
| :root { | ||
| --link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%); | ||
| } | ||
|
|
||
| .link-card { | ||
| list-style: none; | ||
| display: flex; | ||
| padding: 0.15rem; | ||
| background-image: var(--link-gradient); | ||
| background-size: 400%; | ||
| border-radius: 0.5rem; | ||
| background-position: 100%; | ||
| transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); | ||
| } | ||
|
|
||
| .link-card > a { | ||
| width: 100%; | ||
| text-decoration: none; | ||
| line-height: 1.4; | ||
| padding: 1em 1.3em; | ||
| border-radius: 0.35rem; | ||
| color: var(--text-color); | ||
| background-color: white; | ||
| opacity: 0.8; | ||
| } | ||
|
|
||
| h2 { | ||
| margin: 0; | ||
| transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); | ||
| } | ||
|
|
||
| p { | ||
| margin-top: 0.75rem; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| h2 span { | ||
| display: inline-block; | ||
| transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); | ||
| } | ||
|
|
||
| .link-card:is(:hover, :focus-within) { | ||
| background-position: 0; | ||
| } | ||
|
|
||
| .link-card:is(:hover, :focus-within) h2 { | ||
| color: #4f39fa; | ||
| } | ||
|
|
||
| .link-card:is(:hover, :focus-within) h2 span { | ||
| will-change: transform; | ||
| transform: translateX(2px); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /// <reference types="astro/client" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| --- | ||
| export interface Props { | ||
| title: string; | ||
| } | ||
|
|
||
| const { title } = Astro.props; | ||
| --- | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width" /> | ||
| <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> | ||
| <meta name="generator" content={Astro.generator} /> | ||
| <title>{title}</title> | ||
| </head> | ||
| <body> | ||
| <slot /> | ||
| </body> | ||
| </html> | ||
| <style> | ||
| :root { | ||
| --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); | ||
| --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); | ||
| --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); | ||
|
|
||
| --color-text: hsl(12, 5%, 4%); | ||
| --color-bg: hsl(10, 21%, 95%); | ||
| --color-border: hsl(17, 24%, 90%); | ||
| } | ||
|
|
||
| html { | ||
| font-family: system-ui, sans-serif; | ||
| font-size: var(--font-size-base); | ||
| color: var(--color-text); | ||
| background-color: var(--color-bg); | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
|
|
||
| </style> | ||
|
|
||
| <style is:global> | ||
| h1 { | ||
| font-size: var(--font-size-xl); | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: var(--font-size-lg); | ||
| } | ||
|
|
||
| code { | ||
| font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, | ||
| Bitstream Vera Sans Mono, Courier New, monospace; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import "@code-hike/mdx/styles.css" | ||
| import { CH } from "@code-hike/mdx/components" | ||
|
There was a problem hiding this comment. Specifying an explicit import for |
||
|
|
||
| # Hello | ||
|
|
||
| Lorem ipsum dolor sit amet. | ||
|
|
||
| <CH.Code client:load> | ||
| ```python hello.py mark=1[22:30] | ||
| print("Rendered with Code Hike") | ||
| ``` | ||
| </CH.Code> | ||
|
|
||
| Lorem ipsum dolor sit amet. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| --- | ||
| import Layout from "../layouts/Layout.astro" | ||
| import Card from "../components/Card.astro" | ||
| --- | ||
|
|
||
| <Layout title="Welcome to Astro."> | ||
| <main> | ||
| <h1>Welcome to <span class="text-gradient">Astro</span></h1> | ||
| <p class="instructions"> | ||
| Check out the <code>src/pages</code> directory to get started.<br /> | ||
| <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above. | ||
| </p> | ||
| <ul role="list" class="link-card-grid"> | ||
| <Card | ||
| href="/codehike" | ||
| title="Codehike" | ||
| body="See the Codehike sample by clicking here" | ||
| /> | ||
| </ul> | ||
| </main> | ||
| </Layout> | ||
|
|
||
| <style> | ||
| :root { | ||
| --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4); | ||
| } | ||
|
|
||
| h1 { | ||
| margin: 2rem 0; | ||
| } | ||
|
|
||
| main { | ||
| margin: auto; | ||
| padding: 1em; | ||
| max-width: 60ch; | ||
| } | ||
|
|
||
| .text-gradient { | ||
| font-weight: 900; | ||
| background-image: var(--astro-gradient); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| background-size: 100% 200%; | ||
| background-position-y: 100%; | ||
| border-radius: 0.4rem; | ||
| animation: pulse 4s ease-in-out infinite; | ||
| } | ||
|
|
||
| @keyframes pulse { | ||
| 0%, | ||
| 100% { | ||
| background-position-y: 0%; | ||
| } | ||
| 50% { | ||
| background-position-y: 80%; | ||
| } | ||
| } | ||
|
|
||
| .instructions { | ||
| line-height: 1.6; | ||
| margin: 1rem 0; | ||
| background: #4f39fa; | ||
| padding: 1rem; | ||
| border-radius: 0.4rem; | ||
| color: var(--color-bg); | ||
| } | ||
|
|
||
| .instructions code { | ||
| font-size: 0.875em; | ||
| border: 0.1em solid var(--color-border); | ||
| border-radius: 4px; | ||
| padding: 0.15em 0.25em; | ||
| } | ||
|
|
||
| .link-card-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); | ||
| gap: 1rem; | ||
| padding: 0; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "extends": "astro/tsconfigs/strict" | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Astro's default syntax highlighting behavior was causing issues when
@code-hike/mdxwas used.