diff --git a/docs/src/data/themes.json b/docs/src/data/themes.json index 7203bd0fa..a291c10fb 100644 --- a/docs/src/data/themes.json +++ b/docs/src/data/themes.json @@ -42,6 +42,14 @@ "sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/portfolio", "command": "npm init astro -- --template portfolio" }, + { + "name": "Portfolio-svelte", + "description": "A portfolio theme using Svelte components, perfect for your personal or professional online portfolio.", + "github": "https://github.com/snowpackjs/astro/tree/main/examples/portfolio-svelte", + "demo": null, + "sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/portfolio-svelte", + "command": "npm init astro -- --template portfolio-svelte" + }, { "name": "Minimal", "description": "A minimal theme, with just the bare minimum needed to get started.", diff --git a/examples/portfolio-svelte/.gitignore b/examples/portfolio-svelte/.gitignore new file mode 100644 index 000000000..a58d77cbb --- /dev/null +++ b/examples/portfolio-svelte/.gitignore @@ -0,0 +1,19 @@ +# 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 +pnpm-lock.yaml diff --git a/examples/portfolio-svelte/.npmrc b/examples/portfolio-svelte/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/portfolio-svelte/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true \ No newline at end of file diff --git a/examples/portfolio-svelte/.stackblitzrc b/examples/portfolio-svelte/.stackblitzrc new file mode 100644 index 000000000..43798ecff --- /dev/null +++ b/examples/portfolio-svelte/.stackblitzrc @@ -0,0 +1,6 @@ +{ + "startCommand": "npm start", + "env": { + "ENABLE_CJS_IMPORTS": true + } +} \ No newline at end of file diff --git a/examples/portfolio-svelte/README.md b/examples/portfolio-svelte/README.md new file mode 100644 index 000000000..d90b69d0f --- /dev/null +++ b/examples/portfolio-svelte/README.md @@ -0,0 +1,23 @@ +# Astro Starter Kit: Portfolio + +``` +npm init astro -- --template portfolio +``` + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/portfolio-svelte) + +> πŸ§‘β€πŸš€ **Seasoned astronaut?** Delete this file. Have fun! + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +|:----------------|:--------------------------------------------| +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | + +## πŸ‘€ Want to learn more? + +Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat). diff --git a/examples/portfolio-svelte/astro.config.mjs b/examples/portfolio-svelte/astro.config.mjs new file mode 100644 index 000000000..3e7d4acdb --- /dev/null +++ b/examples/portfolio-svelte/astro.config.mjs @@ -0,0 +1,13 @@ +// 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} */ ({ + // Enable the Svelte renderer to support Svelte components. + renderers: ['@astrojs/renderer-svelte'], +}); diff --git a/examples/portfolio-svelte/package.json b/examples/portfolio-svelte/package.json new file mode 100644 index 000000000..7bb5b3c8c --- /dev/null +++ b/examples/portfolio-svelte/package.json @@ -0,0 +1,17 @@ +{ + "name": "@example/portfolio-svelte", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview" + }, + "devDependencies": { + "astro": "^0.21.0-next.0" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/portfolio-svelte/public/assets/mesh-gradient.jpg b/examples/portfolio-svelte/public/assets/mesh-gradient.jpg new file mode 100644 index 000000000..4ee5a663f Binary files /dev/null and b/examples/portfolio-svelte/public/assets/mesh-gradient.jpg differ diff --git a/examples/portfolio-svelte/public/favicon.ico b/examples/portfolio-svelte/public/favicon.ico new file mode 100644 index 000000000..578ad458b Binary files /dev/null and b/examples/portfolio-svelte/public/favicon.ico differ diff --git a/examples/portfolio-svelte/src/components/Button.svelte b/examples/portfolio-svelte/src/components/Button.svelte new file mode 100644 index 000000000..d5376d134 --- /dev/null +++ b/examples/portfolio-svelte/src/components/Button.svelte @@ -0,0 +1,11 @@ + + + diff --git a/examples/portfolio-svelte/src/components/Footer.svelte b/examples/portfolio-svelte/src/components/Footer.svelte new file mode 100644 index 000000000..0a91c426c --- /dev/null +++ b/examples/portfolio-svelte/src/components/Footer.svelte @@ -0,0 +1,23 @@ + + + + + diff --git a/examples/portfolio-svelte/src/components/MainHead.astro b/examples/portfolio-svelte/src/components/MainHead.astro new file mode 100644 index 000000000..74eb59164 --- /dev/null +++ b/examples/portfolio-svelte/src/components/MainHead.astro @@ -0,0 +1,13 @@ +--- +const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White' } = Astro.props; +--- + + + + +{title} + + + + + diff --git a/examples/portfolio-svelte/src/components/Nav.svelte b/examples/portfolio-svelte/src/components/Nav.svelte new file mode 100644 index 000000000..87108e12d --- /dev/null +++ b/examples/portfolio-svelte/src/components/Nav.svelte @@ -0,0 +1,80 @@ + + + diff --git a/examples/portfolio-svelte/src/components/PortfolioPreview.svelte b/examples/portfolio-svelte/src/components/PortfolioPreview.svelte new file mode 100644 index 000000000..230a0747f --- /dev/null +++ b/examples/portfolio-svelte/src/components/PortfolioPreview.svelte @@ -0,0 +1,119 @@ + + +
+
+

{project.title}

+
+
+

{project.description}

+
+ Tagged: + {#each project.tags as t} +
+ {t} +
+ {/each} +
+ + View + +
+
+ + diff --git a/examples/portfolio-svelte/src/layouts/project.astro b/examples/portfolio-svelte/src/layouts/project.astro new file mode 100644 index 000000000..da2a4741b --- /dev/null +++ b/examples/portfolio-svelte/src/layouts/project.astro @@ -0,0 +1,92 @@ +--- +import MainHead from '../components/MainHead.astro'; +import Button from '../components/Button.svelte'; +import Footer from '../components/Footer.svelte'; +import Nav from '../components/Nav.svelte'; + +const { content } = Astro.props; +--- + + + + + + +