Skip to content

Instantly share code, notes, and snippets.

Avatar
👩‍💻
Coding

Sumit Kharche sumitkharche

👩‍💻
Coding
View GitHub Profile
View config.js
export default {
bucket: {
slug: process.env.COSMIC_BUCKET || 'coffee-blog',
read_key: process.env.COSMIC_READ_KEY || '',
write_key: process.env.COSMIC_WRITE_KEY || '',
port: process.env.PORT || '',
}
}
View static.config.js
import path from 'path'
import axios from 'axios'
import config from './config'
const gph_query = `{
getObjects(bucket_slug: "${config.bucket.slug}", input: {
type: "posts",
limit: 20,
read_key: "${config.bucket.read_key}",
}) {
View app.css
* {
scroll-behavior: smooth;
}
body {
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue',
Helvetica, Arial, 'Lucida Grande', sans-serif;
font-weight: 300;
font-size: 16px;
margin: 0;
View App.js
<Root>
<header className="header">
<h1 className="header-h1">React-Static & Cosmic JS blog</h1>
<nav className="header-nav">
<Link getProps={isActive} className="header-link" to="/">
Home
</Link>
<Link getProps={isActive} className="header-link" to="/about">
About
</Link>
View index.js
import React from 'react'
import {withRouteData} from 'react-static'
import {Link } from '@reach/router'
export default withRouteData(({posts}) =>(
<React.Fragment>
<div className="container">
{posts.map(post => (
<Link key={post._id} to={`/post/${post._id}`} className="card">
<div style={{ paddingRight: "1em" }}>
View post.js
import React from 'react'
import {withRouteData} from 'react-static'
import Markdown from "react-markdown";
import { Link } from 'components/Router'
export default withRouteData(({post}) => (
<React.Fragment>
<div className="content">
<Link to="/">{'<'} Back</Link>
</div>
View config.js
export default {
bucket: {
slug: 'COSMIC_BUCKET',
read_key: 'COSMIC_READ_KEY',
write_key: 'COSMIC_WRITE_KEY',
port: 'PORT',
}
}
View rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import replace from 'rollup-plugin-replace';
const production = !process.env.ROLLUP_WATCH;
export default {
View TodoItem.svelte
<script>
import { createEventDispatcher } from 'svelte';
export let todo;
const dispatch = createEventDispatcher();
function deleteTodo() {
dispatch('deleteTodo', {
todo: todo
});
}
function toggleComplete() {
View index.html
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<title>Svelte & Cosmic JS App</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
You can’t perform that action at this time.