From c6153cf59fdb24a88205f0193c8b61660ac6448e Mon Sep 17 00:00:00 2001 From: Daveed Date: Tue, 29 Oct 2024 23:02:14 -0400 Subject: [PATCH] Removed old sample blogposts --- src/content/blog/adding-new-post.md | 170 ------------------------ src/content/blog/astro-paper-2.md | 91 ------------- src/content/blog/astro-paper-3.md | 173 ------------------------- src/content/blog/astro-paper-4.md | 124 ------------------ src/content/blog/example-draft-post.md | 21 --- 5 files changed, 579 deletions(-) delete mode 100644 src/content/blog/adding-new-post.md delete mode 100644 src/content/blog/astro-paper-2.md delete mode 100644 src/content/blog/astro-paper-3.md delete mode 100644 src/content/blog/astro-paper-4.md delete mode 100644 src/content/blog/example-draft-post.md diff --git a/src/content/blog/adding-new-post.md b/src/content/blog/adding-new-post.md deleted file mode 100644 index 449896d..0000000 --- a/src/content/blog/adding-new-post.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -author: Sat Naing -pubDatetime: 2022-09-23T15:22:00Z -modDatetime: 2023-12-21T09:12:47.400Z -title: Adding new posts in AstroPaper theme -slug: adding-new-posts-in-astropaper-theme -featured: true -draft: false -tags: - - docs -description: - Some rules & recommendations for creating or adding new posts using AstroPaper - theme. ---- - -Here are some rules/recommendations, tips & ticks for creating new posts in AstroPaper blog theme. - -## Table of contents - -## Frontmatter - -Frontmatter is the main place to store some important information about the blog post (article). Frontmatter lies at the top of the article and is written in YAML format. Read more about frontmatter and its usage in [astro documentation](https://docs.astro.build/en/guides/markdown-content/). - -Here is the list of frontmatter property for each post. - -| Property | Description | Remark | -| ------------------ | ------------------------------------------------------------------------------------------- | --------------------------------------------- | -| **_title_** | Title of the post. (h1) | required\* | -| **_description_** | Description of the post. Used in post excerpt and site description of the post. | required\* | -| **_pubDatetime_** | Published datetime in ISO 8601 format. | required\* | -| **_modDatetime_** | Modified datetime in ISO 8601 format. (only add this property when a blog post is modified) | optional | -| **_author_** | Author of the post. | default = SITE.author | -| **_slug_** | Slug for the post. This field is optional but cannot be an empty string. (slug: ""❌) | default = slugified file name | -| **_featured_** | Whether or not display this post in featured section of home page | default = false | -| **_draft_** | Mark this post 'unpublished'. | default = false | -| **_tags_** | Related keywords for this post. Written in array yaml format. | default = others | -| **_ogImage_** | OG image of the post. Useful for social media sharing and SEO. | default = SITE.ogImage or generated OG image | -| **_canonicalURL_** | Canonical URL (absolute), in case the article already exists on other source. | default = `Astro.site` + `Astro.url.pathname` | - -> Tip! You can get ISO 8601 datetime by running `new Date().toISOString()` in the console. Make sure you remove quotes though. - -Only `title`, `description` and `pubDatetime` fields in frontmatter must be specified. - -Title and description (excerpt) are important for search engine optimization (SEO) and thus AstroPaper encourages to include these in blog posts. - -`slug` is the unique identifier of the url. Thus, `slug` must be unique and different from other posts. The whitespace of `slug` should to be separated with `-` or `_` but `-` is recommended. Slug is automatically generated using the blog post file name. However, you can define your `slug` as a frontmatter in your blog post. - -For example, if the blog file name is `adding-new-post.md` and you don't specify the slug in your frontmatter, Astro will automatically create a slug for the blog post using the file name. Thus, the slug will be `adding-new-post`. But if you specify the `slug` in the frontmatter, this will override the default slug. You can read more about this in [Astro Docs](https://docs.astro.build/en/guides/content-collections/#defining-custom-slugs). - -If you omit `tags` in a blog post (in other words, if no tag is specified), the default tag `others` will be used as a tag for that post. You can set the default tag in the `/src/content/config.ts` file. - -```ts -// src/content/config.ts -export const blogSchema = z.object({ - // --- - draft: z.boolean().optional(), - tags: z.array(z.string()).default(["others"]), // replace "others" with whatever you want - // --- -}); -``` - -### Sample Frontmatter - -Here is the sample frontmatter for a post. - -```yaml -# src/content/blog/sample-post.md ---- -title: The title of the post -author: your name -pubDatetime: 2022-09-21T05:17:19Z -slug: the-title-of-the-post -featured: true -draft: false -tags: - - some - - example - - tags -ogImage: "" -description: This is the example description of the example post. -canonicalURL: https://example.org/my-article-was-already-posted-here ---- -``` - -## Adding table of contents - -By default, a post (article) does not include any table of contents (toc). To include toc, you have to specify it in a specific way. - -Write `Table of contents` in h2 format (## in markdown) and place it where you want it to be appeared on the post. - -For instance, if you want to place your table of contents just under the intro paragraph (like I usually do), you can do that in the following way. - -```md ---- -# some frontmatter ---- - -Here are some recommendations, tips & ticks for creating new posts in AstroPaper blog theme. - -## Table of contents - - -``` - -## Headings - -There's one thing to note about headings. The AstroPaper blog posts use title (title in the frontmatter) as the main heading of the post. Therefore, the rest of the heading in the post should be using h2 \~ h6. - -This rule is not mandatory, but highly recommended for visual, accessibility and SEO purposes. - -## Storing Images for Blog Content - -Here are two methods for storing images and displaying them inside a markdown file. - -> Note! If it's a requirement to style optimized images in markdown you should [use MDX](https://docs.astro.build/en/guides/images/#images-in-mdx-files). - -### Inside `src/assets/` directory (recommended) - -You can store images inside `src/assets/` directory. These images will be automatically optimized by Astro through [Image Service API](https://docs.astro.build/en/reference/image-service-reference/). - -You can use relative path or alias path (`@assets/`) to serve these images. - -Example: Suppose you want to display `example.jpg` whose path is `/src/assets/images/example.jpg`. - -```md -![something](@assets/images/example.jpg) - - - -![something](../../assets/images/example.jpg) - - -something - -``` - -> Technically, you can store images inside any directory under `src`. In here, `src/assets` is just a recommendation. - -### Inside `public` directory - -You can store images inside the `public` directory. Keep in mind that images stored in the `public` directory remain untouched by Astro, meaning they will be unoptimized and you need to handle image optimization by yourself. - -For these images, you should use an absolute path; and these images can be displayed using [markdown annotation](https://www.markdownguide.org/basic-syntax/#images-1) or [HTML img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img). - -Example: Assume `example.jpg` is located at `/public/assets/images/example.jpg`. - -```md -![something](/assets/images/example.jpg) - - - -something -``` - -## Bonus - -### Image compression - -When you put images in the blog post (especially for images under `public` directory), it is recommended that the image is compressed. This will affect the overall performance of the website. - -My recommendation for image compression sites. - -- [TinyPng](https://tinypng.com/) -- [TinyJPG](https://tinyjpg.com/) - -### OG Image - -The default OG image will be placed if a post does not specify the OG image. Though not required, OG image related to the post should be specify in the frontmatter. The recommended size for OG image is **_1200 X 640_** px. - -> Since AstroPaper v1.4.0, OG images will be generated automatically if not specified. Check out [the announcement](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/). diff --git a/src/content/blog/astro-paper-2.md b/src/content/blog/astro-paper-2.md deleted file mode 100644 index 092606b..0000000 --- a/src/content/blog/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/content/blog/astro-paper-3.md b/src/content/blog/astro-paper-3.md deleted file mode 100644 index b5ea073..0000000 --- a/src/content/blog/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/content/blog/astro-paper-4.md b/src/content/blog/astro-paper-4.md deleted file mode 100644 index a3ebd76..0000000 --- a/src/content/blog/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: true -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.GLp8HjfV.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/content/blog/example-draft-post.md b/src/content/blog/example-draft-post.md deleted file mode 100644 index 625a2bc..0000000 --- a/src/content/blog/example-draft-post.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Example Draft Post -author: Sat Naing -pubDatetime: 2022-06-06T04:06:31Z -slug: example-draft-post -featured: false -draft: true -tags: - - TypeScript - - Astro -description: - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel - fringilla est ---- - -Users cannot see this post because it is in draft. - -## Motivation - -rec 1