v3 website

.gitignore

@@ -7,4 +7,4 @@ yarn-error.log
 .DS_Store
 FIXME_*
 *.log
-/secrets
+/secrets

config/webpackDefaults.ts

@@ -1,4 +1,5 @@
 import { DefinePlugin, Configuration } from 'webpack'
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import { getMode, getPath } from './utils'
 import merge from 'webpack-merge'
@@ -13,7 +14,12 @@ export function webpackDefaults(config: Configuration): Configuration {
       mode,
       devtool: isProduction ? 'source-map' : 'inline-source-map',
       module: {
-        rules: [tsRule(), cssRule(isWeb), fileRule(isWeb)],
+        rules: [
+          tsRule(),
+          vanillaExtractRule(),
+          cssRule(isWeb),
+          fileRule(isWeb),
+        ],
       },
       resolve: {
         extensions: ['.tsx', '.ts', '.js', '.json'],
@@ -22,6 +28,7 @@ export function webpackDefaults(config: Configuration): Configuration {
         },
       },
       plugins: [
+        new VanillaExtractPlugin(),
         new MiniCssExtractPlugin(
           isProduction
             ? {
@@ -54,7 +61,7 @@ function tsRule() {
         },
       },
     ],
-    exclude: /node_modules/,
+    exclude: [/node_modules/, /\.css\.ts$/i],
   }
 }
 
@@ -66,23 +73,24 @@ function cssRule(isWeb: boolean) {
       ]
     : 'null-loader'
 
-  const nyancssLoaders = [
-    '@nyancss/css-modules-loader/preact',
-    { loader: MiniCssExtractPlugin.loader, options: { esModule: false } },
-    {
-      loader: 'css-loader',
-      options: { modules: true },
-    },
-  ]
-
   return {
     test: /\.css$/,
-    oneOf: [
+    use: cssLoaders,
+    exclude: [/\.vanilla\.css$/i],
+  }
+}
+
+function vanillaExtractRule() {
+  return {
+    test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
+    use: [
+      MiniCssExtractPlugin.loader,
       {
-        resourceQuery: /global/, // foobar.css?global
-        use: cssLoaders,
+        loader: require.resolve('css-loader'),
+        options: {
+          url: false, // Required as image imports should be handled via JS/TS import statements
+        },
       },
-      { use: nyancssLoaders },
     ],
   }
 }

package.json

@@ -14,86 +14,75 @@
     "start": "env NODE_ENV=development ts-node -r tsconfig-paths/register devServer.ts"
   },
   "dependencies": {
-    "@date-fns/date-fns-db": "^0.0.14",
-    "@nyancss/css-modules-loader": "^1.1.0",
-    "@nyancss/react": "^1.3.0",
+    "@date-fns/docs": "^0.25.0",
     "@sentry/browser": "^5.30.0",
     "@sentry/tracing": "^5.30.0",
-    "@switcher/preact": "^1.1.2",
-    "@types/assets-webpack-plugin": "^6.1.0",
-    "@types/copy-webpack-plugin": "^6.4.0",
+    "@switcher/preact": "2.3.0",
+    "@types/assets-webpack-plugin": "^7.1.0",
+    "@types/copy-webpack-plugin": "^10.1.0",
     "@types/cors": "^2.8.7",
     "@types/enzyme": "^3.10.8",
     "@types/lodash": "^4.14.167",
-    "@types/mini-css-extract-plugin": "^1.2.2",
+    "@types/mini-css-extract-plugin": "^2.5.1",
     "@types/mocha": "^8.2.0",
     "@types/node": "^14.14.32",
     "@types/power-assert": "^1.5.3",
     "@types/prismjs": "^1.16.3",
     "@types/remarkable": "^2.0.0",
-    "@types/webpack-dev-middleware": "^4.1.0",
-    "@types/webpack-hot-middleware": "^2.25.3",
-    "@types/webpack-node-externals": "^2.5.0",
-    "@typesaurus/preact": "^4.0.0",
-    "assets-webpack-plugin": "^7.0.0",
+    "@types/webpack-dev-middleware": "^5.3.0",
+    "@types/webpack-hot-middleware": "^2.25.6",
+    "@types/webpack-node-externals": "^2.5.3",
+    "@typesaurus/preact": "6.0.0-alpha.4",
+    "@vanilla-extract/css": "^1.9.2",
+    "@vanilla-extract/webpack-plugin": "^2.2.0",
+    "assets-webpack-plugin": "^7.1.1",
     "body-parser": "^1.19.0",
-    "copy-webpack-plugin": "^7.0.0",
+    "classnames": "^2.3.2",
+    "copy-webpack-plugin": "^11.0.0",
     "cors": "^2.8.5",
-    "css-loader": "^3.0.0",
+    "css-loader": "^6.7.3",
     "date-fns": "^2.16.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-preact-pure": "^2.2.3",
     "express": "^4.17.1",
-    "file-loader": "^6.1.0",
-    "firebase": "^8.2.2",
-    "firebase-admin": "^9.4.2",
-    "firebase-functions": "^3.13.0",
-    "html-webpack-plugin": "^5.2.0",
+    "file-loader": "^6.2.0",
+    "firebase": "^9.15.0",
+    "firebase-admin": "^11.4.1",
+    "firebase-functions": "^4.1.1",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^4.3.0",
     "isomorphic-fetch": "^2.2.1",
     "json-bond": "^0.1.0",
     "lint-staged": "^10.3.0",
     "lodash": "^4.17.20",
-    "mini-css-extract-plugin": "^1.3.9",
+    "mini-css-extract-plugin": "^2.7.2",
     "mocha": "^8.2.1",
     "null-loader": "^4.0.1",
     "power-assert": "^1.6.1",
-    "preact": "^10.4.8",
+    "preact": "^10.11.3",
     "preact-render-to-string": "^5.1.10",
     "prettier": "2.1.1",
     "prismjs": "^1.23.0",
     "remarkable": "^2.0.1",
     "reset.css": "^2.0.2",
-    "style-loader": "^1.2.1",
-    "ts-loader": "^8.0.3",
-    "ts-node": "^9.1.1",
-    "tsconfig-paths": "^3.9.0",
-    "tsconfig-paths-webpack-plugin": "^3.3.0",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths": "^4.1.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "tslint": "~6.1.3",
-    "typesaurus": "^7.1.0",
-    "typescript": "^4.0.2",
-    "webpack": "^5.24.2",
-    "webpack-cli": "^4.1.0",
-    "webpack-dev-middleware": "^4.1.0",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.7.3",
-    "webpack-node-externals": "^2.5.2",
+    "typedoc": "^0.23.23",
+    "typeroo": "^0.9.0",
+    "typesaurus": "10.0.0-alpha.41",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-middleware": "^6.0.1",
+    "webpack-hot-middleware": "^2.25.3",
+    "webpack-merge": "^5.8.0",
+    "webpack-node-externals": "^3.0.0",
     "yarn": "^1.22.10"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{js,jsx,json,css,md}": [
-      "yarn format"
-    ],
-    "*.{ts,tsx}": [
-      "yarn format",
-      "yarn lint"
-    ]
-  },
   "prettier": {
     "singleQuote": true,
     "semi": false

scripts/migrations/migratePackages.ts

@@ -0,0 +1,12 @@
+import { db } from '@date-fns/docs'
+import * as admin from 'firebase-admin'
+
+admin.initializeApp()
+
+db.packages
+  .all()
+  .then((packages) =>
+    Promise.all(
+      packages.map((p) => db.packages.set(db.packages.id(p.data.name), p.data))
+    )
+  )

scripts/migrations/migrateV3.ts

@@ -0,0 +1,59 @@
+import { db, DateFnsDocs } from '@date-fns/docs'
+import * as admin from 'firebase-admin'
+import { last } from 'lodash'
+import { StringifiedJSON } from 'typeroo/json'
+import { schema, Typesaurus } from 'typesaurus'
+
+admin.initializeApp()
+
+type Page =
+  | DateFnsDocs.MarkdownPage
+  | (Omit<DateFnsDocs.JSDocPage, 'doc'> & {
+      doc: { json: string }
+    })
+
+const oldDb = schema(($) => ({
+  pages: $.collection<Page>(),
+}))
+
+type OldSchema = Typesaurus.Schema<typeof oldDb>
+
+const maxPageSize = 100
+
+processAll((pages) =>
+  Promise.all(
+    pages.map((page) => {
+      if (page.data.type === 'markdown') return
+      return db.pages.update(page.ref.id, {
+        doc: page.data.doc.json as StringifiedJSON<DateFnsDocs.JSDocFunction>,
+      })
+    })
+  )
+)
+  .then(() => console.log('Done'))
+  .catch((error) => {
+    console.error(error)
+    process.exit(1)
+  })
+
+type ChunkCallback = (chunk: OldSchema['pages']['Doc'][]) => unknown
+
+async function processAll(
+  cb: ChunkCallback,
+  cursor?: OldSchema['pages']['Doc']
+) {
+  const { pageSize, nextCursor } = await processChunk(cb, cursor)
+  if (nextCursor && pageSize === maxPageSize) await processAll(cb, nextCursor)
+}
+
+async function processChunk(
+  cb: ChunkCallback,
+  cursor?: OldSchema['pages']['Doc']
+) {
+  const chunk = await oldDb.pages.query(($) => [
+    $.field($.docId()).order('asc', cursor && $.startAfter(cursor)),
+    $.limit(maxPageSize),
+  ])
+  await cb(chunk)
+  return { pageSize: chunk.length, nextCursor: last(chunk) }
+}

src/constants.ts

@@ -33,8 +33,8 @@ const config: { [k: string]: Config } = {
   development: {
     jobsURL: 'https://jobs.date-fns.org',
     firebaseApp: {
-      apiKey: 'AIzaSyBoDBiIbKeiu4-Uz4JzqH3X7pwbop2PfpU',
-      projectId: 'date-fns-org',
+      apiKey: 'AIzaSyArPabWWebnLWhEgITZbLjTA6I_BaDmF0E',
+      projectId: 'date-fns-org-staging',
     },
     apiURL: '/api',
   },

src/server/template/index.ts

@@ -58,6 +58,7 @@ export const template = ({ body }: Params = {}) =>
   </head>
   <body>
     <div id="root">${body ?? ''}</div>
+    <div id="portals"></div>
 
     <script src="${entryPath('main', 'js')}"></script>
 

src/types/assets.d.ts

@@ -0,0 +1,14 @@
+declare module '*.png' {
+  const url: string
+  export default url
+}
+
+declare module '*.jpg' {
+  const url: string
+  export default url
+}
+
+declare module '*.svg' {
+  const url: string
+  export default url
+}

src/ui/components/BooksWidget/index.tsx

@@ -2,18 +2,7 @@ import { h, FunctionComponent } from 'preact'
 import shuffle from 'lodash/shuffle'
 import { useMemo, useState } from 'preact/hooks'
 import { books } from './constants'
-import {
-  Container,
-  Badge,
-  BadgeLabel,
-  BadgeNext,
-  Cover,
-  Text,
-  Header,
-  Title,
-  Description,
-  Link,
-} from './style.css'
+import * as styles from './styles.css'
 
 export const BooksWidget: FunctionComponent = () => {
   const shuffledBooks = useMemo(() => shuffle(books), [])
@@ -22,29 +11,29 @@ export const BooksWidget: FunctionComponent = () => {
 
   return (
     <div>
-      <Container
-        tag="a"
+      <a
+        class={styles.container}
         href={book.url}
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Cover tag="img" src={book.cover} />
+        <img class={styles.cover} src={book.cover} />
 
-        <Text>
-          <Header>
-            <Title>{book.title}</Title>
-            <Description>{book.description}</Description>
-          </Header>
+        <div class={styles.text}>
+          <div class={styles.header}>
+            <div class={styles.title}>{book.title}</div>
+            <div class={styles.description}>{book.description}</div>
+          </div>
 
-          <Link tag="button">Get the book</Link>
-        </Text>
-      </Container>
+          <button class={styles.link}>Get the book</button>
+        </div>
+      </a>
 
-      <Badge>
-        <BadgeLabel>☝️ Support date-fns, buy a book 🙏</BadgeLabel>
+      <div class={styles.badge}>
+        <div class={styles.badgeLabel}>☝️ Support date-fns, buy a book 🙏</div>
 
-        <BadgeNext
-          tag="button"
+        <button
+          class={styles.badgeNext}
           onClick={() => {
             let newIndex = bookIndex + 1
             if (newIndex > books.length - 1) {
@@ -54,8 +43,8 @@ export const BooksWidget: FunctionComponent = () => {
           }}
         >
           Next book
-        </BadgeNext>
-      </Badge>
+        </button>
+      </div>
     </div>
   )
 }