Skip to content

Commit

Permalink
Merge pull request #12 from Leaxlang/main
Browse files Browse the repository at this point in the history
updating
  • Loading branch information
Leaxlang authored Apr 1, 2024
2 parents 40d6884 + 150a6d3 commit a831564
Show file tree
Hide file tree
Showing 10 changed files with 618 additions and 164 deletions.
69 changes: 27 additions & 42 deletions .github/workflows/oxygen-deployment-1000014091.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,55 +2,40 @@
#! oxygen_storefront_id: 1000014091

name: Storefront 1000014091
on: [push]

on:
- push
permissions:
contents: read
deployments: write

jobs:
deploy:
name: Deploy to Oxygen
timeout-minutes: 30
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4

- name: Setup node.js
uses: actions/setup-node@v4
with:
node-version: 'lts/*'
check-latest: true

- name: Cache node modules
id: cache-npm
uses: actions/cache@v4
env:
cache-name: cache-node-modules
with:
path: ~/.npm
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}-
${{ runner.os }}-build-
${{ runner.os }}-
- name: Install dependencies
run: npm ci

- name: Build and Publish to Oxygen
id: deploy
uses: shopify/oxygenctl-action@v4
with:
oxygen_deployment_token: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000014091 }}
build_command: "npm run build"
- uses: actions/checkout@v4
- name: Setup node.js
uses: actions/setup-node@v4
with:
node-version: lts/*
check-latest: true
- name: Cache node modules
id: cache-npm
uses: actions/cache@v4
env:
cache-name: cache-node-modules
with:
path: "~/.npm"
key: "${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}"
restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}-
${{ runner.os }}-build-
${{ runner.os }}-
- name: Install dependencies
run: npm ci
- name: Build and Publish to Oxygen
id: deploy
run: npx shopify hydrogen deploy
env:
SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN: "${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000014091 }}"

# Create GitHub Deployment
- name: Create GitHub Deployment
uses: shopify/github-deployment-action@v1
if: always()
with:
token: ${{ github.token }}
environment: 'preview'
preview_url: ${{ steps.deploy.outputs.url }}
description: ${{ github.event.head_commit.message }}
53 changes: 53 additions & 0 deletions app/components/Carousel.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { useLoaderData, Link } from '@remix-run/react';
import { Image} from '@shopify/hydrogen';

export function Carousel({ collections }) {
// Assuming collections is an array of collections fetched from your GraphQL query
// and each collection is an object with properties like id, title, handle, etc.

return (
<section class="carousel" aria-label="Gallery">
<ol class="carousel__viewport">
{collections.map((collection, index) => (
<li key={collection.id} id={`carousel__slide${index + 1}`} tabindex="0" class="carousel__slide">
<div className="collections-grid">
<CollectionItem collection={collection} index={index} />
</div>
<div class="carousel__snapper"></div>
<a href={`#carousel__slide${index === 0 ? collections.length : index}`} class="carousel__prev">Go to previous slide</a>
<a href={`#carousel__slide${index === collections.length - 1 ? 1 : index + 2}`} class="carousel__next">Go to next slide</a>
</li>
))}
</ol>
<aside class="carousel__navigation">
<ol class="carousel__navigation-list">
{collections.map((_, index) => (
<li key={index} class="carousel__navigation-item">
<a href={`#carousel__slide${index + 1}`} class="carousel__navigation-button">Go to slide {index + 1}</a>
</li>
))}
</ol>
</aside>
</section>
);
}

function CollectionItem({ collection, index }) {
return (
<Link
className="collection-item"
key={collection.id}
to={`/collections/${collection.handle}`}
prefetch="intent"
>
<h5>{collection.title}</h5>

<Image
// alt={collection.image.altText || collection.title}
aspectRatio="1/1"
data={collection.image}
loading={index < 3 ? 'eager' : undefined}
/>
</Link>
);
}
5 changes: 4 additions & 1 deletion app/components/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export function HeaderMenu({menu, primaryDomainUrl, viewport}) {
>
Home
</NavLink>

)}
{(menu || FALLBACK_HEADER_MENU).items.map((item) => {
if (!item.url) return null;
Expand Down Expand Up @@ -98,6 +99,7 @@ function HeaderCtas({isLoggedIn, cart}) {
</Suspense>
</NavLink>
<SearchToggle />

<CartToggle cart={cart} />
</nav>
);
Expand All @@ -119,7 +121,8 @@ function SearchToggle() {
* @param {{count: number}}
*/
function CartBadge({count}) {
return <a href="#cart-aside">Cart {count}</a>;
return <NavLink to="/cart" >
🛒 {count}</NavLink>;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion app/components/Layout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,4 @@ function MobileMenuAside({menu, shop}) {

/** @typedef {import('storefrontapi.generated').CartApiQueryFragment} CartApiQueryFragment */
/** @typedef {import('storefrontapi.generated').FooterQuery} FooterQuery */
/** @typedef {import('storefrontapi.generated').HeaderQuery} HeaderQuery */
/** @typedef {import('storefrontapi.generated').HeaderQuery} HeaderQuery */
Binary file added app/images/error.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion app/root.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export function ErrorBoundary() {
<body>
<Layout {...rootData}>
<div className="route-error">
<h1>Oops</h1>
<h1>Ohh no! Something is wrong!</h1>
<h2>{errorStatus}</h2>
{errorMessage && (
<fieldset>
Expand Down
Loading

0 comments on commit a831564

Please sign in to comment.