Skip to content

Commit

Permalink
Templates UI and more (#74)
Browse files Browse the repository at this point in the history
* oauth first pass with templates

* Add hot reload

* Update auth flow and add section highlighter

* Add remove and re order

* Code cleanup

* Fix typo

* WIP

* Authentication refactor: Contentful custom hook and more (#75)

* updates to improve UX for auth flow

* better messaging when updating environment (#76)

* fixing some issues around templates

* removed unnecessary code block

---------

Co-authored-by: Brad Taylor <[email protected]>
Co-authored-by: Jaime Morales <[email protected]>
  • Loading branch information
3 people authored Apr 21, 2023
1 parent f234ff2 commit 95d8836
Show file tree
Hide file tree
Showing 38 changed files with 1,602 additions and 11,253 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,8 @@ In the example above, you would see the following structure in your sidebar:
## Development Env Setup

- Clone Repo
- npm install
- npm start
- yarn install
- yarn dev

_This will then create a watch process that will rebuild all files to /dist/chrome anytime a file changes._

Expand Down
11,108 changes: 0 additions & 11,108 deletions package-lock.json

This file was deleted.

6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,19 @@
},
"homepage": "https://github.com/bradtaylorsf/contentful-sidekick#readme",
"dependencies": {
"@babel/runtime": "^7.17.9",
"@emotion/react": "^11.7.0",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "^5.2.1",
"@mui/material": "^5.2.3",
"@mui/system": "^5.2.3",
"common-tags": "^1.8.0",
"contentful": "^7.14.6",
"contentful-management": "^5.4.0",
"contentful-management": "10.0.0",
"copy-webpack-plugin": "^4.6.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-loader": "^2.1.1",
"imurmurhash": "^0.1.4",
"jquery": "^3.5.0",
"lodash": "^4.17.19",
"react": "^17.0.2",
Expand All @@ -52,9 +54,11 @@
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/plugin-transform-runtime": "^7.17.10",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@last-rev/generator": "^1.0.8",
"@types/chrome": "^0.0.231",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "^4.6.0",
Expand Down
41 changes: 33 additions & 8 deletions src/chrome/manifest.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
{
"manifest_version": 2,
"minimum_chrome_version": "93",
"manifest_version": 3,
"name": "Contentful Sidekick",
"short_name": "Contentful Sidekick",
"short_name": "sidekick",
"description": "Chrome Extension that enables inline editing for websites created in Contentful",
"version": "0.1.1",
"permissions": ["activeTab", "storage", "tabs", "http://*/*", "https://*/*", "*://*/*"],
"version": "2.0.0",
"permissions": ["activeTab", "storage", "tabs", "identity"],
"host_permissions": ["http://*/*", "https://*/*", "*://*/*", "*://*.contentful.com/"],
"icons": {
"16": "img/icon16.png",
"32": "img/icon32.png",
Expand All @@ -13,21 +15,44 @@
"128": "img/icon128.png",
"256": "img/icon256.png"
},
"browser_action": {
"action": {
"default_popup": "html/popup.html",
"default_title": "Contentful Sidekick"
},
"background": {
"scripts": ["js/background.js"]
"service_worker": "js/service_worker.js",
"type": "module"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"run_at": "document_idle",
"all_frames": true,
"js": ["js/vendor.js", "js/content.js"],
"css": ["css/content.css"]
}
],
"web_accessible_resources": ["js/content.js"],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
"web_accessible_resources": [
{
"resources": ["js/content.js"],
"matches": ["*://*/*"]
},
{
"resources": ["html/oauth_redirect.html", "js/oauth_redirect.js"],
"matches": ["*://*/*"]
}
],
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
},
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA1aXO0rFwc1hDoM2lgHWIVjv6+UpmjLrEWS5fOouR78uF7YzMb8P8PtnSu1EDu7IudsXOF+pBVW/45vS/TaiJW8br3waO13ltYZY7MALEB6qTvtTPmLojS97FCA6xxlQjFubPx5VNCjZLUDfGLNRnFTLuyyCPJaYg0/K+Otxvy8eeFSPolbemMHwGrAewDTOdOb9Gmbkh65jww4Cdi/E1TUaPNVgnebQAagZtFk7LIQedgZ7HmNrUzQwfVLplxOz1jEMg/u21/uu4ihuT3bpW+0TASUgqL3ljCaNr7fYIqaKdyXX7MC/PrBASP7gWSAofI8V8ey6uLba/KN83gVhrtwIDAQAB",
"commands": {
"Ctrl+M": {
"suggested_key": {
"default": "Ctrl+M",
"mac": "Command+M"
},
"description": "Ctrl+M."
}
}
}
100 changes: 91 additions & 9 deletions src/shared/css/content.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ body {
width: auto;
height: 23px;
padding: 2px 8px 1px 2px;
background-color: #00a7f7;
background-color: #9146ff;
color: #fff;
font-size: 10px;
font-style: italic;
Expand All @@ -48,7 +48,7 @@ body {
left: -2px;
width: 43px;
padding: 2px 6px 1px;
background-color: #00a7f7;
background-color: #9146ff;
border-radius: 0;
color: #fff;
font-size: 12px;
Expand All @@ -68,7 +68,7 @@ body {
width: 100%;
height: 100%;
background-color: var(--bgColor);
outline: 0.125rem dashed #00a7f7;
outline: 0.125rem dashed #9146ff;
}
[data-init-csk] #csk-overlay {
Expand Down Expand Up @@ -105,39 +105,39 @@ body {
z-index: 100000;
transition: all 0.25s ease-out;
transition-delay: 0.05s;
pointer-events: none;
pointer-events: none !important;
}

[data-init-csk] #csk-blur-top {
top: 0;
left: 0;
width: 100%;
height: 0;
border-bottom: dashed 2px #00a7f7;
border-bottom: dashed 1px #9146ff;
}

[data-init-csk] #csk-blur-right {
right: 0;
height: 100%;
width: 0;
top: 0;
border-left: dashed 2px #00a7f7;
border-left: dashed 1px #9146ff;
}

[data-init-csk] #csk-blur-bottom {
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-top: dashed 2px #00a7f7;
border-top: dashed 1px #9146ff;
}

[data-init-csk] #csk-blur-left {
height: 100%;
width: 0;
top: 0;
left: 0;
border-right: dashed 2px #00a7f7;
border-right: dashed 1px #9146ff;
}

[data-init-csk] #csk-blur-actions {
Expand All @@ -146,7 +146,7 @@ body {
z-index: 10000000;
/* transform: translate(0%, -100%); */
padding: 2px 6px 1px;
background-color: #00a7f7;
background-color: #9146ff;
border-radius: 0;
color: #fff;
font-size: 12px;
Expand All @@ -159,6 +159,88 @@ body {
padding-bottom: 2px;
}

[data-init-csk] #csk-blur-actions a {
color: #fff;
}

[data-init-csk] #csk-blur-actions.hidden {
transform: translate(-100%, -100%);
}

[data-init-csk] .csk-selected {
position: absolute;
height: 0;
width: 0;
z-index: 100000;
transition: all 0.25s ease-out;
transition-delay: 0.05s;
/* pointer-events: none !important; */
}

[data-init-csk] #csk-selected-top {
top: 0;
left: 0;
width: 100%;
height: 0;
border-bottom: solid 2px #9146ff;
}

[data-init-csk] #csk-selected-right {
right: 0;
height: 100%;
width: 0;
top: 0;
border-left: solid 2px #9146ff;
}

[data-init-csk] #csk-selected-bottom {
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-top: solid 2px #9146ff;
}

[data-init-csk] #csk-selected-left {
height: 100%;
width: 0;
top: 0;
left: 0;
border-right: solid 2px #9146ff;
}

[data-init-csk] #csk-selected-actions {
display: inline-block;
position: absolute;
z-index: 10000000;
/* transform: translate(0%, -100%); */
padding: 2px 6px 1px;
background-color: #9146ff;
border-radius: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
line-height: 1.7;
text-transform: uppercase;
transition: all 0.25s ease-out;
transition-delay: 0.05s;
padding-bottom: 2px;
}

[data-init-csk] #csk-selected-actions a {
color: #fff;
}

[data-init-csk] #csk-selected-actions.hidden {
transform: translate(-100%, -100%);
}

[data-init-csk] .csk-templates {
position: absolute;
width: 399px;
height: 400px;
z-index: 10000;
background-color: #000;
color: white;
}
11 changes: 11 additions & 0 deletions src/shared/html/oauth_redirect.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Contentful Sidekick Oauth Redirect</title>
</head>
<body>
<div>Redirecting...</div>
<script type="text/javascript" src="/js/oauth_redirect.js"></script>
</body>
</html>
Binary file added src/shared/img/score.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions src/shared/js/components/Banner/Banner.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.banner {
position: fixed;
top: -50px;
left: 0;
right: 0;
height: 50px;
background-color: #9146ff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
color: white;
font-weight: bold;
font-size: 12px;
transition: top 0.5s ease;
z-index: 10000;
}

.banner.show {
top: 0;
}

.banner button {
background-color: transparent;
color: white;
border: none;
font-size: 20px;
cursor: pointer;
}
33 changes: 33 additions & 0 deletions src/shared/js/components/Banner/Banner.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React, { useEffect, useState } from 'react';
import './Banner.css';
import { useContentfulContext } from '../../helpers/ContentfulContext';

const Banner = () => {
const [show, setShow] = useState(false);
const { user } = useContentfulContext();

useEffect(() => {
const listener = (changes) => {
if (changes.cma && changes.cma.newValue) {
setShow(true);
}
};
chrome.storage.sync.onChanged.addListener(listener);
return () => {
chrome.storage.sync.onChanged.removeListener(listener);
};
}, []);

return (
<>
<div className={`banner ${show && user && 'show'}`}>
<p>You are now logged in as {user}</p>
<button type="button" onClick={() => setShow(false)}>
X
</button>
</div>
</>
);
};

export default Banner;
3 changes: 3 additions & 0 deletions src/shared/js/components/Banner/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Banner from './Banner';

export default Banner;
2 changes: 1 addition & 1 deletion src/shared/js/components/Popup/Popup.css
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ label:after {
}

input:checked + label {
background: #00a7f7;
background: #9146ff;
}

input:checked + label:after {
Expand Down
Loading

0 comments on commit 95d8836

Please sign in to comment.