Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-30 22:03:56 -05:00
Code Issues Activity

[ci] format

Browse source
This commit is contained in:
Mark Peck 2023-12-28 21:10:08 +00:00 committed by astrobot-houston
parent d25813f2cc
commit 3834c124c9
22 changed files with 551 additions and 447 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/starlog/README.md
View file

@ -1,4 +1,5 @@
# Starlog # Starlog
## Release notes theme for Astro ## Release notes theme for Astro
![starlog-gh](https://github.com/doodlemarks/starlog/assets/2244813/9c5c2e46-665a-437e-a971-053db4dbff63) ![starlog-gh](https://github.com/doodlemarks/starlog/assets/2244813/9c5c2e46-665a-437e-a971-053db4dbff63)

2
examples/starlog/astro.config.mjs
View file

@ -2,5 +2,5 @@ import { defineConfig } from 'astro/config';
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: "https://example.com", site: 'https://example.com',
}); });

18
examples/starlog/src/components/BaseHead.astro
View file

@ -3,19 +3,17 @@ import { ViewTransitions } from 'astro:transitions';
import SEO, { type Props as SEOProps } from './SEO.astro'; import SEO, { type Props as SEOProps } from './SEO.astro';
import { SiteTitle, SiteDescription } from '../consts'; import { SiteTitle, SiteDescription } from '../consts';
export type Props = Partial<SEOProps> export type Props = Partial<SEOProps>;
const { const { title = SiteTitle, name = SiteTitle, description = SiteDescription, ...seo } = Astro.props;
title = SiteTitle,
name = SiteTitle,
description = SiteDescription,
...seo
} = Astro.props
--- ---
<SEO {title} {description} {name} {...seo} /> <SEO {title} {description} {name} {...seo} />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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
href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Source+Code+Pro&display=swap"
rel="stylesheet"
/>
<ViewTransitions /> <ViewTransitions />

2
examples/starlog/src/components/FormattedDate.astro
View file

@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'astro/types';
type Props = HTMLAttributes<'time'> & { type Props = HTMLAttributes<'time'> & {
date: Date; date: Date;
} };
const { date, ...attrs } = Astro.props; const { date, ...attrs } = Astro.props;
--- ---

32
examples/starlog/src/components/Header.astro
View file

@ -7,7 +7,37 @@ import { SiteTitle } from '../consts';
<nav> <nav>
<h2 id="site_title"> <h2 id="site_title">
<a href="/"> <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> <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} {SiteTitle}
</a> </a>
</h2> </h2>

52
examples/starlog/src/components/SEO.astro
View file

@ -1,32 +1,32 @@
--- ---
import type { ImageMetadata } from 'astro' import type { ImageMetadata } from 'astro';
type Image = { type Image = {
src: string | ImageMetadata, src: string | ImageMetadata;
alt: string alt: string;
} };
type SEOMetadata = { type SEOMetadata = {
name: string name: string;
title: string title: string;
description: string description: string;
image?: Image | undefined image?: Image | undefined;
canonicalURL?: URL | string | undefined canonicalURL?: URL | string | undefined;
locale?: string locale?: string;
} };
type OpenGraph = Partial<SEOMetadata> & { type OpenGraph = Partial<SEOMetadata> & {
type?: string type?: string;
} };
type Twitter = Partial<SEOMetadata> & { type Twitter = Partial<SEOMetadata> & {
handle?: string handle?: string;
card?: 'summary' | 'summary_large_image' card?: 'summary' | 'summary_large_image';
} };
export type Props = SEOMetadata & { export type Props = SEOMetadata & {
og?: OpenGraph og?: OpenGraph;
twitter?: Twitter twitter?: Twitter;
} };
const { const {
name, name,
@ -35,7 +35,7 @@ const {
image, image,
locale = 'en', locale = 'en',
canonicalURL = new URL(Astro.url.pathname, Astro.site), canonicalURL = new URL(Astro.url.pathname, Astro.site),
} = Astro.props } = Astro.props;
const og = { const og = {
name, name,
@ -44,9 +44,9 @@ const og = {
canonicalURL, canonicalURL,
image, image,
locale, locale,
type: "website", type: 'website',
...Astro.props.og ?? {}, ...(Astro.props.og ?? {}),
} satisfies OpenGraph } satisfies OpenGraph;
const twitter = { const twitter = {
name, name,
@ -55,12 +55,12 @@ const twitter = {
canonicalURL, canonicalURL,
image, image,
locale, locale,
card: "summary_large_image", card: 'summary_large_image',
...Astro.props.twitter, ...Astro.props.twitter,
} };
function normalizeImageUrl(image: string | ImageMetadata) { function normalizeImageUrl(image: string | ImageMetadata) {
return typeof image === 'string' ? image : image.src return typeof image === 'string' ? image : image.src;
} }
--- ---

1
examples/starlog/src/consts.ts
View file

@ -3,4 +3,3 @@
export const SiteTitle = 'Starlog'; export const SiteTitle = 'Starlog';
export const SiteDescription = 'Welcome to my website!'; export const SiteDescription = 'Welcome to my website!';

12
examples/starlog/src/content/config.ts
View file

@ -1,19 +1,19 @@
import { defineCollection, z } from "astro:content" import { defineCollection, z } from 'astro:content';
const releases = defineCollection({ const releases = defineCollection({
// Type-check frontmatter using a schema // Type-check frontmatter using a schema
schema: ({ image }) => z.object({ schema: ({ image }) =>
z.object({
title: z.string(), title: z.string(),
description: z.string(), description: z.string(),
versionNumber: z.string(), versionNumber: z.string(),
image: z.object({ image: z.object({
src: image(), src: image(),
alt: z.string() alt: z.string(),
}), }),
// Transform string to Date object // Transform string to Date object
date: z.date({ coerce: true }), date: z.date({ coerce: true }),
}) }),
}) });
export const collections = { releases }; export const collections = { releases };

12
examples/starlog/src/content/releases/1_0.md
View file

@ -16,14 +16,14 @@ Hey there, Nebulous users! We're back with some exciting updates that will turbo
### 🍿 New Features & Enhancements ### 🍿 New Features & Enhancements
* __NebulaProtect Supercharged:__ Enjoy beefed-up security and real-time monitoring to keep your digital fortress unbreachable. - **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. - **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. - **Speed Boost Galore:** We've fine-tuned Nebulous for ultimate speed and responsiveness.
### 🐞 Bug Fixes ### 🐞 Bug Fixes
* Kicked pesky crashes out the door for NebulaSync. - Kicked pesky crashes out the door for NebulaSync.
* Fixed rare data hiccups during file transfers. - Fixed rare data hiccups during file transfers.
* Nebulous is now even friendly with older devices. - 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! 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!

12
examples/starlog/src/content/releases/1_4.md
View file

@ -16,14 +16,14 @@ Hello, Nebulous enthusiasts! It's that time again—time for us to unveil the la
### 🍿 New Features & Enhancements ### 🍿 New Features & Enhancements
* __NebulaSync Quantum:__ Prepare for a mind-blowing file syncing experience. It's faster, smarter, and more intuitive than ever 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. - **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 ### 🐞 Bug Fixes
* Squashed even more bugs, making NebulaSync and other features more reliable than ever. - Squashed even more bugs, making NebulaSync and other features more reliable than ever.
* Streamlined data transfer processes for flawless file exchanges. - Streamlined data transfer processes for flawless file exchanges.
* Extended support for older devices to ensure everyone enjoys Nebulous. - Extended support for older devices to ensure everyone enjoys Nebulous.
* Elevating error handling to the next level, ensuring a hiccup-free experience. - 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! 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!

12
examples/starlog/src/content/releases/1_8.md
View file

@ -16,14 +16,14 @@ Hey there, Nebulous users! We're back with some exciting updates that will turbo
### New Features & Enhancements ### New Features & Enhancements
* __NebulaProtect Supercharged:__ Enjoy beefed-up security and real-time monitoring to keep your digital fortress unbreachable. - **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. - **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. - **Speed Boost Galore:** We've fine-tuned Nebulous for ultimate speed and responsiveness.
### 🐞 Bug Fixes ### 🐞 Bug Fixes
* Kicked pesky crashes out the door for NebulaSync. - Kicked pesky crashes out the door for NebulaSync.
* Fixed rare data hiccups during file transfers. - Fixed rare data hiccups during file transfers.
* Nebulous is now even friendly with older devices. - 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! 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!

21
examples/starlog/src/content/releases/2_0.md
View file

@ -16,22 +16,23 @@ Greetings, Nebulous users! We're excited to bring you the latest updates in our
### 🍿 New Features & Enhancements ### 🍿 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. - **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. - **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. - **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 ### 🐞 Bug Fixes
* Resolved occasional crashing issues when using NebulaSync. - Resolved occasional crashing issues when using NebulaSync.
* Fixed a bug causing data corruption in rare cases during file transfers. - 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. - Improved compatibility with older devices to ensure a seamless experience for all users.
* Enhanced error handling and reporting for a smoother user experience. - Enhanced error handling and reporting for a smoother user experience.
### 👀 Coming Soon ### 👀 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: 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. - **NebulaWallet:** A secure and user-friendly cryptocurrency wallet integrated directly into Nebulous for seamless digital asset management.
* __NebulaLabs:__ Our developer tools and API enhancements, providing you with even more customization options and possibilities. - **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. 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.

14
examples/starlog/src/layouts/IndexLayout.astro
View file

@ -1,15 +1,15 @@
--- ---
import BaseHead, { type Props as HeadProps } from "../components/BaseHead.astro"; import BaseHead, { type Props as HeadProps } from '../components/BaseHead.astro';
import Header from "../components/Header.astro"; import Header from '../components/Header.astro';
import Footer from "../components/Footer.astro"; import Footer from '../components/Footer.astro';
type Props = HeadProps type Props = HeadProps;
const { ...head } = Astro.props const { ...head } = Astro.props;
--- ---
<!doctype html> <!doctype html>
<meta charset="utf-8"> <meta charset="utf-8" />
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead {...head} /> <BaseHead {...head} />
@ -19,5 +19,5 @@ const { ...head } = Astro.props
<slot /> <slot />
<Footer /> <Footer />
</body> </body>
</head>
</html> </html>

19
examples/starlog/src/layouts/PostLayout.astro
View file

@ -1,13 +1,13 @@
--- ---
import type { CollectionEntry } from 'astro:content'; 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 FormattedDate from '../components/FormattedDate.astro';
import Header from "../components/Header.astro"; import Header from '../components/Header.astro';
import Footer from "../components/Footer.astro"; import Footer from '../components/Footer.astro';
type Props = { type Props = {
release: CollectionEntry<'releases'> release: CollectionEntry<'releases'>;
} };
const { release } = Astro.props; const { release } = Astro.props;
--- ---
@ -15,8 +15,12 @@ const { release } = Astro.props;
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={release.data.title} description={release.data.description} image={release.data.image} /> <BaseHead
<body> title={release.data.title}
description={release.data.description}
image={release.data.image}
/>
</head><body>
<div class="glow"></div> <div class="glow"></div>
<Header /> <Header />
<div class="post single" transition:persist transition:name="post"> <div class="post single" transition:persist transition:name="post">
@ -33,4 +37,3 @@ const { release } = Astro.props;
<Footer /> <Footer />
</body> </body>
</html> </html>

13
examples/starlog/src/pages/index.astro
View file

@ -6,12 +6,14 @@ import Layout from '../layouts/IndexLayout.astro';
const posts = await getCollection('releases'); const posts = await getCollection('releases');
posts.sort((a, b) => +b.data.date - +a.data.date); posts.sort((a, b) => +b.data.date - +a.data.date);
--- ---
<Layout> <Layout>
<main> <main>
<h1 class="page_title">Changelog</h1> <h1 class="page_title">Changelog</h1>
<hr /> <hr />
<ul class="posts" transition:name="post"> <ul class="posts" transition:name="post">
{posts.map(post => {
posts.map((post) => (
<li class="post"> <li class="post">
<div class="version_wrapper"> <div class="version_wrapper">
<div class="version_info"> <div class="version_info">
@ -22,12 +24,13 @@ posts.sort((a, b) => +b.data.date - +a.data.date);
</div> </div>
</div> </div>
<div class="content"> <div class="content">
{ {post.render().then(({ Content }) => (
post.render().then(({ Content }) => (<Content />)) <Content />
} ))}
</div> </div>
</li> </li>
)} ))
}
</ul> </ul>
</main> </main>
</Layout> </Layout>

12
examples/starlog/src/pages/releases/[slug].astro
View file

@ -1,19 +1,19 @@
--- ---
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
import Layout from '../../layouts/PostLayout.astro' import Layout from '../../layouts/PostLayout.astro';
export async function getStaticPaths() { export async function getStaticPaths() {
const releases = await getCollection('releases') const releases = await getCollection('releases');
return releases.map((release) => ({ return releases.map((release) => ({
params: { slug: release.slug }, params: { slug: release.slug },
props: { release } props: { release },
})) }));
} }
const { release } = Astro.props const { release } = Astro.props;
const { Content } = await release.render() const { Content } = await release.render();
--- ---
<Layout {release}> <Layout {release}>

67
examples/starlog/src/styles/colors.scss
View file

@ -1,6 +1,4 @@
@function color($color, $tone) { @function color($color, $tone) {
// @warn map-get($palette,$color); // @warn map-get($palette,$color);
@if map-has-key($palette, $color) { @if map-has-key($palette, $color) {
@ -17,48 +15,47 @@
@warn "unknown color `#{$color}` in palette"; @warn "unknown color `#{$color}` in palette";
@return null; @return null;
} }
$white: #ffffff; $white: #ffffff;
$palette: ( $palette: (
purple: ( purple: (
50: #F2E8FD, 50: #f2e8fd,
100: #E6D1FA, 100: #e6d1fa,
200: #CFA3F5, 200: #cfa3f5,
300: #BA75F0, 300: #ba75f0,
400: #A846EC, 400: #a846ec,
500: #9818E7, 500: #9818e7,
600: #7B13B4, 600: #7b13b4,
700: #5B0E81, 700: #5b0e81,
800: #3A084E, 800: #3a084e,
900: #15031C, 900: #15031c,
950: #020002 950: #020002,
), ),
orange: ( orange: (
50: #FBF0EA, 50: #fbf0ea,
100: #F8E3D9, 100: #f8e3d9,
200: #F2CAB7, 200: #f2cab7,
300: #ECB194, 300: #ecb194,
400: #E59872, 400: #e59872,
500: #DF7F4F, 500: #df7f4f,
600: #D05F26, 600: #d05f26,
700: #A1491D, 700: #a1491d,
800: #713315, 800: #713315,
900: #421E0C, 900: #421e0c,
950: #2A1308 950: #2a1308,
), ),
gray: ( gray: (
50: #F6F6F9, 50: #f6f6f9,
100: #E6E7EF, 100: #e6e7ef,
200: #C7C9DB, 200: #c7c9db,
300: #A8ABC7, 300: #a8abc7,
400: #898EB4, 400: #898eb4,
500: #6A71A0, 500: #6a71a0,
600: #545B83, 600: #545b83,
700: #404664, 700: #404664,
800: #2C3145, 800: #2c3145,
900: #181B26, 900: #181b26,
950: #0E1016 950: #0e1016,
) ),
); );

101
examples/starlog/src/styles/layout.scss
View file

@ -12,8 +12,12 @@ body {
width: 1040px; width: 1040px;
max-width: 100%; max-width: 100%;
background-color: $white; background-color: $white;
@media (prefers-color-scheme: dark) { background-color: color(gray, 950); } @media (prefers-color-scheme: dark) {
@media (max-width: $tablet) { font-size: 16px; } background-color: color(gray, 950);
}
@media (max-width: $tablet) {
font-size: 16px;
}
} }
.glow { .glow {
@ -33,19 +37,34 @@ body {
left: calc(50% - 360px); left: calc(50% - 360px);
width: 720px; width: 720px;
height: 240px; height: 240px;
background: radial-gradient(50% 50% at 50% 50%, rgba(color(orange, 500), 0.2) 0%,rgba(color(orange, 500), 0) 100%); background: radial-gradient(
@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%); } 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 { ::selection {
background: color(orange, 200); background: color(orange, 200);
@media (prefers-color-scheme: dark) { background: color(orange, 600) } @media (prefers-color-scheme: dark) {
background: color(orange, 600);
}
} }
a, a:visited { a,
a:visited {
color: color(orange, 600); color: color(orange, 600);
@media (prefers-color-scheme: dark) { color: color(orange, 300) } @media (prefers-color-scheme: dark) {
color: color(orange, 300);
}
transition: 0.1s ease; transition: 0.1s ease;
&:hover { &:hover {
@ -57,7 +76,9 @@ hr {
margin: 1em 0; margin: 1em 0;
border: 0; border: 0;
border-bottom: 1px solid color(gray, 100); border-bottom: 1px solid color(gray, 100);
@media (prefers-color-scheme: dark) { border-color: color(gray, 900) } @media (prefers-color-scheme: dark) {
border-color: color(gray, 900);
}
} }
nav { nav {
@ -82,7 +103,9 @@ nav {
align-items: center; align-items: center;
gap: 10px; gap: 10px;
color: color(gray, 950); color: color(gray, 950);
@media (prefers-color-scheme: dark) { color: $white } @media (prefers-color-scheme: dark) {
color: $white;
}
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
letter-spacing: 2px; letter-spacing: 2px;
@ -93,12 +116,15 @@ nav {
.links a { .links a {
margin-left: 1em; margin-left: 1em;
color: color(gray, 800); color: color(gray, 800);
@media (prefers-color-scheme: dark) { color: color(gray, 200); } @media (prefers-color-scheme: dark) {
color: color(gray, 200);
}
} }
} }
.content { .content {
ol, ul { ol,
ul {
padding-left: 2em; padding-left: 2em;
margin-bottom: 1em; margin-bottom: 1em;
} }
@ -108,14 +134,14 @@ nav {
li { li {
position: relative; position: relative;
margin-bottom: .75em; margin-bottom: 0.75em;
&:before { &:before {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
left: -1em; left: -1em;
top: .63em; top: 0.63em;
width: 8px; width: 8px;
height: 8px; height: 8px;
background: linear-gradient(25deg, color(purple, 500), color(orange, 500)); background: linear-gradient(25deg, color(purple, 500), color(orange, 500));
@ -127,7 +153,9 @@ nav {
.page_title { .page_title {
margin: 1.5em 0; margin: 1.5em 0;
@media (max-width: $tablet) { margin: .5em 0; } @media (max-width: $tablet) {
margin: 0.5em 0;
}
} }
.posts { .posts {
@ -138,16 +166,21 @@ nav {
.post { .post {
display: flex; display: flex;
width: 100%; width: 100%;
@media (max-width: $tablet) { flex-flow: column; } @media (max-width: $tablet) {
flex-flow: column;
}
&:last-child .content, &.single .content { &:last-child .content,
&.single .content {
border-bottom: 0; border-bottom: 0;
} }
} }
.version_wrapper { .version_wrapper {
flex-basis: 260px; flex-basis: 260px;
@media (max-width: $container) { flex-basis: 140px; } @media (max-width: $container) {
flex-basis: 140px;
}
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin: 4.5em 0 0 0; margin: 4.5em 0 0 0;
@ -184,15 +217,26 @@ nav {
margin-bottom: 8px; margin-bottom: 8px;
padding: 4px 12px; padding: 4px 12px;
color: $white; color: $white;
background: linear-gradient(25deg, color(purple, 800), color(purple, 700), mix(color(purple, 500), color(orange, 500)), color(orange, 500)); background: linear-gradient(
25deg,
color(purple, 800),
color(purple, 700),
mix(color(purple, 500), color(orange, 500)),
color(orange, 500)
);
border-radius: 8px; border-radius: 8px;
} }
.date { .date {
clear: both; clear: both;
@media (max-width: $tablet) { display: inline; margin-left: 1em; } @media (max-width: $tablet) {
display: inline;
margin-left: 1em;
}
color: color(gray, 800); color: color(gray, 800);
@media (prefers-color-scheme: dark) { color: color(gray, 200); } @media (prefers-color-scheme: dark) {
color: color(gray, 200);
}
font-family: $codeFont; font-family: $codeFont;
font-size: $fontSizeSmall; font-size: $fontSizeSmall;
} }
@ -205,7 +249,9 @@ nav {
padding: 0 0 2em 0; padding: 0 0 2em 0;
} }
border-bottom: 1px solid color(gray, 100); border-bottom: 1px solid color(gray, 100);
@media (prefers-color-scheme: dark) { border-color: color(gray, 900); } @media (prefers-color-scheme: dark) {
border-color: color(gray, 900);
}
*:first-child { *:first-child {
margin-top: 0; margin-top: 0;
} }
@ -214,18 +260,24 @@ nav {
height: auto; height: auto;
border-radius: 12px; border-radius: 12px;
border: 1px solid color(gray, 200); border: 1px solid color(gray, 200);
@media (prefers-color-scheme: dark) { border-color: color(gray, 800) } @media (prefers-color-scheme: dark) {
border-color: color(gray, 800);
}
} }
} }
footer { footer {
display: flex; display: flex;
padding: 2em 0; padding: 2em 0;
@media (max-width: $tablet) { padding: 1em 0; } @media (max-width: $tablet) {
padding: 1em 0;
}
color: color(gray, 500); color: color(gray, 500);
justify-content: space-between; justify-content: space-between;
border-top: 1px solid color(gray, 100); border-top: 1px solid color(gray, 100);
@media (prefers-color-scheme: dark) { border-color: color(gray, 900); } @media (prefers-color-scheme: dark) {
border-color: color(gray, 900);
}
a { a {
margin-left: 1em; margin-left: 1em;
@ -237,4 +289,3 @@ footer {
} }
} }
} }

43
examples/starlog/src/styles/type.scss
View file

@ -7,26 +7,44 @@ body {
font-size: 18px; font-size: 18px;
line-height: 1.65; line-height: 1.65;
font-weight: 400; font-weight: 400;
@media (prefers-color-scheme: dark) { color: color(gray, 200); } @media (prefers-color-scheme: dark) {
color: color(gray, 200);
}
color: color(gray, 800); color: color(gray, 800);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
h1, h2, h3, h4, h5 { h1,
h2,
h3,
h4,
h5 {
line-height: 1.2; line-height: 1.2;
margin: 1em 0 .5em 0; margin: 1em 0 0.5em 0;
@media (prefers-color-scheme: dark) { color: $white; } @media (prefers-color-scheme: dark) {
color: $white;
}
color: color(gray, 950); color: color(gray, 950);
font-weight: 700; font-weight: 700;
} }
h1 { font-size: 3.052em;} h1 {
h2 {font-size: 2.441em;} font-size: 3.052em;
h3 {font-size: 1.953em;} }
h4 {font-size: 1.563em;} h2 {
h5 {font-size: 1.25em;} font-size: 2.441em;
}
h3 {
font-size: 1.953em;
}
h4 {
font-size: 1.563em;
}
h5 {
font-size: 1.25em;
}
p { p {
margin: 0 0 1em 0; margin: 0 0 1em 0;
@ -36,9 +54,12 @@ code {
font-family: $codeFont; font-family: $codeFont;
} }
b, strong { b,
strong {
font-weight: 700; font-weight: 700;
color: #fff; color: #fff;
@media (prefers-color-scheme: dark) { color: $white; } @media (prefers-color-scheme: dark) {
color: $white;
}
color: color(gray, 950); color: color(gray, 950);
} }