-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
98 changed files
with
16,017 additions
and
10,200 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,205 @@ | ||
declare module 'astro:content' { | ||
interface Render { | ||
'.md': Promise<{ | ||
Content: import('astro').MarkdownInstance<{}>['Content']; | ||
headings: import('astro').MarkdownHeading[]; | ||
remarkPluginFrontmatter: Record<string, any>; | ||
}>; | ||
} | ||
} | ||
|
||
declare module 'astro:content' { | ||
type Flatten<T> = T extends { [K: string]: infer U } ? U : never; | ||
|
||
export type CollectionKey = keyof AnyEntryMap; | ||
export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>; | ||
|
||
export type ContentCollectionKey = keyof ContentEntryMap; | ||
export type DataCollectionKey = keyof DataEntryMap; | ||
|
||
type AllValuesOf<T> = T extends any ? T[keyof T] : never; | ||
type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf< | ||
ContentEntryMap[C] | ||
>['slug']; | ||
|
||
export function getEntryBySlug< | ||
C extends keyof ContentEntryMap, | ||
E extends ValidContentEntrySlug<C> | (string & {}), | ||
>( | ||
collection: C, | ||
// Note that this has to accept a regular string too, for SSR | ||
entrySlug: E | ||
): E extends ValidContentEntrySlug<C> | ||
? Promise<CollectionEntry<C>> | ||
: Promise<CollectionEntry<C> | undefined>; | ||
|
||
export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>( | ||
collection: C, | ||
entryId: E | ||
): Promise<CollectionEntry<C>>; | ||
|
||
export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>( | ||
collection: C, | ||
filter?: (entry: CollectionEntry<C>) => entry is E | ||
): Promise<E[]>; | ||
export function getCollection<C extends keyof AnyEntryMap>( | ||
collection: C, | ||
filter?: (entry: CollectionEntry<C>) => unknown | ||
): Promise<CollectionEntry<C>[]>; | ||
|
||
export function getEntry< | ||
C extends keyof ContentEntryMap, | ||
E extends ValidContentEntrySlug<C> | (string & {}), | ||
>(entry: { | ||
collection: C; | ||
slug: E; | ||
}): E extends ValidContentEntrySlug<C> | ||
? Promise<CollectionEntry<C>> | ||
: Promise<CollectionEntry<C> | undefined>; | ||
export function getEntry< | ||
C extends keyof DataEntryMap, | ||
E extends keyof DataEntryMap[C] | (string & {}), | ||
>(entry: { | ||
collection: C; | ||
id: E; | ||
}): E extends keyof DataEntryMap[C] | ||
? Promise<DataEntryMap[C][E]> | ||
: Promise<CollectionEntry<C> | undefined>; | ||
export function getEntry< | ||
C extends keyof ContentEntryMap, | ||
E extends ValidContentEntrySlug<C> | (string & {}), | ||
>( | ||
collection: C, | ||
slug: E | ||
): E extends ValidContentEntrySlug<C> | ||
? Promise<CollectionEntry<C>> | ||
: Promise<CollectionEntry<C> | undefined>; | ||
export function getEntry< | ||
C extends keyof DataEntryMap, | ||
E extends keyof DataEntryMap[C] | (string & {}), | ||
>( | ||
collection: C, | ||
id: E | ||
): E extends keyof DataEntryMap[C] | ||
? Promise<DataEntryMap[C][E]> | ||
: Promise<CollectionEntry<C> | undefined>; | ||
|
||
/** Resolve an array of entry references from the same collection */ | ||
export function getEntries<C extends keyof ContentEntryMap>( | ||
entries: { | ||
collection: C; | ||
slug: ValidContentEntrySlug<C>; | ||
}[] | ||
): Promise<CollectionEntry<C>[]>; | ||
export function getEntries<C extends keyof DataEntryMap>( | ||
entries: { | ||
collection: C; | ||
id: keyof DataEntryMap[C]; | ||
}[] | ||
): Promise<CollectionEntry<C>[]>; | ||
|
||
export function reference<C extends keyof AnyEntryMap>( | ||
collection: C | ||
): import('astro/zod').ZodEffects< | ||
import('astro/zod').ZodString, | ||
C extends keyof ContentEntryMap | ||
? { | ||
collection: C; | ||
slug: ValidContentEntrySlug<C>; | ||
} | ||
: { | ||
collection: C; | ||
id: keyof DataEntryMap[C]; | ||
} | ||
>; | ||
// Allow generic `string` to avoid excessive type errors in the config | ||
// if `dev` is not running to update as you edit. | ||
// Invalid collection names will be caught at build time. | ||
export function reference<C extends string>( | ||
collection: C | ||
): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>; | ||
|
||
type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T; | ||
type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer< | ||
ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']> | ||
>; | ||
|
||
type ContentEntryMap = { | ||
"blog": { | ||
"basic-markdown-style-guide.md": { | ||
id: "basic-markdown-style-guide.md"; | ||
slug: "basic-markdown-style-guide"; | ||
body: string; | ||
collection: "blog"; | ||
data: any | ||
} & { render(): Render[".md"] }; | ||
"draft-post.md": { | ||
id: "draft-post.md"; | ||
slug: "draft-post"; | ||
body: string; | ||
collection: "blog"; | ||
data: any | ||
} & { render(): Render[".md"] }; | ||
"extended-markdown-style-guide.md": { | ||
id: "extended-markdown-style-guide.md"; | ||
slug: "extended-markdown-style-guide"; | ||
body: string; | ||
collection: "blog"; | ||
data: any | ||
} & { render(): Render[".md"] }; | ||
"external-link-example.md": { | ||
id: "external-link-example.md"; | ||
slug: "external-link-example"; | ||
body: string; | ||
collection: "blog"; | ||
data: any | ||
} & { render(): Render[".md"] }; | ||
"hello-world.md": { | ||
id: "hello-world.md"; | ||
slug: "hello-world"; | ||
body: string; | ||
collection: "blog"; | ||
data: any | ||
} & { render(): Render[".md"] }; | ||
"syntax-highlighting.md": { | ||
id: "syntax-highlighting.md"; | ||
slug: "syntax-highlighting"; | ||
body: string; | ||
collection: "blog"; | ||
data: any | ||
} & { render(): Render[".md"] }; | ||
}; | ||
"projects": { | ||
"design-system-boilerplate.md": { | ||
id: "design-system-boilerplate.md"; | ||
slug: "design-system-boilerplate"; | ||
body: string; | ||
collection: "projects"; | ||
data: any | ||
} & { render(): Render[".md"] }; | ||
"dev-landing-page.md": { | ||
id: "dev-landing-page.md"; | ||
slug: "dev-landing-page"; | ||
body: string; | ||
collection: "projects"; | ||
data: any | ||
} & { render(): Render[".md"] }; | ||
"draft-project.md": { | ||
id: "draft-project.md"; | ||
slug: "draft-project"; | ||
body: string; | ||
collection: "projects"; | ||
data: any | ||
} & { render(): Render[".md"] }; | ||
}; | ||
|
||
}; | ||
|
||
type DataEntryMap = { | ||
|
||
}; | ||
|
||
type AnyEntryMap = ContentEntryMap & DataEntryMap; | ||
|
||
export type ContentConfig = never; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"yaml.schemas": { | ||
"https://json.schemastore.org/github-workflow.json": "file:///home/silvan/dev/blog.gehrig.dev/.github/workflows/deploy.yml" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
MIT License | ||
|
||
Copyright (c) 2023 Mark Teekman | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all | ||
copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,52 +1,65 @@ | ||
# Blogster | ||
# Accessible Astro Starter | ||
|
||
Theme: **minimal** | ||
![social-preview-image](https://user-images.githubusercontent.com/3909046/219942674-9894853e-def8-4180-84b8-6b577dacfcaa.png) | ||
|
||
Blogster is a collection of beautiful, accessible and performant blog templates built with [Astro](https://astro.build) and [Markdoc](https://markdoc.dev). | ||
Accessible Astro Starter is a ready to use, SEO and a11y friendly blogging theme. It contains plenty of accessible components to build several page types, Tailwind CSS to help you build faster and example pages such as a dynamic Blog, 404, Markdown and MDX. This theme is designed to help you build your project faster and provide a solid base for accessibility! | ||
|
||
Check out the demo here - [Blogster minimal template](https://blogster-minimal.netlify.app). | ||
🚀 [Live Preview](https://accessible-astro.netlify.app/) | ||
|
||
## Minimal Template | ||
## ♿ (Accessibility) Features | ||
|
||
A light weight theme built with plain old HTML and CSS. No external fonts or icons. Zero JavaScript. You get a full functional nice looking blog that loads super fast. | ||
- Astro 4.0 | ||
- Tailwind CSS support | ||
- Prettier integration with `prettier-plugin-astro` and `prettier-plugin-tailwind` | ||
- ESLint integration with strict accessibility settings for `eslint-plugin-jsx-a11y` | ||
- Markdown and MDX support with examples included in the theme | ||
- Uses the awesome `astro-icon` package for the icons | ||
- Excellent Lighthouse/PageSpeed scores | ||
- Accessible landmarks such as `header`, `main`, `footer`, `section` and `nav` | ||
- Outline focus indicator which works on dark and light backgrounds | ||
- Several `aria` attributes which provide a better experience for screen reader users | ||
- `[...page].astro` and `[post].astro` demonstrate the use of dynamic routes and provide a basic blog with breadcrumbs and pagination | ||
- `404.astro` provides a custom 404 error page which you can adjust to your needs | ||
- `Header.astro` component included in the `DefaultLayout.astro` layout | ||
- `Footer.astro` component included in the `DefaultLayout.astro` layout | ||
- `SkipLinks.astro` component to skip to either the main menu or the main content | ||
- `Navigation.astro` component with keyboard accessible (dropdown) navigation (arrow keys, escape key) | ||
- `ResponsiveToggle.astro` component with an accessible responsive toggle button for the mobile navigation | ||
- `DarkMode.astro` component toggle with accessible button and a user system preferred color scheme setting | ||
- `SiteMeta.astro` SEO component for setting custom meta data on different pages | ||
- `.sr-only` utility class for screen reader only text content (hides text visually) | ||
- `prefers-reduced-motion` disables animations for users that have this preference turned on | ||
- Ships with many components such as Accordions, Breadcrumbs, Modals, Pagination [and many more](https://accessible-astro.dev/accessible-components) | ||
- A collection of utility classes such as breakpoints, button classes, font settings, resets and outlines in `src/assets/scss/base` | ||
- View Transitions (⚠️ see [astro-docs](https://docs.astro.build/en/guides/view-transitions/#accessibility) for accessibility considerations) | ||
|
||
- **Lean**. No external fonts or icons. Zero JavaScript. Zero Runtime. Only ~6kB. | ||
- **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. | ||
## 🚀 Getting started | ||
|
||
## How do I add content? | ||
Clone this theme locally and run any of the following commands in your terminal: | ||
|
||
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. | ||
| Command | Action | | ||
| :---------------- | :------------------------------------------- | | ||
| `npm install` | Installs dependencies | | ||
| `npm run dev` | Starts local dev server at `localhost:4321` | | ||
| `npm run build` | Build your production site to `./dist/` | | ||
| `npm run preview` | Preview your build locally, before deploying | | ||
|
||
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). | ||
## 📦 Other Accessible Astro projects | ||
|
||
## How do I make it my blog? | ||
- [Accessible Astro Dashboard](https://github.com/markteekman/accessible-astro-dashboard/) | ||
- [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components/) | ||
|
||
Easy. | ||
## ❤️ Helping out | ||
|
||
- 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). | ||
If you find that something isn't working right then I'm always happy to hear it to improve this starter! You can contribute in many ways and forms. Let me know by either: | ||
|
||
## How do I deploy? | ||
1. [Filing an issue](https://github.com/markteekman/accessible-astro-starter/issues) | ||
2. [Submitting a pull request](https://github.com/markteekman/accessible-astro-starter/pulls) | ||
3. [Starting a discussion](https://github.com/markteekman/accessible-astro-starter/discussions) | ||
4. [Buying me a coffee!](https://www.buymeacoffee.com/markteekman) | ||
|
||
`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). | ||
## ☕ Thank you! | ||
|
||
## Credit | ||
A big thank you to the creators of the awesome Astro static site generator and to all using this starter to make the web a bit more accessible for all people around the world :) | ||
|
||
Thanks to other templates that inspired this theme. | ||
|
||
- [Official Astro Blog template](https://github.com/withastro/astro/tree/main/examples/blog) | ||
- [Bear Blog](https://github.com/HermanMartinus/bearblog/). | ||
|
||
## License | ||
|
||
MIT © [Dinesh Pandiyan](https://github.com/flexdinesh) | ||
[![buymeacoffee-button](https://user-images.githubusercontent.com/3909046/150683481-be070424-7bb0-4dd7-a3cb-43b5605163f5.png)](https://www.buymeacoffee.com/markteekman) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,32 +1,13 @@ | ||
/* eslint-disable turbo/no-undeclared-env-vars */ | ||
import { defineConfig } from "astro/config"; | ||
import sitemap from "@astrojs/sitemap"; | ||
import { defineConfig } from 'astro/config' | ||
import mdx from '@astrojs/mdx' | ||
import tailwind from '@astrojs/tailwind' | ||
import compress from 'astro-compress' | ||
import icon from "astro-icon" | ||
|
||
/* | ||
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; | ||
} | ||
// https://astro.build/config | ||
export default defineConfig({ | ||
server: { port: SERVER_PORT }, | ||
site: BASE_URL, | ||
integrations: [sitemap()], | ||
}); | ||
compressHTML: true, | ||
integrations: [mdx(), icon(), tailwind({ | ||
applyBaseStyles: false, | ||
}), compress()], | ||
}) |
Oops, something went wrong.