chore: edit markdown file

peoray · Jun 19, 2023 · dc328b8 · dc328b8
1 parent 9444df5
commit dc328b8
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 6 deletions.
diff --git 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
@@ -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 `<head>` tags in `src/components/MetaTags.astro`, like the favicon:
+
+```html
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+```
+
+## 🚀 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 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
+<template>
+  <Layout>
+    <h2>Latest blog posts</h2>
+    <ul>
+      <li v-for="edge in $page.allWordPressPost.edges" :key="edge.node.id">
+        {{ edge.node.title }}
+      </li>
+    </ul>
+  </Layout>
+</template>
+
+<page-query>
+query Blog {
+  allWordPressPost (limit: 5) {
+    edges {
+      node {
+        _id
+        title
+      }
+    }
+  }
+}
+</page-query>
+```
+
+
+<!-- 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!
 
 We think **Gridsome** is a missing piece to the Vue.js ecosystem. What Gatsby.js does for React.js is a game changer in how we build websites.  React.js is excellent, but we think Vue.js is more approachable for most web designers and devs getting started with JAMstack. Gridsome is the Vue.js alternative to Gatsby.
 
@@ -144,4 +277,4 @@ In the next couple of months we're going to continue to improve the docs, create
 
 We're currently just two brothers working on this, so any contribution is very welcome. We're passionate about building a faster web and make website building fun again.
 
-You can also support us by giving [a GitHub star ★](https://github.com/gridsome/gridsome/stargazers) and spread the word :)
+You can also support us by giving [a GitHub star ★](https://github.com/gridsome/gridsome/stargazers) and spread the word :) -->
diff --git 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;