first commit from blogster

Author: nemanjam

.gitignore

@@ -0,0 +1,28 @@
+# build output
+dist/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

README.md

@@ -0,0 +1,50 @@
+# Blogster
+
+Theme: **bubblegum**
+
+Blogster is a collection of beautiful, accessible and performant blog templates built with [Astro](https://astro.build) and [Markdoc](https://markdoc.dev).
+
+Check out the demo here - [Blogster bubblegum template](https://blogster-bubblegum.netlify.app).
+
+## Bubblegum Template
+
+A beautiful, performant and accessible theme built with [Tailwind](https://tailwindcss.com).
+
+- **Fast**. Fast by default. Astro websites are engineered to be fast and load before you could blink, even when not cached.
+- **Dark mode**. All themes have light/dark mode built-in.
+- **Mobile first**. Responsive and loads fast in all devices.
+- **Accessible**. A well thought out semantic and accessible content.
+- **Perfect lighthouse score.** 100 across the board.
+- **Easy content authoring**. Author content using markdown (`.md`) from your code editor or directly in GitHub.
+- **Extended markdown with [Markdoc](https://markdoc.dev).** Type-safe custom components like YouTube embed, Twitter embed (or anything you want really) in your markdown (`.md`) files.
+- **RSS feed**. Your blog has an RSS feed setup that can be accessed at `/rss.xml`.
+- **SEO**. All pages are setup with all the SEO you might need.
+
+## How do I add content?
+
+All the content is written in markdown (.md) and grouped as `blog` or `projects` in the `content` directory. All the default markdown syntax will work. You also have a few example custom markdown elements like _YouTube embed_, _Twitter embed_, etc. You can create your own custom components too in two easy steps.
+
+1. Add a markdoc config. Check out the markdoc config in [src/lib/markdoc/config.ts](src/lib/markdoc/config.ts) to learn how to add custom components.
+2. Add a component to render your custom component. Check out the Renderer in [src/components/Renderer.astro](src/components/Renderer.astro).
+
+## How do I make it my blog?
+
+Easy.
+
+- All content is static and everything is straight forward. Change whatever you need to change.
+- Delete or update the content in `content/{content-group}`. `content-group` could be `blog`, `projects` or `anything`.
+- (Optional) If you need more content types like _Notes_, just create a new dir in `content` and add a new frontmatter validator like [src/lib/markdoc/blog/frontmatter](src/lib/markdoc/blog/frontmatter).
+
+## How do I deploy?
+
+`yarn build` will generate a static website in `dist` dir. You can host it with any static hosting. If you need a recommendation, check out [Netlify](netlify.com).
+
+## Credit
+
+Thanks to other templates that inspired this theme.
+
+- [Official Astro Blog template](https://github.com/withastro/astro/tree/main/examples/blog)
+
+## License
+
+MIT © [Dinesh Pandiyan](https://github.com/flexdinesh)

astro.config.mjs

@@ -0,0 +1,39 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
+import { defineConfig } from "astro/config";
+import sitemap from "@astrojs/sitemap";
+import tailwind from "@astrojs/tailwind";
+
+/* 
+  We are doing some URL mumbo jumbo here to tell Astro what the URL of your website will be.
+  In local development, your SEO meta tags will have localhost URL.
+  In built production websites, your SEO meta tags should have your website URL.
+  So we give our website URL here and the template will know what URL to use 
+  for meta tags during build.
+  If you don't know your website URL yet, don't worry about this
+  and leave it empty or use localhost URL. It won't break anything.
+*/
+
+const SERVER_PORT = 3000;
+// the url to access your blog during local development
+const LOCALHOST_URL = `http://localhost:${SERVER_PORT}`;
+// the url to access your blog after deploying it somewhere (Eg. Netlify)
+const LIVE_URL = "https://yourwebsiteurl.com";
+// this is the astro command your npm script runs
+const SCRIPT = process.env.npm_lifecycle_script || "";
+const isBuild = SCRIPT.includes("astro build");
+let BASE_URL = LOCALHOST_URL;
+// When you're building your site in local or in CI, you could just set your URL manually
+if (isBuild) {
+  BASE_URL = LIVE_URL;
+}
+
+export default defineConfig({
+  server: { port: SERVER_PORT },
+  site: BASE_URL,
+  integrations: [
+    sitemap(),
+    tailwind({
+      config: { applyBaseStyles: false },
+    }),
+  ],
+});

content/blog/basic-markdown-style-guide.md

@@ -0,0 +1,95 @@
+---
+external: false
+title: "Basic markdown style guide"
+description: "You can author content using the familiar markdown syntax you already know. All basic markdown syntax is supported."
+date: 2022-11-02
+---
+
+Markdown is powered by [Markdoc](https://markdoc.dev/). This is an example post to demonstrate all the basic markdown syntax. You can author content using the familiar markdown syntax you already know.
+
+## Inline formatting
+
+Bold: **This text is bold**.
+
+Italics: _This text is italics_.
+
+Strikethrough: You can ~~strikethrough~~ text.
+
+Inline code: You can add inline code like this `const hello = "world"`.
+
+## Headings
+
+The following HTML `<h2>`—`<h6>` elements represent five levels of section headings. `<h1>` is also available but not recommended since the post title is already a `<h1>` element it is not a good practice to have more than one `<h1>` elements in a page.
+
+## H2: Heading Two
+
+### H3: Heading Three
+
+#### H4: Heading Four
+
+##### H5: Heading Five
+
+###### H6: Heading Six
+
+## Paragraph
+
+A standalone single paragraph of text.
+
+Paragraphs can be multiline too when they constitute words that make up more than one line, i.e they wrap to the next line. Wow! I am really smart to write two lines of text that makes zero sense.
+
+## Blockquotes
+
+> This is a blockquote. And it's pretty long too. Long enough to wrap to next line. Surely it will wrap.
+
+> You can use other Markdown syntax like `inline code` within a blockquote.
+
+## Tables
+
+| Italics   | Bold     | Code   |
+| --------- | -------- | ------ |
+| _italics_ | **bold** | `code` |
+
+## List Types
+
+### Ordered List
+
+1. First item
+2. Second item
+3. Third item
+
+### Unordered List
+
+- List item
+- Another item
+- And another item
+
+### Nested list
+
+- Fruit
+  - Apple
+  - Orange
+  - Banana
+- Dairy
+  - Milk
+  - Cheese
+
+## Code Blocks
+
+Syntax highlighting is done using [Prism.js](https://github.com/PrismJS/prism). You can customise to whichever theme you want from the [plenty available prism themes](https://github.com/PrismJS/prism-themes).
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Example HTML5 Document</title>
+  </head>
+  <body>
+    <p>Test</p>
+  </body>
+</html>
+```
+
+## Images
+
+![Blogster](/images/blogster.png)

content/blog/draft-post.md

@@ -0,0 +1,9 @@
+---
+external: false
+draft: true
+title: Draft Post
+description: This post is a draft and won't be built.
+date: 2022-11-22
+---
+
+It's a beautiful world out there.

content/blog/extended-markdown-style-guide.md

@@ -0,0 +1,54 @@
+---
+external: false
+title: "Extended markdown style guide"
+description: "In addition to supporting all basic Markdoc syntax, this template also supports extended markdown syntax to render custom components."
+date: 2022-11-01
+---
+
+This blog's markdown is powered by [Markdoc](https://markdoc.dev/). In addition to supporting all basic markdown syntax, this blog also supports extended syntax to render custom components that are not conventionally available via basic markdown. This post is an example to showcase all available extended markdown syntax.
+
+## YouTube Video
+
+You can embed YouTube videos in your blog posts.
+
+{% youtube url="https://www.youtube-nocookie.com/embed/StTqXEQ2l-Y" label="Everything is awesome - Lego movie song" /%}
+
+## Tweet
+
+You can embed tweets in your blog posts.
+
+{% tweet url="https://twitter.com/flexdinesh/status/1605685194312122370" /%}
+
+## CodePen
+
+You can embed codepens in your blog posts.
+
+{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" /%}
+
+## GitHub Gist
+
+You can embed GitHub gists in your blog posts.
+
+{% githubgist id="d96064c9c4ef2e8ef71c90a10ffcf3b2" /%}
+
+## Lesser Known HTML Elements
+
+### abbr
+
+{% abbr title="Graphics Interchange Format" %}GIF{% /abbr %} is a bitmap image format.
+
+### sub
+
+H{% sub %}2{% /sub %}O
+
+### sup
+
+X{% sup %}n{% /sup %} + Y{% sup %}n{% /sup %} = Z{% sup %}n{% /sup %}
+
+### kbd
+
+Press {% kbd %}{% kbd %}CTRL{% /kbd %}+{% kbd %}ALT{% /kbd %}+{% kbd %}Delete{% /kbd %}{% /kbd %} to end the session.
+
+### mark
+
+Most {% mark %}salamanders{% /mark %} are nocturnal, and hunt for insects, worms, and other small creatures.

content/blog/external-link-example.md

@@ -0,0 +1,7 @@
+---
+external: true
+url: https://medium.com/the-thinkmill/progressive-rendering-the-key-to-faster-web-ebfbbece41a4
+title: You can also link to an external blog post
+description: Safely access nested objects in JavaScript in a super cool way.
+date: 2019-11-11
+---

content/blog/hello-world.md

@@ -0,0 +1,9 @@
+---
+external: false
+draft: true
+title: Hello World
+description: It's a beautiful world out there.
+date: 2022-11-05
+---
+
+It's a beautiful world out there.

content/blog/syntax-highlighting.md

@@ -0,0 +1,49 @@
+---
+external: false
+title: "Prism.js syntax highlighting for code blocks"
+description: "Code blocks are syntax highlighted using Prism.js"
+date: 2022-10-30
+---
+
+Syntax highlighting is done using [Prism.js](https://github.com/PrismJS/prism) with the default [nord theme](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-nord.css). You can customise to whichever theme you want from the [plenty available prism themes](https://github.com/PrismJS/prism-themes).
+
+## HTML Code Block
+
+An example `HTML` code block.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Example HTML5 Document</title>
+  </head>
+  <body>
+    <p>Test</p>
+  </body>
+</html>
+```
+
+## JSX Code Block
+
+An example `jsx` code block.
+
+```jsx
+const Greet = () => {
+  const message = `Hello World!`;
+  return <div>{message}</div>;
+};
+```
+
+## CSS Code Block
+
+An example `css` code block.
+
+```css
+.layout {
+  display: grid;
+  grid-template-columns: 5rem minmax(0, 1fr) 4rem;
+}
+```
+
+...and many more. [Explore all the languages supported by Prism.js](https://prismjs.com/#supported-languages).

content/projects/design-system-boilerplate.md

@@ -0,0 +1,6 @@
+---
+title: A design system boilerplate with multiple themes
+description: It's a beautiful world out there.
+date: 2022-02-13
+url: https://design-system-boilerplate.netlify.app
+---