From dc328b8ea9af940bb152fcf2dc3a49572f5bff8e Mon Sep 17 00:00:00 2001 From: peoray Date: Mon, 19 Jun 2023 16:56:05 +0100 Subject: [PATCH] chore: edit markdown file --- astro.config.mjs | 11 ++ src/content/blog/astro-blog-starter.md | 139 ++++++++++++++++++++++++- src/styles/code.css | 7 +- 3 files changed, 151 insertions(+), 6 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index de73ce8..cdb7442 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -9,6 +9,17 @@ export default defineConfig({ site: SITE_URL, markdown: { remarkPlugins: [remarkReadingTime], + shikiConfig: { + // Choose from Shiki's built-in themes (or add your own) + // https://github.com/shikijs/shiki/blob/main/docs/themes.md + theme: 'dracula', + // Add custom languages + // Note: Shiki has countless langs built-in, including .astro! + // https://github.com/shikijs/shiki/blob/main/docs/languages.md + langs: [], + // Enable word wrap to prevent horizontal scrolling + wrap: true, + }, }, integrations: [sitemap(), image(), mdx()], experimental: { diff --git a/src/content/blog/astro-blog-starter.md b/src/content/blog/astro-blog-starter.md index 6fb941e..f76e325 100644 --- a/src/content/blog/astro-blog-starter.md +++ b/src/content/blog/astro-blog-starter.md @@ -1,5 +1,5 @@ --- -title: Astro Blog Starter 🎉 +title: Astro Blog Starter description: "A simple, hackable & minimalistic starter for Astro that uses Markdown for content!" pubDate: 2021-02-07 draft: false @@ -9,7 +9,140 @@ canonical_url: false --- -A new static site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast! +# Astro Starter Blog + +> A simple, hackable & minimalistic starter for Astro that uses Markdown for content. + +## 🔥 Features +- ✅ Beautiful and simple design. +- ✅ Easy configuration +- ✅ Markdown & MDX support +- ✅ Tags support. +- ✅ Dark / Light toggle. +- ✅ Minimal styling (make it your own!) +- ✅ 100/100 Lighthouse performance +- ✅ SEO-friendly with canonical URLs and OpenGraph data +- ✅ Uses [`astro:assets`](https://docs.astro.build/en/guides/assets/) for optimized images +- ✅ Sitemap support +- ✅ RSS Feed support +- ✅ Blog drafts + +## 🌍 Demo URL + +https://astro-starter-blog.netlify.app + + +## 👨🏾‍💻 Getting started + +``` +npm create astro@latest -- --template peoray/astro-starter-blog +``` + +### 👨🏾‍💻 Configuration + +Edit the values in `src/consts.ts` to match your brand or company: + +```ts + +export const SITE_TITLE = "Astro Blog Starter"; +export const SITE_URL = "https://astro-starter-blog.netlify.app/"; +export const SITE_DESCRIPTION = "Welcome to my personal website!"; +export const PAGE_DESCRIPTION = "A simple, hackable & minimalistic starter for Astro that uses Markdown for content" +export const TWITTER = "https://twitter.com/peoray_" +export const GITHUB = "https://github.com/peoray/astro-starter-blog" +export const AUTHOR = "Emmanuel Raymond" +export const IMAGE = "/images/photo.png" +export const IMAGE_ALT = "Photo of an avatar" + +``` + +Change any lines or add more in the `` tags in `src/components/MetaTags.astro`, like the favicon: + +```html + +``` + +## 🚀 Project Structure + + + +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 check` | +| `npm run astro -- --help` | Get help using the Astro CLI | + +## 👀 Want to learn more? + +Feel free to check the [Astro documentation](https://docs.astro.build) or jump into the [Discord server](https://astro.build/chat). + +## 💙 Acknowledgement + +This theme is a port of the popular [Gridsome Starter Blog](https://github.com/gridsome/gridsome-starter-blog) made by the creator of Gridsome, Tommy Vedvik. + +## ✨ Contributing + +Feel free to open an issue if you find bugs or want to request new features. + +## 📜 License + +Licensed under the [MIT License](https://opensource.org/license/mit/), Copyright © Emmanuel Raymond 2023 + +```html + + + +query Blog { + allWordPressPost (limit: 5) { + edges { + node { + _id + title + } + } + } +} + +``` + + + diff --git a/src/styles/code.css b/src/styles/code.css index 659bc02..ed6d363 100644 --- a/src/styles/code.css +++ b/src/styles/code.css @@ -7,8 +7,9 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc */ pre { - padding: calc(var(--space) / 2); - /* font-size: 0.85em; */ + /* padding: calc(var(--space) / 2); */ + padding: 1rem; + font-size: 0.8em; background-color: var(--bg-code); margin-bottom: 2em; border: 1px solid var(--border-color); @@ -18,11 +19,11 @@ pre { pre.astro-code code { background-color: inherit !important; border: none !important; + all: unset; } code { background-color: var(--bg-code); - /* background-color: inherit; */ border: 1px solid var(--border-color); font-size: 0.85em; padding: 0.2em 0.5em;