diff --git a/public/admin/config.yml b/public/admin/config.yml index a033a23..57553c6 100644 --- a/public/admin/config.yml +++ b/public/admin/config.yml @@ -144,17 +144,26 @@ collections: widget: markdown - name: news label: News - identifier_field: date + identifier_field: pubDate create: true folder: src/content/news fields: - - name: date + - name: pubDate i18n: duplicate label: Date widget: datetime - date_format: MM.yyyy + date_format: MM.dd.yyyy time_format: false - format: MM.yyyy - - name: post + format: MM.dd.yyyy + - name: heroImage + label: Featured Image + widget: image + - name: title + label: Title + widget: text + - name: description + label: Short Description + widget: text + - name: body label: Post widget: markdown \ No newline at end of file diff --git a/public/images/gettyimages-1389862392.webp b/public/images/gettyimages-1389862392.webp new file mode 100644 index 0000000..768e74a Binary files /dev/null and b/public/images/gettyimages-1389862392.webp differ diff --git a/src/content/config.ts b/src/content/config.ts new file mode 100644 index 0000000..571ad45 --- /dev/null +++ b/src/content/config.ts @@ -0,0 +1,16 @@ +import { defineCollection, z } from "astro:content" + +const news = defineCollection({ + type: "content", + // Type-check frontmatter using a schema + schema: z.object({ + title: z.string(), + description: z.string(), + // Transform string to Date object + pubDate: z.coerce.date(), + updatedDate: z.coerce.date().optional(), + heroImage: z.string().optional(), + }), +}) + +export const collections = { news } diff --git a/src/content/news/04-25-2024.md b/src/content/news/04-25-2024.md new file mode 100644 index 0000000..8a7dcfd --- /dev/null +++ b/src/content/news/04-25-2024.md @@ -0,0 +1,10 @@ +--- +pubDate: 04.25.2024 +heroImage: /public/images/gettyimages-1389862392.webp +title: Static CCMS +description: This post was generated from CMS +--- + +# I am a Heading + +And I am text. I am in a post field diff --git a/src/content/news/first-post.md b/src/content/news/first-post.md new file mode 100644 index 0000000..ae9c959 --- /dev/null +++ b/src/content/news/first-post.md @@ -0,0 +1,40 @@ +--- +title: 'First post' +description: 'Lorem ipsum dolor sit amet' +pubDate: 'Jul 02 2022' +heroImage: '/blog-placeholder-3.jpg' +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna +aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. +Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit +amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum +lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed +vulputate mi. Dictumst quisque sagittis purus sit amet. + +Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea +dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. +Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt +lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. +Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim +suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi. + +Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra +vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget +magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse +ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat +semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed +risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non +sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae +purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim. + +Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a +diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor +dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas +tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit +volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi. + +Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed +felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut +ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat +nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna. diff --git a/src/content/news/markdown-style-guide.md b/src/content/news/markdown-style-guide.md new file mode 100644 index 0000000..9b6d48b --- /dev/null +++ b/src/content/news/markdown-style-guide.md @@ -0,0 +1,225 @@ +--- +title: 'Markdown Style Guide' +description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.' +pubDate: 'Jul 01 2022' +heroImage: '/blog-placeholder-1.jpg' +--- + +Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro. + +## Headings + +The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level +while `

` is the lowest. + +# H1 + +## H2 + +### H3 + +#### H4 + +##### H5 + +###### H6 + +## Paragraph + +Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut +dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna +tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem +aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos +nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores +editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. + +Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que +aut hariosam ex eat. + +## Images + +#### Syntax + +```markdown +![Alt text](./full/or/relative/path/of/image) +``` + +#### Output + +![blog placeholder](/blog-placeholder-about.jpg) + +## Blockquotes + +The blockquote element represents content that is quoted from another source, optionally with a citation which must be +within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. + +### Blockquote without attribution + +#### Syntax + +```markdown +> Tiam, ad mint andaepu dandae nostion secatur sequo quae. +> **Note** that you can use _Markdown syntax_ within a blockquote. +``` + +#### Output + +> Tiam, ad mint andaepu dandae nostion secatur sequo quae. +> **Note** that you can use _Markdown syntax_ within a blockquote. + +### Blockquote with attribution + +#### Syntax + +```markdown +> Don't communicate by sharing memory, share memory by communicating.
+> — Rob Pike[^1] +``` + +#### Output + +> Don't communicate by sharing memory, share memory by communicating.
+> — Rob Pike[^1] + +[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during +Gopherfest, November 18, 2015. + +## Tables + +#### Syntax + +```markdown +| Italics | Bold | Code | +| --------- | -------- | ------ | +| _italics_ | **bold** | `code` | +``` + +#### Output + +| Italics | Bold | Code | +|-----------|----------|--------| +| _italics_ | **bold** | `code` | + +## Code Blocks + +#### Syntax + +we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight +language specific syntac, write one word of language name after first 3 backticks, for eg. html, javascript, css, +markdown, typescript, txt, bash + +````markdown +```html + + + + + Example HTML5 Document + + +

Test

+ + +``` +```` + +Output + +```html + + + + + Example HTML5 Document + + +

Test

+ + +``` + +## List Types + +### Ordered List + +#### Syntax + +```markdown +1. First item +2. Second item +3. Third item +``` + +#### Output + +1. First item +2. Second item +3. Third item + +### Unordered List + +#### Syntax + +```markdown +- List item +- Another item +- And another item +``` + +#### Output + +- List item +- Another item +- And another item + +### Nested list + +#### Syntax + +```markdown +- Fruit + - Apple + - Orange + - Banana +- Dairy + - Milk + - Cheese +``` + +#### Output + +- Fruit + - Apple + - Orange + - Banana +- Dairy + - Milk + - Cheese + +## Other Elements — abbr, sub, sup, kbd, mark + +#### Syntax + +```markdown +GIF is a bitmap image format. + +H2O + +Xn + Yn = Zn + +Press CTRL+ALT+Delete to end the session. + +Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. +``` + +#### Output + +GIF is a bitmap image format. + +H2O + +Xn + Yn = Zn + +Press CTRL+ALT+Delete to end the session. + +Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. diff --git a/src/content/news/second-post.md b/src/content/news/second-post.md new file mode 100644 index 0000000..4d2f886 --- /dev/null +++ b/src/content/news/second-post.md @@ -0,0 +1,40 @@ +--- +title: 'Second post' +description: 'Lorem ipsum dolor sit amet' +pubDate: 'Jul 03 2022' +heroImage: '/blog-placeholder-4.jpg' +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna +aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. +Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit +amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum +lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed +vulputate mi. Dictumst quisque sagittis purus sit amet. + +Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea +dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. +Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt +lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. +Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim +suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi. + +Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra +vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget +magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse +ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat +semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed +risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non +sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae +purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim. + +Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a +diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor +dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas +tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit +volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi. + +Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed +felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut +ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat +nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna. diff --git a/src/content/news/third-post.md b/src/content/news/third-post.md new file mode 100644 index 0000000..43b17ab --- /dev/null +++ b/src/content/news/third-post.md @@ -0,0 +1,40 @@ +--- +title: 'Third post' +description: 'Lorem ipsum dolor sit amet' +pubDate: 'Jul 04 2022' +heroImage: '/blog-placeholder-2.jpg' +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna +aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. +Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit +amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum +lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed +vulputate mi. Dictumst quisque sagittis purus sit amet. + +Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea +dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. +Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt +lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. +Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim +suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi. + +Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra +vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget +magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse +ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat +semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed +risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non +sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae +purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim. + +Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a +diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor +dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas +tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit +volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi. + +Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed +felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut +ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat +nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna. diff --git a/src/content/news/using-mdx.mdx b/src/content/news/using-mdx.mdx new file mode 100644 index 0000000..31e7c8a --- /dev/null +++ b/src/content/news/using-mdx.mdx @@ -0,0 +1,31 @@ +--- +title: 'Using MDX' +description: 'Lorem ipsum dolor sit amet' +pubDate: 'Jul 12 2022' +heroImage: '/blog-placeholder-5.jpg' +--- + +This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file. + +## Why MDX? + +MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to [mix JavaScript and UI Components into your Markdown content](https://docs.astro.build/en/guides/markdown-content/#mdx-features) for things like interactive charts or alerts. + +If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze. + +## Example + +Here is how you import and use a UI component inside of MDX. +When you open this page in the browser, you should see the clickable button below. + +import HeaderLink from '../../components/HeaderLink.astro'; + + + Embedded component in MDX + + +## More Links + +- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx) +- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) +- **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default. diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index d9acf96..46bb637 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -22,8 +22,8 @@ const { title, description } = Astro.props
-
-

{title}

+
+

{title}


diff --git a/src/layouts/News.astro b/src/layouts/News.astro new file mode 100644 index 0000000..3c769a2 --- /dev/null +++ b/src/layouts/News.astro @@ -0,0 +1,33 @@ +--- +import type { CollectionEntry } from "astro:content" +import Layout from "./Layout.astro" +import FormattedDate from "../components/FormattedDate.astro" + +type Props = CollectionEntry<"news">["data"] + +const { title, description, pubDate, updatedDate, heroImage } = Astro.props +--- + + +
+
+ {heroImage && } +
+
+
+
+ + { + updatedDate && ( +
+ Last updated on + +
+ ) + } +
+
+ +
+
+
diff --git a/src/pages/news/[...slug].astro b/src/pages/news/[...slug].astro new file mode 100644 index 0000000..3e4849d --- /dev/null +++ b/src/pages/news/[...slug].astro @@ -0,0 +1,20 @@ +--- +import { type CollectionEntry, getCollection } from "astro:content" +import News from "../../layouts/News.astro" + +export async function getStaticPaths() { + const posts = await getCollection("news") + return posts.map((post) => ({ + params: { slug: post.slug }, + props: post, + })) +} +type Props = CollectionEntry<"news"> + +const post = Astro.props +const { Content } = await post.render() +--- + + + + diff --git a/src/pages/news/index.astro b/src/pages/news/index.astro new file mode 100644 index 0000000..7c41335 --- /dev/null +++ b/src/pages/news/index.astro @@ -0,0 +1,32 @@ +--- +import { getCollection } from "astro:content" +import Layout from "../../layouts/Layout.astro" +import FormattedDate from "../../components/FormattedDate.astro" + +const posts = (await getCollection("news")).sort( + (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf() +) +--- + + + + diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js new file mode 100644 index 0000000..95f46a3 --- /dev/null +++ b/src/pages/rss.xml.js @@ -0,0 +1,16 @@ +import rss from "@astrojs/rss" +import { getCollection } from "astro:content" +import { SITE_TITLE, SITE_DESCRIPTION } from "../consts" + +export async function GET(context) { + const posts = await getCollection("news") + return rss({ + title: SITE_TITLE, + description: SITE_DESCRIPTION, + site: context.site, + items: posts.map((post) => ({ + ...post.data, + link: `/news/${post.slug}/`, + })), + }) +}