Introduce Web Update, and Odd upgrades (#44)

* Lots

* Update Author Section

* Bump

* Bump

blog/app/[[...page]]/page.tsx

@@ -5,7 +5,7 @@ import { PageButtons } from '@/components/PageButtons';
 import { BlogPostPreview } from '@/components/PostPreview';
 import { getPostsMetadata } from '@/lib/get_posts';
 import { createMetadata } from '@/lib/metadata';
-import { splitArray } from '@/lib/split_array';
+import { splitArrayBiasFirst } from '@/lib/split_array';
 
 const MAX_PER_PAGE = 6;
 
@@ -16,7 +16,7 @@ type PageProperties = {
 // eslint-disable-next-line unicorn/prevent-abbreviations
 export async function generateStaticParams() {
     const metas = await getPostsMetadata();
-    const pages = splitArray(metas, MAX_PER_PAGE);
+    const pages = splitArrayBiasFirst(metas, MAX_PER_PAGE);
 
     const parameters: PageProperties['params'][] = pages.map((_, index) => ({
         page: [(index + 1).toString()],
@@ -60,9 +60,10 @@ export const generateMetadata = async (
 const page = async ({ params }: PageProperties) => {
     const postsUnlimited = await getPostsMetadata();
 
-    const pages = splitArray(postsUnlimited, MAX_PER_PAGE);
+    const pages = splitArrayBiasFirst(postsUnlimited, MAX_PER_PAGE);
 
     const currentPage = params.page ? Number.parseInt(params.page[0], 10) : 1;
+    const isHomePage = currentPage === 1;
 
     const posts = pages[currentPage - 1];
 
@@ -72,8 +73,18 @@ const page = async ({ params }: PageProperties) => {
 
     return (
         <div className="mt-2">
-            <ul className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-2">
-                {posts.map((post) => (
+            {isHomePage && (
+                <div className="">
+                    <span className="block p-4 text-3xl font-bold">
+                        Newest article
+                    </span>
+                    <div className="mb-4 w-full">
+                        <BlogPostPreview post={posts[0]} variant="horizontal" />
+                    </div>
+                </div>
+            )}
+            <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2">
+                {posts.slice(isHomePage ? 1 : 0).map((post) => (
                     <li key={post.slug} className="w-full">
                         <BlogPostPreview post={post} />
                     </li>

blog/app/post/[...slug]/page.tsx

@@ -15,6 +15,12 @@ type PageProperties = {
     params: { slug: string[] };
 };
 
+class AssetNotFoundError extends Error {
+    constructor(asset: string) {
+        super(`Asset ${asset} not found. Try doing pnpm build:assets`);
+    }
+}
+
 export const generateMetadata = async (
     { params }: PageProperties,
     parent: ResolvingMetadata
@@ -27,6 +33,10 @@ export const generateMetadata = async (
 
     const postCovers = covers[post.file as keyof typeof covers];
 
+    if (!postCovers) {
+        throw new AssetNotFoundError(post.file);
+    }
+
     const postCover = await postCovers.cover.then((cover) => cover.default);
     const postCoverThumb = await postCovers['cover-thumb'].then(
         (cover) => cover.default

blog/package.json

@@ -35,6 +35,7 @@
         "mdast-util-to-string": "^4.0.0",
         "mdx": "^0.3.1",
         "mdx-annotations": "^0.1.3",
+        "moment": "^2.29.4",
         "next": "^13.4.12",
         "postcss": "^8.4.27",
         "postcss-focus-visible": "^9.0.0",

blog/src/components/Author.tsx

@@ -60,29 +60,25 @@ export const Author: FC<{
             {link && (
                 <Link href={'/author/' + name} className="absolute inset-0" />
             )}
-            <div
-                className={cx(
-                    'aspect-square sm:flex-1',
-                    size === 'normal'
-                        ? 'min-w-[8rem] max-w-[8rem] xs:max-w-[10rem] sm:max-w-[12rem]'
-                        : 'w-32'
-                )}
-            >
-                {avatar ? (
-                    <img src={avatar} alt={name} className="rounded-lg" />
-                ) : (
-                    <div
-                        className={
-                            'flex aspect-square h-12 w-12 items-center justify-center rounded-full text-white'
-                        }
-                        style={{
-                            background:
-                                'linear-gradient(330.4deg, #44BCF0 4.54%, #7298F8 59.2%, #A099FF 148.85%)',
-                        }}
-                    >
+            <div className="flex items-center justify-center">
+                <div
+                    className={cx(
+                        'aspect-square sm:flex-1 flex items-center justify-center rounded-full text-white',
+                        size === 'normal'
+                            ? 'min-w-[8rem] max-w-[8rem] xs:max-w-[10rem] sm:max-w-[12rem]'
+                            : 'w-32'
+                    )}
+                    style={{
+                        background:
+                            'linear-gradient(330.4deg, #44BCF0 4.54%, #7298F8 59.2%, #A099FF 148.85%)',
+                    }}
+                >
+                    {avatar ? (
+                        <img src={avatar} alt={name} className="rounded-lg" />
+                    ) : (
                         <FiUser />
-                    </div>
-                )}
+                    )}
+                </div>
             </div>
             <div
                 className={cx(

blog/src/components/PostPreview.tsx

@@ -4,6 +4,7 @@ import 'server-only';
  * assets/assets is generated by the assets builder.
  */
 import { covers } from 'assets/assets';
+import clsx from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -13,9 +14,10 @@ import { ENSAvatar } from './ENSAvatar';
 
 type Properties = {
     post: BlogPostMetadataPlus;
+    variant?: 'horizontal' | 'vertical';
 };
 
-export const BlogPostPreview = async ({ post }: Properties) => {
+export const BlogPostPreview = async ({ post, variant }: Properties) => {
     const cover = Object.keys(covers).includes(post.file)
         ? await covers[post.file as keyof typeof covers]['cover-thumb']
               .then((image) => image.default)
@@ -33,7 +35,12 @@ export const BlogPostPreview = async ({ post }: Properties) => {
     return (
         <Link
             href={'/post/' + post.slug}
-            className="outline-ens-blue flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white outline-2 transition-all hover:bg-gray-50 hover:outline"
+            className={clsx(
+                'outline-ens-blue h-full w-full overflow-hidden rounded-lg bg-white outline-2 transition-all hover:bg-gray-50 hover:outline',
+                variant === 'horizontal'
+                    ? 'grid grid-cols-1 flex-row md:grid-cols-2'
+                    : 'flex flex-col'
+            )}
         >
             <span className="bg-ens-grey1 aspect-cover w-full">
                 {cover ? (
@@ -50,7 +57,14 @@ export const BlogPostPreview = async ({ post }: Properties) => {
                     />
                 )}
             </span>
-            <span className="flex h-full flex-col gap-2 border-t p-5">
+            <span
+                className={clsx(
+                    'flex h-full flex-col gap-2 p-5 md:p-6 max-h-[200px] my-auto',
+                    variant == 'horizontal'
+                        ? 'border-t md:border-none'
+                        : 'border-t'
+                )}
+            >
                 <span className="flex w-full justify-between">
                     <span className="text-ens-blue block truncate text-lg font-bold">
                         {post.title}

blog/src/components/post/PostFooter.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
+import clsx from 'clsx';
 import Image from 'next/image';
 import { FaFacebookF, FaLinkedin } from 'react-icons/fa';
 
@@ -11,16 +12,7 @@ import { BigTag } from '../tags/BigTag';
 export const PostFooter = ({ post }: { post: BlogPostMetadata }) => {
     return (
         <div className="not-prose mx-auto mt-6 flex w-full max-w-3xl flex-col gap-4">
-            {/* add a horizontal line to indicate start of footer */}
-            <hr className="my-6 border-t-2" />
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                {post.authors.map((author) => (
-                    <Author name={author} socials={false} size="small" link />
-                ))}
-            </div>
             <div className="flex flex-col items-center gap-4 rounded-lg bg-white p-2 sm:flex-row sm:justify-between">
-                {/* insert share buttons for twitter, linkedin and facebook */}
-
                 <div className="my-2 flex flex-wrap justify-center gap-2">
                     {post.tags.map((tag) => (
                         <BigTag tag={tag} />
@@ -63,6 +55,16 @@ export const PostFooter = ({ post }: { post: BlogPostMetadata }) => {
                     </a>
                 </div>
             </div>
+            <div
+                className={clsx(
+                    'grid grid-cols-1 gap-4',
+                    post.authors.length > 1 ? 'sm:grid-cols-2' : ''
+                )}
+            >
+                {post.authors.map((author) => (
+                    <Author name={author} socials={false} size="small" link />
+                ))}
+            </div>
         </div>
     );
 };

blog/src/components/post/PostHeader.tsx

@@ -1,10 +1,10 @@
+import moment from 'moment';
 import Link from 'next/link';
 
 import { joinArray } from '@/lib/join_array';
 import { BlogPostMetadata } from '@/types/BlogPostMetadata';
 
 import { ENSAvatar } from '../ENSAvatar';
-import { BigTag } from '../tags/BigTag';
 
 export const PostHeader = ({
     post,
@@ -16,7 +16,7 @@ export const PostHeader = ({
     return (
         <div className="not-prose mx-auto mt-6 w-full max-w-2xl lg:max-w-3xl">
             <h1 className="text-4xl font-bold">{post.title}</h1>
-            <div className="my-2 flex items-center gap-2">
+            <div className="my-3 flex items-center gap-2">
                 <div className="flex -space-x-2">
                     {post.authors.map((author) => (
                         <ENSAvatar name={author} />
@@ -35,14 +35,16 @@ export const PostHeader = ({
                         <span>, </span>
                     )}
                 </span>
-                <span>{new Date(post.date).toLocaleDateString('en-US')}</span>
-                <span className="opacity-70">{readingTime}</span>
             </div>
-            <div className="my-2 flex gap-2">
+            <div className="space-x-3">
+                <span>{moment(post.date).format('MMMM Do YYYY')}</span>
+                <span className="text-sm opacity-70">{readingTime}</span>
+            </div>
+            {/* <div className="my-2 flex gap-2">
                 {post.tags.map((tag) => (
                     <BigTag tag={tag} />
                 ))}
-            </div>
+            </div> */}
         </div>
     );
 };

blog/src/lib/get_posts.ts

@@ -38,6 +38,11 @@ export const _getPostsMetadata = async (): Promise<BlogPostMetadataPlus[]> => {
     }
 
     return posts.sort((a, b) => {
-        return new Date(a.date).getTime() > new Date(b.date).getTime() ? -1 : 1;
+        const aDate = new Date(a.date);
+        const bDate = new Date(b.date);
+
+        if (aDate.getTime() == bDate.getTime()) return 0;
+
+        return aDate.getTime() > bDate.getTime() ? -1 : 1;
     });
 };

blog/src/lib/split_array.ts

@@ -7,3 +7,20 @@ export const splitArray = <T>(array: T[], max: number): T[][] => {
 
     return result;
 };
+
+export const splitArrayBiasFirst = <T>(array2: T[], max: number): T[][] => {
+    // Clone
+    const array = [...array2];
+
+    const first = array.shift();
+    const result: T[][] = splitArray(array, max);
+
+    if (first) {
+        const first_entry = result[0] || [];
+
+        first_entry.unshift(first);
+        result[0] = first_entry;
+    }
+
+    return result;
+};

content/012_web_update_2023_august/meta.json

@@ -0,0 +1,8 @@
+{
+    "slug": "web-update-august-2023",
+    "title": "ENS Web Update August 2023",
+    "description": "A brief overview of the changes in August 2023",
+    "date": "2023-09-07",
+    "tags": ["web_update"],
+    "authors": ["leontalbert.eth", "taytems.eth"]
+}

content/012_web_update_2023_august/readme.mdx

@@ -0,0 +1,44 @@
+## ENS Public Testnet Update
+
+Ethereum's focus on its actively maintained public testnets, Sepolia and Goerli, is shifting. Sepolia is a network for contract and application developers to test their applications while Goerli as a network enables protocol developers to test network upgrades, infrastructure and let stakers test running validators.
+
+However Goerli has been deprecated and its responsibilities will transition to [Holesovice](https://github.com/eth-clients/holesky). In preperation for these changes, we've deployed the ENS contracts to Sepolia, while also adding support for Sepolia to the [Manager App](https://app.ens.domains/). We look forward to deploying onto Holesovice as well to make sure ENS developers always have the best experience.
+
+![](./01.png)
+
+Credit: https://github.com/eth-clients/holesky/blob/main/assets/holesovice.png
+
+_Holesovice will launch September 15, 2023, 14:00 UTC, Epoch time: 1694786400._
+
+## Web3 Starter Kit: Next.js
+
+Have you ever wanted to quickly build and deploy a new Web3 project? Well we've created a web3 [starter kit](https://github.com/ensdomains/frontend-template) just for that which uses the same technology stack as the Manager App.
+
+You can see an example of what a project looke like [here](https://ens-frontend-template.vercel.app/).
+
+## Revamped Profile Page: We've Added Contenthash & Email Records
+
+![](./02.png)
+
+## Evolving Our End to End Testing Infrastructure
+
+End to End (E2E) testing is probably the biggest pain point in front-end development, given that this involves spinning up a browser which is a relatively heavy piece of software, as well as the need to spin up any other required supporting infrastructure (ex. databases). This is complicated even further in web3 as we have wallet interactions and their interactions with the blockchain to add into the mix. They tend to be notoriously flaky and it can be hard to keep tests isolated as to achieve this you need to spin up a completely new environment for every test run. All of these things and more add up and severly slow down the time between the code being ready and it getting deployed into production.
+
+So we decided to take a step back, and investigate our approach to how we write our tests. From this research we decided to transition from using Cypress to Playwright. This has led to a huge improvement in many aspects of our testing process, from reducing the time it takes for the tests to run, to making it easier for our developers to write and maintain them. This should lead to us being able to safely release more features, or at the very least it will save us some grey hairs!
+
+If you'd like a separate write-up on our testing infrastructure (or have any other feedback), please let us know on [canny.io](https://ens.canny.io/)!
+
+## Smaller Updates
+
+- ETH is now selected as the default payment method during registration
+- Default toggle off owner and manager during send flow
+- Updated to the latest version of The Graph
+- All multi-step transactions will no longer rely on localStorage, this is useful for users who use private browsing sessions or otherwise disable localStorage
+- Replace links to medium with links to mirror on ens.domains and app.ens.domains
+- content-hash rewrite in typescript
+
+## Bug Fixes
+
+- "Extending this name will not give you ownership of it" message was shown in the wrong situation.
+- Fixed bug preventing Gnosis Safe users from making transactions
+- Prevent subnames from being extended from the 'My Names' list as it is not supported yet