Added support for data files

jahilldev · Jan 21, 2021 · 21677e8 · 21677e8
1 parent 5307985
commit 21677e8
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 10 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -19,6 +19,7 @@ module.exports = function (config) {
   });
 
   config.setUseGitIgnore(false);
+  config.setDataDeepMerge(true);
 
   config.addTransform('jsx', (content) => {
     if (isValidElement(content)) {
@@ -54,6 +55,7 @@ module.exports = function (config) {
     dir: {
       input: 'src/_js',
       output: 'dist',
+      data: 'data',
       layouts: 'layouts',
       includes: '_includes',
     },

diff --git a/README.md b/README.md
@@ -102,7 +102,31 @@ For a working example, [take a look at the `home` module here](https://github.co
 
 ## Data
 
-All official 11ty methods to gather data from an API or otherwise, will work here. There are many great examples of how to do this in the official 11ty documentation, including the use of GraphQL: https://www.11ty.dev/docs/data-js/
+All official 11ty methods to gather data from an API or otherwise, will work here. There are many great examples of how to do this in the official 11ty documentation, including the use of GraphQL: https://www.11ty.dev/docs/data-js/.
+
+To define _global_ data, add either JSON, JS or TypeScript files to the `./src/data` folder. These will then be parsed by 11ty and added via the [data cascade](https://www.11ty.dev/docs/data-cascade/). You can access these directly in your `.11ty.ts*` files.
+
+For example, if you were to add a `global.ts` file to `./src/data`, you would access this via a `global` property in your pages argument object:
+
+```tsx
+interface IProps {
+  global: {
+    title: string;
+  };
+}
+
+/*[...]*/
+
+function Page({ global }: IProps) {
+  return (
+    <main>
+      <h1>{global.title}</h1>
+    </main>
+  );
+}
+```
+
+To add local data, e.g data specific to a module, add an `.11tydata.ts` file within the relevant module folder. This will then be accessible in exactly the same way as shown above, but only for that page. For example, if you added `home.11tydata.ts` to `./src/modules/home`, your home page `11ty.ts` file would have access to the values held within that data file.
 
 ## Installation
 

diff --git a/src/data/siteMeta.ts b/src/data/siteMeta.ts
@@ -0,0 +1,9 @@
+/* -----------------------------------
+ *
+ * Meta
+ *
+ * -------------------------------- */
+
+module.exports = {
+  pageTitle: '11tyby',
+};
diff --git a/src/modules/home/home.11ty.tsx b/src/modules/home/home.11ty.tsx
@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { IPage } from '../shared/model/page.model';
+import { IPage, IData } from '../shared/model/page.model';
 import style from './home.module.scss';
 
 /* -----------------------------------
@@ -17,12 +17,12 @@ import { Form } from '@/modules/home/components/form';
  *
  * -------------------------------- */
 
-function Page(this: IPage) {
+function Page(this: IPage, { siteMeta }: IData) {
   const inlineCss = this.getAssetContents('home/home.11ty.css');
 
   return (
     <Html
-      title="Home - 11ty"
+      title={siteMeta.pageTitle}
       summary="11ty demo"
       inlineCss={inlineCss}
       jsPath="home/home.entry.js"

diff --git a/src/modules/shared/model/page.model.ts b/src/modules/shared/model/page.model.ts
@@ -5,13 +5,30 @@
  * -------------------------------- */
 
 interface IPage {
+  slug: string;
+  url: string;
+  getCollectionItem: any;
+  getPreviousCollectionItem: any;
+  getNextCollectionItem: any;
   getAssetContents: (file: string) => string;
 }
 
+/* -----------------------------------
+ *
+ * IData
+ *
+ * -------------------------------- */
+
+interface IData {
+  siteMeta: {
+    pageTitle: string;
+  };
+}
+
 /* -----------------------------------
  *
  * Export
  *
  * -------------------------------- */
 
-export { IPage };
+export { IPage, IData };
diff --git a/webpack.config.js b/webpack.config.js
@@ -33,6 +33,69 @@ const sassLoader = {
   },
 };
 
+/* -----------------------------------
+ *
+ * Data
+ *
+ * -------------------------------- */
+
+const data = {
+  mode: RELEASE ? 'production' : 'development',
+  entry: getDataFiles(),
+  context: path.join(__dirname, '/src/'),
+  cache: true,
+  target: 'node',
+  externals: fs.readdirSync('node_modules'),
+  output: {
+    path: path.join(__dirname, '/src/_js'),
+    filename: '[name].js',
+    libraryTarget: 'umd',
+  },
+  resolve: {
+    extensions: ['.js', '.ts', '.tsx', '.json', '.scss'],
+    alias: {
+      '@': path.resolve(__dirname, `./src/`),
+    },
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: 'data',
+          to: 'data',
+          noErrorOnMissing: true,
+          globOptions: {
+            ignore: ['**/*.ts'],
+          },
+        },
+      ],
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        cache: !RELEASE,
+        parallel: true,
+        terserOptions: {
+          keep_fnames: true,
+        },
+      }),
+    ],
+  },
+};
+
 /* -----------------------------------
  *
  * Pages
@@ -41,7 +104,7 @@ const sassLoader = {
 
 const pages = {
   mode: RELEASE ? 'production' : 'development',
-  entry: glob.sync(`${__dirname}/src/**/*.11ty.ts*`).reduce(getModuleFile, {}),
+  entry: glob.sync(`${__dirname}/src/**/*.11ty.ts*`).reduce(getSourceFile, {}),
   context: path.join(__dirname, '/src/'),
   cache: true,
   target: 'node',
@@ -165,7 +228,7 @@ const pages = {
 
 const entry = {
   mode: RELEASE ? 'production' : 'development',
-  entry: glob.sync(`${__dirname}/src/modules/**/*.entry.ts*`).reduce(getModuleFile, {}),
+  entry: glob.sync(`${__dirname}/src/modules/**/*.entry.ts*`).reduce(getSourceFile, {}),
   context: path.join(__dirname, '/src/'),
   cache: true,
   target: 'web',
@@ -270,11 +333,30 @@ const entry = {
 
 /* -----------------------------------
  *
- * Module
+ * Data
+ *
+ * -------------------------------- */
+
+function getDataFiles() {
+  const globalData = glob.sync(`${__dirname}/src/data/*.ts`).reduce(getSourceFile, {});
+
+  const moduleData = glob
+    .sync(`${__dirname}/src/**/*.11tydata.ts`)
+    .reduce(getSourceFile, {});
+
+  const dataFiles = { ...globalData, ...moduleData };
+  const totalItems = Object.keys(dataFiles).length;
+
+  return dataFiles;
+}
+
+/* -----------------------------------
+ *
+ * Source
  *
  * -------------------------------- */
 
-function getModuleFile(result, file) {
+function getSourceFile(result, file) {
   let [name] = file.split('src/').slice(-1);
 
   if (file.includes('modules/')) {
@@ -308,4 +390,4 @@ function splitVendorChunks(module, chunks) {
  *
  * -------------------------------- */
 
-module.exports = [pages, entry];
+module.exports = [data, pages, entry];