Coder Social home page Coder Social logo

igorskyflyer / npm-astro-post-excerpt Goto Github PK

View Code? Open in Web Editor NEW
19.0 3.0 2.0 1.03 MB

⭐ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown and MDX files! πŸ’Ž Featured on Astro's official Integrations library: https://astro.build/integrations?search=igor.dvlpr 😍

Home Page: https://www.npmjs.com/package/@igor.dvlpr/astro-post-excerpt

License: MIT License

Astro 35.85% JavaScript 24.60% TypeScript 2.51% CSS 12.10% MDX 24.94%
astro astrojs component excerpt igorskyflyer javascript js jsx npm post

npm-astro-post-excerpt's Issues

Missing whitespace when collecting strings

When collecting plain text from MD(x) files there is no whitespace between adjacent strings extracted from adjacent nodes, re-add the whitespace.


Expected

Lorem ipsum. Text in a new element

Actual

Lorem ipsum.Text in a new element

Peer dependency install error

When installing the new version v2.0.0 of this component along with Astro <v2, the peer dependency (= Astro) fails to install due to major version changes.

Make the peerDependency more lenient.

Markdown syntax still being rendered

First, thanks for a must needed Astro integration.

I came across an issue in both .mdx and .md files.

The text I get back still has markdown formatting applied to it, at least where italics (*text* or _text_) and bold (**text**) text are concerned. I tried all 3 options for PropRenderer, and they all yielded the same result.

Using Astro 4.2.4.

<PostExcerpt post={post} words={20} addEllipsis={true} headings={PropHeadings.TextOnly} renderer={PropRenderer.Html} />

Example return:

Lorem ipsum dolor **sit amet**, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ![fpo](../../assets/uploads/blog-placeholder-1.jpg) Adipiscing enim…

Optionally remove top level headings

I'm wondering if there might be a good way to optionally remove the top level heading from the content to be excerpted. Two fairly common patterns for markdown files is to insert either a

# Heading at the Top of the File

or a

# Heading at the Top of the File

## Followed By a Second Heading

For an except it doesn't make much sense to grab headings, so to be able to at least optionally ignore all headings would be great.

Switch to astro v2

πŸš€ Astro v2 upgrade πŸ‘¨πŸΌβ€πŸš€

  • Upgrade Astro
  • Upgrade Node
  • Move to /src/content
  • Use Collections
  • Remove Markdown plugin configuration
  • Remove Astro.fetchContent()
  • Unify old-style types and v2+ types
  • Tests
  • Release

Boolean prop not valid - aborting. Error

Hello, thanks for your plugin.
Looks great, but unfortunately when trying to implement I'm getting the following error:

Screen Shot 2023-06-01 at 17 35 12

This is my loop for getting the static paths.
./[...page].astro:

export async function getStaticPaths({paginate}) {

    const posts = await getCollection('blog').then(posts =>
	posts
		.map(({ data, slug }) => ({
            slug: slug,
			title: data.title,
			description: data.description,
			pubDate: data.pubDate,
		}))
);
return paginate(posts, {pageSize: 10});


}

const seo = {
  title: 'Blog',
  description: 'Blog posts, essays, diaries, news and tutorials by tjex / Tillman Jex'
}

const { page } = Astro.props;
---


<Layout seo={seo} >
    <article class="blog-page-content__article">
      <section class="postlist">
        {page.data.map((post: any) => <BlogPostPreview post={post} />)}
      </section>
    </article>
    <Paginator page={page}/>
</Layout>

the post prop is beings passed into the BlogPostPreview component.
It's in this component that I want to implement the post excerpt.
../../components/BlogPostPreview.astro:

---
import PostExcerpt from "@igor.dvlpr/astro-post-excerpt";
export interface Props {
    post: any;
}

const { post } = Astro.props;
---

<article class="post-preview">
    <a href={`/blog/${post.slug}`}>
        <h1 class="title">{post.title}</h1>
        <p class="description">{post.description}</p>
    </a>
    <p class="post-excerpt">
        <PostExcerpt {post} words={20} addEllipsis={false} />
    </p>
</article>

You can see here how the blog page looks normally (ie without the post-excerpt implementation): https://tjex.net/blog/

Unexpected closing tag </p>, expected corresponding closing tag for <br> (5:332-5:336)

Hi,

I just updates to 3.0.4 and I'm seeing

Unexpected closing tag </p>, expected corresponding closing tag for <br> (5:332-5:336)

for

{
  id: "fantomas-configuration-file/index.md",
  slug: "fantomas-configuration-file",
  body: "\nHi all,\n\nThe cat's out of the bag:\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">New version of <a href=\"https://twitter.com/IonideProject?ref_src=twsrc%5Etfw\">@IonideProject</a> is out - it updates Fantomas support to the latest version including support for Fantomas configuration file (<a href=\"https://t.co/Pw3TqQ4kYe\">https://t.co/Pw3TqQ4kYe</a>)<br><br>Props to <a href=\"https://twitter.com/verdonckflorian?ref_src=twsrc%5Etfw\">@verdonckflorian</a> and <a href=\"https://twitter.com/ChetHusk?ref_src=twsrc%5Etfw\">@ChetHusk</a> for working on this. <a href=\"https://twitter.com/hashtag/fsharp?src=hash&amp;ref_src=twsrc%5Etfw\">#fsharp</a> <a href=\"https://twitter.com/hashtag/toolingAdventures?src=hash&amp;ref_src=twsrc%5Etfw\">#toolingAdventures</a></p>&mdash; Krzysztof CieΕ›lak (@k_cieslak) <a href=\"https://twitter.com/k_cieslak/status/1215239179472375808?ref_src=twsrc%5Etfw\">January 9, 2020</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\nFantomas now has support for configuration files.\nThis means you can override the default settings using a JSON file.\nCheck out [the documentation](https://github.com/fsprojects/fantomas/blob/master/docs/Documentation.md#--config-path-to-file-or-folder) for more information.\n\n![Fantomas configuration via console](./nojaf-fantomas-configuration-console.png)\n\nIn this post I wish to answer a couple of small questions about the Fantomas configuration files.\n\n## JSON schema?\n\nWe've added a JSON schema definition to [http://schemastore.org](http://json.schemastore.org/fantomas).\nSo to get intellisense in most editors, you can add `$schema` to the configuration file.\n\n```json\n{\n  \"$schema\": \"http://json.schemastore.org/fantomas\",\n  \"KeepNewlineAfter\": false,\n  \"IndentOnTryWith\": true\n}\n```\n\n## Ionide integration?\n\nWhen using the latest Ionide version (4.4.3 and higher), your configuration will be picked up due to the integration of Fantomas via [FSAutocomplete](https://github.com/fsharp/FsAutoComplete/).\n\nIf something doesn't work out, you can enable verbose logging in VSCode.\n\n```json\n{\n  \"FSharp.verboseLogging\": true\n}\n```\n\nThen you can see warnings or errors in the output window.\nA fallback to the default configuration will happen when the parsing failed.\n\nFor example:\n\n![Warning in Ionide](./nojaf-fantomas-configuration-ionide-warning.png)\n\n### Room for improvement\n\nAt the time of writing, the configuration file is [not cached in FSAutocomplete](https://github.com/fsharp/FsAutoComplete/blob/52779750677d20b13ebcacc64a212cbc2a87fa7d/src/FsAutoComplete/FsAutoComplete.Lsp.fs#L982).\nIt could be kept in memory and updated when a configuration file changes.\nFeel free to submit a pull request to FSAutocomplete.\n\n## Why a beta version?\n\nThe main reason this is not an official release just yet is due to the fact that we want to be sure this works out for everyone.\nSo **please provide us feedback** if you encounter any problems whatsoever.\n\n## Rider support?\n\nIf the solution we have in mind appears to be working out nicely for Ionide users, I will submit a pull request to [JetBrains/fsharp-support](https://github.com/JetBrains/fsharp-support).\nIt might involved some more thinking to find the best approach, however I'm confident in collaboration with the team we can find a way.\n\nPlease keep in mind that Fantomas updates to Rider are linked to their release cadence.\n\n## Road to adoption?\n\nThis year my personal aspiration to **increase the adoption of Fantomas**.\nBoth in terms of users and people who submit pull requests.\n\nI have some plans and ideas for this. Unfortunately, I'm unable to share anything just yet.\nStay tuned for more!\n\nPlease o please report any issues you encounter using [our online tool](https://jindraivanek.gitlab.io/fantomas-ui/#?fantomas=preview).\nOr post any suggestions on [GitHub](https://github.com/fsprojects/fantomas/issues).\n\n> Fantomas can only improve when feedback is presented\n\nTake care everyone!\n\nCheers,\n\nnojaf\n\nPhoto by <a style=\"background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px\" href=\"https://unsplash.com/@krutainis?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"Download free do whatever you want high-resolution photos from Ivars Krutainis\"><span style=\"display:inline-block;padding:2px 3px\"><svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white\" viewBox=\"0 0 32 32\"><title>unsplash-logo</title><path d=\"M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z\"></path></svg></span><span style=\"display:inline-block;padding:2px 3px\">Ivars Krutainis</span></a>\n",
  collection: "blog",
  data: {
    path: "2020/10/01/fantomas-configuration-file/",
    date: 2020-01-10T00:00:00.000Z,
    title: "Fantomas configuration file",
    tags: [ "open-source", "fsharp" ],
    cover: {
      src: "/@fs/home/nojaf/projects/blog/src/content/blog/fantomas-configuration-file/nojaf.com.fantomas-configuration.jpg?origWidth=1920&origHeight=700&origFormat=jpg",
      width: 1920,
      height: 700,
      format: "jpg",
      fsPath: "/home/nojaf/projects/blog/src/content/blog/fantomas-configuration-file/nojaf.com.fantomas-configuration.jpg",
    },
  },
  render: [AsyncFunction: render],
}

rendered by

   <p>
      <PostExcerpt
        post={Astro.props}
        words={50}
        addEllipsis={false}
      />
    </p>

My markdown does contain the following HTML:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">New version of <a href="https://twitter.com/IonideProject?ref_src=twsrc%5Etfw">@IonideProject</a> is out - it updates Fantomas support to the latest version including support for Fantomas configuration file (<a href="https://t.co/Pw3TqQ4kYe">https://t.co/Pw3TqQ4kYe</a>)<br><br>Props to <a href="https://twitter.com/verdonckflorian?ref_src=twsrc%5Etfw">@verdonckflorian</a> and <a href="https://twitter.com/ChetHusk?ref_src=twsrc%5Etfw">@ChetHusk</a> for working on this. <a href="https://twitter.com/hashtag/fsharp?src=hash&amp;ref_src=twsrc%5Etfw">#fsharp</a> <a href="https://twitter.com/hashtag/toolingAdventures?src=hash&amp;ref_src=twsrc%5Etfw">#toolingAdventures</a></p>&mdash; Krzysztof CieΕ›lak (@k_cieslak) <a href="https://twitter.com/k_cieslak/status/1215239179472375808?ref_src=twsrc%5Etfw">January 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

which probably is the culprit. Updating <br><br> to <br/><br/> does not solve the problem.
Can I somehow skip this HTML part from the PostExcerpt?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.