mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use getRelativeLink

Browse Source
This commit is contained in:
prototypa
2022-11-22 12:48:28 -05:00
parent 87895be803
commit 00ec087a4d
3 changed files with 100 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/atoms/ExtraMetaTags.astro
View File

@ -1,9 +1,7 @@
--- ---
import { SITE } from '~/config.mjs'; import { getRelativeLink } from '~/utils/permalinks';
const base = `${SITE.basePathname}${SITE.basePathname.endsWith('/') ? "" : "/"}`
--- ---
<link rel="shortcut icon" href={`${base}favicon.ico`} /> <link rel="shortcut icon" href={getRelativeLink('/favicon.ico')} />
<link rel="icon" type="image/svg+xml" href={`${base}favicon.svg`} /> <link rel="icon" type="image/svg+xml" href={getRelativeLink('/favicon.svg')} />
<link rel="mask-icon" href={`${base}favicon.svg`} color="#8D46E7" /> <link rel="mask-icon" href={getRelativeLink('/favicon.svg')} color="#8D46E7" />

10
src/components/atoms/Pagination.astro
View File

@ -1,6 +1,6 @@
--- ---
import { Icon } from 'astro-icon'; import { Icon } from 'astro-icon';
import { getPermalink } from '~/utils/permalinks'; import { getRelativeLink } from '~/utils/permalinks';
const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } = Astro.props; const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } = Astro.props;
--- ---
@ -9,8 +9,8 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
<div class="container flex"> <div class="container flex">
<div class="flex flex-row mx-auto container justify-between"> <div class="flex flex-row mx-auto container justify-between">
<a <a
href={getPermalink(prevUrl, 'raw')} href={getRelativeLink(prevUrl)}
class={`btn px-2 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none mr-2 class={`btn px-3 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white border-none mr-2
${!prevUrl ? 'invisible' : ''}`} ${!prevUrl ? 'invisible' : ''}`}
> >
<div class="flex flex-row align-middle"> <div class="flex flex-row align-middle">
@ -19,8 +19,8 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
</div> </div>
</a> </a>
<a <a
href={getPermalink(nextUrl, 'raw')} href={getRelativeLink(nextUrl)}
class={`btn px-2 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none ${ class={`btn px-3 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white border-none ${
!nextUrl ? 'invisible' : '' !nextUrl ? 'invisible' : ''
}`} }`}
> >

277
src/components/widgets/Footer.astro
View File

@ -1,6 +1,61 @@
--- ---
import { Icon } from 'astro-icon'; import { Icon } from 'astro-icon';
import { getHomePermalink } from '~/utils/permalinks'; import { getHomePermalink, getRelativeLink } from '~/utils/permalinks';
const links = [
{
title: 'Product',
items: [
{ title: 'Features', href: '#' },
{ title: 'Security', href: '#' },
{ title: 'Team', href: '#' },
{ title: 'Enterprise', href: '#' },
{ title: 'Customer stories', href: '#' },
{ title: 'Pricing', href: '#' },
{ title: 'Resources', href: '#' },
],
},
{
title: 'Platform',
items: [
{ title: 'Developer API', href: '#' },
{ title: 'Partners', href: '#' },
{ title: 'Atom', href: '#' },
{ title: 'Electron', href: '#' },
{ title: 'AstroWind Desktop', href: '#' },
],
},
{
title: 'Support',
items: [
{ title: 'Docs', href: '#' },
{ title: 'Community Forum', href: '#' },
{ title: 'Professional Services', href: '#' },
{ title: 'Skills', href: '#' },
{ title: 'Status', href: '#' },
],
},
{
title: 'Company',
items: [
{ title: 'About', href: '#' },
{ title: 'Blog', href: '#' },
{ title: 'Careers', href: '#' },
{ title: 'Press', href: '#' },
{ title: 'Inclusion', href: '#' },
{ title: 'Social Impact', href: '#' },
{ title: 'Shop', href: '#' },
],
},
];
const social = [
{ label: 'Twitter', icon: 'tabler:brand-twitter', href: '#' },
{ label: 'Instagram', icon: 'tabler:brand-instagram', href: '#' },
{ label: 'Facebook', icon: 'tabler:brand-facebook', href: '#' },
{ label: 'RSS', icon: 'tabler:rss', href: getRelativeLink('/rss.xml') },
{ label: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/onwidget/astrowind' },
];
--- ---
<footer class="border-t border-gray-200 dark:border-slate-800"> <footer class="border-t border-gray-200 dark:border-slate-800">
@ -21,195 +76,45 @@ import { getHomePermalink } from '~/utils/permalinks';
> >
</div> </div>
</div> </div>
<div class="col-span-6 md:col-span-3 lg:col-span-2"> {
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Product</div> links.map(({ title, items }) => (
<ul class="text-sm"> <div class="col-span-6 md:col-span-3 lg:col-span-2">
<li class="mb-2"> <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">{title}</div>
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#" {items && Array.isArray(items) && items.length > 0 && (
>Features</a <ul class="text-sm">
> {items.map(({ title, href }) => (
</li> <li class="mb-2">
<li class="mb-2"> <a
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#" class="text-gray-600 hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
>Security</a href={href}
> >
</li> {title}
<li class="mb-2"> </a>
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#" </li>
>Team</a ))}
> </ul>
</li> )}
<li class="mb-2"> </div>
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#" ))
>Enterprise</a }
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Customer stories</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Pricing</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Resources</a
>
</li>
</ul>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Platform</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Developer API</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Partners</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Atom</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Electron</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>GitHub Desktop</a
>
</li>
</ul>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Support</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Docs</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Community Forum</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Professional Services</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Skills</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Status</a
>
</li>
</ul>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Company</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>About</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Blog</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Careers</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Press</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Inclusion</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Social Impact</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Shop</a
>
</li>
</ul>
</div>
</div> </div>
<div class="md:flex md:items-center md:justify-between py-6 md:py-8"> <div class="md:flex md:items-center md:justify-between py-6 md:py-8">
<ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0"> <ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0">
<li> {
<a social.map(({ label, href, icon }) => (
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" <li>
aria-label="Twitter" <a
href="#" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
> aria-label={label}
<Icon name="tabler:brand-twitter" class="w-5 h-5" /> href={href}
</a> >
</li> <Icon name={icon} class="w-5 h-5" />
<li> </a>
<a </li>
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" ))
aria-label="Instagram" }
href="#"
>
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Facebook"
href="#"
>
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="RSS"
href="/rss.xml"
>
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Github"
href="https://github.com/onwidget/astrowind"
>
<Icon name="tabler:brand-github" class="w-5 h-5" />
</a>
</li>
</ul> </ul>
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400"> <div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
<span <span
class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]" class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"