diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 0000000..9f145d9 --- /dev/null +++ b/.devcontainer/Dockerfile @@ -0,0 +1,14 @@ +FROM mcr.microsoft.com/vscode/devcontainers/base:0-buster + +ENV DENO_INSTALL=/deno +RUN mkdir -p /deno \ + && curl -fsSL https://deno.land/x/install/install.sh | sh \ + && chown -R vscode /deno + +ENV PATH=${DENO_INSTALL}/bin:${PATH} \ + DENO_DIR=${DENO_INSTALL}/.cache/deno + +EXPOSE 8000 +# [Optional] Uncomment this section to install additional OS packages. +# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ +# && apt-get -y install --no-install-recommends diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000..dfb09d5 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,31 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: +// https://github.com/microsoft/vscode-dev-containers/tree/v0.183.0/containers/deno +{ + "name": "Deno", + "dockerFile": "Dockerfile", + "appPort": [ + 8000 + ], // Specify the ports you want to forward + "forwardPorts": [ + 8000 + ], + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "denoland.vscode-deno", + "bradlc.vscode-tailwindcss", + "ecmel.vscode-html-css", + "Tobermory.es6-string-html" + ], + "postCreateCommand": "gh codespace ports visibility 8000:public -c $CODESPACE_NAME", + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], + // Uncomment to use the Docker CLI from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker. + // "mounts": [ "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind" ], + // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. + "remoteUser": "vscode", + "features": { + "ghcr.io/devcontainers/features/github-cli:1": {} + } +} diff --git a/.env b/.env new file mode 100644 index 0000000..fdbbb1e --- /dev/null +++ b/.env @@ -0,0 +1,5 @@ +DECO_SITE_NAME=storefront-vtex +# DECO_SITE_NAME=storefront-linx +# DECO_SITE_NAME=storefront-wake +# DECO_SITE_NAME=storefront-vnda +# DECO_SITE_NAME=store-shopify diff --git a/.github/workflows/deco-deploy.yaml b/.github/workflows/deco-deploy.yaml new file mode 100644 index 0000000..1c4b23c --- /dev/null +++ b/.github/workflows/deco-deploy.yaml @@ -0,0 +1,54 @@ +name: Deploy + +concurrency: + group: environment-${{ github.head_ref || github.ref }} + +on: + push: + branches: [main] + pull_request: + branches: [main] + +jobs: + set_vars: + runs-on: ubuntu-latest + outputs: + site_matrix: ${{ steps.set_vars.outputs.site_matrix }} + steps: + - name: Set site matrix + id: set_vars + shell: bash + run: | + if [ -z ${{ vars.SITES }} ]; then + echo "site_matrix={site: [\"${{ github.event.repository.name }}\"] }" >> $GITHUB_OUTPUT + else + echo "site_matrix={site: ${{ vars.SITES }} }" >> $GITHUB_OUTPUT + fi + deploy: + needs: set_vars + strategy: + matrix: ${{ fromJson(needs.set_vars.outputs.site_matrix) }} + name: Deploy + runs-on: ubuntu-latest + + permissions: + id-token: write # Needed for auth with Deno Deploy + contents: read # Needed to clone the repository + + steps: + - name: Clone repository + uses: actions/checkout@v3 + + - name: Deco Deploy + id: decoDeployStep + continue-on-error: true + uses: deco-cx/deploy@v0 + with: + site: ${{ matrix.site }} + + - name: Retry Deco Deploy + id: decoDeployRetryStep + if: steps.decoDeployStep.outcome == 'failure' + uses: deco-cx/deploy@v0 + with: + site: ${{ matrix.site }} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d31b5ae --- /dev/null +++ b/.gitignore @@ -0,0 +1,75 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +.cache/ + +# Mac files +.DS_Store + +# Yarn +yarn-error.log +.pnp/ +.pnp.js +# Yarn Integrity file +.yarn-integrity + +dist/ +server/ + +import_map.local.json +# db files +.config.json +# Fresh build directory +_fresh/ + +deno.lock diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..6a33f51 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "ecmel.vscode-html-css", + "tobermory.es6-string-html", + "denoland.vscode-deno", + "bradlc.vscode-tailwindcss" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..d225477 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,16 @@ +{ + "deno.enable": true, + "deno.lint": true, + "deno.unstable": true, + "deno.codeLens.test": true, + "editor.quickSuggestions": { + "strings": true + }, + "editor.defaultFormatter": "denoland.vscode-deno", + "[markdown]": { + "editor.defaultFormatter": "DavidAnson.vscode-markdownlint" + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..88ca455 --- /dev/null +++ b/README.md @@ -0,0 +1,225 @@ +# Storefront starter by deco.cx + +A fully featured starter to help you customize and deploy an ecommerce website. +in minutes. + +
+ +
+ +## Features + +This starter brings: + + + +## Getting started + +To execute this website on your machine, clone it to your local machine with +`git clone` and make sure +[deno is installed](https://deno.land/manual@v1.31.1/getting_started/installation). + +Then open the terminal, change the directory to where fashion was cloned and +type + +```sh +deno task start +``` + +You should see the following output + +``` +$ deno task start +Task start deno run -A --watch=static/,sections/,functions/ dev.ts +Watcher Process started. +Starting live middleware: siteId=538 site=std +The manifest has been generated for 6 routes, 5 islands, 17 sections and 16 functions. +Githooks setup successfully: pre-commit +Starting live middleware: siteId=239 site=fashion +Listening on http://localhost:8000/ +``` + +Now, open [http://localhost:8000/](http://localhost:8000/). You should see the +fashion starter running on your machine! + +To continue from here, you can [perform initial setup](#initial-setup), +[understand folder structure](#understanding-folder-structure), learn how to +create [common design patterns](#recipes) (components) and comply to +[best practices](#best-practices) + +## Initial setup + +Below is a checklist for the store's initial setup. After completing these +tasks, your store will be ready to go live and won't need any further changes on +this repository. If, after changing the content via +[deco.cx's CMS](https://deco.cx/admin), you feel the store is not ready for +going live, you can learn how to [customize the code](#customize-the-store) + +Checklist + +- [ ] Ecommerce platform connected +- [ ] Fonts added +- [ ] Logo changed +- [ ] favicon.ico, robots.txt changed +- [ ] Design system changed + +### Connecting your e-commerce platform + +Products, prices and promotions are provided by an ecommerce platform (VTEX, +Shopify, Oracle). To connect to a platform: + +Open the +[ecommerce's global config](https://deco.cx/admin/{your-site-id}/workbench?section=deco-sites%2Fstd%2Fsections%2FconfigVTEX.global.tsx) +and set your credentials. Then, open `/components/minicart/Cart.tsx` and +`/routes/api/[...catchall].tsx` and replace `bravtexfashionstore` to your +account name. + +After this, your should be using the products provenient from your ecommerce +account + +### Adding fonts + +1. Copy & paste your font files (.woff/.woff2) to `/static/fonts` folder +2. Open `/components/GlobalTags.tsx` component and replace `@font-face` tags + accordingly, i.e. change font-family, font-style and font-weight. Now, change + the src attribute with the right font path. +3. Open tailwind.config.ts and change the `fontFamily` attribute accordingly. + +> WARNING: Do not forget to use the `asset()` function. Not adding it will +> increase the traffic on your site and lead to higher costs + +> If your don't know the font-family, font-style and font-weight, ask your +> designer for these values. + +### Adding your logo + +1. Make sure you have your logo in `.svg` format +2. Open your logo in your text editor and copy its content +3. Open /static/sprites.svg +4. Replace `