Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-17 01:55:03 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

🛠️ build(cleanup): whole dir

Browse Source
This commit is contained in:
Eshan Roy (Eshanized)
2024-06-16 23:38:46 +05:30
parent 82179ae736
commit e99a93a5b6
56 changed files with 0 additions and 12204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/404.astro
View File

@@ -1,17 +0,0 @@
---
import DefaultLayout from '../layouts/DefaultLayout.astro'
---
<DefaultLayout title="404">
<section class="my-12">
<div class="container">
<h1>404</h1>
</div>
</section>
<section class="my-12">
<div class="space-content container">
<p class="text-2xl">This page does not exist. Don't worry though, we got you.</p>
<a class="button" href="/">Let's get you home Astronout 🚀</a>
</div>
</section>
</DefaultLayout>

150
src/pages/accessible-components.astro
View File

@@ -1,150 +0,0 @@
---
import DefaultLayout from '../layouts/DefaultLayout.astro'
import { Icon } from 'astro-icon/components'
import {
Accordion,
AccordionItem,
Breadcrumbs,
BreadcrumbsItem,
Card,
Media,
Modal,
Notification,
Pagination,
} from 'accessible-astro-components'
---
<DefaultLayout title="Accessible Components">
<section class="my-12">
<div class="space-content container">
<h1>Accessible Components</h1>
<p class="text-2xl">
This theme has a lot of extra a11y components provided by the <a
href="https://github.com/markteekman/accessible-astro-components#Pagination">Accessible Astro Component</a
> NPM package to help you build accessible pages faster:
</p>
</div>
</section>
<section class="mb-12 mt-32">
<div class="container">
<div class="grid grid-cols-1 gap-32 md:grid-cols-2">
<div class="space-content">
<h2>Accordion</h2>
<Accordion>
<AccordionItem header="First Item">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
veritatis laboriosam est tenetur.
</p>
<a href="#">Tab to me!</a>
</AccordionItem>
<AccordionItem header="Second Item">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
veritatis laboriosam est tenetur.
</p>
</AccordionItem>
<AccordionItem header="Third Item">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
veritatis laboriosam est tenetur.
</p>
</AccordionItem>
<AccordionItem header="Fourth Item">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
veritatis laboriosam est tenetur.
</p>
</AccordionItem>
<AccordionItem header="Fifth Item">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
veritatis laboriosam est tenetur.
</p>
</AccordionItem>
</Accordion>
</div>
<div class="space-content">
<h2>Breadcrumbs</h2>
<Breadcrumbs>
<BreadcrumbsItem href="/" label="Home" />
<BreadcrumbsItem href="/blog" label="Blog" />
<BreadcrumbsItem currentPage={true} label="My blog post" />
</Breadcrumbs>
</div>
<div class="space-content">
<h2>Cards</h2>
<Card
img="https://images.unsplash.com/photo-1636819488524-1f019c4e1c44?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
/>
</div>
<div class="space-content">
<h2>DarkMode Toggle</h2>
<p>This component can be viewed in the top right corner besides the main navigation.</p>
</div>
<div class="space-content">
<h2>Media</h2>
<Media
class="rounded-lg"
src="https://images.unsplash.com/photo-1636819488537-a9b1ffb315ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
/>
</div>
<div class="space-content">
<h2>Modals</h2>
<button id="modal1-trigger" class="button">Modal 1</button>&nbsp;
<button id="modal2-trigger" class="button color-secondary">Modal 2</button>
<Modal triggerId="modal1-trigger" title="Modal 1">
<p>Why hello, I be the <strong>first</strong> Modal.</p>
</Modal>
<Modal triggerId="modal2-trigger" title="Modal 2" closeText="Cancel">
<p>
Ah yes, and I be the <strong>second</strong> Modal. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Sed, a! Ratione eaque temporibus alias tempora pariatur dolorem.
</p>
<button class="button" onclick="closeModal()">Confirm action</button>
</Modal>
</div>
<div class="space-content">
<h2>Notification</h2>
<Notification>
<Icon name="ion:notifications-outline" /><p><strong>Message:</strong> This is a notification!</p>
</Notification>
<Notification type="info">
<Icon name="ion:information-circle-outline" /><p>
<strong>Info:</strong> This is a notification of type info.
</p>
</Notification>
<Notification type="success">
<Icon name="ion:checkbox-outline" /><p>
<strong>Success:</strong> This is a notification of type success.
</p>
</Notification>
<Notification type="warning">
<Icon name="ion:warning-outline" /><p>
<strong>Warning:</strong> This is a notification of type warning and goes on multiple lines to see how that
looks.
</p>
</Notification>
<Notification type="error">
<Icon name="ion:alert-circle-outline" /><p>
<strong>Error:</strong> This is a notification of type error.
</p>
</Notification>
</div>
<div class="space-content">
<h2>Pagination</h2>
<Pagination totalPages="200" />
</div>
<div class="space-content">
<h2>SkipLinks</h2>
<p>This component can be viewed by shift+tabbing until they show up.</p>
</div>
</div>
</div>
</section>
</DefaultLayout>

76
src/pages/blog/[...page].astro
View File

@@ -1,76 +0,0 @@
---
import DefaultLayout from '../../layouts/DefaultLayout.astro'
import { Card, Pagination } from 'accessible-astro-components'
export async function getStaticPaths({ paginate }) {
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
const data = await response.json()
return paginate(data, { pageSize: 6 })
}
const { page } = Astro.props
---
<DefaultLayout
title="Blog"
description="An example of a blog with dynamic content fetched from JSONPlaceholder using the title, body and userId."
>
<section class="my-12">
<div class="space-content container">
<h1>Blog</h1>
<p class="text-2xl">
An example of a blog with dynamic content fetched from <a href="https://jsonplaceholder.typicode.com/posts"
>JSONPlaceholder</a
> using the title, body and userId. The Accessible Astro Card Component is used here to display al the posts.
</p>
</div>
</section>
<section class="my-12">
<div class="container">
<p class="text-sm"><em>Post {page.start + 1} through {page.end + 1} of {page.total} total posts</em></p>
<ul class="my-3">
{
page.data.map((post) => (
<li>
<Card
url={'/blog/' + post.title.replaceAll(' ', '-').toLowerCase()}
title={post.title}
footer={'userId:' + post.userId}
>
{post.body}
</Card>
</li>
))
}
</ul>
<div class="mt-12 grid place-content-center">
<Pagination
firstPage={page.url.prev ? '/blog' : null}
previousPage={page.url.prev ? page.url.prev : null}
nextPage={page.url.next ? page.url.next : null}
lastPage={page.url.next ? `/blog/${Math.round(page.total / page.size)}` : null}
currentPage={page.currentPage}
totalPages={Math.round(page.total / page.size)}
/>
</div>
</div>
</section>
</DefaultLayout>
<style lang="scss">
ul {
display: grid;
grid-template-columns: 1fr;
grid-gap: 4rem;
@media (min-width: 550px) {
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
}
@media (min-width: 950px) {
grid-template-columns: repeat(3, 1fr);
}
}
</style>

57
src/pages/blog/[post].astro
View File

@@ -1,57 +0,0 @@
---
import DefaultLayout from '../../layouts/DefaultLayout.astro'
import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
export async function getStaticPaths() {
const data = await fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json())
return data.map((post) => {
return {
params: { post: post.title.replaceAll(' ', '-').toLowerCase() },
props: { post },
}
})
}
const { post } = Astro.props
---
<DefaultLayout title={post.title} description={post.body} url={post.title}>
<div class="container">
<div class="mt-12">
<Breadcrumbs>
<BreadcrumbsItem href="/" label="Home" />
<BreadcrumbsItem href="/blog" label="Blog" />
<BreadcrumbsItem currentPage={true} label={post.title} />
</Breadcrumbs>
</div>
</div>
<section class="my-12">
<div class="container">
<h1>{post.title}</h1><br />
<p>By userId: {post.userId}</p>
</div>
</section>
<section class="my-12">
<div class="container">
<p class="text-2xl">{post.body}</p>
</div>
</section>
</DefaultLayout>
<style lang="scss">
ul {
display: grid;
grid-template-columns: 1fr;
grid-gap: 4rem;
@media (min-width: 550px) {
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
}
@media (min-width: 950px) {
grid-template-columns: repeat(3, 1fr);
}
}
</style>

73
src/pages/index.astro
View File

@@ -1,73 +0,0 @@
---
import DefaultLayout from '../layouts/DefaultLayout.astro'
import Hero from '../components/Hero.astro'
import Feature from '../components/Feature.astro'
import Counter from '../components/Counter.astro'
import ContentMedia from '../components/ContentMedia.astro'
---
<DefaultLayout title="Home">
<Hero />
<section class="my-64">
<div class="container">
<h2 class="mb-16 text-6xl">Features</h2>
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
<Feature icon="mdi:tailwind" title="Tailwind CSS">
Use the power of Tailwind to greatly improve your productivity and enhance your developer workflow.
</Feature>
<Feature icon="mdi:wheelchair-accessibility" title="a11y Components">
17 components and counting, all tried and tested for the most optimal accessible experience for your visitors.
</Feature>
<Feature icon="mdi:looks" title="Prettier">
Less worry about formatting your code, let the Astro Prettier integration do the heavy lifting.
</Feature>
<Feature icon="mdi:eslint" title="ESLint">
Lint your code with strict a11y settings to ensure you stay on track with the WCAG standards.
</Feature>
<Feature icon="mdi:book-open-page-variant" title="Blog">
This theme comes with a fully integrated blog, dynamic pages and SEO optimization.
</Feature>
<Feature icon="mdi:language-markdown" title="Markdown & MDX">
Easily use .md and .mdx pages to build your websites or use it with Netlify CMS.
</Feature>
<Feature icon="mdi:theme-light-dark" title="Dark mode">
Fully integrated Dark mode gives your users the choice for their favorite viewing mode.
</Feature>
<Feature icon="mdi:cog" title="Design System">
The theme offers some very handy utilities to help you build your website faster.
</Feature>
<Feature icon="mdi:lighthouse" title="Lighthouse Scores">
Excellent lighthouse scores means your website will load faster and get better SEO rankings.
</Feature>
</div>
</div>
</section>
<ContentMedia imgSrc="/accessible-components.webp">
<h2>Accessible Components</h2>
<p class="text-2xl">
This theme provides plenty of tried and tested Accessible Astro Components. Some are native to this theme and a
lot of others are integrated using a <a href="https://github.com/markteekman/accessible-astro-components"
>separate package</a
>. They'll get you up and running in building an accessible solution for your visitors.
</p>
</ContentMedia>
<ContentMedia imgSrc="/wcag-compliant.webp" reverseImg={true}>
<h2>WCAG 2.1 AA Compliant</h2>
<p class="text-2xl">
Using semantic HTML, landmarks, skip links, screen reader friendly content, aria-labels, keyboard accessible
navigation and components, clear outlines and tab indicators and the right color contrast, you're more certain of
reaching WCAG AA compliance.
</p>
</ContentMedia>
<section class="mb-32 mt-64">
<div class="container">
<h2 class="mb-16 text-6xl">Counters</h2>
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-4">
<Counter count="520" title="Stars" sub="On GitHub" />
<Counter count="17" title="Accessible" sub="Components" />
<Counter count="500" title="Commits" sub="Merged" />
<Counter count="18+" title="Months" sub="Since launch" />
</div>
</div>
</section>
</DefaultLayout>

16
src/pages/markdown-page.md
View File

@@ -1,16 +0,0 @@
---
layout: ../layouts/MarkdownLayout.astro
title: Markdown Page
---
# Markdown Page
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae veniam repellat deleniti obcaecati facilis non, praesentium aperiam laudantium excepturi assumenda doloremque animi quis aliquam eligendi quia nemo asperiores et eaque, sunt voluptatibus, saepe exercitationem id. Quis sequi maxime fugiat nam reprehenderit nesciunt quaerat obcaecati, ipsa dignissimos voluptatum voluptatem, optio quidem quos repudiandae dolorem voluptatibus fuga officia odio nemo recusandae voluptas.
```js
console.log('Hello Accessible World!')
```
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae veniam repellat deleniti obcaecati facilis non, praesentium aperiam laudantium excepturi assumenda doloremque animi quis aliquam eligendi quia nemo asperiores et eaque, sunt voluptatibus, saepe exercitationem id. Quis sequi maxime fugiat nam reprehenderit nesciunt quaerat obcaecati, ipsa dignissimos voluptatum voluptatem, optio quidem quos repudiandae dolorem voluptatibus fuga officia odio nemo recusandae voluptas.
[Get this theme on GitHub](https://github.com/markteekman/accessible-astro-starter)

27
src/pages/mdx-page.mdx
View File

@@ -1,27 +0,0 @@
---
layout: ../layouts/MarkdownLayout.astro
title: MDX Page
---
import { Icon } from 'astro-icon/components'
import { Notification } from 'accessible-astro-components'
# MDX Page
<Notification type="info">
<Icon name="ion:information-circle-outline" />
<p>
<strong>Info:</strong> This page utilizes Astro's MDX feature which let's you use components in a markdown file and
supports out-of-the-box syntax highlighting with Shiki.
</p>
</Notification>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae veniam repellat deleniti obcaecati facilis non, praesentium aperiam laudantium excepturi assumenda doloremque animi quis aliquam eligendi quia nemo asperiores et eaque, sunt voluptatibus, saepe exercitationem id. Quis sequi maxime fugiat nam reprehenderit nesciunt quaerat obcaecati, ipsa dignissimos voluptatum voluptatem, optio quidem quos repudiandae dolorem voluptatibus fuga officia odio nemo recusandae voluptas.
```js
console.log('Hello Accessible World!')
```
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae veniam repellat deleniti obcaecati facilis non, praesentium aperiam laudantium excepturi assumenda doloremque animi quis aliquam eligendi quia nemo asperiores et eaque, sunt voluptatibus, saepe exercitationem id. Quis sequi maxime fugiat nam reprehenderit nesciunt quaerat obcaecati, ipsa dignissimos voluptatum voluptatem, optio quidem quos repudiandae dolorem voluptatibus fuga officia odio nemo recusandae voluptas.
[Get this theme on GitHub](https://github.com/markteekman/accessible-astro-starter)