{title}

commit 14079f05112b614dbfdf05435cc712e908a99350 Author: Timothy DeHerrera Date: Tue Nov 1 15:18:00 2022 -0600 Initial commit diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..ef6a324 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,29 @@ + +name: CI + +# Controls when the workflow will run +on: + # Triggers the workflow on push or pull request events but only for the main branch + push: + branches: [ main ] + pull_request: + branches: [ main ] + schedule: + - cron: 30 */4 * * * + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + publish-drafts: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - name: SSG Publish Drafts + # You may pin to the exact commit or the version. + uses: one-aalam/github-action-astro-publish-drafts@v0.1-beta + with: + github_token: $\{{ secrets.GITHUB_TOKEN }} + github_actor: one-aalam + github_repository: one-aalam/astro-ink diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a25bbd1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,22 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store + +# Local Netlify folder +.netlify +netlify diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..0dfc383 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Aftab Alam + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..7b36683 --- /dev/null +++ b/README.md @@ -0,0 +1,52 @@ +

+
+

Astro Ink is a minimal theme created to serve minimalistic markdown-based blog needs. It ships with almost all the basic Astro components that you might need while creating light-weight, performant, personal blogs, that focus on shipping less Javascript by default.

+
+ +
+

+ +

+ +

+
+ +

+ +It's hugely inspired by [Hugo](https://github.com/knadh/hugo-ink)'s Ink theme and strives to remain light, while providing the basis for a beautiful, minimal blog. + +## Features +- __Minimal, Crisp, Markdown-Blog Ready__ +- __Uses `astro 1.1.5`__ - It uses Astro's latest `1.1.5` release under the hood +- __Svelte Ready__ - In its effort to remain light-weight, performant, and more approachable from Astro's POV, Svelte is used for interactive components like the theme switcher +- __Modular__ - The structure is highly modular, with components doing just one job, and one job well. +- __Collection + Dynamic Pages__ - It's ready with Next.js like dynamic pages, to support a tag-based classification system with paginated results, all configurable +- __Dark Mode & Color Codes__ - It supports dark mode, and __6+__ color modes that's selected using `tailwind.config.js`. You can pass `THEME_KEY` with the `dev` or `build` script/commands ex: `THEME_KEY=purpleheart astro build/dev` to change the color theme being used. All the available themes can be found in [tailwind.theme.config.js](./tailwind.theme.config.js). To customize the blog section, add any of the Tailwind Typography's `prose-{color}` classes as referred [here](./src/components/Prose.astro) +- __Netlify CMS^*NEW__ - Add/Edit/Update all the posts in the `/blog` directory by visiting `your-site.netlify.com/admin` ex: [astro-ink.netlify.app/admin](https://astro-ink.netlify.app/admin) with your Netlify credentials. It needs Netlify Identity(https://app.netlify.com/sites/your-site/settings/identity#registration +) and Git Gateway(https://app.netlify.com/sites/your-site/settings/identity#services) enabled. +- __Future Posts^*NEW__(with Github Actions) - Create posts in the `/src/drafts` directory with a future `date` in the `YYYY-MM-DD` format, and let a specially crafted [Github Action](https://github.com/marketplace/actions/ssg-publish-drafts) take care of auto-publishing it on your specified date. You can configure the check interval in [Github Action](https://github.com/one-aalam/astro-ink/blob/main/.github/workflows/main.yml). +- __Client-Side Search^*NEW__ - Allow your users get to your blog posts quickly with client-side search feat. Lunr.js + +## How to start? +There's not much to know about commands. Just clone this template, and start working from your clone. You have all the common NPM commands at your disposal like `dev`, `build`, etc. Refer [package.json](./package.json) to see a list of all the available commands. + +## Built with Astro Ink +- [jamesperkins.dev](https://www.jamesperkins.dev/) - Personal site of developer, YouTube instructor [James R Perkins](https://twitter.com/james_r_perkins) +- [highlandcows.github.io](https://highlandcows.github.io/) [Nick Jacob](https://github.com/njacobs5074)'s personal blog + +> know a site built with Astro Ink? Let me know on [Twitter](https://twitter.com/aftabbuddy) + +## Wanna learn Astro while building Ink? +This theme was initially built with first an alpha, and then a beta version of the `Astro` Framework. If you're just starting with `Astro`, you can actually learn `Astro` while building this very theme by following a series of blogs I've written that teaches you Astro ground-up! + +Head over to `aalam.in/blog` and know +- [How to set Astro up and get it running with essential defaults for styling, prototyping, and incremental deployments](https://aalam.in/blog/astro-get-up-and-running) +- [Managing presentational components and creating Astro pages](https://aalam.in/blog/astro-and-site-strcuture) +- [Feeding local as well as remote data to the Astro pages](https://aalam.in/blog/astro-and-data) +- [Putting interactivity where you absolutely cannot do without it in Astro](https://aalam.in/blog/astro-and-interactivity) +- [Creating data-driven, dynamic pages and paginated results in Astro](https://aalam.in/blog/astro-and-dynamic-pages) +- [Author your Astro site's content with Git-based CMSs](https://aalam.in/blog/astro-and-git-cms-netlify) diff --git a/astro.config.mjs b/astro.config.mjs new file mode 100644 index 0000000..d4cd10d --- /dev/null +++ b/astro.config.mjs @@ -0,0 +1,49 @@ +import path, { dirname } from 'path' +import { fileURLToPath } from 'url' +import svelte from '@astrojs/svelte' +import tailwind from '@astrojs/tailwind' +import sitemap from '@astrojs/sitemap' +import mdx from '@astrojs/mdx' + +const __filename = fileURLToPath(import.meta.url) +const __dirname = dirname(__filename) +// Full Astro Configuration API Documentation: +// https://docs.astro.build/reference/configuration-reference + +// @type-check enabled! +// VSCode and other TypeScript-enabled text editors will provide auto-completion, +// helpful tooltips, and warnings if your exported object is invalid. +// You can disable this by removing "@ts-check" and `@type` comments below. + +// @ts-check +export default /** @type {import('astro').AstroUserConfig} */ ({ + // root: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project. + // outDir: './dist', // When running `astro build`, path to final static output + // publicDir: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. + + site: 'https://astro-ink.vercel.app', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. + server: { + // port: 3000, // The port to run the dev server on. + }, + integrations: [ + mdx(), + svelte(), + tailwind({ + config: { + applyBaseStyles: false + }, + }), + sitemap() + ], + vite: { + plugins: [], + resolve: { + alias: { + '$': path.resolve(__dirname, './src'), + }, + }, + optimizeDeps: { + allowNodeBuiltins: true + } + } +}); diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..8c46b65 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,2 @@ +[functions] + external_node_modules = ["astro", "vscode-oniguruma"] diff --git a/package.json b/package.json new file mode 100644 index 0000000..749b23b --- /dev/null +++ b/package.json @@ -0,0 +1,34 @@ +{ + "name": "astro-ink", + "version": "1.0.1", + "private": true, + "scripts": { + "dev": "astro dev", + "build": "astro build", + "check": "astro check", + "postbuild": "node ./scripts/search/prepare-index.js", + "preview": "astro preview" + }, + "devDependencies": { + "@astrojs/mdx": "^0.11.1", + "@astrojs/rss": "^1.0.0", + "@astrojs/sitemap": "^1.0.0", + "@astrojs/svelte": "^1.0.0", + "@astrojs/tailwind": "^1.0.0", + "@fontsource/fira-sans": "^4.5.9", + "@tailwindcss/aspect-ratio": "^0.4.0", + "@tailwindcss/forms": "^0.5.0", + "@tailwindcss/line-clamp": "^0.4.2", + "@tailwindcss/typography": "^0.5.2", + "@types/node": "^18.7.14", + "astro": "1.1.5", + "globby": "^13.1.2", + "gray-matter": "^4.0.3", + "lunr": "^2.3.9", + "mdx": "^0.3.1", + "svelte": "^3.50.0", + "tailwindcss": "^3.0.24", + "typescript": "^4.3.5" + }, + "dependencies": {} +} diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..afd9a03 --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: [ + require('tailwindcss/nesting'), + require('tailwindcss') + ], +} diff --git a/public/admin/config.yml b/public/admin/config.yml new file mode 100644 index 0000000..f8bf823 --- /dev/null +++ b/public/admin/config.yml @@ -0,0 +1,27 @@ +backend: + name: git-gateway + branch: main + commit_messages: + create: 'Create {{collection}} “{{slug}}”' + update: 'Update {{collection}} “{{slug}}”' + delete: 'Delete {{collection}} “{{slug}}”' + uploadMedia: '[skip ci] Upload “{{path}}”' + deleteMedia: '[skip ci] Delete “{{path}}”' + +media_folder: 'public/images/uploads' # Folder where user uploaded files should go +public_folder: '/images/uploads' + +collections: # A list of collections the CMS should be able to edit + - name: 'post' # Used in routes, ie.: /admin/collections/:slug/edit + label: 'Post' # Used in the UI, ie.: "New Post" + folder: 'src/pages/blog' # The path to the folder where the documents are stored + create: true # Allow users to create new documents in this collection + fields: # The fields each document in this collection have + - {label: "Layout", name: "layout", widget: "hidden", default: "$/layouts/post.astro"} + - { label: 'Title', name: 'title', widget: 'string' } + - { label: 'Description', name: 'description', widget: 'text' } + - { label: 'Body', name: 'body', widget: 'markdown' } + - { label: 'Tags', name: 'tags', widget: 'list' } + - { label: 'Author', name: 'author', widget: 'string' } + - { label: 'Author Twitter Handle', name: 'authorTwitter', widget: 'string' } + - { label: 'Publish Date', name: 'date', widget: 'datetime' } diff --git a/public/admin/index.html b/public/admin/index.html new file mode 100644 index 0000000..65df5fc --- /dev/null +++ b/public/admin/index.html @@ -0,0 +1,12 @@ + + + + + + Astro Ink - Content Manager + + + + + + diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..acb42aa Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000..c94145a Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..f03c543 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/assets/logo.svg b/public/assets/logo.svg new file mode 100644 index 0000000..d751556 --- /dev/null +++ b/public/assets/logo.svg @@ -0,0 +1,12 @@ + diff --git a/public/assets/yay.svg b/public/assets/yay.svg new file mode 100644 index 0000000..c12651b --- /dev/null +++ b/public/assets/yay.svg @@ -0,0 +1,925 @@ + \ No newline at end of file diff --git a/public/astro-banner.png b/public/astro-banner.png new file mode 100644 index 0000000..8e08957 Binary files /dev/null and b/public/astro-banner.png differ diff --git a/public/astro-ink-logo.png b/public/astro-ink-logo.png new file mode 100644 index 0000000..6938dc4 Binary files /dev/null and b/public/astro-ink-logo.png differ diff --git a/public/browserconfig.xml b/public/browserconfig.xml new file mode 100644 index 0000000..b3930d0 --- /dev/null +++ b/public/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #da532c + + + diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..da1c432 Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..6a0e166 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..4b2637d Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..542f90a --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,11 @@ + diff --git a/public/images/uploads/190092ee-dc26-42fc-8ad6-9344e3b9a1b8.jpeg b/public/images/uploads/190092ee-dc26-42fc-8ad6-9344e3b9a1b8.jpeg new file mode 100644 index 0000000..24faab5 Binary files /dev/null and b/public/images/uploads/190092ee-dc26-42fc-8ad6-9344e3b9a1b8.jpeg differ diff --git a/public/images/uploads/a_4x_larger_output_image.png b/public/images/uploads/a_4x_larger_output_image.png new file mode 100644 index 0000000..3f1d64f Binary files /dev/null and b/public/images/uploads/a_4x_larger_output_image.png differ diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png new file mode 100644 index 0000000..13604e9 Binary files /dev/null and b/public/mstile-150x150.png differ diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..1f53798 --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg new file mode 100644 index 0000000..8c6ad0d --- /dev/null +++ b/public/safari-pinned-tab.svg @@ -0,0 +1,103 @@ + + + diff --git a/public/search-index.json b/public/search-index.json new file mode 100644 index 0000000..7596abb --- /dev/null +++ b/public/search-index.json @@ -0,0 +1 @@ +[{"slug":"introducing-astro-ship-less-javascript","category":"blog","title":"Introducing Astro - Ship Less JavaScript","description":"There's a simple secret to building a faster website — just ship less.","tags":["astro","jam-stack"],"body":"\nUnfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.\n\nToday I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:\n\n- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.\n- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.\n- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.\n- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.\n- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.\n\n## H1 is good\n\n### H2 is good too\n\n> links are better\n\n[I know](they-are-better)\n\nThis post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.\n\n> To learn more about Astro and start building your first site, check out the project README.\n\n# Example - Syntax Highlighting\n\n## Shell(Bash)\n\n```bash\n# make a new project directory and jump into it\nmkdir my-astro-project && cd $_\n\n# create a new project with npm\nnpm create astro@latest\n\n# or yarn\nyarn create astro\n\n# or pnpm\npnpm create astro@latest\n```\n\n## Python\n\n```python\nprint('hello world')\n```\n\n## Javascript\n\n```js\nconst func = () => {alert(\"hello\")}\n```\n"},{"slug":"introducing-astro","category":"blog","title":"Introducing Astro - Ship Less JavaScript","description":"There's a simple secret to building a faster website — just ship less.","tags":["astro","jam-stack"],"body":"\nUnfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.\n\nToday I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:\n\n- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.\n- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.\n- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.\n- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.\n- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.\n\n## H1 is good\n\n### H2 is good too\n\n> links are better\n\n[I know](they-are-better)\n\nThis post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.\n\n> To learn more about Astro and start building your first site, check out the project README.\n"},{"slug":"islands-architecture-2","category":"blog","title":"Islands Architecture for light-weight FEs","description":"Render HTML pages on the server, and inject placeholders or slots around highly dynamic regions.","tags":["astro","jam-stack","architecture","front-end"],"body":"\nhttps://jasonformat.com/islands-architecture/\n"},{"slug":"islands-architecture","category":"blog","title":"Islands Architecture","description":"Render HTML pages on the server, and inject placeholders or slots around highly dynamic regions.","tags":["astro","jam-stack","architecture","front-end"],"body":"\nhttps://jasonformat.com/islands-architecture/\n"},{"slug":"spa-fatigue","category":"blog","title":"Second-guessing the modern web","description":"There is a sweet spot of React - in moderately interactive interfaces..","tags":["architecture","front-end","spa"],"body":"https://macwright.com/2020/05/10/spa-fatigue.html\n"}] \ No newline at end of file diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..5f6389c --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "Astro Ink", + "short_name": "Astro Ink", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/scripts/search/package.json b/scripts/search/package.json new file mode 100644 index 0000000..2b2b0af --- /dev/null +++ b/scripts/search/package.json @@ -0,0 +1,12 @@ +{ + "name": "search", + "version": "1.0.0", + "description": "", + "main": "prepare-index.js", + "type": "module", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Aftab Alam", + "license": "ISC" +} diff --git a/scripts/search/prepare-index.js b/scripts/search/prepare-index.js new file mode 100644 index 0000000..8c5581c --- /dev/null +++ b/scripts/search/prepare-index.js @@ -0,0 +1,37 @@ +import path from 'path' +import { promises as fs } from 'fs' +import { globby } from 'globby' +import grayMatter from 'gray-matter' + +(async function () { + // prepare the dirs + const srcDir = path.join(process.cwd(), 'src') + const publicDir = path.join(process.cwd(), 'public') + const contentDir = path.join(srcDir, 'pages', 'blog') + const contentFilePattern = path.join(contentDir, '*.md') + const indexFile = path.join(publicDir, 'search-index.json') + const getSlugFromPathname = (pathname) => path.basename(pathname, path.extname(pathname)) + + const contentFilePaths = await globby([ contentFilePattern ]) + + if(contentFilePaths.length) { + const files = contentFilePaths.map(async(filePath) => await fs.readFile(filePath, 'utf8')) + const index = [] + let i = 0 + for await (let file of files){ + const { data: { title, description, tags }, content } = grayMatter(file) + index.push({ + slug: getSlugFromPathname(contentFilePaths[i]), + category: 'blog', + title, + description, + tags, + body: content + }) + i++ + } + await fs.writeFile(indexFile, JSON.stringify(index)) + console.log(`Indexed ${index.length} documents from ${contentDir} to ${indexFile}`) + } + +})(); diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro new file mode 100644 index 0000000..f5ab4c3 --- /dev/null +++ b/src/components/BaseHead.astro @@ -0,0 +1,65 @@ +--- + import '@fontsource/fira-sans' + import { SITE } from '$/config' + import '../styles/global.css' + + export type Props = { + title: string + description: string + permalink: string + image: string + } + + const { title = SITE.title , description, permalink, image } = Astro.props as Props +--- + + + + + + {title} + + {description && + + } + + + + + + + + + + + + + + + + {permalink && + + } + {description && + + } + {image && + + } + + + + + {permalink && + + } + {description && + + } + {image && + + } + + diff --git a/src/components/BaseLayout.astro b/src/components/BaseLayout.astro new file mode 100644 index 0000000..1c3ff70 --- /dev/null +++ b/src/components/BaseLayout.astro @@ -0,0 +1,7 @@ + +

+ +

+ diff --git a/src/components/Footer.astro b/src/components/Footer.astro new file mode 100644 index 0000000..683314d --- /dev/null +++ b/src/components/Footer.astro @@ -0,0 +1,17 @@ +--- + import { SITE } from '$/config' + import ModeLabel from './ModeLabel.svelte' + import NetlifyIdentity from './NetlifyIdentity.svelte' +--- + + diff --git a/src/components/Header.astro b/src/components/Header.astro new file mode 100644 index 0000000..c5e8d38 --- /dev/null +++ b/src/components/Header.astro @@ -0,0 +1,69 @@ +--- + import { SITE } from '$/config' + import SvgIcon from './SvgIcon.astro' + import ModeSwitcherBtn from './ModeSwitcherBtn.svelte' + import SearchBtn from './SearchBtn.svelte' + +--- + +

+ +

+ { SITE.name } +

+ { SITE.description } +

+ +
+ + + + + +
+ + + + + + + +
+ +

+ + diff --git a/src/components/Intro.astro b/src/components/Intro.astro new file mode 100644 index 0000000..5fd42f1 --- /dev/null +++ b/src/components/Intro.astro @@ -0,0 +1,10 @@ + Yay!

+ + diff --git a/src/components/MainLayout.astro b/src/components/MainLayout.astro new file mode 100644 index 0000000..2322965 --- /dev/null +++ b/src/components/MainLayout.astro @@ -0,0 +1,28 @@ +--- +import BaseLayout from './BaseLayout.astro'; +import Header from './Header.astro'; +import Footer from './Footer.astro'; +import Nav from './Nav.astro'; +import Portal from './Portal.astro'; +import SearchModal from './SearchModal.svelte' + +--- + +
+

+ +

+
+

+ { SITE.name } +

{ content.title }

+ { content.author } | + { new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(new Date(content.date))} +

{ content.title }

+ { content.author } | + { new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(new Date(content.date))} +