├── .npmrc ├── .prettierrc ├── public ├── opengraph.jpg ├── robots.txt └── favicon.svg ├── src ├── assets │ ├── hero.png │ ├── hero-alt.png │ ├── blog │ │ ├── blog1.jpg │ │ ├── blog2.jpg │ │ ├── blog4.jpg │ │ ├── blog5.jpg │ │ ├── blog7.jpg │ │ ├── blog3.avif │ │ ├── blog6.avif │ │ ├── blog8.avif │ │ └── blog9.avif │ ├── authors │ │ ├── erika.webp │ │ ├── joshua.webp │ │ └── mario.webp │ ├── logo.svg │ ├── logo-dark.svg │ └── hero-source.svg ├── env.d.ts ├── components │ ├── container.astro │ ├── pagetitle.astro │ ├── themeswitch.astro │ ├── ui │ │ ├── label.astro │ │ ├── button.astro │ │ └── link.astro │ ├── authorcard.astro │ ├── footer.astro │ ├── postlist.astro │ ├── navbar.astro │ └── contactform.astro ├── utils │ ├── content.js │ └── all.js ├── content │ ├── 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 │ │ ├── complete-guide-fullstack-development.md │ │ ├── essential-data-structures-algorithms.md │ │ ├── how-to-become-frontend-master.md │ │ ├── 14-architectural-design-ideas-for-spacious-interior.md │ │ └── kitchensink.mdx │ └── config.ts ├── pages │ ├── archive.astro │ ├── index.astro │ ├── about.astro │ ├── contact.astro │ └── blog │ │ └── [...slug].astro ├── data │ ├── authors.ts │ └── category.ts └── layouts │ └── Layout.astro ├── .vscode ├── extensions.json └── launch.json ├── tsconfig.json ├── .gitignore ├── astro.config.mjs ├── tailwind.config.cjs ├── package.json ├── README.md └── LICENSE /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "bracketSameLine": true 5 | } -------------------------------------------------------------------------------- /public/opengraph.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/public/opengraph.jpg -------------------------------------------------------------------------------- /src/assets/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/hero.png -------------------------------------------------------------------------------- /src/assets/hero-alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/hero-alt.png -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /src/assets/blog/blog1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/blog/blog1.jpg -------------------------------------------------------------------------------- /src/assets/blog/blog2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/blog/blog2.jpg -------------------------------------------------------------------------------- /src/assets/blog/blog4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/blog/blog4.jpg -------------------------------------------------------------------------------- /src/assets/blog/blog5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/blog/blog5.jpg -------------------------------------------------------------------------------- /src/assets/blog/blog7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/blog/blog7.jpg -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | 4 | Sitemap: http://astroship.web3templates.com/sitemap-index.xml -------------------------------------------------------------------------------- /src/assets/blog/blog3.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/blog/blog3.avif -------------------------------------------------------------------------------- /src/assets/blog/blog6.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/blog/blog6.avif -------------------------------------------------------------------------------- /src/assets/blog/blog8.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/blog/blog8.avif -------------------------------------------------------------------------------- /src/assets/blog/blog9.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/blog/blog9.avif -------------------------------------------------------------------------------- /src/assets/authors/erika.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/authors/erika.webp -------------------------------------------------------------------------------- /src/assets/authors/joshua.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/authors/joshua.webp -------------------------------------------------------------------------------- /src/assets/authors/mario.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web3templates/stablo-astro/HEAD/src/assets/authors/mario.webp -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/base", 3 | "compilerOptions": { 4 | "strictNullChecks": true, 5 | "baseUrl": "src", 6 | "types": ["astro/client"], 7 | "paths": { 8 | "@/*": ["./*"] 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /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/components/pagetitle.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { align = "center" } = Astro.props; 3 | --- 4 | 5 |
6 |

8 | Title 9 |

10 |

11 | Some description goes here 12 |

13 |
14 | -------------------------------------------------------------------------------- /src/content/blog/template.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Title Goes Here" 3 | excerpt: "Some description" 4 | publishDate: "2024-05-29T11:39:36.050Z" 5 | image: "../../assets/blog/blog1.jpg" 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/components"; 3 | import { ThemeSwitch } from "astro-color-scheme"; 4 | --- 5 | 6 | 7 |
8 | 9 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /src/content/config.ts: -------------------------------------------------------------------------------- 1 | import { z, defineCollection } from "astro:content"; 2 | 3 | const BlogPosts = defineCollection({ 4 | schema: ({ image }) => 5 | z.object({ 6 | title: z.string(), 7 | excerpt: z.string(), 8 | category: z.string().trim(), 9 | author: z.string().trim(), 10 | draft: z.boolean().optional(), 11 | tags: z.array(z.string()), 12 | image: image(), 13 | publishDate: z.string().transform((str) => new Date(str)), 14 | }), 15 | }); 16 | 17 | export const collections = { 18 | blog: BlogPosts, 19 | }; 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | // https://astro.build/config 2 | import { defineConfig } from "astro/config"; 3 | import tailwind from "@astrojs/tailwind"; 4 | import mdx from "@astrojs/mdx"; 5 | import sitemap from "@astrojs/sitemap"; 6 | import icon from "astro-icon"; 7 | 8 | import { remarkReadingTime } from "./src/utils/all"; 9 | 10 | export default defineConfig({ 11 | site: "https://stablo-astro.web3templates.com", 12 | markdown: { 13 | remarkPlugins: [remarkReadingTime], 14 | rehypePlugins: ["rehype-plugin-image-native-lazy-loading"], 15 | extendDefaultPlugins: true, 16 | }, 17 | integrations: [tailwind(), mdx(), sitemap(), icon()], 18 | }); 19 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | const colors = require("tailwindcss/colors"); 3 | const defaultTheme = require("tailwindcss/defaultTheme"); 4 | module.exports = { 5 | content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], 6 | darkMode: "class", 7 | theme: { 8 | extend: { 9 | colors: { 10 | gray: colors.neutral, 11 | }, 12 | fontFamily: { 13 | sans: ["Inter Variable", "Inter", ...defaultTheme.fontFamily.sans], 14 | }, 15 | aspectRatio: { 16 | "4/3": "4 / 3", 17 | "3/2": "3 / 2", 18 | "2/3": "2 / 3", 19 | "9/16": "9 / 16", 20 | }, 21 | }, 22 | }, 23 | plugins: [require("@tailwindcss/typography")], 24 | }; 25 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /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 | 24 | /** Check if an Image Path is Relative or Absolute */ 25 | export const checkImageUrl = (image, url) => { 26 | try { 27 | new URL(image); 28 | return image; 29 | } catch (error) { 30 | return new URL(image, url).toString(); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /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: 26 | "bg-black text-white hover:bg-gray-900 border-2 border-transparent dark:bg-white dark:text-black", 27 | }; 28 | --- 29 | 30 | 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stablo-astro", 3 | "type": "module", 4 | "version": "2.0.0", 5 | "private": true, 6 | "scripts": { 7 | "dev": "astro dev", 8 | "start": "astro dev", 9 | "build": "astro build", 10 | "preview": "astro preview", 11 | "astro": "astro" 12 | }, 13 | "dependencies": { 14 | "@astrojs/mdx": "^3.1.2", 15 | "@astrojs/sitemap": "^3.1.6", 16 | "@astrojs/tailwind": "^5.1.0", 17 | "@fontsource-variable/inter": "^5.0.18", 18 | "@iconify-json/heroicons": "^1.1.21", 19 | "astro": "^4.11.1", 20 | "astro-color-scheme": "^1.1.5", 21 | "astro-icon": "^1.1.0", 22 | "astro-seo": "^0.8.4", 23 | "mdast-util-to-string": "^4.0.0", 24 | "reading-time": "^1.5.0", 25 | "rehype-plugin-image-native-lazy-loading": "^1.2.0", 26 | "tailwindcss": "^3.4.4" 27 | }, 28 | "devDependencies": { 29 | "@tailwindcss/typography": "^0.5.13", 30 | "classnames": "^2.5.1", 31 | "sharp": "^0.33.4" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/components/authorcard.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Image } from "astro:assets"; 3 | 4 | const { author } = Astro.props; 5 | --- 6 | 7 |
9 |
10 |
11 | { 12 | author.image && ( 13 | Author Photo 21 | ) 22 | } 23 |
24 |
25 |
26 |

27 | About {author.name} 28 |

29 |
30 |
31 | {author.bio &&

{author.bio}

} 32 |
33 |
34 |
35 |
36 | -------------------------------------------------------------------------------- /src/pages/archive.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "@/components/container.astro"; 3 | import Pagetitle from "@/components/pagetitle.astro"; 4 | import Postlist from "@/components/postlist.astro"; 5 | import Layout from "@/layouts/Layout.astro"; 6 | import { latestPosts } from "@/utils/content"; 7 | // Use Astro.glob() to fetch all posts, and then sort them by date. 8 | // const posts = (await Astro.glob("./blog/*.{md,mdx}")).sort( 9 | // (a, b) => 10 | // new Date(b.frontmatter.publishDate).valueOf() - 11 | // new Date(a.frontmatter.publishDate).valueOf() 12 | // ); 13 | --- 14 | 15 | 16 | 17 | 18 | Archive 19 | See all posts we have ever written. 20 | 21 |
22 |
23 | {latestPosts.map((post) => )} 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/components/ui/link.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | href: string; 4 | size?: "md" | "lg"; 5 | block?: boolean; 6 | style?: "outline" | "primary" | "inverted" | "muted"; 7 | class?: string; 8 | [x: string]: any; 9 | } 10 | 11 | const { 12 | href, 13 | block, 14 | size = "lg", 15 | style = "primary", 16 | class: className, 17 | ...rest 18 | } = Astro.props; 19 | 20 | const sizes = { 21 | lg: "px-5 py-2.5", 22 | md: "px-4 py-2", 23 | }; 24 | 25 | const styles = { 26 | outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ", 27 | primary: "bg-black text-white hover:bg-gray-800 border-2 border-transparent", 28 | inverted: "bg-white text-black border-2 border-transparent", 29 | muted: "bg-gray-100 hover:bg-gray-200 border-2 border-transparent", 30 | }; 31 | --- 32 | 33 | 44 | 45 | -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "@/components/container.astro"; 3 | import Postlist from "@/components/postlist.astro"; 4 | import Layout from "@/layouts/Layout.astro"; 5 | import { latestPosts } from "@/utils/content"; 6 | // Use Astro.glob() to fetch all posts, and then sort them by date. 7 | // const posts = (await Astro.glob("./blog/*.{md,mdx}")).sort( 8 | // (a, b) => 9 | // new Date(b.frontmatter.publishDate).valueOf() - 10 | // new Date(a.frontmatter.publishDate).valueOf() 11 | // ); 12 | // console.log(posts[0].frontmatter.image); 13 | --- 14 | 15 | 16 | 17 |
18 |
19 | { 20 | latestPosts 21 | .slice(0, 2) 22 | .map((post) => ( 23 | 24 | )) 25 | } 26 |
27 |
28 | { 29 | latestPosts 30 | .slice(2) 31 | .map((post) => ) 32 | } 33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /src/components/footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "./container.astro"; 3 | import Themeswitch from "./themeswitch.astro"; 4 | --- 5 | 6 | 7 |
8 |
9 | Copyright © {new Date().getFullYear()} Stablo. All rights reserved. 10 |
11 |
13 | 14 | Made by{" "} 15 | 19 | Web3Templates 20 | 21 | 26 | 27 | · 28 | 29 | 33 | Github 34 | 35 | 36 |
37 |
38 | 39 |
40 |
41 | 42 | -------------------------------------------------------------------------------- /src/data/authors.ts: -------------------------------------------------------------------------------- 1 | import marioImage from "../assets/authors/mario.webp"; 2 | import joshuaImage from "../assets/authors/joshua.webp"; 3 | import erikaImage from "../assets/authors/erika.webp"; 4 | 5 | export interface Props { 6 | name: string; 7 | slug: string; 8 | image: string; 9 | bio: string; 10 | } 11 | 12 | export type Author = Props; 13 | 14 | export const authors: Props[] = [ 15 | { 16 | name: "Mario Sanchez", 17 | slug: "mario-sanchez", 18 | image: marioImage, 19 | bio: "Mario is a Staff Engineer specialising in Frontend at Vercel, as well as being a co-founder of Acme and the content management system Sanity. Prior to this, he was a Senior Engineer at Apple.", 20 | }, 21 | { 22 | name: "Joshua Wood", 23 | slug: "joshua-wood", 24 | image: joshuaImage, 25 | bio: "Joshua is a Microsoft Azure Certified Cloud Professional and a Google Certified Associate Cloud Engineer. A Data Analytics at Acme, specializing in the use of cloud infrastructure for Machine Learning and Deep Learning operation at scale.", 26 | }, 27 | { 28 | name: "Erika Oliver", 29 | slug: "erika-oliver", 30 | image: erikaImage, 31 | bio: "Erika Oliver is a successful entrepreuner. She is the founder of Acme Inc, a bootstrapped business that builds affordable SaaS tools for local news, indie publishers, and other small businesses.", 32 | }, 33 | ]; 34 | -------------------------------------------------------------------------------- /src/data/category.ts: -------------------------------------------------------------------------------- 1 | export interface Props { 2 | title: string; 3 | slug: string; 4 | color: "green" | "blue" | "orange" | "purple" | "pink"; 5 | description: string; 6 | } 7 | export type Category = Props; 8 | 9 | export const categories: Props[] = [ 10 | { 11 | title: "Technology", 12 | slug: "technology", 13 | color: "blue", 14 | description: 15 | "Keep up with the latest tech trends and learn about the latest innovations in software development, hardware design, cybersecurity, and more.", 16 | }, 17 | { 18 | title: "Lifestyle", 19 | slug: "lifestyle", 20 | color: "orange", 21 | description: 22 | "Explore the latest trends and ideas in fashion, food, home design, and more, and get inspiration for living your best life.", 23 | }, 24 | { 25 | title: "Personal", 26 | slug: "personal", 27 | color: "green", 28 | description: 29 | "Discover tips and strategies for self-improvement, personal development, and achieving your goals, and find resources to help you grow as a person.", 30 | }, 31 | { 32 | title: "Travel", 33 | slug: "travel", 34 | color: "pink", 35 | description: 36 | "Plan your next adventure and get travel tips and inspiration from experienced travelers, with articles covering destinations, cultures, and more.", 37 | }, 38 | { 39 | title: "Design", 40 | slug: "design", 41 | color: "purple", 42 | description: 43 | "Get insights and inspiration from the world of design, with articles covering graphic design, product design, interior design, and more.", 44 | }, 45 | ]; 46 | -------------------------------------------------------------------------------- /src/pages/about.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from "@/layouts/Layout.astro"; 3 | import Container from "@/components/container.astro"; 4 | import { Image, getImage } from "astro:assets"; 5 | import { authors } from "@/data/authors"; 6 | import Pagetitle from "@/components/pagetitle.astro"; 7 | import Link from "@/components/ui/link.astro"; 8 | 9 | 10 | --- 11 | 12 | 13 | 14 | 15 | About 16 | We are a small passionate team. 17 | 18 | 19 |
20 | { 21 | authors.slice(0, 3).map((item) => ( 22 |
23 |
24 | Team 32 |
33 | 34 |
35 |

36 | {" "} 37 | {item.name} 38 |

39 |
40 |
41 | )) 42 | } 43 |
44 | 45 |
46 |

47 | We're a multi-cultural team from around the world! We come from diverse 48 | backgrounds, bringing different personalities, experiences and skills to 49 | the job. This is what makes our team so special. 50 |

51 |
52 | Get in touch 53 |
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /src/pages/contact.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Icon } from "astro-icon/components"; 3 | import Layout from "@/layouts/Layout.astro"; 4 | import Container from "@/components/container.astro"; 5 | import Contactform from "@/components/contactform.astro"; 6 | import Pagetitle from "@/components/pagetitle.astro"; 7 | --- 8 | 9 | 10 | 11 | 12 | Contact 13 | We are a here to help. 14 | 15 | 16 |
17 |
18 |

19 | Contact Stablo 20 |

21 |

23 | Have something to say? We are here to help. Fill up the form or send 24 | email or call phone. 25 |

26 |
27 |
29 | 30 | 1734 Sanfransico, CA 93063 31 |
33 | hello@stablotemplate.com 36 |
38 | +1 (987) 4587 899 41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import "@fontsource-variable/inter"; 3 | import Footer from "@/components/footer.astro"; 4 | import Navbar from "@/components/navbar.astro"; 5 | import { checkImageUrl } from "@/utils/all"; 6 | import { SEO } from "astro-seo"; 7 | 8 | export interface Props { 9 | title?: string; 10 | desc?: string; 11 | ogimage?: string; 12 | } 13 | 14 | const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString(); 15 | 16 | const { title, desc, ogimage = "/opengraph.jpg" } = Astro.props; 17 | 18 | const resolvedOGImage = checkImageUrl(ogimage, Astro.site); 19 | 20 | const makeTitle = title 21 | ? title + " | " + "Stablo" 22 | : "Stablo — Free Blog Website Template built with Astro & MDX"; 23 | --- 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 54 | 55 | 56 | 57 | 58 |