├── .npmrc ├── .prettierrc ├── src ├── assets │ ├── hero.png │ ├── hero-alt.png │ ├── authors │ │ ├── erika.webp │ │ ├── mario.webp │ │ └── joshua.webp │ ├── logo.svg │ ├── logo-dark.svg │ └── hero-source.svg ├── env.d.ts ├── components │ ├── container.astro │ ├── themeswitch.astro │ ├── ui │ │ ├── label.astro │ │ ├── button.astro │ │ └── link.astro │ ├── navbar.astro │ ├── authorcard.astro │ ├── footer.astro │ ├── postheader.astro │ ├── TagSelector.jsx │ └── card.astro ├── utils │ ├── content.js │ └── all.js ├── styles │ └── styles.css ├── content │ ├── config.ts │ └── blog │ │ ├── template.md │ │ ├── this-bread-pudding-will-give-you-all-the-fall-feels.md │ │ ├── nothing-new-about-undermining-women-autonomy.md │ │ ├── every-next-level-of-your-life-will-demand-a-different-you.md │ │ ├── exploring-hidden-gems.md │ │ ├── complete-guide-fullstack-development.md │ │ ├── future-of-user-interface-design.md │ │ ├── quantum-computing.md │ │ ├── essential-data-structures-algorithms.md │ │ ├── advancements-in-ai.md │ │ ├── minimalist-lifestyle.md │ │ ├── personal-development-growth.md │ │ ├── work-life-balance.md │ │ ├── how-to-become-frontend-master.md │ │ └── 14-architectural-design-ideas-for-spacious-interior.md ├── layouts │ └── Layout.astro ├── data │ ├── authors.ts │ └── category.ts ├── pages │ ├── index.astro │ └── blog │ │ └── [...slug].astro └── kitchensink.mdx ├── public ├── opengraph.jpg ├── robots.txt └── favicon.svg ├── .vscode ├── extensions.json └── launch.json ├── .gitignore ├── tailwind.config.cjs ├── tsconfig.json ├── astro.config.mjs ├── package.json └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "bracketSameLine": true 5 | } -------------------------------------------------------------------------------- /src/assets/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Charca/astro-blog-view-transitions/HEAD/src/assets/hero.png -------------------------------------------------------------------------------- /public/opengraph.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Charca/astro-blog-view-transitions/HEAD/public/opengraph.jpg -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | 4 | Sitemap: http://astroship.web3templates.com/sitemap-index.xml -------------------------------------------------------------------------------- /src/assets/hero-alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Charca/astro-blog-view-transitions/HEAD/src/assets/hero-alt.png -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/authors/erika.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Charca/astro-blog-view-transitions/HEAD/src/assets/authors/erika.webp -------------------------------------------------------------------------------- /src/assets/authors/mario.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Charca/astro-blog-view-transitions/HEAD/src/assets/authors/mario.webp -------------------------------------------------------------------------------- /src/assets/authors/joshua.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Charca/astro-blog-view-transitions/HEAD/src/assets/authors/joshua.webp -------------------------------------------------------------------------------- /src/components/container.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { class: className } = Astro.props; 3 | --- 4 | 5 |
10 | 11 |
12 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | .output/ 4 | 5 | # generated types 6 | .astro/ 7 | 8 | # dependencies 9 | node_modules/ 10 | 11 | # logs 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | pnpm-debug.log* 16 | 17 | 18 | # environment variables 19 | .env 20 | .env.production 21 | 22 | # macOS-specific files 23 | .DS_Store 24 | -------------------------------------------------------------------------------- /src/utils/content.js: -------------------------------------------------------------------------------- 1 | import { getCollection } from "astro:content"; 2 | 3 | // Only return posts without `draft: true` in the frontmatter 4 | 5 | export const latestPosts = ( 6 | await getCollection("blog", ({ data }) => { 7 | return data.draft !== true; 8 | }) 9 | ).sort( 10 | (a, b) => 11 | new Date(b.data.publishDate).valueOf() - 12 | new Date(a.data.publishDate).valueOf() 13 | ); 14 | -------------------------------------------------------------------------------- /src/styles/styles.css: -------------------------------------------------------------------------------- 1 | @keyframes scale-out { 2 | to { 3 | scale: 0; 4 | } 5 | } 6 | 7 | @keyframes fade-in { 8 | from { 9 | opacity: 0; 10 | scale: 0; 11 | } 12 | 13 | to { 14 | opacity: 1; 15 | scale: 1; 16 | } 17 | } 18 | 19 | ::view-transition-group(*) { 20 | animation-duration: 1s; 21 | } 22 | 23 | ::view-transition-new(*):only-child { 24 | animation-name: fade-in; 25 | } 26 | 27 | ::view-transition-old(*):only-child { 28 | animation-name: scale-out; 29 | } 30 | -------------------------------------------------------------------------------- /src/content/config.ts: -------------------------------------------------------------------------------- 1 | import { z, defineCollection } from "astro:content"; 2 | 3 | const BlogPosts = defineCollection({ 4 | schema: z.object({ 5 | title: z.string(), 6 | excerpt: z.string(), 7 | category: z.string().trim(), 8 | author: z.string().trim(), 9 | draft: z.boolean().optional(), 10 | tags: z.array(z.string()), 11 | image: z.string().optional(), 12 | publishDate: z.string().transform((str) => new Date(str)), 13 | }), 14 | }); 15 | 16 | export const collections = { 17 | blog: BlogPosts, 18 | }; 19 | -------------------------------------------------------------------------------- /src/content/blog/template.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Title Goes Here" 3 | excerpt: "Some description" 4 | publishDate: "2022-12-29T11:39:36.050Z" 5 | image: "https://images.unsplash.com/[IMAGE-URL]" 6 | # category slug: choose from "./src/data/category.js" 7 | category: "technology" 8 | # remove this line to publish 9 | draft: true 10 | # author slug: choose from "./src/data/authors.js" 11 | author: "mario-sanchez" 12 | tags: [tag1, tag2, tag3] 13 | --- 14 | 15 | Your content here 16 | 17 | ## Write Headings 18 | 19 | Some content with [links](#) and more... 20 | -------------------------------------------------------------------------------- /src/components/themeswitch.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Icon } from "astro-icon"; 3 | import { ThemeSwitch } from "astro-color-scheme"; 4 | --- 5 | 6 | 7 |
8 | 9 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /src/components/ui/label.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import cx from "classnames"; 3 | 4 | interface Props { 5 | theme: "green" | "blue" | "orange" | "purple" | "pink"; 6 | } 7 | const color = { 8 | green: "text-emerald-700", 9 | blue: "text-blue-600", 10 | orange: "text-orange-700", 11 | purple: "text-purple-600", 12 | pink: "text-pink-600", 13 | }; 14 | 15 | const { theme } = Astro.props; 16 | --- 17 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | const colors = require("tailwindcss/colors"); 3 | module.exports = { 4 | content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], 5 | darkMode: "class", 6 | theme: { 7 | extend: { 8 | colors: { 9 | gray: colors.neutral, 10 | }, 11 | aspectRatio: { 12 | "4/3": "4 / 3", 13 | "3/2": "3 / 2", 14 | "2/3": "2 / 3", 15 | "9/16": "9 / 16", 16 | }, 17 | }, 18 | }, 19 | plugins: [ 20 | require("@tailwindcss/line-clamp"), 21 | require("@tailwindcss/typography"), 22 | ], 23 | }; 24 | -------------------------------------------------------------------------------- /src/utils/all.js: -------------------------------------------------------------------------------- 1 | import getReadingTime from "reading-time"; 2 | import { toString } from "mdast-util-to-string"; 3 | 4 | /** Format Date */ 5 | export const getFormattedDate = (date) => 6 | date 7 | ? new Date(date).toLocaleDateString("en-us", { 8 | year: "numeric", 9 | month: "short", 10 | day: "numeric", 11 | }) 12 | : ""; 13 | 14 | /** Estimated Reading time */ 15 | export function remarkReadingTime() { 16 | return function (tree, { data }) { 17 | const textOnPage = toString(tree); 18 | const readingTime = getReadingTime(textOnPage); 19 | 20 | data.astro.frontmatter.estReadingTime = readingTime.minutes; 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/navbar.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "@components/container.astro"; 3 | import logoImage from "@assets/logo.svg"; 4 | import darkLogo from "@assets/logo-dark.svg"; 5 | import { Image } from "@astrojs/image/components"; 6 | --- 7 | 8 | 9 | 22 | 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/base", 3 | "compilerOptions": { 4 | "strictNullChecks": true, 5 | "baseUrl": "src", 6 | "types": [ 7 | "@astrojs/image/client" 8 | ], 9 | "paths": { 10 | "@lib/*": [ 11 | "lib/*" 12 | ], 13 | "@utils/*": [ 14 | "utils/*" 15 | ], 16 | "@data/*": [ 17 | "data/*" 18 | ], 19 | "@components/*": [ 20 | "components/*" 21 | ], 22 | "@layouts/*": [ 23 | "layouts/*" 24 | ], 25 | "@assets/*": [ 26 | "assets/*" 27 | ], 28 | "@pages/*": [ 29 | "pages/*" 30 | ] 31 | }, 32 | "jsx": "react-jsx", 33 | "jsxImportSource": "react" 34 | } 35 | } -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | // https://astro.build/config 2 | import { defineConfig } from "astro/config"; 3 | import tailwind from "@astrojs/tailwind"; 4 | import image from "@astrojs/image"; 5 | import mdx from "@astrojs/mdx"; 6 | import sitemap from "@astrojs/sitemap"; 7 | import { remarkReadingTime } from "./src/utils/all"; 8 | import react from "@astrojs/react"; 9 | 10 | // https://astro.build/config 11 | export default defineConfig({ 12 | site: "https://stablo-astro.web3templates.com", 13 | markdown: { 14 | remarkPlugins: [remarkReadingTime], 15 | rehypePlugins: ["rehype-plugin-image-native-lazy-loading"], 16 | extendDefaultPlugins: true 17 | }, 18 | integrations: [tailwind(), image({ 19 | serviceEntryPoint: "@astrojs/image/sharp" 20 | }), mdx(), sitemap(), react()] 21 | }); -------------------------------------------------------------------------------- /src/components/ui/button.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | size?: "md" | "lg"; 4 | block?: boolean; 5 | style?: "outline" | "primary" | "inverted"; 6 | class?: string; 7 | [x: string]: any; 8 | } 9 | 10 | const { 11 | size = "md", 12 | style = "primary", 13 | block, 14 | class: className, 15 | ...rest 16 | } = Astro.props; 17 | 18 | const sizes = { 19 | md: "px-5 py-2.5", 20 | lg: "px-6 py-3", 21 | }; 22 | 23 | const styles = { 24 | outline: "border-2 border-black hover:bg-black text-black hover:text-white", 25 | primary: "bg-black text-white hover:bg-gray-900 border-2 border-transparent", 26 | }; 27 | --- 28 | 29 | 40 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Footer from "@components/footer.astro"; 3 | import Navbar from "@components/navbar.astro"; 4 | import "@fontsource/inter/variable.css"; 5 | import "../styles/styles.css"; 6 | 7 | export interface Props { 8 | title?: string; 9 | desc?: string; 10 | ogimage?: string; 11 | } 12 | 13 | const { title } = Astro.props; 14 | 15 | const makeTitle = title 16 | ? title + " | " + "Astro View Transitions Blog" 17 | : "Astro View Transitions Blog"; 18 | --- 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | {makeTitle} 29 | 30 | 31 | 32 | 33 |