Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SEO #6

Merged
merged 18 commits into from
Oct 31, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
File renamed without changes
Binary file removed src/images/icons/[email protected]
Binary file not shown.
Binary file removed src/images/icons/icon-76.png
Binary file not shown.
Binary file removed src/images/icons/[email protected]
Binary file not shown.
Binary file removed src/images/icons/[email protected]
Binary file not shown.
Binary file removed src/images/patterns/card-inactive-overlay.png
Binary file not shown.
Binary file removed src/images/tumblr/pointless-stamp.png
Binary file not shown.
132 changes: 108 additions & 24 deletions src/layouts/Application.astro
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
---
const { title, themeColors } = Astro.props;
const { title, themeColors, description, metaImage, slug } = Astro.props;

// Get the current path
const currentPath = Astro.url.pathname;
const isHomePage = currentPath === "/";

let rootUrl = '';
let metaImageUrl = '';
let contentUrl = '';
// Default colors
const defaultColors = {
backgroundColor: '#fff',
Expand Down Expand Up @@ -41,15 +43,58 @@ import logoLargeWhite from '../images/svgs/pointless-logo-large--white.svg';
import iconX from '../images/svgs/x.svg?raw';
import '../styles/global.css';
---
{(() => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was really weird and it even led me to a recent bug report by Henry! Moving this code outside the frontmatter fixed it not wanting to access the env variables.

// meta imports don't work in Astro frontmatter, so we set the root URL and meta image URL here
// Set the root URL based on the environment
rootUrl = import.meta.env.NETLIFY
? import.meta.env.CONTEXT === 'production'
? 'https://pointlesscorp.com/'
: `${import.meta.env.DEPLOY_PRIME_URL}/`
: new URL(Astro.url.origin).toString();

// Set the meta image URL based on the environment
metaImageUrl = metaImage ? `${metaImage}` : `${rootUrl}og.png`;
contentUrl = slug === '/' ? `${rootUrl}` : `${rootUrl}${slug}`;

return null;
})()}

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<html lang="en" class="scroll-smooth focus:scroll-auto">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="/favicon.png">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/favicon.png" />

<link rel="preconnect" href="//a-us.storyblok.com/">
<link rel="dns-prefetch" href="//a-us.storyblok.com/" />
<link rel="preload" as="font" href={`${rootUrl}fonts/FunctionPro-Bold-webfont.woff`} type="font/woff" crossorigin="anonymous" />

<!-- HTML Meta Tags -->
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={contentUrl} />

<!-- Google / Search Engine Tags -->
<meta itemprop="name" content={title} />
<meta itemprop="description" content={description} />
<meta itemprop="image" content={metaImageUrl} />

<!-- Facebook Meta Tags -->
<meta property="og:url" content={contentUrl} />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={metaImageUrl} />

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={metaImageUrl} />
<meta name="twitter:url" content={contentUrl} />
<meta name="twitter:site" content="@pointlesscorp" />
<meta name="twitter:creator" content="@pointlesscorp" />

<style define:vars={finalColors}>
:root {
Expand All @@ -63,20 +108,59 @@ import '../styles/global.css';
--footerSocialBorderColor: {finalColors.footerSocialBorderColor};
--footerSocialBorderHoverColor: {finalColors.footerSocialBorderHoverColor};
}

body,
footer {
background-color: var(--backgroundColor);
color: var(--textColor);
}

body a {
color: var(--linkColor);
}

footer {
color: var(--footerTextColor);
}

footer a {
color: var(--footerLinkColor);
}

.footer-copyright {
color: var(--footerCopyrightColor);
}

.footer-social {
border-color: var(--footerSocialBorderColor);
}

.footer-social:hover,
.footer-social:focus {
border-color: var(--footerSocialBorderHoverColor);
color: var(--footerSocialBorderHoverColor);
}
</style>
</head>
<body class="antialiased font-base">
<header class="absolute top-9 left-0 z-20 w-full px-3">
<div class="mx-auto flex max-w-7xl items-center justify-center sm:justify-between">
{currentPath === "/" ? (
<h1>
<img src={logo.src} class="h-auto w-[160px]" alt="Pointless Corp." />
</h1>
) : (
<a href="/">
<img src={logo.src} class="h-auto w-[160px]" alt="Pointless Corp." />
</a>
)}
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-N3P6MM"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s) as HTMLScriptElement,dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-N3P6MM');</script>

<header class="absolute left-0 z-20 w-full px-3 top-9">
<div class="flex items-center justify-center mx-auto max-w-7xl sm:justify-between">
{(() => {
const logoImg = <img src={logo.src} class="h-auto w-[160px]" alt="Pointless Corp." />;
return currentPath === "/" ? (
<h1>{logoImg}</h1>
) : (
<a href="/">{logoImg}</a>
);
})()}

<nav class="hidden sm:block">
<ul class="flex gap-4 font-functionpro">
Expand All @@ -91,21 +175,21 @@ import '../styles/global.css';
<slot />
</main>
<footer class="flex flex-col items-center px-5 uppercase py-[50px] font-functionpro">
{currentPath === "/" ? (
<img src={logoLarge.src} class="h-auto w-[212px] sm:w-[282px]" alt="Pointless Corp." />
) : (
<img src={logoLargeWhite.src} class="h-auto w-[212px] sm:w-[282px]" alt="Pointless Corp." />
)}
<img
src={currentPath === "/" ? logoLarge.src : logoLargeWhite.src}
class="h-auto w-[212px] sm:w-[282px]"
alt="Pointless Corp."
/>

<p class="mt-8 text-xs">The innovation lab at <a class="underline hover:no-underline focus:no-underline" href="http://viget.com">Viget</a></p>
<p class="mt-8 text-xs">The innovation lab at <a class="underline hover:no-underline focus:no-underline" href="https://www.viget.com/">Viget</a></p>

<p class="mt-6">
<a class="footer-social inline-block rounded-full border transition duration-300 border-gray-light p-[13px] hover:border-gray-dark focus:border-gray-dark" aria-label="Pointless Corp. on X" href="http://x.com/pointlesscorp">
<Fragment set:html={iconX} />
</a>
</p>

<p class="footer-copyright mt-5 text-xs">&copy; {new Date().getFullYear()} Pointless Corp.</p>
<p class="mt-5 text-xs footer-copyright">&copy; {new Date().getFullYear()} Pointless Corp.</p>
</footer>
</body>
</html>
4 changes: 3 additions & 1 deletion src/pages/[...slug].astro
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,10 @@ const themeColors = {
textColor: story.content.textColor?.color,
linkColor: story.content.linkColor?.color,
};

const description = story.content.description.content[0].content[0].text;
---

<Application title={`${story.name} - Pointlesscorp`} themeColors={themeColors}>
<Application title={`${story.name} - Pointlesscorp`} themeColors={themeColors} description={description} metaImage={story.content.logo.filename} slug={slug}>
<StoryblokComponent blok={story.content} name={story.name} projects={projectData.stories} />
</Application>
8 changes: 7 additions & 1 deletion src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,14 @@ const { data: projectData } = await storyblokApi.get('cdn/stories', {

const projects = projectData.stories;
const story = homeData.story;

// Extract text from the aboutText content
const aboutTextString = story.content.aboutText.content
.flatMap((paragraph: { content: { text: string }[] }) => paragraph.content
.map(item => item.text)
.join(''));
---

<Application title="Pointless Corp - The Innovation Lab at Viget">
<Application title="Pointless Corp - The Innovation Lab at Viget" description={aboutTextString} slug="/">
<StoryblokComponent blok={story.content} projects={projects} />
</Application>
24 changes: 12 additions & 12 deletions src/storyblok/Homepage.astro
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function renderContent(content: any) {
.map(size => `${imageFilename}/m/${size}x0/filters:format(avif) ${size}w`)
.join(', ')}
sizes={`100vw`}
class="absolute top-0 left-0 z-0 h-full w-full object-cover"
class="absolute top-0 left-0 z-0 object-cover w-full h-full"
/>
);
})()
Expand All @@ -51,26 +51,26 @@ function renderContent(content: any) {
<ul class="flex flex-wrap justify-center gap-20">
<li class="text-center uppercase font-functionpro text-mud">
<Fragment set:html={iconTools} />
<span class="mt-4 inline-block">Tools</span>
<span class="inline-block mt-4">Tools</span>
</li>
<li class="text-center uppercase font-functionpro text-mud">
<Fragment set:html={iconExperiments} />
<span class="mt-4 inline-block">Experiments</span>
<span class="inline-block mt-4">Experiments</span>
</li>
<li class="text-center uppercase font-functionpro text-mud">
<Fragment set:html={iconStunts} />
<span class="mt-4 inline-block">Stunts</span>
<span class="inline-block mt-4">Stunts</span>
</li>
</ul>

<div class="mt-12 px-3 text-center uppercase font-functionpro text-brick text-[20px] leading-[1em] md:text-[36px]">
<div class="mx-auto max-w-4xl about-text" set:html={renderContent(blok.aboutText)} />
<div class="max-w-4xl mx-auto space-y-12 about-text" set:html={renderContent(blok.aboutText)} />
</div>
</section>
)}

<section id="projects" class="py-[60px]">
<h2 class="text-center text-4xl uppercase font-functionpro text-brick-light">Projects</h2>
<h2 class="text-4xl text-center uppercase font-functionpro text-brick-light">Projects</h2>

{projects && (
<ProjectList projects={projects} />
Expand All @@ -96,7 +96,7 @@ function renderContent(content: any) {
</h2>

<div class="mt-12 px-3 text-center uppercase font-functionpro text-brick text-[32px] leading-[1em] sm:text-[48px]">
<div class="mx-auto max-w-3xl process-text" set:html={renderContent(blok.processText)} />
<div class="max-w-3xl mx-auto process-text" set:html={renderContent(blok.processText)} />
</div>
</section>
)}
Expand Down Expand Up @@ -161,7 +161,7 @@ function renderContent(content: any) {
"
>
{blok.culturePhotos && (
<div class="relative col-span-1 grid grid-cols-2 lg:grid-cols-1"
<div class="relative grid grid-cols-2 col-span-1 lg:grid-cols-1"
@mouseenter="isHovering = true; stopRotation()"
@mouseleave="isHovering = false; !prefersReducedMotion && isLargeScreen && startRotation()"
>
Expand Down Expand Up @@ -190,7 +190,7 @@ function renderContent(content: any) {
)}

{blok.processPhotos && (
<div class="col-span-1 grid grid-cols-2">
<div class="grid grid-cols-2 col-span-1">
{blok.processPhotos.slice(0, 4).map((image: ImageType) => (
<Image
image={image}
Expand Down Expand Up @@ -228,12 +228,12 @@ function renderContent(content: any) {
<li
x-data={`{ expanded: ${index === 0} }`}
x-id="['faq-question', 'faq-answer']"
class="mb-11 px-3"
class="px-3 mb-11"
>
{item.question && (
<h3 class="relative pl-10">
<span
class="absolute top-0 left-0 block h-6 w-6 rounded-full transition-colors duration-300"
class="absolute top-0 left-0 block w-6 h-6 transition-colors duration-300 rounded-full"
:class="expanded ? 'bg-red' : 'bg-green'"
>
<i class="absolute top-1/2 left-1/2 block w-3 -translate-x-1/2 -translate-y-1/2 bg-white h-[2px]"></i>
Expand All @@ -245,7 +245,7 @@ function renderContent(content: any) {
:aria-expanded="expanded"
:aria-controls="$id('faq-answer')"
:id="$id('faq-question')"
class="text-base uppercase leading-6 font-functionpro text-green"
class="text-base leading-6 uppercase font-functionpro text-green"
>
{item.question}
</button>
Expand Down
20 changes: 10 additions & 10 deletions src/storyblok/Project.astro
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function renderContent(content: any) {
}
---

<article class="px-5 pt-20 project">
<article class="px-5 pt-20 pb-10 project">
<h1 class="sr-only">{name}</h1>

<!-- Project Logo -->
Expand All @@ -24,12 +24,12 @@ function renderContent(content: any) {
src={blok.logo.filename}
inferSize={true}
alt=""
class="mx-auto mb-5 block max-w-full"
class="block max-w-full mx-auto mb-5"
/>
)}

<!-- Project Details -->
<ul class="mx-auto table border-collapse text-center uppercase metatable font-functionpro">
<ul class="table mx-auto text-center uppercase border-collapse metatable font-functionpro">
{blok.url && (
<li class="table-cell border">
<span class="block border-b px-3 metatable-label text-[10px] py-[2px]">Visit</span>
Expand Down Expand Up @@ -76,7 +76,7 @@ function renderContent(content: any) {
</ul>

<!-- Project Description -->
{blok.description && <section class="mx-auto max-w-3xl text-center project-description my-[60px] text-[24px] leading-[1.6em]" set:html={renderContent(blok.description)} />}
{blok.description && <section class="mx-auto max-w-3xl text-center project-description my-[60px] text-[24px] leading-[1.6em] space-y-9" set:html={renderContent(blok.description)} />}

<!-- Example Blocks -->
{blok.examples && blok.examples.length > 0 && (
Expand Down Expand Up @@ -151,7 +151,7 @@ function renderContent(content: any) {
>
<span class="sr-only">Slide {index + 1}</span>
<span
class="absolute top-1/2 left-1/2 block -translate-x-1/2 -translate-y-1/2 rounded-full border transition-all duration-300 ease-in-out"
class="absolute block transition-all duration-300 ease-in-out -translate-x-1/2 -translate-y-1/2 border rounded-full top-1/2 left-1/2"
:class={`currentImage === ${index} ? 'selected w-3 h-3' : ' w-2 h-2'`}
></span>
</button>
Expand All @@ -164,8 +164,8 @@ function renderContent(content: any) {

<!-- Related Content -->
{blok.relatedContent && blok.relatedContent.length > 0 && (
<section class="mx-auto mt-14 mb-10 max-w-7xl">
<h2 class="mb-3 text-center text-4xl uppercase font-functionpro">More about {name}</h2>
<section class="mx-auto mb-10 mt-14 max-w-7xl">
<h2 class="mb-3 text-4xl text-center uppercase font-functionpro">More about {name}</h2>

<ul class="text-center uppercase font-functionpro">
{blok.relatedContent.map((related) => (
Expand All @@ -186,10 +186,10 @@ function renderContent(content: any) {
)}

<!-- More Projects -->
<section class="mx-auto mt-14 mb-10 max-w-7xl">
<h2 class="mb-3 text-center text-4xl uppercase font-functionpro">More Pointless Projects</h2>
<section class="mx-auto mt-14 max-w-7xl">
<h2 class="mb-3 text-4xl text-center uppercase font-functionpro">More Pointless Projects</h2>

<ul class="text-center text-lg uppercase font-functionpro xs:columns-2 md:columns-3">
<ul class="text-lg text-center uppercase font-functionpro xs:columns-2 md:columns-3">
{projects.map((project: { slug: string; name: string }) => (
<li class="py-2">
<a href={`/${project.slug}`} class="!no-underline hover:!underline">{project.name}</a>
Expand Down
4 changes: 2 additions & 2 deletions src/storyblok/bloks/EmbeddedContentBlok.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
const { blok } = Astro.props;
---

<figure class="mx-auto my-10 max-w-2xl">
<figure class="max-w-2xl mx-auto my-10">
{blok.embed && (
<div set:html={blok.embed} />
)}

{blok.caption && (
<figcaption class="mt-3 text-center text-xs uppercase font-functionpro">{blok.caption}</figcaption>
<figcaption class="mt-3 text-xs text-center uppercase font-functionpro">{blok.caption}</figcaption>
)}
</figure>
4 changes: 2 additions & 2 deletions src/storyblok/bloks/ImageBlok.astro
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ const imageUrl = blok.image?.filename || ''
<Image
src={`${imageUrl}/m/filters:format(avif)`}
alt={blok.alt || ''}
class="relative z-10 mx-auto block h-auto max-w-full"
class="relative z-10 block h-auto max-w-full mx-auto"
srcset={[320, 480, 640, 768, 1024, 1366, 1536, 1920, 2048]
.map(size => `${imageUrl}/m/${size}x0/filters:format(avif) ${size}w`)
.join(', ')}
sizes={`100vw`}
inferSize={true}
/>

<div class="absolute top-0 left-1/2 z-0 h-full w-full max-w-4xl -translate-x-1/2 transform text-center">
<div class="absolute top-0 z-0 w-full h-full max-w-4xl text-center transform -translate-x-1/2 left-1/2">
<Fragment set:html={circle} />
</div>
</div>
Expand Down
Loading