adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-08-07 09:23:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

#503: Allow making changes to preview URL + tailwind v3 update

Browse Source
This commit is contained in:
Elio Struyf
2023-02-05 14:13:43 +01:00
parent 4a50cf70a0
commit 8a4b24396c
8 changed files with 2014 additions and 665 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+1956 -622
View File
File diff suppressed because it is too large Load Diff
package.json
+6 -7
View File
@@ -2198,7 +2198,7 @@
"@popperjs/core": "^2.11.6",
"@sentry/react": "^6.13.3",
"@sentry/tracing": "^6.13.3",
"@tailwindcss/forms": "^0.3.3",
"@tailwindcss/forms": "^0.5.3",
"@types/chai": "^4.3.1",
"@types/glob": "7.1.3",
"@types/invariant": "^2.2.35",
@@ -2224,7 +2224,7 @@
"@webpack-cli/serve": "^1.6.0",
"ajv": "^8.8.2",
"array-move": "^4.0.0",
"autoprefixer": "10.3.3",
"autoprefixer": "^10.4.13",
"chai": "^4.3.6",
"css-loader": "5.2.7",
"date-fns": "2.23.0",
@@ -2251,9 +2251,8 @@
"node-json-db": "^1.3.0",
"npm-run-all": "^4.1.5",
"path-browserify": "^1.0.1",
"postcss": "^8.3.6",
"postcss-loader": "4.3.0",
"postcss-nested": "^5.0.6",
"postcss": "^8.4.21",
"postcss-loader": "^7.0.2",
"prettier": "^2.8.3",
"prettier-plugin-tailwindcss": "^0.2.2",
"react": "17.0.1",
@@ -2270,8 +2269,8 @@
"semver": "^7.3.7",
"simple-git": "^3.10.0",
"style-loader": "2.0.0",
"tailwindcss": "^2.2.7",
"tailwindcss-nested-groups": "^1.2.4",
"tailwindcss": "^3.2.4",
"tailwindcss-scoped-groups": "^2.0.0",
"ts-loader": "^9.4.2",
"typescript": "^4.6.2",
"uniforms": "^3.7.0",
postcss.config.js
+6 -5
View File
@@ -1,9 +1,10 @@
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
require('postcss-nested'),
tailwindcss('./tailwind.config.js'),
require('autoprefixer'),
],
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
};
src/commands/Dashboard.ts
+2 -2
View File
@@ -250,8 +250,8 @@ export class Dashboard {
<title>Front Matter Dashboard</title>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden" class="bg-gray-100 text-vulcan-500 dark:bg-vulcan-500 dark:text-whisper-500">
<div id="app" data-isProd="${isProd}" data-environment="${
<body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden">
<div id="app" class="bg-gray-100 text-vulcan-500 dark:bg-vulcan-500 dark:text-whisper-500" data-isProd="${isProd}" data-environment="${
isBeta ? 'BETA' : 'main'
}" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${
version.usedVersion ? '' : `data-showWelcome="true"`
src/dashboardWebView/components/Contents/ContentActions.tsx
+3 -3
View File
@@ -84,17 +84,17 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
<>
<div
className={`${
listView ? '' : 'group-scope absolute top-6 right-0'
listView ? '' : 'group-scoped absolute top-6 right-0'
} flex flex-col space-y-4`}
>
<div
className={`flex items-center border border-transparent group-scope-hover:bg-gray-200 dark:group-scope-hover:bg-vulcan-200 group-scope-hover:border-gray-100 dark:group-scope-hover:border-vulcan-50 rounded-full ${
className={`flex items-center border border-transparent group-scoped-hover:bg-gray-200 dark:group-scoped-hover:bg-vulcan-200 group-scoped-hover:border-gray-100 dark:group-scoped-hover:border-vulcan-50 rounded-full ${
listView ? '' : 'p-2 -mt-4'
}`}
>
<Menu as="div" className={`relative flex text-left ${listView ? '' : 'z-10'}`}>
{!listView && (
<div className="hidden group-scope-hover:flex">
<div className="hidden group-scoped-hover:flex">
<QuickAction title={`View content`} onClick={onView}>
<EyeIcon className={`w-4 h-4`} aria-hidden="true" />
</QuickAction>
src/dashboardWebView/components/Media/Item.tsx
+5 -5
View File
@@ -422,7 +422,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
<>
<li className="group relative bg-gray-50 dark:bg-vulcan-200 shadow-md hover:shadow-xl dark:shadow-none dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50">
<button
className={`group-scope relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden h-48 ${
className={`group-scoped relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden h-48 ${
isImageFile ? 'cursor-pointer' : 'cursor-default'
}`}
onClick={hasViewData ? undefined : openLightbox}
@@ -439,7 +439,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
</div>
{hasViewData && (
<div
className={`hidden group-scope-hover:flex absolute top-0 right-0 bottom-0 left-0 items-center bg-vulcan-500 bg-opacity-70 justify-center`}
className={`hidden group-scoped-hover:flex absolute top-0 right-0 bottom-0 left-0 items-center bg-vulcan-500 bg-opacity-70 justify-center`}
>
<div
className={`h-full ${
@@ -472,10 +472,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({
)}
</button>
<div className={`relative py-4 pl-4 pr-12`}>
<div className={`group-scope absolute top-4 right-4 flex flex-col space-y-4`}>
<div className="flex items-center border border-transparent group-scope-hover:bg-gray-200 dark:group-scope-hover:bg-vulcan-200 group-scope-hover:border-gray-100 dark:group-scope-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
<div className={`group-scoped absolute top-4 right-4 flex flex-col space-y-4`}>
<div className="flex items-center border border-transparent group-scoped-hover:bg-gray-200 dark:group-scoped-hover:bg-vulcan-200 group-scoped-hover:border-gray-100 dark:group-scoped-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
<Menu as="div" className="relative z-10 flex text-left">
<div className="hidden group-scope-hover:flex">
<div className="hidden group-scoped-hover:flex">
<QuickAction title="View media details" onClick={viewMediaDetails}>
<EyeIcon className={`w-4 h-4`} aria-hidden="true" />
</QuickAction>
src/dashboardWebView/components/Preview/Preview.tsx
+32 -14
View File
@@ -1,7 +1,7 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import { ExternalLinkIcon, RefreshIcon } from '@heroicons/react/outline';
import { ArrowRightIcon, ExternalLinkIcon, RefreshIcon } from '@heroicons/react/outline';
import * as React from 'react';
import { useRef } from 'react';
import { useEffect, useRef, useState } from 'react';
import { PreviewCommands } from '../../../constants';
export interface IPreviewProps {
@@ -12,6 +12,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
url
}: React.PropsWithChildren<IPreviewProps>) => {
const iframeRef = useRef<HTMLIFrameElement>(null);
const [ crntUrl, setCrntUrl ] = useState<string | null>(null);
const onRefresh = () => {
if (iframeRef.current?.src) {
@@ -23,37 +24,54 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
Messenger.send(PreviewCommands.toVSCode.open, url);
};
const navigateToUrl = () => {
let navUrl = crntUrl || url || '';
if (!navUrl.startsWith('http')) {
navUrl = `https://${navUrl}`;
setCrntUrl(navUrl);
}
iframeRef.current!.src = navUrl;
};
useEffect(() => {
setCrntUrl(url);
}, [url]);
return (
<div className="w-full h-full bg-white">
<div
className="slug fixed w-full top-0 flex items-center"
style={{
height: '30px',
background: 'var(--vscode-editor-background)',
borderBottom: '1px solid var(--vscode-focusBorder)'
}}
className="slug fixed h-[30px] w-full top-0 flex items-center bg-[var(--vscode-editor-background)] text-[color:var(--vscode-editor-background)] border-b border-b-[var(--vscode-focusBorder)]"
>
<input
type="text"
value={url || ''}
className="w-full h-full border-0 bg-transparent text-xs py-1 px-2"
value={crntUrl || ''}
onChange={(e) => setCrntUrl(e.currentTarget.value || "")}
onKeyPress={(e) => {
if (e.key === 'Enter') {
navigateToUrl();
}
}}
className="w-full m-[1px] h-full border-1 border-transparent bg-transparent text-xs py-1 px-2 focus:border-color-blue-500 focus:outline-none"
style={{
color: 'var(--vscode-editor-foreground)'
}}
disabled
/>
<div
className="actions absolute right-0 top-0 bottom-0 flex items-center space-x-2 px-2"
className="actions absolute right-[1px] top-[1px] bottom-[1px] flex items-center space-x-2 px-2 text-gray-400 dark:text-whisper-900"
style={{
background: 'var(--vscode-editor-background)'
}}
>
<button title="Refresh" onClick={onRefresh}>
<button title="Navigate" onClick={navigateToUrl} className={`hover:text-vulcan-500 dark:hover:text-whisper-100`}>
<ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
</button>
<button title="Refresh" onClick={onRefresh} className={`hover:text-vulcan-500 dark:hover:text-whisper-100 mr-2`}>
<RefreshIcon className="w-4 h-4" aria-hidden="true" />
</button>
<button title="Open" onClick={openInBrowser} className="mr-2">
<button title="Open" onClick={openInBrowser} className={`hover:text-vulcan-500 dark:hover:text-whisper-100 mr-2`}>
<ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
</button>
</div>
tailwind.config.js
+4 -7
View File
@@ -2,8 +2,8 @@ const colors = require('tailwindcss/colors');
module.exports = {
mode: 'jit',
purge: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: 'class', // or 'media' or 'class'
content: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: ['class', '.vscode-dark'],
theme: {
extend: {
animation: {
@@ -18,7 +18,7 @@ module.exports = {
},
colors: {
white: colors.white,
gray: colors.trueGray,
gray: colors.neutral,
"red": {
"50": "#ff7c7b",
"100": "#ff7271",
@@ -118,11 +118,8 @@ module.exports = {
}
},
},
variants: {
extend: {},
},
plugins: [
require("@tailwindcss/forms"),
require("tailwindcss-nested-groups"),
require("tailwindcss-scoped-groups"),
],
}