Merge pull request #97 from prototypa/astro2

Update to astro@2.0.0-beta.4

README.md

@@ -40,7 +40,6 @@
   - [Commands](#commands)
   - [Configuration](#configuration)
   - [Deploy](#deploy)
-- [Roadmap](#roadmap)
 - [Frequently Asked Questions](#frequently-asked-questions)
 - [Related Projects](#related-projects)
 - [Contributing](#contributing)
@@ -229,24 +228,6 @@ Clone this repository on own GitHub account and deploy to Vercel:
 
 <br>
 
-## Roadmap
-
-### Base
-
-- [ ] Improve blog design (More generic design that adapts to more needs).
-- [ ] Create component or utilities for related posts.
-- [ ] Add more _shortcodes_ or _embed_ functions to posts in Markdown: (eg Video, Tweet...).
-- [ ] Add more Tailwind components useful for most scenarios (Features, Contact, Call to Actions, Content, FAQs...)
-- [ ] Add commonly used example pages (Ex: About, Terms, Profile, Services...).
-- [ ] Create detailed documentation with best practices and redesign tips.
-
-### Advanced
-
-- [ ] Create external library or place with useful Tailwind components.
-- [ ] Create examples of AstroWind in CodeSanbox or a similar platform that can be easily synchronized with new updates. (Redesign, Integration with React or Svelte components, Use of Tailwind plugins, Connection to headless CMS ...).
-
-<br>
-
 ## Frequently Asked Questions
 
 - Why?

astro.config.mjs

@@ -10,7 +10,6 @@ import mdx from '@astrojs/mdx';
 import partytown from '@astrojs/partytown';
 import compress from 'astro-compress';
 
-import { remarkReadingTime } from './src/utils/frontmatter.mjs';
 import { SITE } from './src/config.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -56,9 +55,7 @@ export default defineConfig({
     }),
   ],
 
-  markdown: {
+  markdown: {},
-    remarkPlugins: [remarkReadingTime],
-  },
 
   vite: {
     resolve: {

package.json

@@ -16,17 +16,17 @@
   "devDependencies": {
     "@astrojs/image": "^1.0.0-beta.2",
     "@astrojs/mdx": "^1.0.0-beta.2",
-    "@astrojs/partytown": "^1.0.3-beta.0",
+    "@astrojs/partytown": "^1.0.3-beta.1",
     "@astrojs/rss": "^2.0.0",
     "@astrojs/sitemap": "^1.0.0",
-    "@astrojs/tailwind": "^3.0.0-beta.1",
+    "@astrojs/tailwind": "^3.0.0-beta.2",
     "@astrolib/analytics": "^0.3.0",
     "@astrolib/seo": "^0.3.0",
     "@fontsource/inter": "^4.5.15",
     "@tailwindcss/typography": "^0.5.9",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
-    "astro": "^2.0.0-beta.3",
+    "astro": "^2.0.0-beta.4",
     "astro-compress": "1.1.28",
     "astro-icon": "^0.8.0",
     "eslint": "^8.32.0",

src/components/blog/ListItem.astro

@@ -44,8 +44,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
       <div class="mb-1">
         <span class="text-sm">
           <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
-          <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
+          <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time>
-          {Math.ceil(post.readingTime)} min read
         </span>
       </div>
       <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">

src/components/blog/SinglePost.astro

@@ -22,10 +22,8 @@ const { post, url } = Astro.props;
     <header class={post.image ? '' : ''}>
       <div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
         <p>
-        <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 dark:text-gray-400" />
+          <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 dark:text-gray-400" />
-        <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
+          <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time>
-          Math.ceil(post.readingTime)
-        } min read
         </p>
       </div>
       <h1

src/content/config.ts

@@ -7,7 +7,6 @@ const posts = defineCollection({
     image: z.string().optional(),
 
     canonical: z.string().url().optional(),
-    permalink: z.string().optional(),
 
     publishDate: z.date().or(z.string()).optional(),
     draft: z.boolean().optional(),
@@ -17,9 +16,6 @@ const posts = defineCollection({
     tags: z.array(z.string()).optional(),
     author: z.string().optional(),
   }),
-  slug: ({ defaultSlug, data }) => {
-    return data.permalink || defaultSlug;
-  },
 });
 
 export const collections = {

src/layouts/MarkdownLayout.astro

@@ -14,7 +14,7 @@ const meta: MetaSEO = {
 
 <Layout {meta}>
   <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-4xl">
-    <h1 class="font-bold font-heading text-3xl md:text-4xl leading-tighter tracking-tighter">{frontmatter.title}</h1>
+    <h1 class="font-bold font-heading text-4xl md:text-5xl leading-tighter tracking-tighter">{frontmatter.title}</h1>
     <div
       class="mx-auto prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
     >

src/pages/landing/mobile-app.astro

@@ -62,7 +62,7 @@ const meta = {
     }}
   >
     <Fragment slot="title">
-      Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
+      Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap"> Tailwind CSS</span>
     </Fragment>
 
     <Fragment slot="subtitle">

src/pages/landing/saas.astro

@@ -193,7 +193,7 @@ const meta = {
     }}
   >
     <Fragment slot="title">
-      Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
+      Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap"> Tailwind CSS</span>
     </Fragment>
 
     <Fragment slot="subtitle">

src/pages/landing/startup.astro

@@ -57,7 +57,7 @@ const meta = {
     }}
   >
     <Fragment slot="title">
-      Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
+      Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap"> Tailwind CSS</span>
     </Fragment>
 
     <Fragment slot="subtitle">

src/types.ts

@@ -20,7 +20,6 @@ export interface Post {
 
   Content: unknown;
   content?: string;
-  readingTime: number;
 }
 
 export interface MetaSEO {

src/utils/blog.ts

@@ -5,7 +5,7 @@ import { cleanSlug } from './permalinks';
 
 const getNormalizedPost = async (post: CollectionEntry<'posts'>): Promise<Post> => {
   const { id, slug = '', data } = post;
-  const { Content, remarkPluginFrontmatter } = await post.render();
+  const { Content } = await post.render();
 
   const { tags = [], category = 'default', author = 'Anonymous', publishDate = new Date(), ...rest } = data;
 
@@ -22,8 +22,6 @@ const getNormalizedPost = async (post: CollectionEntry<'posts'>): Promise<Post>
 
     Content: Content,
     // or 'body' in case you consume from API
-
-    readingTime: remarkPluginFrontmatter?.readingTime,
   };
 };