Skip to content

Commit

Permalink
Rework landing pages 🏠
Browse files Browse the repository at this point in the history
  • Loading branch information
wotschofsky committed Dec 8, 2024
1 parent 174fd00 commit 4d1a5ed
Show file tree
Hide file tree
Showing 10 changed files with 302 additions and 252 deletions.
69 changes: 51 additions & 18 deletions app/(landing)/_components/sponsors-section.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import Image from 'next/image';
import { type FC, type HTMLAttributes } from 'react';

import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';

import { env } from '@/env';
import { getGitHubSponsors } from '@/lib/github';
import { cn } from '@/lib/utils';
Expand Down Expand Up @@ -38,7 +46,7 @@ export const SponsorsSection: FC<SponsorsSectionProps> = async ({
className={cn(className, 'flex flex-col items-center gap-4')}
{...props}
>
<h2 className="text-center font-semibold sm:text-lg">Sponsored by</h2>
<h2 className="text-center font-semibold">Sponsored by</h2>

<div className="mb-2 flex items-center justify-center gap-4">
{allSponsors.map((sponsor) => (
Expand All @@ -57,23 +65,48 @@ export const SponsorsSection: FC<SponsorsSectionProps> = async ({
</a>
))}
</div>
<span className="text-center text-sm">
<a
className="text-zinc-500 underline decoration-dotted underline-offset-4 dark:text-zinc-400"
href="https://github.com/sponsors/wotschofsky"
target="_blank"
>
Sponsor through GitHub and add your logo
</a>{' '}
or{' '}
<a
className="text-zinc-500 underline decoration-dotted underline-offset-4 dark:text-zinc-400"
href="https://wotschofsky.com#contact"
target="_blank"
>
reach out for more options
</a>
</span>
<Dialog>
<DialogTrigger className="text-center text-sm text-zinc-500 underline decoration-dotted underline-offset-4 dark:text-zinc-400">
Add your logo
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Sponsor Domain Digger</DialogTitle>
</DialogHeader>
<p className="text-zinc-500 dark:text-zinc-400">
Sponsorships are a great way to support the project and help with
further development. As a thank you, your logo with a link to your
site will be displayed on all landing pages and on the project's
README.
<br />
<br />
Sponsorships are available through{' '}
<a
className="text-zinc-500 underline decoration-dotted underline-offset-4 dark:text-zinc-400"
href="https://github.com/sponsors/wotschofsky"
target="_blank"
>
GitHub Sponsors
</a>{' '}
and{' '}
<a
className="text-zinc-500 underline decoration-dotted underline-offset-4 dark:text-zinc-400"
href="https://buymeacoffee.com/wotschofsky"
target="_blank"
>
Buy Me a Coffee
</a>
, or{' '}
<a
className="text-zinc-500 underline decoration-dotted underline-offset-4 dark:text-zinc-400"
href="https://wotschofsky.com#contact"
target="_blank"
>
reach out for more options
</a>
</p>
</DialogContent>
</Dialog>
</section>
);
};
16 changes: 16 additions & 0 deletions app/(landing)/_components/trust-section.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { FC, HTMLAttributes } from 'react';

import { TrustedByLogos } from './trusted-by-logos';

type TrustSectionProps = HTMLAttributes<HTMLElement> & {
subpage?: string;
};

export const TrustSection: FC<TrustSectionProps> = (props) => (
<section {...props}>
<div className="flex flex-col items-center gap-5">
<h2 className="text-center font-semibold">Trusted by experts at</h2>
<TrustedByLogos subpage={props.subpage} />
</div>
</section>
);
2 changes: 1 addition & 1 deletion app/(landing)/_components/trusted-by-logos.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const formatHref = (domain: string, subpage?: string) => {
};

export const TrustedByLogos: FC<TrustedByLogoProps> = ({ subpage }) => (
<div className="flex flex-wrap justify-center gap-8 [&_*]:h-7 [&_*]:w-auto">
<div className="flex flex-wrap justify-center gap-8 [&_*]:h-6 [&_*]:w-auto">
<Link href={formatHref('cloudflare.com', subpage)}>
<span className="sr-only">Cloudflare</span>
<svg
Expand Down
34 changes: 0 additions & 34 deletions app/(landing)/_components/trusted-by-section.tsx

This file was deleted.

94 changes: 50 additions & 44 deletions app/(landing)/certs/page.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type { FC } from 'react';

import { SearchForm } from '../../_components/search-form';
import { AuthorSection } from '../_components/author-section';
import { SponsorsSection } from '../_components/sponsors-section';
import { AuthorSection } from './../_components/author-section';
import { TrustedBySection } from './../_components/trusted-by-section';
import { TrustSection } from '../_components/trust-section';

export const revalidate = 86400; // 24 hours

Expand All @@ -16,51 +16,57 @@ export const metadata = {
},
};

const CertsLandingPage: FC = () => {
return (
<div className="container space-y-16 pt-24">
<section>
<h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
Find certificate history for any domain
</h1>
<div className="mx-auto max-w-2xl">
<SearchForm subpage="certs" autofocus />
</div>
</section>
const CertsLandingPage: FC = () => (
<div className="container space-y-16">
<div className="flex min-h-[calc(100vh-4.5rem-2rem)] flex-col justify-between gap-16 pb-12">
<div className="flex min-h-[40vh] flex-col justify-center py-24">
<section>
<h1 className="mb-16 scroll-m-20 text-center text-2xl font-semibold tracking-tight sm:text-3xl">
Find certificate history for any domain
</h1>
<div className="mx-auto w-full max-w-2xl">
<SearchForm autofocus />
</div>
<p className="mb-20 mt-4 text-center text-sm/6 text-zinc-500 dark:text-zinc-400">
Find all DNS records, WHOIS data, SSL/TLS certificate history,
subdomains and more
</p>
</section>
<SponsorsSection />
</div>

<TrustedBySection subpage="certs" />
<AuthorSection />
<SponsorsSection />

<div className="mx-auto max-w-4xl space-y-4 pt-16 text-center">
<h2 className="scroll-m-20 text-2xl font-semibold tracking-tight">
About Certificate Logs
</h2>
<p>
Certificate Transparency (CT) logs are public records that track the
issuance of SSL/TLS certificates, providing a transparent and
verifiable system for monitoring certificates issued by Certificate
Authorities (CAs). These logs are append-only and publicly accessible,
allowing anyone to audit and review certificates issued for domains.
By referencing CT logs, administrators can verify that no unauthorized
or misissued certificates have been generated for their domains,
ensuring the integrity of their SSL/TLS implementations.
</p>
<p>
From a technical perspective, Certificate Transparency logs are
crucial for improving security by detecting certificate misissuance
and potential attacks such as man-in-the-middle. By integrating CT log
monitoring, domain owners can receive real-time alerts when a new
certificate is issued for their domain, allowing them to respond
quickly to any anomalies. CT logs also enhance trust across the web by
providing an open system that anyone can query to audit certificate
issuance. This mechanism is critical for maintaining a secure web
environment and ensuring SSL/TLS certificates are properly issued and
managed.
</p>
</div>
<TrustSection subpage="certs" />
</div>
);
};

<div className="mx-auto max-w-4xl space-y-4 pt-16 text-center">
<h2 className="scroll-m-20 text-2xl font-semibold tracking-tight">
About Certificate Logs
</h2>
<p>
Certificate Transparency (CT) logs are public records that track the
issuance of SSL/TLS certificates, providing a transparent and verifiable
system for monitoring certificates issued by Certificate Authorities
(CAs). These logs are append-only and publicly accessible, allowing
anyone to audit and review certificates issued for domains. By
referencing CT logs, administrators can verify that no unauthorized or
misissued certificates have been generated for their domains, ensuring
the integrity of their SSL/TLS implementations.
</p>
<p>
From a technical perspective, Certificate Transparency logs are crucial
for improving security by detecting certificate misissuance and
potential attacks such as man-in-the-middle. By integrating CT log
monitoring, domain owners can receive real-time alerts when a new
certificate is issued for their domain, allowing them to respond quickly
to any anomalies. CT logs also enhance trust across the web by providing
an open system that anyone can query to audit certificate issuance. This
mechanism is critical for maintaining a secure web environment and
ensuring SSL/TLS certificates are properly issued and managed.
</p>
</div>
</div>
);

export default CertsLandingPage;
99 changes: 53 additions & 46 deletions app/(landing)/map/page.tsx
Original file line number Diff line number Diff line change
@@ -1,66 +1,73 @@
import type { FC } from 'react';

import { SearchForm } from '../../_components/search-form';
import { AuthorSection } from '../_components/author-section';
import { FeaturesSection } from '../_components/features-section';
import { SponsorsSection } from '../_components/sponsors-section';
import { AuthorSection } from './../_components/author-section';
import { TrustedBySection } from './../_components/trusted-by-section';
import { TrustSection } from '../_components/trust-section';

export const revalidate = 86400; // 24 hours

export const metadata = {
openGraph: {
url: '/map',
url: '/',
},
alternates: {
canonical: '/map',
canonical: '/',
},
};

const MapLandingPage: FC = () => {
return (
<div className="container space-y-16 pt-24">
<section>
<h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
Run DNS lookups across multiple regions
</h1>
<div className="mx-auto max-w-2xl">
<SearchForm subpage="map" autofocus />
</div>
</section>
const MapLandingPage: FC = () => (
<div className="container space-y-16">
<div className="flex min-h-[calc(100vh-4.5rem-2rem)] flex-col justify-between gap-16 pb-12">
<div className="flex min-h-[40vh] flex-col justify-center py-24">
<section>
<h1 className="mb-16 scroll-m-20 text-center text-2xl font-semibold tracking-tight sm:text-3xl">
Run DNS lookups across multiple regions
</h1>
<div className="mx-auto w-full max-w-2xl">
<SearchForm autofocus />
</div>
<p className="mb-20 mt-4 text-center text-sm/6 text-zinc-500 dark:text-zinc-400">
Find all DNS records, WHOIS data, SSL/TLS certificate history,
subdomains and more
</p>
</section>
<SponsorsSection />
</div>

<TrustedBySection subpage="map" />
<AuthorSection />
<SponsorsSection />

<div className="mx-auto max-w-4xl space-y-4 pt-16 text-center">
<h2 className="scroll-m-20 text-2xl font-semibold tracking-tight">
About DNS Map
</h2>
<p>
The DNS Map tool (also known as Global DNS) is particularly useful for
debugging Content Delivery Network (CDN) setups and checking DNS
propagation. CDNs rely on DNS to route users to the nearest server for
optimal performance. Any misconfiguration in DNS records, such as
CNAME or A records pointing to the CDN, can affect website performance
or lead to downtime. By using DNS Map, you can run DNS queries from 18
different global locations to see how your CDN&apos;s DNS entries are
resolved worldwide, ensuring that users are being directed to the
correct CDN nodes based on their geographic location.
</p>
<p>
Additionally, DNS Map helps in monitoring DNS propagation after making
changes to CDN configurations. DNS changes, such as updates to CNAME
records pointing to your CDN provider, can take time to propagate
across all DNS servers. With DNS Map, you can track the progress of
these changes by running queries from multiple locations, ensuring
that the new DNS records are properly propagated across different
regions. This allows you to catch potential delays or caching issues
early and ensure that your CDN is delivering content efficiently to
users globally.
</p>
</div>
<TrustSection subpage="map" />
</div>
);
};

<div className="mx-auto max-w-4xl space-y-4 pt-16 text-center">
<h2 className="scroll-m-20 text-2xl font-semibold tracking-tight">
About DNS Map
</h2>
<p>
The DNS Map tool (also known as Global DNS) is particularly useful for
debugging Content Delivery Network (CDN) setups and checking DNS
propagation. CDNs rely on DNS to route users to the nearest server for
optimal performance. Any misconfiguration in DNS records, such as CNAME
or A records pointing to the CDN, can affect website performance or lead
to downtime. By using DNS Map, you can run DNS queries from 18 different
global locations to see how your CDN&apos;s DNS entries are resolved
worldwide, ensuring that users are being directed to the correct CDN
nodes based on their geographic location.
</p>
<p>
Additionally, DNS Map helps in monitoring DNS propagation after making
changes to CDN configurations. DNS changes, such as updates to CNAME
records pointing to your CDN provider, can take time to propagate across
all DNS servers. With DNS Map, you can track the progress of these
changes by running queries from multiple locations, ensuring that the
new DNS records are properly propagated across different regions. This
allows you to catch potential delays or caching issues early and ensure
that your CDN is delivering content efficiently to users globally.
</p>
</div>
</div>
);

export default MapLandingPage;
Loading

0 comments on commit 4d1a5ed

Please sign in to comment.