diff options
22 files changed, 565 insertions, 461 deletions
diff --git a/examples/starlog/README.md b/examples/starlog/README.md index 0ccf2dcef..da5cb142c 100644 --- a/examples/starlog/README.md +++ b/examples/starlog/README.md @@ -1,4 +1,5 @@ # Starlog + ## Release notes theme for Astro  diff --git a/examples/starlog/astro.config.mjs b/examples/starlog/astro.config.mjs index eed4cdda8..b093ec0e0 100644 --- a/examples/starlog/astro.config.mjs +++ b/examples/starlog/astro.config.mjs @@ -2,5 +2,5 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config export default defineConfig({ - site: "https://example.com", + site: 'https://example.com', }); diff --git a/examples/starlog/package.json b/examples/starlog/package.json index a602acfda..8975eaa5c 100644 --- a/examples/starlog/package.json +++ b/examples/starlog/package.json @@ -14,4 +14,4 @@ "sass": "^1.69.5", "sharp": "^0.32.5" } -}
\ No newline at end of file +} diff --git a/examples/starlog/src/components/BaseHead.astro b/examples/starlog/src/components/BaseHead.astro index 40c0baefc..e32945c1c 100644 --- a/examples/starlog/src/components/BaseHead.astro +++ b/examples/starlog/src/components/BaseHead.astro @@ -3,19 +3,17 @@ import { ViewTransitions } from 'astro:transitions'; import SEO, { type Props as SEOProps } from './SEO.astro'; import { SiteTitle, SiteDescription } from '../consts'; -export type Props = Partial<SEOProps> -const { - title = SiteTitle, - name = SiteTitle, - description = SiteDescription, - ...seo -} = Astro.props +export type Props = Partial<SEOProps>; +const { title = SiteTitle, name = SiteTitle, description = SiteDescription, ...seo } = Astro.props; --- <SEO {title} {description} {name} {...seo} /> -<link rel="preconnect" href="https://fonts.googleapis.com"> -<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Source+Code+Pro&display=swap" rel="stylesheet"> +<link rel="preconnect" href="https://fonts.googleapis.com" /> +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> +<link + href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Source+Code+Pro&display=swap" + rel="stylesheet" +/> <ViewTransitions /> diff --git a/examples/starlog/src/components/Footer.astro b/examples/starlog/src/components/Footer.astro index 6c93cd8ed..276550d4a 100644 --- a/examples/starlog/src/components/Footer.astro +++ b/examples/starlog/src/components/Footer.astro @@ -3,10 +3,10 @@ import '../styles/global.scss'; --- <footer> - <p>© 2023</p> - <div class="footer_links"> - <a href="#">Discord</a> - <a href="#">X</a> - <a href="#">GitHub</a> - </div> + <p>© 2023</p> + <div class="footer_links"> + <a href="#">Discord</a> + <a href="#">X</a> + <a href="#">GitHub</a> + </div> </footer> diff --git a/examples/starlog/src/components/FormattedDate.astro b/examples/starlog/src/components/FormattedDate.astro index 3cc0d768f..377286d9f 100644 --- a/examples/starlog/src/components/FormattedDate.astro +++ b/examples/starlog/src/components/FormattedDate.astro @@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'astro/types'; type Props = HTMLAttributes<'time'> & { date: Date; -} +}; const { date, ...attrs } = Astro.props; --- @@ -19,7 +19,7 @@ const { date, ...attrs } = Astro.props; </time> <style> - time { - display: block; - } + time { + display: block; + } </style> diff --git a/examples/starlog/src/components/Header.astro b/examples/starlog/src/components/Header.astro index 90caab23e..bbdaf1e70 100644 --- a/examples/starlog/src/components/Header.astro +++ b/examples/starlog/src/components/Header.astro @@ -4,21 +4,51 @@ import { SiteTitle } from '../consts'; --- <header> - <nav> - <h2 id="site_title"> - <a href="/"> - <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M.654 3.276C0 4.56 0 6.24 0 9.6v4.8c0 3.36 0 5.04.654 6.324a6 6 0 0 0 2.622 2.622C4.56 24 6.24 24 9.6 24h4.8c3.36 0 5.04 0 6.324-.654a6 6 0 0 0 2.622-2.622C24 19.44 24 17.76 24 14.4V9.6c0-3.36 0-5.04-.654-6.324A6 6 0 0 0 20.724.654C19.44 0 17.76 0 14.4 0H9.6C6.24 0 4.56 0 3.276.654A6 6 0 0 0 .654 3.276Zm10.875 16.41a.5.5 0 0 0 .942 0l.628-1.754a8 8 0 0 1 4.833-4.833l1.754-.628a.5.5 0 0 0 0-.942l-1.754-.628A8 8 0 0 1 13.1 6.068l-.628-1.754a.5.5 0 0 0-.942 0l-.628 1.754A8 8 0 0 1 6.068 10.9l-1.754.628a.5.5 0 0 0 0 .942l1.754.628a8 8 0 0 1 4.833 4.833l.628 1.754Z" clip-rule="evenodd"/><path stroke="url(#b)" stroke-opacity=".5" stroke-width=".5" d="M.25 9.6c0-1.684 0-2.932.08-3.92.081-.985.24-1.69.547-2.29A5.75 5.75 0 0 1 3.39.877C3.99.57 4.695.41 5.68.33 6.668.25 7.916.25 9.6.25h4.8c1.684 0 2.932 0 3.92.08.985.081 1.69.24 2.29.547a5.75 5.75 0 0 1 2.513 2.513c.306.6.466 1.305.546 2.29.08.988.081 2.236.081 3.92v4.8c0 1.684 0 2.932-.08 3.92-.081.985-.24 1.69-.547 2.29a5.75 5.75 0 0 1-2.513 2.513c-.6.306-1.305.466-2.29.546-.988.08-2.236.081-3.92.081H9.6c-1.684 0-2.932 0-3.92-.08-.985-.081-1.69-.24-2.29-.547A5.75 5.75 0 0 1 .877 20.61C.57 20.01.41 19.305.33 18.32.25 17.332.25 16.084.25 14.4V9.6Zm11.044 10.17c.237.663 1.175.663 1.412 0l.628-1.753a7.75 7.75 0 0 1 4.683-4.683l1.753-.628c.663-.237.663-1.175 0-1.412l-1.753-.628a7.75 7.75 0 0 1-4.683-4.683l-.628-1.753c-.237-.663-1.175-.663-1.412 0l-.628 1.753a7.75 7.75 0 0 1-4.683 4.683l-1.753.628c-.663.237-.663 1.175 0 1.412l1.753.628a7.75 7.75 0 0 1 4.683 4.683l.628 1.753Z"/><defs><radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="rotate(-40.136 32.164 11.75) scale(33.3542)" gradientUnits="userSpaceOnUse"><stop offset=".639" stop-color="#9818E7"/><stop offset="1" stop-color="#DF7F4F"/></radialGradient><linearGradient id="b" x1="12" x2="12" y1="0" y2="24" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></svg> - {SiteTitle} - </a> - </h2> - <div class="links"> - <a href="mailto:contactus@yourwebsite.com">Contact</a> - </div> - </nav> + <nav> + <h2 id="site_title"> + <a href="/"> + <svg + aria-hidden="true" + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + fill="none" + ><path + fill="url(#a)" + fill-rule="evenodd" + d="M.654 3.276C0 4.56 0 6.24 0 9.6v4.8c0 3.36 0 5.04.654 6.324a6 6 0 0 0 2.622 2.622C4.56 24 6.24 24 9.6 24h4.8c3.36 0 5.04 0 6.324-.654a6 6 0 0 0 2.622-2.622C24 19.44 24 17.76 24 14.4V9.6c0-3.36 0-5.04-.654-6.324A6 6 0 0 0 20.724.654C19.44 0 17.76 0 14.4 0H9.6C6.24 0 4.56 0 3.276.654A6 6 0 0 0 .654 3.276Zm10.875 16.41a.5.5 0 0 0 .942 0l.628-1.754a8 8 0 0 1 4.833-4.833l1.754-.628a.5.5 0 0 0 0-.942l-1.754-.628A8 8 0 0 1 13.1 6.068l-.628-1.754a.5.5 0 0 0-.942 0l-.628 1.754A8 8 0 0 1 6.068 10.9l-1.754.628a.5.5 0 0 0 0 .942l1.754.628a8 8 0 0 1 4.833 4.833l.628 1.754Z" + clip-rule="evenodd"></path><path + stroke="url(#b)" + stroke-opacity=".5" + stroke-width=".5" + d="M.25 9.6c0-1.684 0-2.932.08-3.92.081-.985.24-1.69.547-2.29A5.75 5.75 0 0 1 3.39.877C3.99.57 4.695.41 5.68.33 6.668.25 7.916.25 9.6.25h4.8c1.684 0 2.932 0 3.92.08.985.081 1.69.24 2.29.547a5.75 5.75 0 0 1 2.513 2.513c.306.6.466 1.305.546 2.29.08.988.081 2.236.081 3.92v4.8c0 1.684 0 2.932-.08 3.92-.081.985-.24 1.69-.547 2.29a5.75 5.75 0 0 1-2.513 2.513c-.6.306-1.305.466-2.29.546-.988.08-2.236.081-3.92.081H9.6c-1.684 0-2.932 0-3.92-.08-.985-.081-1.69-.24-2.29-.547A5.75 5.75 0 0 1 .877 20.61C.57 20.01.41 19.305.33 18.32.25 17.332.25 16.084.25 14.4V9.6Zm11.044 10.17c.237.663 1.175.663 1.412 0l.628-1.753a7.75 7.75 0 0 1 4.683-4.683l1.753-.628c.663-.237.663-1.175 0-1.412l-1.753-.628a7.75 7.75 0 0 1-4.683-4.683l-.628-1.753c-.237-.663-1.175-.663-1.412 0l-.628 1.753a7.75 7.75 0 0 1-4.683 4.683l-1.753.628c-.663.237-.663 1.175 0 1.412l1.753.628a7.75 7.75 0 0 1 4.683 4.683l.628 1.753Z" + ></path><defs + ><radialGradient + id="a" + cx="0" + cy="0" + r="1" + gradientTransform="rotate(-40.136 32.164 11.75) scale(33.3542)" + gradientUnits="userSpaceOnUse" + ><stop offset=".639" stop-color="#9818E7"></stop><stop offset="1" stop-color="#DF7F4F" + ></stop></radialGradient + ><linearGradient id="b" x1="12" x2="12" y1="0" y2="24" gradientUnits="userSpaceOnUse" + ><stop stop-color="#fff"></stop><stop offset="1" stop-color="#fff" stop-opacity="0" + ></stop></linearGradient + ></defs + ></svg + > + {SiteTitle} + </a> + </h2> + <div class="links"> + <a href="mailto:contactus@yourwebsite.com">Contact</a> + </div> + </nav> </header> <style> - .links a { - text-decoration: none; - } + .links a { + text-decoration: none; + } </style> diff --git a/examples/starlog/src/components/SEO.astro b/examples/starlog/src/components/SEO.astro index 7533f8528..1e2ddcca2 100644 --- a/examples/starlog/src/components/SEO.astro +++ b/examples/starlog/src/components/SEO.astro @@ -1,66 +1,66 @@ --- -import type { ImageMetadata } from 'astro' +import type { ImageMetadata } from 'astro'; type Image = { - src: string | ImageMetadata, - alt: string -} + src: string | ImageMetadata; + alt: string; +}; type SEOMetadata = { - name: string - title: string - description: string - image?: Image | undefined - canonicalURL?: URL | string | undefined - locale?: string -} + name: string; + title: string; + description: string; + image?: Image | undefined; + canonicalURL?: URL | string | undefined; + locale?: string; +}; type OpenGraph = Partial<SEOMetadata> & { - type?: string -} + type?: string; +}; type Twitter = Partial<SEOMetadata> & { - handle?: string - card?: 'summary' | 'summary_large_image' -} + handle?: string; + card?: 'summary' | 'summary_large_image'; +}; export type Props = SEOMetadata & { - og?: OpenGraph - twitter?: Twitter -} + og?: OpenGraph; + twitter?: Twitter; +}; const { - name, - title, - description, - image, - locale = 'en', - canonicalURL = new URL(Astro.url.pathname, Astro.site), -} = Astro.props + name, + title, + description, + image, + locale = 'en', + canonicalURL = new URL(Astro.url.pathname, Astro.site), +} = Astro.props; const og = { - name, - title, - description, - canonicalURL, - image, - locale, - type: "website", - ...Astro.props.og ?? {}, -} satisfies OpenGraph + name, + title, + description, + canonicalURL, + image, + locale, + type: 'website', + ...(Astro.props.og ?? {}), +} satisfies OpenGraph; const twitter = { - name, - title, - description, - canonicalURL, - image, - locale, - card: "summary_large_image", - ...Astro.props.twitter, -} + name, + title, + description, + canonicalURL, + image, + locale, + card: 'summary_large_image', + ...Astro.props.twitter, +}; function normalizeImageUrl(image: string | ImageMetadata) { - return typeof image === 'string' ? image : image.src + return typeof image === 'string' ? image : image.src; } --- diff --git a/examples/starlog/src/consts.ts b/examples/starlog/src/consts.ts index 4541a150d..3e91752e1 100644 --- a/examples/starlog/src/consts.ts +++ b/examples/starlog/src/consts.ts @@ -3,4 +3,3 @@ export const SiteTitle = 'Starlog'; export const SiteDescription = 'Welcome to my website!'; - diff --git a/examples/starlog/src/content/config.ts b/examples/starlog/src/content/config.ts index ae9e67cdc..5cc4c697f 100644 --- a/examples/starlog/src/content/config.ts +++ b/examples/starlog/src/content/config.ts @@ -1,19 +1,19 @@ -import { defineCollection, z } from "astro:content" +import { defineCollection, z } from 'astro:content'; const releases = defineCollection({ - // Type-check frontmatter using a schema - schema: ({ image }) => z.object({ - title: z.string(), - description: z.string(), - versionNumber: z.string(), - image: z.object({ - src: image(), - alt: z.string() - }), - // Transform string to Date object - date: z.date({ coerce: true }), - }) -}) + // Type-check frontmatter using a schema + schema: ({ image }) => + z.object({ + title: z.string(), + description: z.string(), + versionNumber: z.string(), + image: z.object({ + src: image(), + alt: z.string(), + }), + // Transform string to Date object + date: z.date({ coerce: true }), + }), +}); export const collections = { releases }; - diff --git a/examples/starlog/src/content/releases/1_0.md b/examples/starlog/src/content/releases/1_0.md index 4d977f19c..a5eeff437 100644 --- a/examples/starlog/src/content/releases/1_0.md +++ b/examples/starlog/src/content/releases/1_0.md @@ -4,8 +4,8 @@ date: '2022-03-21' versionNumber: '1.0' description: 'This is the first post of my new Astro blog.' image: - src: '../../assets/starlog-placeholder-1.jpg' - alt: 'The full Astro logo.' + src: '../../assets/starlog-placeholder-1.jpg' + alt: 'The full Astro logo.' --- ## A New World with 1.0 @@ -16,14 +16,14 @@ Hey there, Nebulous users! We're back with some exciting updates that will turbo ### 🍿 New Features & Enhancements -* __NebulaProtect Supercharged:__ Enjoy beefed-up security and real-time monitoring to keep your digital fortress unbreachable. -* __NebulaConnect for Teams:__ Collaboration is a breeze with integrated project management tools. -* __Speed Boost Galore:__ We've fine-tuned Nebulous for ultimate speed and responsiveness. +- **NebulaProtect Supercharged:** Enjoy beefed-up security and real-time monitoring to keep your digital fortress unbreachable. +- **NebulaConnect for Teams:** Collaboration is a breeze with integrated project management tools. +- **Speed Boost Galore:** We've fine-tuned Nebulous for ultimate speed and responsiveness. ### 🐞 Bug Fixes -* Kicked pesky crashes out the door for NebulaSync. -* Fixed rare data hiccups during file transfers. -* Nebulous is now even friendly with older devices. +- Kicked pesky crashes out the door for NebulaSync. +- Fixed rare data hiccups during file transfers. +- Nebulous is now even friendly with older devices. Thank you for making Nebulous your tech partner. We thrive on your feedback, so if you have ideas or run into bumps, don't hesitate to drop a line to our support wizards. Together, we're taking Nebulous to the next level! diff --git a/examples/starlog/src/content/releases/1_4.md b/examples/starlog/src/content/releases/1_4.md index aca421d78..aacab8a84 100644 --- a/examples/starlog/src/content/releases/1_4.md +++ b/examples/starlog/src/content/releases/1_4.md @@ -4,8 +4,8 @@ date: '2022-04-16' versionNumber: '1.4' description: 'This is the first post of my new Astro blog.' image: - src: '../../assets/starlog-placeholder-14.jpg' - alt: 'The full Astro logo.' + src: '../../assets/starlog-placeholder-14.jpg' + alt: 'The full Astro logo.' --- ## Go further with 1.4 @@ -16,14 +16,14 @@ Hello, Nebulous enthusiasts! It's that time again—time for us to unveil the la ### 🍿 New Features & Enhancements -* __NebulaSync Quantum:__ Prepare for a mind-blowing file syncing experience. It's faster, smarter, and more intuitive than ever before. -* __NebulaAI Odyssey:__ Welcome to the era of NebulaAI Odyssey—a journey into the boundless possibilities of artificial intelligence. From image manipulation to language translation, Odyssey empowers you like never before. +- **NebulaSync Quantum:** Prepare for a mind-blowing file syncing experience. It's faster, smarter, and more intuitive than ever before. +- **NebulaAI Odyssey:** Welcome to the era of NebulaAI Odyssey—a journey into the boundless possibilities of artificial intelligence. From image manipulation to language translation, Odyssey empowers you like never before. ### 🐞 Bug Fixes -* Squashed even more bugs, making NebulaSync and other features more reliable than ever. -* Streamlined data transfer processes for flawless file exchanges. -* Extended support for older devices to ensure everyone enjoys Nebulous. -* Elevating error handling to the next level, ensuring a hiccup-free experience. +- Squashed even more bugs, making NebulaSync and other features more reliable than ever. +- Streamlined data transfer processes for flawless file exchanges. +- Extended support for older devices to ensure everyone enjoys Nebulous. +- Elevating error handling to the next level, ensuring a hiccup-free experience. Thank you for being a part of the Nebulous journey. Your feedback fuels our innovation, so don't hesitate to share your thoughts or report any hiccups with our dedicated support team. Together, we're shaping the future of tech with Nebulous! diff --git a/examples/starlog/src/content/releases/1_8.md b/examples/starlog/src/content/releases/1_8.md index b1fdd93d6..d300f964c 100644 --- a/examples/starlog/src/content/releases/1_8.md +++ b/examples/starlog/src/content/releases/1_8.md @@ -4,8 +4,8 @@ date: '2022-06-01' versionNumber: '1.8' description: 'This is the first post of my new Astro blog.' image: - src: '../../assets/starlog-placeholder-18.jpg' - alt: 'The full Astro logo.' + src: '../../assets/starlog-placeholder-18.jpg' + alt: 'The full Astro logo.' --- ## Faster, Stronger, Betterer @@ -16,14 +16,14 @@ Hey there, Nebulous users! We're back with some exciting updates that will turbo ### New Features & Enhancements -* __NebulaProtect Supercharged:__ Enjoy beefed-up security and real-time monitoring to keep your digital fortress unbreachable. -* __NebulaConnect for Teams:__ Collaboration is a breeze with integrated project management tools. -* __Speed Boost Galore:__ We've fine-tuned Nebulous for ultimate speed and responsiveness. +- **NebulaProtect Supercharged:** Enjoy beefed-up security and real-time monitoring to keep your digital fortress unbreachable. +- **NebulaConnect for Teams:** Collaboration is a breeze with integrated project management tools. +- **Speed Boost Galore:** We've fine-tuned Nebulous for ultimate speed and responsiveness. ### 🐞 Bug Fixes -* Kicked pesky crashes out the door for NebulaSync. -* Fixed rare data hiccups during file transfers. -* Nebulous is now even friendly with older devices. +- Kicked pesky crashes out the door for NebulaSync. +- Fixed rare data hiccups during file transfers. +- Nebulous is now even friendly with older devices. Thank you for making Nebulous your tech partner. We thrive on your feedback, so if you have ideas or run into bumps, don't hesitate to drop a line to our support wizards. Together, we're taking Nebulous to the next level! diff --git a/examples/starlog/src/content/releases/2_0.md b/examples/starlog/src/content/releases/2_0.md index 5316e5a75..6a01d76fc 100644 --- a/examples/starlog/src/content/releases/2_0.md +++ b/examples/starlog/src/content/releases/2_0.md @@ -4,8 +4,8 @@ date: '2022-07-01' versionNumber: '2.0' description: 'This is the first post of my new Astro blog.' image: - src: '../../assets/starlog-placeholder-2.jpg' - alt: 'The full Astro logo.' + src: '../../assets/starlog-placeholder-2.jpg' + alt: 'The full Astro logo.' --- ## Introducing Nebulous 2.0! @@ -16,22 +16,23 @@ Greetings, Nebulous users! We're excited to bring you the latest updates in our ### 🍿 New Features & Enhancements -* __NebulaSync v2.0:__ We're thrilled to introduce NebulaSync 2.0, our revamped file synchronization tool. It now offers blazing-fast sync speeds, improved reliability, and enhanced cross-device compatibility. -* __Enhanced NebulaProtect:__ NebulaProtect, our comprehensive security suite, has received a major update. Enjoy advanced threat detection, and real-time monitoring. -* __NebulaConnect for Teams:__ Collaborate effortlessly with NebulaConnect for Teams. This powerful feature allows seamless integration with your favorite project management tools, enabling you to manage tasks, share documents, and track progress in real-time. +- **NebulaSync v2.0:** We're thrilled to introduce NebulaSync 2.0, our revamped file synchronization tool. It now offers blazing-fast sync speeds, improved reliability, and enhanced cross-device compatibility. +- **Enhanced NebulaProtect:** NebulaProtect, our comprehensive security suite, has received a major update. Enjoy advanced threat detection, and real-time monitoring. +- **NebulaConnect for Teams:** Collaborate effortlessly with NebulaConnect for Teams. This powerful feature allows seamless integration with your favorite project management tools, enabling you to manage tasks, share documents, and track progress in real-time. ### 🐞 Bug Fixes -* Resolved occasional crashing issues when using NebulaSync. -* Fixed a bug causing data corruption in rare cases during file transfers. -* Improved compatibility with older devices to ensure a seamless experience for all users. -* Enhanced error handling and reporting for a smoother user experience. +- Resolved occasional crashing issues when using NebulaSync. +- Fixed a bug causing data corruption in rare cases during file transfers. +- Improved compatibility with older devices to ensure a seamless experience for all users. +- Enhanced error handling and reporting for a smoother user experience. ### 👀 Coming Soon We can't spill all the beans just yet, but we're thrilled to give you a sneak peek of what's coming in the next Nebulous release: -* __NebulaWallet:__ A secure and user-friendly cryptocurrency wallet integrated directly into Nebulous for seamless digital asset management. -* __NebulaConnect Mobile:__ Take your collaboration to the next level with our upcoming mobile app, enabling you to work on the go. -* __NebulaLabs:__ Our developer tools and API enhancements, providing you with even more customization options and possibilities. + +- **NebulaWallet:** A secure and user-friendly cryptocurrency wallet integrated directly into Nebulous for seamless digital asset management. +- **NebulaConnect Mobile:** Take your collaboration to the next level with our upcoming mobile app, enabling you to work on the go. +- **NebulaLabs:** Our developer tools and API enhancements, providing you with even more customization options and possibilities. If you have any suggestions or encounter any issues, don't hesitate to reach out to our support team. Together, we'll continue to make Nebulous the ultimate tech solution for you. diff --git a/examples/starlog/src/layouts/IndexLayout.astro b/examples/starlog/src/layouts/IndexLayout.astro index faa083b96..3f0bd0c96 100644 --- a/examples/starlog/src/layouts/IndexLayout.astro +++ b/examples/starlog/src/layouts/IndexLayout.astro @@ -1,23 +1,23 @@ --- -import BaseHead, { type Props as HeadProps } from "../components/BaseHead.astro"; -import Header from "../components/Header.astro"; -import Footer from "../components/Footer.astro"; +import BaseHead, { type Props as HeadProps } from '../components/BaseHead.astro'; +import Header from '../components/Header.astro'; +import Footer from '../components/Footer.astro'; -type Props = HeadProps +type Props = HeadProps; -const { ...head } = Astro.props +const { ...head } = Astro.props; --- <!doctype html> -<meta charset="utf-8"> +<meta charset="utf-8" /> <html lang="en"> <head> - <BaseHead {...head} /> - <body> - <div class="glow"></div> - <Header /> - <slot /> - <Footer /> - </body> + <BaseHead {...head} /> + <body> + <div class="glow"></div> + <Header /> + <slot /> + <Footer /> + </body> + </head> </html> - diff --git a/examples/starlog/src/layouts/PostLayout.astro b/examples/starlog/src/layouts/PostLayout.astro index 3b65e55cd..9c87a7b88 100644 --- a/examples/starlog/src/layouts/PostLayout.astro +++ b/examples/starlog/src/layouts/PostLayout.astro @@ -1,13 +1,13 @@ --- import type { CollectionEntry } from 'astro:content'; -import BaseHead from "../components/BaseHead.astro"; +import BaseHead from '../components/BaseHead.astro'; import FormattedDate from '../components/FormattedDate.astro'; -import Header from "../components/Header.astro"; -import Footer from "../components/Footer.astro"; +import Header from '../components/Header.astro'; +import Footer from '../components/Footer.astro'; type Props = { - release: CollectionEntry<'releases'> -} + release: CollectionEntry<'releases'>; +}; const { release } = Astro.props; --- @@ -15,8 +15,12 @@ const { release } = Astro.props; <!doctype html> <html lang="en"> <head> - <BaseHead title={release.data.title} description={release.data.description} image={release.data.image} /> - <body> + <BaseHead + title={release.data.title} + description={release.data.description} + image={release.data.image} + /> + </head><body> <div class="glow"></div> <Header /> <div class="post single" transition:persist transition:name="post"> @@ -33,4 +37,3 @@ const { release } = Astro.props; <Footer /> </body> </html> - diff --git a/examples/starlog/src/pages/index.astro b/examples/starlog/src/pages/index.astro index 874b9da4c..b7e6ea0f5 100644 --- a/examples/starlog/src/pages/index.astro +++ b/examples/starlog/src/pages/index.astro @@ -6,28 +6,31 @@ import Layout from '../layouts/IndexLayout.astro'; const posts = await getCollection('releases'); posts.sort((a, b) => +b.data.date - +a.data.date); --- + <Layout> <main> <h1 class="page_title">Changelog</h1> <hr /> <ul class="posts" transition:name="post"> - {posts.map(post => - <li class="post"> - <div class="version_wrapper"> - <div class="version_info"> - <a href={`/releases/${post.slug}`}> - <div class="version_number">{post.data.versionNumber}</div> - <FormattedDate class="date" date={post.data.date} /> - </a> + { + posts.map((post) => ( + <li class="post"> + <div class="version_wrapper"> + <div class="version_info"> + <a href={`/releases/${post.slug}`}> + <div class="version_number">{post.data.versionNumber}</div> + <FormattedDate class="date" date={post.data.date} /> + </a> </div> </div> - <div class="content"> - { - post.render().then(({ Content }) => (<Content />)) - } - </div> - </li> - )} + <div class="content"> + {post.render().then(({ Content }) => ( + <Content /> + ))} + </div> + </li> + )) + } </ul> </main> </Layout> diff --git a/examples/starlog/src/pages/releases/[slug].astro b/examples/starlog/src/pages/releases/[slug].astro index 6218539b2..88fa74d3c 100644 --- a/examples/starlog/src/pages/releases/[slug].astro +++ b/examples/starlog/src/pages/releases/[slug].astro @@ -1,21 +1,21 @@ --- import { getCollection } from 'astro:content'; -import Layout from '../../layouts/PostLayout.astro' +import Layout from '../../layouts/PostLayout.astro'; export async function getStaticPaths() { - const releases = await getCollection('releases') + const releases = await getCollection('releases'); - return releases.map((release) => ({ - params: { slug: release.slug }, - props: { release } - })) + return releases.map((release) => ({ + params: { slug: release.slug }, + props: { release }, + })); } -const { release } = Astro.props +const { release } = Astro.props; -const { Content } = await release.render() +const { Content } = await release.render(); --- <Layout {release}> - <Content /> + <Content /> </Layout> diff --git a/examples/starlog/src/styles/colors.scss b/examples/starlog/src/styles/colors.scss index 815d1ea00..151abb0ed 100644 --- a/examples/starlog/src/styles/colors.scss +++ b/examples/starlog/src/styles/colors.scss @@ -1,64 +1,61 @@ +@function color($color, $tone) { + // @warn map-get($palette,$color); -@function color($color,$tone){ + @if map-has-key($palette, $color) { + $color: map-get($palette, $color); - // @warn map-get($palette,$color); + @if map-has-key($color, $tone) { + $tone: map-get($color, $tone); + @return $tone; + } - @if map-has-key($palette,$color){ - $color: map-get($palette,$color); + @warn "unknown tone `#{$tone}` in color"; + @return null; + } - @if map-has-key($color,$tone){ - $tone: map-get($color,$tone); - @return $tone; - } - - @warn "unknown tone `#{$tone}` in color"; - @return null; - } - - @warn "unknown color `#{$color}` in palette"; - @return null; - + @warn "unknown color `#{$color}` in palette"; + @return null; } $white: #ffffff; $palette: ( - purple: ( - 50: #F2E8FD, - 100: #E6D1FA, - 200: #CFA3F5, - 300: #BA75F0, - 400: #A846EC, - 500: #9818E7, - 600: #7B13B4, - 700: #5B0E81, - 800: #3A084E, - 900: #15031C, - 950: #020002 - ), - orange: ( - 50: #FBF0EA, - 100: #F8E3D9, - 200: #F2CAB7, - 300: #ECB194, - 400: #E59872, - 500: #DF7F4F, - 600: #D05F26, - 700: #A1491D, - 800: #713315, - 900: #421E0C, - 950: #2A1308 - ), - gray: ( - 50: #F6F6F9, - 100: #E6E7EF, - 200: #C7C9DB, - 300: #A8ABC7, - 400: #898EB4, - 500: #6A71A0, - 600: #545B83, - 700: #404664, - 800: #2C3145, - 900: #181B26, - 950: #0E1016 - ) -);
\ No newline at end of file + purple: ( + 50: #f2e8fd, + 100: #e6d1fa, + 200: #cfa3f5, + 300: #ba75f0, + 400: #a846ec, + 500: #9818e7, + 600: #7b13b4, + 700: #5b0e81, + 800: #3a084e, + 900: #15031c, + 950: #020002, + ), + orange: ( + 50: #fbf0ea, + 100: #f8e3d9, + 200: #f2cab7, + 300: #ecb194, + 400: #e59872, + 500: #df7f4f, + 600: #d05f26, + 700: #a1491d, + 800: #713315, + 900: #421e0c, + 950: #2a1308, + ), + gray: ( + 50: #f6f6f9, + 100: #e6e7ef, + 200: #c7c9db, + 300: #a8abc7, + 400: #898eb4, + 500: #6a71a0, + 600: #545b83, + 700: #404664, + 800: #2c3145, + 900: #181b26, + 950: #0e1016, + ), +); diff --git a/examples/starlog/src/styles/layout.scss b/examples/starlog/src/styles/layout.scss index 5b13dbac3..f36c223a5 100644 --- a/examples/starlog/src/styles/layout.scss +++ b/examples/starlog/src/styles/layout.scss @@ -3,238 +3,289 @@ $tablet: 768px; $mobile: 420px; * { - box-sizing: border-box; + box-sizing: border-box; } body { - margin: 0 auto; - padding: 0 1em; - width: 1040px; - max-width: 100%; - background-color: $white; - @media (prefers-color-scheme: dark) { background-color: color(gray, 950); } - @media (max-width: $tablet) { font-size: 16px; } + margin: 0 auto; + padding: 0 1em; + width: 1040px; + max-width: 100%; + background-color: $white; + @media (prefers-color-scheme: dark) { + background-color: color(gray, 950); + } + @media (max-width: $tablet) { + font-size: 16px; + } } .glow { - width: 100%; - height: 100%; - position: absolute; - z-index: -1; - top: 0; - left:0; - overflow: hidden; - - &:after { - content: ''; - display: block; - position: absolute; - top: -120px; - left: calc(50% - 360px); - width: 720px; - height: 240px; - background: radial-gradient(50% 50% at 50% 50%, rgba(color(orange, 500), 0.2) 0%,rgba(color(orange, 500), 0) 100%); - @media (prefers-color-scheme: dark) { background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%); } - } -} - -::selection { - background: color(orange, 200); - @media (prefers-color-scheme: dark) { background: color(orange, 600) } -} - -a, a:visited { - color: color(orange, 600); - @media (prefers-color-scheme: dark) { color: color(orange, 300) } - transition: 0.1s ease; - - &:hover { - color: color(orange, 500); - } + width: 100%; + height: 100%; + position: absolute; + z-index: -1; + top: 0; + left: 0; + overflow: hidden; + + &:after { + content: ''; + display: block; + position: absolute; + top: -120px; + left: calc(50% - 360px); + width: 720px; + height: 240px; + background: radial-gradient( + 50% 50% at 50% 50%, + rgba(color(orange, 500), 0.2) 0%, + rgba(color(orange, 500), 0) 100% + ); + @media (prefers-color-scheme: dark) { + background: radial-gradient( + 50% 50% at 50% 50%, + rgba(255, 255, 255, 0.06) 0%, + rgba(255, 255, 255, 0) 100% + ); + } + } +} + +::selection { + background: color(orange, 200); + @media (prefers-color-scheme: dark) { + background: color(orange, 600); + } +} + +a, +a:visited { + color: color(orange, 600); + @media (prefers-color-scheme: dark) { + color: color(orange, 300); + } + transition: 0.1s ease; + + &:hover { + color: color(orange, 500); + } } hr { - margin: 1em 0; - border: 0; - border-bottom: 1px solid color(gray, 100); - @media (prefers-color-scheme: dark) { border-color: color(gray, 900) } + margin: 1em 0; + border: 0; + border-bottom: 1px solid color(gray, 100); + @media (prefers-color-scheme: dark) { + border-color: color(gray, 900); + } } nav { - display: flex; - align-items: center; - justify-content: space-between; - margin: 0 0 2em 0; - padding: 2em 0; - - a { - transition: 0.1s ease; - &:hover { - opacity: 0.6; - } - } - - #site_title { - margin: 0; - } - #site_title a { - display: flex; - align-items: center; - gap: 10px; - color: color(gray, 950); - @media (prefers-color-scheme: dark) { color: $white } - font-size: 16px; - font-weight: 700; - letter-spacing: 2px; - line-height: 1; - text-decoration: none; - text-transform: uppercase; - } - .links a { - margin-left: 1em; - color: color(gray, 800); - @media (prefers-color-scheme: dark) { color: color(gray, 200); } - } + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 0 2em 0; + padding: 2em 0; + + a { + transition: 0.1s ease; + &:hover { + opacity: 0.6; + } + } + + #site_title { + margin: 0; + } + #site_title a { + display: flex; + align-items: center; + gap: 10px; + color: color(gray, 950); + @media (prefers-color-scheme: dark) { + color: $white; + } + font-size: 16px; + font-weight: 700; + letter-spacing: 2px; + line-height: 1; + text-decoration: none; + text-transform: uppercase; + } + .links a { + margin-left: 1em; + color: color(gray, 800); + @media (prefers-color-scheme: dark) { + color: color(gray, 200); + } + } } .content { - ol, ul { - padding-left: 2em; - margin-bottom: 1em; - } - - ul { - list-style: none; - - li { - position: relative; - margin-bottom: .75em; - - &:before { - content: ''; - display: block; - position: absolute; - left: -1em; - top: .63em; - width: 8px; - height: 8px; - background: linear-gradient(25deg, color(purple, 500), color(orange, 500)); - border-radius: 99px; - } - } - } + ol, + ul { + padding-left: 2em; + margin-bottom: 1em; + } + + ul { + list-style: none; + + li { + position: relative; + margin-bottom: 0.75em; + + &:before { + content: ''; + display: block; + position: absolute; + left: -1em; + top: 0.63em; + width: 8px; + height: 8px; + background: linear-gradient(25deg, color(purple, 500), color(orange, 500)); + border-radius: 99px; + } + } + } } .page_title { - margin: 1.5em 0; - @media (max-width: $tablet) { margin: .5em 0; } + margin: 1.5em 0; + @media (max-width: $tablet) { + margin: 0.5em 0; + } } .posts { - list-style: none; - padding: 0; + list-style: none; + padding: 0; } .post { - display: flex; - width: 100%; - @media (max-width: $tablet) { flex-flow: column; } + display: flex; + width: 100%; + @media (max-width: $tablet) { + flex-flow: column; + } - &:last-child .content, &.single .content { - border-bottom: 0; - } + &:last-child .content, + &.single .content { + border-bottom: 0; + } } .version_wrapper { - flex-basis: 260px; - @media (max-width: $container) { flex-basis: 140px; } - flex-grow: 0; - flex-shrink: 0; - margin: 4.5em 0 0 0; - @media (max-width: $tablet) { - flex-basis: 0; - margin-top: 2em; - } - - .version_info { - position: sticky; - top: 1em; - @media (max-width: $tablet) { - position: relative; - top: 0; - } - } - - a { - float: left; - color: $white; - text-decoration: none; - transition: 0.1s ease; - - &:hover { - opacity: 0.6; - } - } + flex-basis: 260px; + @media (max-width: $container) { + flex-basis: 140px; + } + flex-grow: 0; + flex-shrink: 0; + margin: 4.5em 0 0 0; + @media (max-width: $tablet) { + flex-basis: 0; + margin-top: 2em; + } + + .version_info { + position: sticky; + top: 1em; + @media (max-width: $tablet) { + position: relative; + top: 0; + } + } + + a { + float: left; + color: $white; + text-decoration: none; + transition: 0.1s ease; + + &:hover { + opacity: 0.6; + } + } } .version_number { - display: inline-block; - font-family: $codeFont; - line-height: 1; - margin-bottom: 8px; - padding: 4px 12px; - color: $white; - background: linear-gradient(25deg, color(purple, 800), color(purple, 700), mix(color(purple, 500), color(orange, 500)), color(orange, 500)); - border-radius: 8px; + display: inline-block; + font-family: $codeFont; + line-height: 1; + margin-bottom: 8px; + padding: 4px 12px; + color: $white; + background: linear-gradient( + 25deg, + color(purple, 800), + color(purple, 700), + mix(color(purple, 500), color(orange, 500)), + color(orange, 500) + ); + border-radius: 8px; } .date { - clear: both; - @media (max-width: $tablet) { display: inline; margin-left: 1em; } - color: color(gray, 800); - @media (prefers-color-scheme: dark) { color: color(gray, 200); } - font-family: $codeFont; - font-size: $fontSizeSmall; + clear: both; + @media (max-width: $tablet) { + display: inline; + margin-left: 1em; + } + color: color(gray, 800); + @media (prefers-color-scheme: dark) { + color: color(gray, 200); + } + font-family: $codeFont; + font-size: $fontSizeSmall; } .content { - margin: 0; - padding: 4em 0; - @media (max-width: $tablet) { - margin: 1em 0; - padding: 0 0 2em 0; - } - border-bottom: 1px solid color(gray, 100); - @media (prefers-color-scheme: dark) { border-color: color(gray, 900); } - *:first-child { - margin-top: 0; - } - img { - max-width: 100%; - height: auto; - border-radius: 12px; - border: 1px solid color(gray, 200); - @media (prefers-color-scheme: dark) { border-color: color(gray, 800) } - } + margin: 0; + padding: 4em 0; + @media (max-width: $tablet) { + margin: 1em 0; + padding: 0 0 2em 0; + } + border-bottom: 1px solid color(gray, 100); + @media (prefers-color-scheme: dark) { + border-color: color(gray, 900); + } + *:first-child { + margin-top: 0; + } + img { + max-width: 100%; + height: auto; + border-radius: 12px; + border: 1px solid color(gray, 200); + @media (prefers-color-scheme: dark) { + border-color: color(gray, 800); + } + } } footer { - display: flex; - padding: 2em 0; - @media (max-width: $tablet) { padding: 1em 0; } - color: color(gray, 500); - justify-content: space-between; - border-top: 1px solid color(gray, 100); - @media (prefers-color-scheme: dark) { border-color: color(gray, 900); } - - a { - margin-left: 1em; - color: color(gray, 500); - text-decoration: none; - &:hover { - color: color(gray, 500); - opacity: 0.6; - } - } -} + display: flex; + padding: 2em 0; + @media (max-width: $tablet) { + padding: 1em 0; + } + color: color(gray, 500); + justify-content: space-between; + border-top: 1px solid color(gray, 100); + @media (prefers-color-scheme: dark) { + border-color: color(gray, 900); + } + a { + margin-left: 1em; + color: color(gray, 500); + text-decoration: none; + &:hover { + color: color(gray, 500); + opacity: 0.6; + } + } +} diff --git a/examples/starlog/src/styles/type.scss b/examples/starlog/src/styles/type.scss index af4dd1c34..388a71c89 100644 --- a/examples/starlog/src/styles/type.scss +++ b/examples/starlog/src/styles/type.scss @@ -1,44 +1,65 @@ -$baseFont: 'Lato', sans-serif; +$baseFont: 'Lato', sans-serif; $codeFont: 'Source Code Pro', monospace; $fontSizeSmall: 15px; body { - font-family: $baseFont; - font-size: 18px; - line-height: 1.65; - font-weight: 400; - @media (prefers-color-scheme: dark) { color: color(gray, 200); } - color: color(gray, 800); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; + font-family: $baseFont; + font-size: 18px; + line-height: 1.65; + font-weight: 400; + @media (prefers-color-scheme: dark) { + color: color(gray, 200); + } + color: color(gray, 800); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } -h1, h2, h3, h4, h5 { - line-height: 1.2; - margin: 1em 0 .5em 0; - @media (prefers-color-scheme: dark) { color: $white; } - color: color( gray, 950); - font-weight: 700; -} - -h1 { font-size: 3.052em;} -h2 {font-size: 2.441em;} -h3 {font-size: 1.953em;} -h4 {font-size: 1.563em;} -h5 {font-size: 1.25em;} +h1, +h2, +h3, +h4, +h5 { + line-height: 1.2; + margin: 1em 0 0.5em 0; + @media (prefers-color-scheme: dark) { + color: $white; + } + color: color(gray, 950); + font-weight: 700; +} + +h1 { + font-size: 3.052em; +} +h2 { + font-size: 2.441em; +} +h3 { + font-size: 1.953em; +} +h4 { + font-size: 1.563em; +} +h5 { + font-size: 1.25em; +} p { - margin: 0 0 1em 0; + margin: 0 0 1em 0; } code { - font-family: $codeFont; + font-family: $codeFont; } -b, strong { - font-weight: 700; - color: #fff; - @media (prefers-color-scheme: dark) { color: $white; } - color: color( gray, 950); -}
\ No newline at end of file +b, +strong { + font-weight: 700; + color: #fff; + @media (prefers-color-scheme: dark) { + color: $white; + } + color: color(gray, 950); +} diff --git a/examples/starlog/tsconfig.json b/examples/starlog/tsconfig.json index 0be1a5714..da42df94e 100644 --- a/examples/starlog/tsconfig.json +++ b/examples/starlog/tsconfig.json @@ -1,4 +1,4 @@ { "extends": "astro/tsconfigs/strict", "exclude": ["dist"] -}
\ No newline at end of file +} |