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…
Reference in a new issue