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:
William Carroll 2020-03-24 13:27:30 +00:00
parent 57b58e9b2f
commit 527aeeeced
16 changed files with 5965 additions and 0 deletions

View 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
View file

@ -0,0 +1,2 @@
.cache
dist

View 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
```

View 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
'';
}

View 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"
}
}

View file

@ -0,0 +1,7 @@
const tailwindcss = require('tailwindcss')
module.exports = {
plugins: [
tailwindcss('./tailwind.config.js')
]
}

View file

@ -0,0 +1,8 @@
let
pkgs = import <nixpkgs> {};
in pkgs.mkShell {
buildInputs = with pkgs; [
nodejs
yarn
];
}

View 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;

View 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');
}
}
}

View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

View 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>

View 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")
);

View 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 });

View file

@ -0,0 +1,7 @@
module.exports = {
theme: {
extend: {},
},
variants: {},
plugins: [],
}

View 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/**/*"
]
}

File diff suppressed because it is too large Load diff