Add sandbox project using Contentful CMS
I used the boilerplate/typescript project as a starting point. This project fetches and renders books that I'm defining in a Contentful CMS that I created.
This commit is contained in:
parent
57b58e9b2f
commit
527aeeeced
16 changed files with 5965 additions and 0 deletions
3
website/sandbox/contentful/.envrc
Normal file
3
website/sandbox/contentful/.envrc
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
source_up
|
||||||
|
export CONTENTFUL_SPACE_ID="$(pass show programming/contentful/space-id)"
|
||||||
|
export CONTENTFUL_ACCESS_TOKEN="$(pass show programming/contentful/access-token)"
|
2
website/sandbox/contentful/.gitignore
vendored
Normal file
2
website/sandbox/contentful/.gitignore
vendored
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
.cache
|
||||||
|
dist
|
18
website/sandbox/contentful/README.md
Normal file
18
website/sandbox/contentful/README.md
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
# Contentful
|
||||||
|
|
||||||
|
I have not used a CMS in a few years. I learned about Contentful from a
|
||||||
|
Gatsby.js tutorial, and I wanted to learn more; I created a Contentful account,
|
||||||
|
and I'm experimenting with the data here.
|
||||||
|
|
||||||
|
## Developing
|
||||||
|
|
||||||
|
```shell
|
||||||
|
$ nix-shell
|
||||||
|
$ yarn run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
```shell
|
||||||
|
$ nix-build
|
||||||
|
```
|
19
website/sandbox/contentful/default.nix
Normal file
19
website/sandbox/contentful/default.nix
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
let
|
||||||
|
pkgs = import <nixpkgs> {};
|
||||||
|
in pkgs.stdenv.mkDerivation {
|
||||||
|
name = "ideal-website";
|
||||||
|
srcs = ./.;
|
||||||
|
buildInputs = with pkgs; [
|
||||||
|
nodejs
|
||||||
|
# Exposes lscpu for parcel.js
|
||||||
|
utillinux
|
||||||
|
];
|
||||||
|
# parcel.js needs number of CPUs
|
||||||
|
PARCEL_WORKERS = "1";
|
||||||
|
buildPhase = ''
|
||||||
|
npx parcel build index.html
|
||||||
|
'';
|
||||||
|
installPhase = ''
|
||||||
|
mv dist $out
|
||||||
|
'';
|
||||||
|
}
|
26
website/sandbox/contentful/package.json
Normal file
26
website/sandbox/contentful/package.json
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"name": "tailwindcss",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "index.js",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "npx parcel src/index.html & npx tsc --watch --noEmit"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^13.9.3",
|
||||||
|
"parcel-bundler": "^1.12.4",
|
||||||
|
"tailwindcss": "^1.2.0",
|
||||||
|
"typescript": "^3.8.3"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@reduxjs/toolkit": "^1.2.5",
|
||||||
|
"@types/react-dom": "^16.9.5",
|
||||||
|
"@types/react-redux": "^7.1.7",
|
||||||
|
"@types/react-router-dom": "^5.1.3",
|
||||||
|
"contentful": "^7.14.0",
|
||||||
|
"react": "^16.13.1",
|
||||||
|
"react-dom": "^16.13.1",
|
||||||
|
"react-redux": "^7.2.0",
|
||||||
|
"react-router-dom": "^5.1.2"
|
||||||
|
}
|
||||||
|
}
|
7
website/sandbox/contentful/postcss.config.js
Normal file
7
website/sandbox/contentful/postcss.config.js
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
const tailwindcss = require('tailwindcss')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
tailwindcss('./tailwind.config.js')
|
||||||
|
]
|
||||||
|
}
|
8
website/sandbox/contentful/shell.nix
Normal file
8
website/sandbox/contentful/shell.nix
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
let
|
||||||
|
pkgs = import <nixpkgs> {};
|
||||||
|
in pkgs.mkShell {
|
||||||
|
buildInputs = with pkgs; [
|
||||||
|
nodejs
|
||||||
|
yarn
|
||||||
|
];
|
||||||
|
}
|
46
website/sandbox/contentful/src/App.tsx
Normal file
46
website/sandbox/contentful/src/App.tsx
Normal file
|
@ -0,0 +1,46 @@
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
|
||||||
|
import { useDispatch } from "react-redux";
|
||||||
|
import { actions, useTypedSelector } from "./store";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { getClient } from "./contentful";
|
||||||
|
import type { Book } from "./store";
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const { isLoading, books } = useTypedSelector(state => ({
|
||||||
|
isLoading: state.isLoading,
|
||||||
|
books: state.books,
|
||||||
|
}));
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetchData() {
|
||||||
|
const entries = await getClient().getEntries();
|
||||||
|
const books = entries.items.map(x => x.fields) as Book[];
|
||||||
|
|
||||||
|
dispatch(actions.setBooks(books));
|
||||||
|
}
|
||||||
|
fetchData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<Switch>
|
||||||
|
<Route exact path="/">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<h1 className="py-6 text-2xl">Books</h1>
|
||||||
|
<ul>
|
||||||
|
{books.map(book => (
|
||||||
|
<li key={book.title} className="py-3">
|
||||||
|
<p><span className="font-bold pr-3">{book.title}</span><span className="text-gray-600">{book.author}</span></p>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</Route>
|
||||||
|
</Switch>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
25
website/sandbox/contentful/src/contentful.ts
Normal file
25
website/sandbox/contentful/src/contentful.ts
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
import { createClient } from "contentful";
|
||||||
|
import type { ContentfulClientApi } from "contentful";
|
||||||
|
|
||||||
|
const space = process.env.CONTENTFUL_SPACE_ID;
|
||||||
|
const accessToken = process.env.CONTENTFUL_ACCESS_TOKEN;
|
||||||
|
|
||||||
|
let client: ContentfulClientApi;
|
||||||
|
|
||||||
|
// Idempotent way to get a reference to the Contentful client.
|
||||||
|
export const getClient = (): ContentfulClientApi => {
|
||||||
|
if (typeof client !== 'undefined') {
|
||||||
|
return client;
|
||||||
|
} else {
|
||||||
|
if (typeof space === 'string' && typeof accessToken === 'string') {
|
||||||
|
let client = createClient({
|
||||||
|
space,
|
||||||
|
accessToken,
|
||||||
|
});
|
||||||
|
|
||||||
|
return client;
|
||||||
|
} else {
|
||||||
|
throw new Error('Please set CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
3
website/sandbox/contentful/src/index.css
Normal file
3
website/sandbox/contentful/src/index.css
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
11
website/sandbox/contentful/src/index.html
Normal file
11
website/sandbox/contentful/src/index.html
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="mount"></div>
|
||||||
|
<script src="./index.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
12
website/sandbox/contentful/src/index.tsx
Normal file
12
website/sandbox/contentful/src/index.tsx
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom";
|
||||||
|
import App from "./App";
|
||||||
|
import { Provider } from "react-redux";
|
||||||
|
import store from "./store";
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<Provider store={store}>
|
||||||
|
<App />
|
||||||
|
</Provider>,
|
||||||
|
document.getElementById("mount")
|
||||||
|
);
|
36
website/sandbox/contentful/src/store.ts
Normal file
36
website/sandbox/contentful/src/store.ts
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit";
|
||||||
|
import { useSelector, TypedUseSelectorHook } from "react-redux";
|
||||||
|
|
||||||
|
export interface Book {
|
||||||
|
title: string;
|
||||||
|
author: string;
|
||||||
|
// TODO(wpcarro): Prefer datetime type here.
|
||||||
|
publicationDate: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface State {
|
||||||
|
isLoading: boolean;
|
||||||
|
books: Book[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState: State = {
|
||||||
|
isLoading: true,
|
||||||
|
books: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const { actions, reducer } = createSlice({
|
||||||
|
name: "application",
|
||||||
|
initialState,
|
||||||
|
reducers: {
|
||||||
|
toggleIsLoading: state => ({ ...state, isLoading: !state.isLoading }),
|
||||||
|
setBooks: (state, action) => ({ ... state, books: action.payload }),
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defining and consuming this allows us to avoid annotating State in all of our
|
||||||
|
* selectors.
|
||||||
|
*/
|
||||||
|
export const useTypedSelector: TypedUseSelectorHook<State> = useSelector;
|
||||||
|
|
||||||
|
export default configureStore({ reducer });
|
7
website/sandbox/contentful/tailwind.config.js
Normal file
7
website/sandbox/contentful/tailwind.config.js
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
module.exports = {
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
variants: {},
|
||||||
|
plugins: [],
|
||||||
|
}
|
25
website/sandbox/contentful/tsconfig.json
Normal file
25
website/sandbox/contentful/tsconfig.json
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*"
|
||||||
|
]
|
||||||
|
}
|
5717
website/sandbox/contentful/yarn.lock
Normal file
5717
website/sandbox/contentful/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue