diff --git a/README.md b/README.md index ee59718..8a4d56c 100644 --- a/README.md +++ b/README.md @@ -1,177 +1,10 @@ -# AstroPaper 📄 +# Oblog parallels -![AstroPaper](public/astropaper-og.jpg) -[![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white)](https://www.figma.com/community/file/1356898632249991861) -![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white) -![GitHub](https://img.shields.io/github/license/satnaing/astro-paper?color=%232F3741&style=for-the-badge) -[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white&style=for-the-badge)](https://conventionalcommits.org) -[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=for-the-badge)](http://commitizen.github.io/cz-cli/) +Simplement le code source de mon blog. -AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on [my personal blog](https://satnaing.dev/blog). +Une version légèrement modifiée du thème AstroPaper pour Astro. -Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info. -## 🔥 Features -- [x] type-safe markdown -- [x] super fast performance -- [x] accessible (Keyboard/VoiceOver) -- [x] responsive (mobile ~ desktops) -- [x] SEO-friendly -- [x] light & dark mode -- [x] fuzzy search -- [x] draft posts & pagination -- [x] sitemap & rss feed -- [x] followed best practices -- [x] highly customizable -- [x] dynamic OG image generation for blog posts [#15](https://github.com/satnaing/astro-paper/pull/15) ([Blog Post](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/)) -_Note: I've tested screen-reader accessibility of AstroPaper using **VoiceOver** on Mac and **TalkBack** on Android. I couldn't test all other screen-readers out there. However, accessibility enhancements in AstroPaper should be working fine on others as well._ - -## ✅ Lighthouse Score - -

- - AstroPaper Lighthouse Score - -

- -## 🚀 Project Structure - -Inside of AstroPaper, you'll see the following folders and files: - -```bash -/ -├── public/ -│ ├── assets/ -| ├── pagefind/ # auto-generated when build -│ └── favicon.svg -│ └── astropaper-og.jpg -│ └── favicon.svg -│ └── toggle-theme.js -├── src/ -│ ├── assets/ -│ │ └── icons/ -│ │ └── images/ -│ ├── components/ -│ ├── data/ -│ │ └── blog/ -│ │ └── some-blog-posts.md -│ ├── layouts/ -│ └── pages/ -│ └── styles/ -│ └── utils/ -│ └── config.ts -│ └── constants.ts -│ └── content.config.ts -└── astro.config.ts -``` - -Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. - -Any static assets, like images, can be placed in the `public/` directory. - -All blog posts are stored in `src/data/blog` directory. - -## 📖 Documentation - -Documentation can be read in two formats\_ _markdown_ & _blog post_. - -- Configuration - [markdown](src/data/blog/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/) -- Add Posts - [markdown](src/data/blog/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/) -- Customize Color Schemes - [markdown](src/data/blog/customizing-astropaper-theme-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/) -- Predefined Color Schemes - [markdown](src/data/blog/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/) - -## 💻 Tech Stack - -**Main Framework** - [Astro](https://astro.build/) -**Type Checking** - [TypeScript](https://www.typescriptlang.org/) -**Styling** - [TailwindCSS](https://tailwindcss.com/) -**UI/UX** - [Figma Design File](https://www.figma.com/community/file/1356898632249991861) -**Static Search** - [FuseJS](https://pagefind.app/) -**Icons** - [Tablers](https://tabler-icons.io/) -**Code Formatting** - [Prettier](https://prettier.io/) -**Deployment** - [Cloudflare Pages](https://pages.cloudflare.com/) -**Illustration in About Page** - [https://freesvgillustration.com](https://freesvgillustration.com/) -**Linting** - [ESLint](https://eslint.org) - -## 👨🏻‍💻 Running Locally - -You can start using this project locally by running the following command in your desired directory: - -```bash -# pnpm -pnpm create astro@latest --template satnaing/astro-paper - -# pnpm -pnpm create astro@latest -- --template satnaing/astro-paper - -# yarn -yarn create astro --template satnaing/astro-paper -``` - -Then start the project by running the following commands: - -```bash -# install dependencies if you haven't done so in the previous step. -pnpm install - -# start running the project -pnpm run dev -``` - -As an alternative approach, if you have Docker installed, you can use Docker to run this project locally. Here's how: - -```bash -# Build the Docker image -docker build -t astropaper . - -# Run the Docker container -docker run -p 4321:80 astropaper -``` - -## Google Site Verification (optional) - -You can easily add your [Google Site Verification HTML tag](https://support.google.com/webmasters/answer/9008080#meta_tag_verification&zippy=%2Chtml-tag) in AstroPaper using an environment variable. This step is optional. If you don't add the following environment variable, the google-site-verification tag won't appear in the HTML `` section. - -```bash -# in your environment variable file (.env) -PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value -``` - -> See [this discussion](https://github.com/satnaing/astro-paper/discussions/334#discussioncomment-10139247) for adding AstroPaper to the Google Search Console. - -## 🧞 Commands - -All commands are run from the root of the project, from a terminal: - -> **_Note!_** For `Docker` commands we must have it [installed](https://docs.docker.com/engine/install/) in your machine. - -| Command | Action | -| :----------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- | -| `pnpm install` | Installs dependencies | -| `pnpm run dev` | Starts local dev server at `localhost:4321` | -| `pnpm run build` | Build your production site to `./dist/` | -| `pnpm run preview` | Preview your build locally, before deploying | -| `pnpm run format:check` | Check code format with Prettier | -| `pnpm run format` | Format codes with Prettier | -| `pnpm run sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). | -| `pnpm run lint` | Lint with ESLint | -| `docker compose up -d` | Run AstroPaper on docker, You can access with the same hostname and port informed on `dev` command. | -| `docker compose run app pnpm install` | You can run any command above into the docker container. | -| `docker build -t astropaper .` | Build Docker image for AstroPaper. | -| `docker run -p 4321:80 astropaper` | Run AstroPaper on Docker. The website will be accessible at `http://localhost:4321`. | - -> **_Warning!_** Windows PowerShell users may need to install the [concurrently package](https://www.npmjs.com/package/concurrently) if they want to [run diagnostics](https://docs.astro.build/en/reference/cli-reference/#astro-check) during development (`astro check --watch & astro dev`). For more info, see [this issue](https://github.com/satnaing/astro-paper/issues/113). - -## ✨ Feedback & Suggestions - -If you have any suggestions/feedback, you can contact me via [my email](mailto:contact@satnaing.dev). Alternatively, feel free to open an issue if you find bugs or want to request new features. - -## 📜 License - -Licensed under the MIT License, Copyright © 2025 - ---- - -Made with 🤍 by [Sat Naing](https://satnaing.dev) 👨🏻‍💻 and [contributors](https://github.com/satnaing/astro-paper/graphs/contributors). +Voilà. \ No newline at end of file diff --git a/public/assets/forrest-gump-quote.webp b/public/assets/forrest-gump-quote.webp deleted file mode 100644 index 7223f43..0000000 Binary files a/public/assets/forrest-gump-quote.webp and /dev/null differ diff --git a/public/assets/menage.jpg b/public/assets/menage.jpg new file mode 100644 index 0000000..5411be5 Binary files /dev/null and b/public/assets/menage.jpg differ diff --git a/public/astropaper-og.jpg b/public/astropaper-og.jpg deleted file mode 100644 index 3b351f9..0000000 Binary files a/public/astropaper-og.jpg and /dev/null differ diff --git a/public/dev.svg b/public/dev.svg deleted file mode 100644 index 60e4f51..0000000 --- a/public/dev.svg +++ /dev/null @@ -1,361 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/favicon.svg b/public/favicon.svg index f157bd1..1851d95 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,9 +1 @@ - - - - + \ No newline at end of file diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro index 49f3975..002b3fc 100644 --- a/src/components/Breadcrumb.astro +++ b/src/components/Breadcrumb.astro @@ -28,7 +28,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) { class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100" >
  • - Home + Accueil
    • { diff --git a/src/components/Datetime.astro b/src/components/Datetime.astro index ce44952..6990ff2 100644 --- a/src/components/Datetime.astro +++ b/src/components/Datetime.astro @@ -43,7 +43,7 @@ const time = datetime.format("hh:mm A"); // e.g., '08:30 PM' { modDatetime && modDatetime > pubDatetime ? ( - Updated: + Mis à jour: ) : ( Published: diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 134115b..b5f56d1 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -18,9 +18,9 @@ const { noMarginTop = false } = Astro.props; >
    - Copyright © {currentYear} + Copyleft 🄯 - All rights reserved. + De toute façon je sais pas ce que vous en ferez
    diff --git a/src/components/Header.astro b/src/components/Header.astro index d941a5e..dc3b178 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -79,8 +79,8 @@ const isActive = (path: string) => {
  • - - About + + À propos
    • { @@ -105,16 +105,16 @@ const isActive = (path: string) => { }
  • svg]:stroke-accent": isActive("/search") }, + { "[&>svg]:stroke-accent": isActive("/recherche") }, ]} - ariaLabel="search" - title="Search" + ariaLabel="recherche" + title="Recherche" > - Search + Recherche
    • { diff --git a/src/components/ShareLinks.astro b/src/components/ShareLinks.astro index ed12dc7..05e4015 100644 --- a/src/components/ShareLinks.astro +++ b/src/components/ShareLinks.astro @@ -8,7 +8,7 @@ const URL = Astro.url;
    - Share this post on: +
    { SHARE_LINKS.map(social => ( diff --git a/src/config.ts b/src/config.ts index d86b8a0..afde6cc 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,9 +1,9 @@ export const SITE = { - website: "https://astro-paper.pages.dev/", // replace this with your deployed domain - author: "Sat Naing", - profile: "https://satnaing.dev/", + website: "https://blog.oblic-parallels.fr/", // replace this with your deployed domain + author: "Gu://em_", + profile: "https://oblic-parallels.fr", desc: "A minimal, responsive and SEO-friendly Astro blog theme.", - title: "AstroPaper", + title: "Oblog Parallels", ogImage: "astropaper-og.jpg", lightAndDarkMode: true, postPerIndex: 4, @@ -12,11 +12,11 @@ export const SITE = { showArchives: true, showBackButton: true, // show back button in post detail editPost: { - enabled: true, - text: "Suggest Changes", - url: "https://github.com/satnaing/astro-paper/edit/main/", + enabled: false, + text: "Proposer un changement", + url: "https://openai.com", }, dynamicOgImage: true, - lang: "en", // html lang code. Set this empty and default will be "en" - timezone: "Asia/Bangkok", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones + lang: "fr", // html lang code. Set this empty and default will be "en" + timezone: "Europe/Paris", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones } as const; diff --git a/src/constants.ts b/src/constants.ts index dd42e77..cbd7aed 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,75 +1,75 @@ -import IconMail from "@/assets/icons/IconMail.svg"; -import IconGitHub from "@/assets/icons/IconGitHub.svg"; -import IconBrandX from "@/assets/icons/IconBrandX.svg"; -import IconLinkedin from "@/assets/icons/IconLinkedin.svg"; -import IconWhatsapp from "@/assets/icons/IconWhatsapp.svg"; -import IconFacebook from "@/assets/icons/IconFacebook.svg"; -import IconTelegram from "@/assets/icons/IconTelegram.svg"; -import IconPinterest from "@/assets/icons/IconPinterest.svg"; -import { SITE } from "@/config"; +// import IconMail from "@/assets/icons/IconMail.svg"; +// import IconGitHub from "@/assets/icons/IconGitHub.svg"; +// import IconBrandX from "@/assets/icons/IconBrandX.svg"; +// import IconLinkedin from "@/assets/icons/IconLinkedin.svg"; +// import IconWhatsapp from "@/assets/icons/IconWhatsapp.svg"; +// import IconFacebook from "@/assets/icons/IconFacebook.svg"; +// import IconTelegram from "@/assets/icons/IconTelegram.svg"; +// import IconPinterest from "@/assets/icons/IconPinterest.svg"; +// import { SITE } from "@/config"; export const SOCIALS = [ - { - name: "Github", - href: "https://github.com/satnaing/astro-paper", - linkTitle: ` ${SITE.title} on Github`, - icon: IconGitHub, - }, - { - name: "X", - href: "https://x.com/username", - linkTitle: `${SITE.title} on X`, - icon: IconBrandX, - }, - { - name: "LinkedIn", - href: "https://www.linkedin.com/in/username/", - linkTitle: `${SITE.title} on LinkedIn`, - icon: IconLinkedin, - }, - { - name: "Mail", - href: "mailto:yourmail@gmail.com", - linkTitle: `Send an email to ${SITE.title}`, - icon: IconMail, - }, + // { + // name: "Github", + // href: "https://github.com/satnaing/astro-paper", + // linkTitle: ` ${SITE.title} on Github`, + // icon: IconGitHub, + // }, + // { + // name: "X", + // href: "https://x.com/username", + // linkTitle: `${SITE.title} on X`, + // icon: IconBrandX, + // }, + // { + // name: "LinkedIn", + // href: "https://www.linkedin.com/in/username/", + // linkTitle: `${SITE.title} on LinkedIn`, + // icon: IconLinkedin, + // }, + // { + // name: "Mail", + // href: "mailto:yourmail@gmail.com", + // linkTitle: `Send an email to ${SITE.title}`, + // icon: IconMail, + // }, ] as const; export const SHARE_LINKS = [ - { - name: "WhatsApp", - href: "https://wa.me/?text=", - linkTitle: `Share this post via WhatsApp`, - icon: IconWhatsapp, - }, - { - name: "Facebook", - href: "https://www.facebook.com/sharer.php?u=", - linkTitle: `Share this post on Facebook`, - icon: IconFacebook, - }, - { - name: "X", - href: "https://x.com/intent/post?url=", - linkTitle: `Share this post on X`, - icon: IconBrandX, - }, - { - name: "Telegram", - href: "https://t.me/share/url?url=", - linkTitle: `Share this post via Telegram`, - icon: IconTelegram, - }, - { - name: "Pinterest", - href: "https://pinterest.com/pin/create/button/?url=", - linkTitle: `Share this post on Pinterest`, - icon: IconPinterest, - }, - { - name: "Mail", - href: "mailto:?subject=See%20this%20post&body=", - linkTitle: `Share this post via email`, - icon: IconMail, - }, + // { + // name: "WhatsApp", + // href: "https://wa.me/?text=", + // linkTitle: `Share this post via WhatsApp`, + // icon: IconWhatsapp, + // }, + // { + // name: "Facebook", + // href: "https://www.facebook.com/sharer.php?u=", + // linkTitle: `Share this post on Facebook`, + // icon: IconFacebook, + // }, + // { + // name: "X", + // href: "https://x.com/intent/post?url=", + // linkTitle: `Share this post on X`, + // icon: IconBrandX, + // }, + // { + // name: "Telegram", + // href: "https://t.me/share/url?url=", + // linkTitle: `Share this post via Telegram`, + // icon: IconTelegram, + // }, + // { + // name: "Pinterest", + // href: "https://pinterest.com/pin/create/button/?url=", + // linkTitle: `Share this post on Pinterest`, + // icon: IconPinterest, + // }, + // { + // name: "Mail", + // href: "mailto:?subject=See%20this%20post&body=", + // linkTitle: `Share this post via email`, + // icon: IconMail, + // }, ] as const; diff --git a/src/data/blog/_releases/astro-paper-2.md b/src/data/blog/_releases/astro-paper-2.md deleted file mode 100644 index 092606b..0000000 --- a/src/data/blog/_releases/astro-paper-2.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -author: Sat Naing -pubDatetime: 2023-01-30T15:57:52.737Z -title: AstroPaper 2.0 -slug: astro-paper-2 -featured: false -ogImage: https://user-images.githubusercontent.com/53733092/215771435-25408246-2309-4f8b-a781-1f3d93bdf0ec.png -tags: - - release -description: AstroPaper with the enhancements of Astro v2. Type-safe markdown contents, bug fixes and better dev experience etc. ---- - -Astro 2.0 has been released with some cool features, breaking changes, DX improvements, better error overlay and so on. AstroPaper takes advantage of those cool features, especially Content Collections API. - - - -![Introducing AstroPaper 2.0](https://user-images.githubusercontent.com/53733092/215771435-25408246-2309-4f8b-a781-1f3d93bdf0ec.png) - -## Table of contents - -## Features & Changes - -### Type-safe Frontmatters and Redefined Blog Schema - -Frontmatter of AstroPaper 2.0 markdown contents are now type-safe thanks to Astro’s Content Collections. Blog schema is defined inside the `src/content/_schemas.ts` file. - -### New Home for Blog contents - -All the blog posts were moved from `src/contents` to `src/content/blog` directory. - -### New Fetch API - -Contents are now fetched with `getCollection` function. No relative path to the content needs to be specified anymore. - -```ts -// old content fetching method -- const postImportResult = import.meta.glob>( - "../contents/**/**/*.md",); - -// new content fetching method -+ const postImportResult = await getCollection("blog"); -``` - -### Modified Search Logic for better Search Result - -In the older version of AstroPaper, when someone search some article, the search criteria keys that will be searched are `title`, `description` and `headings` (heading means all the headings h1 ~ h6 of the blog post). In AstroPaper v2, only `title` and `description` will be searched as the user types. - -### Renamed Frontmatter Properties - -The following frontmatter properties are renamed. - -| Old Names | New Names | -| --------- | ----------- | -| datetime | pubDatetime | -| slug | postSlug | - -### Default Tag for blog post - -If a blog post doesn't have any tag (in other words, frontmatter property `tags` is not specified), the default tag `others` will be used for that blog post. But you can set the default tag in the `/src/content/_schemas.ts` file. - -```ts -// src/contents/_schemas.ts -export const blogSchema = z.object({ - // --- - // replace "others" with whatever you want - tags: z.array(z.string()).default(["others"]), - ogImage: z.string().optional(), - description: z.string(), -}); -``` - -### New Predefined Dark Color Scheme - -AstroPaper v2 has a new dark color scheme (high contrast & low contrast) which is based on Astro's dark logo. Check out [this link](https://astro-paper.pages.dev/posts/predefined-color-schemes#astro-dark) for more info. - -![New Predefined Dark Color Scheme](https://user-images.githubusercontent.com/53733092/215680520-59427bb0-f4cb-48c0-bccc-f182a428d72d.svg) - -### Automatic Class Sorting - -AstroPaper 2.0 includes automatic class sorting with [TailwindCSS Prettier plugin](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) - -### Updated Docs & README - -All the [#docs](https://astro-paper.pages.dev/tags/docs/) blog posts and [README](https://github.com/satnaing/astro-paper#readme) are updated for this AstroPaper v2. - -## Bug Fixes - -- fix broken tags in the Blog Post page -- in a tag page, the last part of the breadcrumb is now updated to lower-case for consistency -- exclude draft posts in a tag page -- fix 'onChange value not updating issue' after a page reload diff --git a/src/data/blog/_releases/astro-paper-3.md b/src/data/blog/_releases/astro-paper-3.md deleted file mode 100644 index 0bb2f1c..0000000 --- a/src/data/blog/_releases/astro-paper-3.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -author: Sat Naing -pubDatetime: 2023-09-25T10:25:54.547Z -title: AstroPaper 3.0 -slug: astro-paper-v3 -featured: false -ogImage: https://github.com/satnaing/astro-paper/assets/53733092/1ef0cf03-8137-4d67-ac81-84a032119e3a -tags: - - release -description: "AstroPaper Version 3: Elevating Your Web Experience with Astro v3 and Seamless View Transitions" ---- - -We're excited to announce the release of AstroPaper v3, packed with new features, enhancements, and bug fixes to elevate your web development experience. Let's dive into the highlights of this release: - -![AstroPaper v3](@/assets/images/AstroPaper-v3.png) - -## Table of contents - -## Features & Changes - -### Astro v3 Integration - - - -AstroPaper now fully supports [Astro v3](https://astro.build/blog/astro-3/), offering improved performance and rendering speed. - -Besides, we've added support for Astro's [ViewTransitions API](https://docs.astro.build/en/guides/view-transitions/), allowing you to create captivating and dynamic transitions between views. - -In the "Recent Section", only non-featured posts will be displayed to avoid duplications and better support for ViewTransitions API. - -### Update OG Image Generation Logic - -![Example OG Image](https://user-images.githubusercontent.com/40914272/269252964-a0dc6735-80f7-41ed-8e74-4d4d70f96891.png) - -We've updated the logic for automatic OG image generation, making it even more reliable and efficient. Besides, it now supports special characters in post titles, ensuring accurate, flexible and eye-catching social media previews. - -`SITE.ogImage` is now optional. If it is not specified, AstroPaper will automatically generate an OG image using `SITE.title`, `SITE.desc` and `SITE.website` - -### Theme meta tag - -The theme-color meta tag has been added to dynamically adapt to theme switches, ensuring a seamless user experience. - -> Notice the difference at the top - -**_AstroPaper v2 theme switch_** - - - -**_AstroPaper v3 theme switch_** - - - -## Other Changes - -### Astro Prettier Plugin - -Astro Prettier Plugin is installed out-of-the-box in order to keep the project tidy and organized. - -### Minor Style Changes - -The single-line code block wrapping issue has been solved, making your code snippets look pristine. - -Update nav style CSS to allow adding more nav links to the navigation. - -## Upgrade to AstroPaper v3 - -> This section is only for those who want to upgrade AstroPaper v3 from the older versions. - -This section will help you migrate from AstroPaper v2 to AstroPaper v3. - -Before reading the rest of the section, you might also want to check [this article](https://astro-paper.pages.dev/posts/how-to-update-dependencies/) for upgrading dependencies and AstroPaper. - -## Option 1: Fresh Restart (recommended) - -In this release, a lot of changes have been made\_ replacing old Astro APIs with newer APIs, bug fixes, new features etc. Thus, if you are someone who didn't make customization very much, you should follow this approach. - -**_Step 1: Keep all your updated files_** - -It's important to keep all the files which have been already updated. These files include - -- `/src/config.ts` (didn't touch in v3) -- `/src/styles/base.css` (minor changes in v3; mentioned below) -- `/src/assets/` (didn't touch in v3) -- `/public/assets/` (didn't touch in v3) -- `/content/blog/` (it's your blog content directory 🤷🏻‍♂️) -- Any other customizations you've made. - -```css -/* file: /src/styles/base.css */ -@layer base { - /* Other Codes */ - ::-webkit-scrollbar-thumb:hover { - @apply bg-skin-card-muted; - } - - /* Old code - code { - white-space: pre; - overflow: scroll; - } - */ - - /* New code */ - code, - blockquote { - word-wrap: break-word; - } - pre > code { - white-space: pre; - } -} - -@layer components { - /* other codes */ -} -``` - -**_Step 1: Replace everything else with AstroPaper v3_** - -In this step, replace everything\_ except above files/directories (plus your customized files/directories)\_ with AstroPaper v3. - -**_Step 3: Schema Updates_** - -Keep in mind that `/src/content/_schemas.ts` has been replaced with `/src/content/config.ts`. - -Besides, there is no longer `BlogFrontmatter` type exported from `/src/content/config.ts`. - -Therefore, all the `BlogFrontmatter` type inside files need to be updated with `CollectionEntry<"blog">["data"]`. - -For example: `src/components/Card.tsx` - -```ts -// AstroPaper v2 -import type { BlogFrontmatter } from "@content/_schemas"; - -export interface Props { - href?: string; - frontmatter: BlogFrontmatter; - secHeading?: boolean; -} -``` - -```ts -// AstroPaper v3 -import type { CollectionEntry } from "astro:content"; - -export interface Props { - href?: string; - frontmatter: CollectionEntry<"blog">["data"]; - secHeading?: boolean; -} -``` - -## Option 2: Upgrade using Git - -This approach is not recommended for most users. You should do the "Option 1" if you can. Only do this if you know how to resolve merge conflicts and you know what you're doing. - -Actually, I've already written a blog post for this case and you can check out [here](https://astro-paper.pages.dev/posts/how-to-update-dependencies/#updating-astropaper-using-git). - -## Outro - -Ready to explore the exciting new features and improvements in AstroPaper v3? Start [using AstroPaper](https://github.com/satnaing/astro-paper) now. - -For other bug fixes and integration updates, check out the [release notes](https://github.com/satnaing/astro-paper/releases/tag/v3.0.0) to learn more. - -If you encounter any bugs or face difficulties during the upgrade process, please feel free to open an issue or start a discussion on [GitHub](https://github.com/satnaing/astro-paper). diff --git a/src/data/blog/_releases/astro-paper-4.md b/src/data/blog/_releases/astro-paper-4.md deleted file mode 100644 index 89d40ef..0000000 --- a/src/data/blog/_releases/astro-paper-4.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -author: Sat Naing -pubDatetime: 2024-01-04T09:30:41.816Z -title: AstroPaper 4.0 -slug: "astro-paper-v4" -featured: false -ogImage: ../../../assets/images/AstroPaper-v4.png -tags: - - release -description: "AstroPaper v4: ensuring a smoother and more feature-rich blogging experience." ---- - -Hello everyone! Wishing you a happy New Year 🎉 and all the best for 2024! We're excited to announce the release of AstroPaper v4, a significant update that introduces a range of new features, improvements, and bug fixes to elevate your blogging experience. A big thank you to all the contributors for their valuable input and efforts in making version 4 possible! - -![AstroPaper v4](@/assets/images/AstroPaper-v4.png) - -## Table of contents - -## Major Changes - -### Upgrade to Astro v4 [#202](https://github.com/satnaing/astro-paper/pull/202) - -AstroPaper now leverages the power and capabilities of Astro v4. However, it’s a subtle upgrade and won’t break most Astro users. - -![Astro v4](https://astro.build/_astro/header-astro-4.YunweN9V_OmV0l.webp) - -### Replace `postSlug` with Astro Content `slug` [#197](https://github.com/satnaing/astro-paper/pull/197) - -The `postSlug` in the blog content schema is no longer available in AstroPaper v4. Initially Astro doesn't have a `slug` mechanism and thus we have to figure it out on our own. Since Astro v3, it supports content collection and slug features. Now, we believe it's time to adopt Astro's out-of-the-box `slug` feature. - -**_file: src/content/blog/astro-paper-4.md_** - -```bash ---- -author: Sat Naing -pubDatetime: 2024-01-01T04:35:33.428Z -title: AstroPaper 4.0 -slug: "astro-paper-v4" # if slug is not specified, it will be 'astro-paper-4' (file name). -# slug: "" ❌ cannot be an empty string ---- -``` - -The behavior of the `slug` is slightly different now. In the previous versions of AstroPaper, if the `postSlug` is not specified in a blog post (markdown file), the title of that blog post would be slugified and used as the `slug`. However, in AstroPaper v4, if the `slug` field is not specified, the markdown file name will be used as the `slug`. One thing to keep in mind is that the `slug` field can be omitted, but it cannot be an empty string (slug: "" ❌). - -If you're upgrading AstroPaper from v3 to v4, make sure to replace `postSlug` in your `src/content/blog/*.md` files with `slug`. - -## New Features - -### Add code-snippets for content creation [#206](https://github.com/satnaing/astro-paper/pull/206) - -AstroPaper now includes VSCode snippets for new blog posts, eliminating the need for manual copy/pasting of the frontmatter and content structure (table of contents, heading, excerpt, etc.). - -Read more about VSCode Snippets [here](https://code.visualstudio.com/docs/editor/userdefinedsnippets#:~:text=In%20Visual%20Studio%20Code%2C%20snippets,Snippet%20in%20the%20Command%20Palette). - - - -### Add Modified Datetime in Blog Posts [#195](https://github.com/satnaing/astro-paper/pull/195) - -Keep readers informed about the latest updates by displaying the modified datetime in blog posts. This not only instills user trust in the freshness of the articles but also contributes to improved SEO for the blog. - -![Last Modified Date feature in AstroPaper](https://github.com/satnaing/astro-paper/assets/53733092/cc89585e-148e-444d-9da1-0d496e867175) - -You can add a `modDatetime` to your blog post if you've made modifications. Now, the sorting behavior of the posts is slightly different. All posts are sorted by both `pubDatetime` and `modDatetime`. If a post has both a `pubDatetime` and `modDatetime`, its sorting position will be determined by the `modDatetime`. If not, only `pubDatetime` will be considered to determine the post's sorting order. - -### Implement Back-to-Top Button [#188](https://github.com/satnaing/astro-paper/pull/188) - -Enhance user navigation on your blog detail post with the newly implemented back-to-top button. - -![Back to top button in AstroPaper](https://github.com/satnaing/astro-paper/assets/53733092/79854957-7877-4f19-936e-ad994b772074) - -### Add Pagination in Tag Posts [#201](https://github.com/satnaing/astro-paper/pull/201) - -Improve content organization and navigation with the addition of pagination in tag posts, making it easier for users to explore related content. This ensures that if a tag has many posts, readers won't be overwhelmed by all the tag-related posts. - - - -### Dynamically Generate robots.txt [#130](https://github.com/satnaing/astro-paper/pull/130) - -AstroPaper v4 now dynamically generates the robots.txt file, giving you more control over search engine indexing and web crawling. Besides, sitemap URL will also be added inside `robot.txt` file. - -### Add Docker-Compose File [#174](https://github.com/satnaing/astro-paper/pull/174) - -Managing your AstroPaper environment is now easier than ever with the addition of a Docker-Compose file, simplifying deployment and configuration. - -## Refactoring & Bug Fixes - -### Replace Slugified Title with Unslugified Tag Name [#198](https://github.com/satnaing/astro-paper/pull/198) - -To improve clarity, user experience and SEO, titles (`Tag: some-tag`) in tag page are no longer slugified (`Tag: Some Tag`). - -![Unslugified Tag Names](https://github.com/satnaing/astro-paper/assets/53733092/2fe90d6e-ec52-467b-9c44-95009b3ae0b7) - -### Implement 100svh for Min-Height ([79d569d](https://github.com/satnaing/astro-paper/commit/79d569d053036f2113519f41b0d257523d035b76)) - -We've updated the min-height on the body to use 100svh, offering a better UX for mobile users. - -### Update Site URL as Single Source of Truth [#143](https://github.com/satnaing/astro-paper/pull/143) - -The site URL is now a single source of truth, streamlining configuration and avoiding inconsistencies. Read more at this [PR](https://github.com/satnaing/astro-paper/pull/143) and its related issue(s). - -### Solve Invisible Text Code Block Issue in Light Mode [#163](https://github.com/satnaing/astro-paper/pull/163) - -We've fixed the invisible text code block issue in light mode. - -### Decode Unicode Tag Characters in Breadcrumb [#175](https://github.com/satnaing/astro-paper/pull/175) - -The last part of Tag in the breadcrumb is now decoded, making non-English Unicode characters display better. - -### Update LOCALE Config to Cover Overall Locales ([cd02b04](https://github.com/satnaing/astro-paper/commit/cd02b047d2b5e3b4a2940c0ff30568cdebcec0b8)) - -The LOCALE configuration has been updated to cover a broader range of locales, catering to a more diverse audience. - -## Outtro - -We believe these updates will significantly elevate your AstroPaper experience. Thank you to everyone who contributed, solved issues, and gave stars to AstroPaper. We look forward to seeing the amazing content you create with AstroPaper v4! - -Happy Blogging! - -[Sat Naing](https://satnaing.dev)
    -Creator of AstroPaper diff --git a/src/data/blog/_releases/astro-paper-5.md b/src/data/blog/_releases/astro-paper-5.md deleted file mode 100644 index 89ec3df..0000000 --- a/src/data/blog/_releases/astro-paper-5.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -pubDatetime: 2025-03-08T08:18:19.693Z -title: AstroPaper 5.0 -slug: astro-paper-v5 -featured: true -ogImage: ../../../assets/images/AstroPaper-v5.png -tags: - - release -description: "AstroPaper v5: keep the clean look, updates under the hood." ---- - -At last, the long-awaited AstroPaper v5 is finally here. AstroPaper v5 keeps the same minimal & clean look, but comes with significant updates under the hood. - -![AstroPaper v5](@/assets/images/AstroPaper-v5.png) - -## Table of contents - -## Major Changes - -### Upgrade to Astro v5 [#455](https://github.com/satnaing/astro-paper/pull/455) - -AstroPaper now comes with Astro v5, bringing all the new features and improvements that come with it. - -### Tailwind v4 - -AstroPaper has been upgraded to Tailwind v4, which includes many style changes under the hood. The `tailwind.config.js` file has been removed, and now all the configuration is located within the `src/styles/global.css` file. Typography-related styles have been extracted and moved to `src/styles/typography.css`. - -Due to the new behavior in TailwindCSS v4, styles inside `